【开源三方库】Easyui：基于OpenAtom OpenHarmony ArkUI深度定制的组件框架

OpenHarmony开发者 2023-11-09 15:01:01

 

万冬阳

公司：中国科学院软件所

小组：知识体系工作组

 

简介

Easyui是一套基于ArkTS语言开发的轻量、可靠的移动端组件库，它是对OpenAtom OpenHarmony（以下简称“OpenHarmony”） ArkUI进行深度定制的组件框架。Easyui可扩展性较强，可以基于源码进行二次开发，修改原有组件以及新增部分组件，以满足具体项目的开发需求。该框架适用大部分OpenHarmony应用的开发 ，能够更加完善OpenHarmony 的应用开发能力，使我们的应用开发更简单。

组件特性

组件种类分布

组件效果展示

 

开发环境

IDE：DevEco Studio 3.1 Beta2，version:3.1.0.400 

SDK：3.2.14.2  API9

使用方法

使用前需要先安装ohpm-cli

请参考安装教程：https://ohpm.openharmony.cn/#/cn/help/quickstart

1.下载组件

ohpm install @isrc/easyui.har –-save

2.easyui组件库中的地址列表组件使用示例

import { AddressList } from 'easyui'
@Entry
@Component
struct TestAddressList {
  build() {
    Column(){
      Text("基础用法")
        .fontSize(20)
        .fontColor("#ff808080")
        .margin(20)
        .alignSelf(ItemAlign.Start)
      AddressList({
        addressList: [              //地址列表
          { "id":1,"name":"张三","tel":"13000000000","address":"浙江省杭州市西湖区文一路 138 号东方通信大厦7楼501室"}
          ,{ "id":2,"name":"李四","tel":"13100000000","address":"浙江省杭州市拱墅区莫干山路 50号"}
          ,{ "id":3,"name":"王五","tel":"13200000000","address":"浙江省杭州市滨江区江南大道13号"}
        ],
        outRangeIdArray:[5,6,7]        //超出配送范围的地址id集合
      })


    }.width("100%")
    .height("100%")
    .backgroundColor("#ffeaeaea")
  }
}

 

easyui库中的组件列表

需要的权限

无

目录结构

 

/easyui        # 项目根目录
├── easyui     # easyui组件库
│    └─ src/main
│       └─ ets/common/components  # 组件库中的所有组件
│       └─index.ets    # 组件导出文件    
├── entry      # 组件使用方法测试代码示例代码文件夹 
│    └─ src/main
│       └─ ets/page/Main  # 组件测试效果代码           
├── README.md  # 安装使用方法

 

结语

通过本篇文章介绍，您对easyui组件框架应该有了初步的了解。我们所有的源码和指导文档都已经开源，如果您对本篇文章内容以及所实现的Demo感兴趣，可以根据本篇文章介绍自行下载easyui组件框架源码（https://gitee.com/openharmony-sig/ohos_easyUI）进行研究和使用。同时也欢迎更多开发者与我们共享开发成果，分享技术解读与经验心得。

 

...全文
83 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
jQuery EasyUI 1.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示
（题外话：从本次开始 我新增了jQuery EasyUI的专题页面 大家可以关注我的专题页来及时获取最新的EasyUI资源 专题页地址如下http:http://download.csdn.net/album/detail/343 同时也希望转载的那些朋友能保留我资源的说明及出处地址 我花那么多精力制作出来的 你们鼠标点两下就给我转走了还不注明出处 实在是不厚道 本来就是本着分享精神的 为的就是聚集一点人气和提供一个优良的环境来一起学习进步的 请不要抹杀掉我的热情 谢谢 ） 　　时隔4个月之久 EasyUI终于迎来大版本更新了 本次更新内容诸多 除了常规维护外 还新增了3个新组件 都很实用 详细的可以阅读更新说明 里面给了详细的解读 另外 从该版本开始我将会逐步的将EasyUI官方以及第三方较好的插件API整合到API文档当中 并且会对这些插件做一些简单的Demo实现 存放到配套提供的程序包demo文件夹下 以便大家学习和使用 本期文档中将官方提供的所有附加插件的API都整理并存放到Extension节点下了 这些扩展的demo在附带的程序包中已经提供 可以用于参考使用 jQuery EasyUI 1 4版本更新内容： Bug（修复） menu：修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题； datagrid：修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement（改进） EasyUI的所有组件已经支持非固定 百分比大小的尺寸设置； menu：添加“showItem” “hideItem”和“resize”方法； menu：基于窗体大小自动调整高度； menu：添加“duration”属性 该属性允许用户自定义隐藏菜单动画的持续时间 以毫秒为单位； validatebox：添加“onBeforeValidate”和“onValidate”事件； combo：从该版本开始combo组件扩展自textbox组件（textbox是1 4中新增的组件）； combo：添加“panelMinWidth” “panelMaxWidth” “panelMinHeight”和“panelMaxHeight”属性； searchbox：从该版本开始searchbox组件扩展自textbox组件（textbox是1 4中新增的组件）； tree：添加“getRoot”方法 用于返回通过“nodeEl”参数指定的节点的顶部父节点元素 注意：官网的英文API中该函数的说明有误 其说明是none 无参数 实际这里是需要参数的 ； tree：添加“queryParams”属性； datetimebox：添加“spinnerWidth”属性； panel：添加“doLayout”方法 用于控制面板内组件的大小； panel：添加“clear”方法 用于清除面板内的内容； datagrid：允许用户设置百分比宽度的列（该功能真是千呼万唤始出来啊 ）； form：添加“ajax” “novalidate”和“queryParams”属性； linkbutton：添加“resize”方法 New Plugin（新组件） textbox：该组件是一个增强的输入字段 它可以让用户非常简单的构建一个表单； datetimespinner：该组件是一个日期和时间的微调组件 它允许我们选择一个特定的日期或时间； filebox：filebox 该组件表单元素中用于上传文件的文件框工具组件 ">（题外话：从本次开始 我新增了jQuery EasyUI的专题页面 大家可以关注我的专题页来及时获取
EasyUI项目
本项目采用struts2+JDBC+easyui进行编写，对easyui各个组件进行详细介绍。 由于水平有限,项目bug在所难免,欢迎指正。 博文参考地址：http://blog.csdn.net/itmyhome1990/article/details/37502601 使用方法： 1、首先你的电脑得安装有mysql、myeclipse 2、执行init.sql里的语句,顺序执行即可。 3、将项目easyui导入到myeclipse中,部署,运行 4、打开浏览器,输入http://localhost:8080/easyui/
Java整合JQueryEasyUI详解
这是一套技术比较全面的EasyUI视频,由浅入深的几乎涵盖了所有EasyUI常用的组件,本课程后台Java端采用的是传统JDBC的技术,因为这套课程主要突出的是EasyUI的使用,所有后台这块技术大家可以忽略,只要有Java框架基础的同学,那后台是可以随意换的.本门课程的技术呢比较陈旧,视频中的有些杂音,如果你们公司用不着这个技术你就别学了,因为这技术确实已经挺老的了,可以学一些新的前端技术,例如BootStrap或者Vue,或者angularJS啦什么都可以.课程目标:1.熟练掌握EasyUI介绍和环境搭建2.熟练掌握Messager和window组件使用3.熟练掌握Dialog组件使用.4.熟练掌握表单验证,numberbox等组件使用5.熟练掌握layout布局组件6.熟练掌握datagrid组件增删改查详解7.熟练掌握可编辑表格Combo组件详解8.熟练掌握combo组件详解,省市县级联菜单9.熟练掌握tree组件详解,拖拽,增删改查
jQuery EasyUI 1.4.2 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示
本次更新内容较多，已有的组件新增了很多新的API，并且首次加入了移动端开发框架，可谓相当给力，新东西自然意味着更多的BUG即将诞生，我个人预计在未来的1~2个版本里会有不少BUG修复的更新内容，今后EasyUI定会发力移动开发方向，所以也算是一个好的开头，虽然目前东西还不是很全，但是基本的也都够用了，希望EasyUI今后会越来越好吧！由于现在工作过于繁忙所以本次API更新延后了快2周，抱歉了！老规矩，介绍一下本次更新内容吧！官方给的更新内容写的不全，我已经全部补全了。包括更新内容中写到的新增API，但是在API文档中没有给出的，在我的API当中全部都有（比官方网站上的还要全 :P） jQuery EasyUI 1.4.2版本更新内容： Bug（修复） treegrid：修复重建treegrid之后列会恢复原始大小的问题。 Improvement（改进） draggable：添加“delay”属性，允许用户延迟拖动操作； tree：添加“filter”属性和“doFilter”方法； tabs：“add”方法允许用户在指定的索引位上插入选项卡面板； tabs：用户可以决定哪些选项卡面板可以被选择； tabs：添加“justified”，“narrow”和“pill”属性； layout：添加“unsplit”和“split”方法； messager：支持键盘导航功能； form：添加“onChange”事件； combobox：添加“queryParams”属性； slider：添加“range”属性； menu：添加“itemHeight”，“inline”，“noline”和“align”属性； panel：添加“header”属性，允许用户自定义面板标题栏； menubutton：添加“hasDownArrow”属性。 New Plugin（新组件） datalist：该组件是展示列表数据的组件，用户可以对列表数据进行分组、单选、多选等各种操作； navpanel：该组件是移动端框架的根组件； mobile：filebox 该组件提供了移动页面堆栈管理和导航。
jQuery EasyUI 1.3.5 离线简体中文API文档
大家好，又见面了！EasyUI又更新了，这次更新内容还是不少的，具体内容请参考下面的更新说明，官方的更新说明中还少了1条，我给补上了。 jQuery EasyUI 1.3.5版本更新内容： Bug（修复） searchbox：修复“searcher”函数提供的“name”参数值错误的问题； combo：修复“isValid”方法无法返回布尔值的问题； combo：修复点击页面某一个combo组件的下拉列表时触发的“onHidePanel”事件会导致页面上其他combo组件的下拉列表被关闭的问题； combogrid：修复某些从combo组件继承来的方法无法使用的问题。 Improvement（改进） datagrid：改进检查行时候的性能； menu：允许追加菜单分隔符； menu：新增“hideOnUnHover”属性用于在鼠标离开菜单的时候指示是否需要隐藏菜单； slider：新增“clear”和“reset”方法； tabs：新增“unselect”方法、“onUnselect”事件； tabs：新增“selected”属性，用于指定的默认打开的面板； tabs：Tab Panel（Tab页）新增“collapsible”属性，用于设置是否允许摺叠面板； tabs：新增“showHeader”属性、“showHeader”方法和“hideHeader”方法； combobox：允许“disabled”属性禁用下拉列表选项； tree：改进数据加载时候的性能； pagination：新增“layout”属性，用于自定义控件的样式布局； accordion：新增“unselect”方法、“onUnselect”事件； accordion：新增“select”和“multiple”属性； accordion：新增“getSelections”方法； datebox：新增“sharedCalendar”属性，允许多个datebox控件共享使用同一个calendar控件。 datebox：新增“buttons”属性，用于自定义日历下方的按钮。 （译者注：该点更新内容官方更新公告上没有注明，具体内容和用法请看datebox的API。） 历史版本： - jQuery EasyUI 1.3.4 离线API简体中文版 http://download.csdn.net/detail/richie696/6302785 - jQuery EasyUI 1.3.4 离线API简体中文版 http://download.csdn.net/detail/richie696/5363933
OpenHarmony开发者社区

457

社区成员

1,818

社区内容

发帖
与我相关
我的任务
社区描述
OpenHarmony开发者社区
其他 企业社区
社区管理员
  • csdnsqst0025
  • shewaliujingli
  • BaoWei
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单

试试用AI创作助手写篇文章吧

+ 用AI写文章