【中软国际】HarmonyOS 关于元数据绑定框架探索 原创 精华
前言
在上一篇HarmonyOS DataBinding 使用指南中,有人提到了元数据绑定框架并提出了疑问,元数据绑定框架跟DataBinding有什么区别?功能上似乎也是做数据绑定,我查阅了官方文档,没有太多的资料,只有Codelabs上有个Demo教程,带着这种疑问,让我们一起来探索一下。
概述
根据官方Demo介绍,元数据绑定框架是基于HarmonyOS SDK开发的一套提供UI和数据源绑定能力的框架。通过使用元数据绑定框架,HarmonyOS应用开发者无需开发繁琐重复的代码即可实现绑定UI和数据源。这跟Databinding功能类似,接下来让我们再来看看它们有什么不同之处。
开始使用
简单UI组件绑定
1.首先,我们在模块的build.gradle文件中的dependencies中添加对元数据绑定框架的引用,并开启注解处理器:
2.引用之后我们在MyApplication中对其进行初始化并添加对应注解,具体代码如下:
其中注解中的requireData表示该application是否需要获取数据,exportData表示该application是否外提供数据,大家可根据自己的需求进行配置。
3.接下来我们需要定义元数据,数据是以Json的格式,而DataBinding则是采用ActiveData对象绑定数据。我们简单的定义两个参数。Json数据采用得是Json Schema定义的一套词汇和规则,我们用这套词汇和规则用来定义Json元数据。最后我们需要将元数据Json文件放在resource/rawfile.jsonschema路径下。
4.在我们XML布局文件中,最外层的Layout中加入元数据绑定的框架的命名空间:xmlns:metaDataBinding,并创建元数据实体,作用跟我们Databinding的<binddata>标签类似,之后再我们组件中进行数据绑定,注意!在Databinding中用的是ohos的命名空间,而使用元数据绑定的时候,需要用metaDataBinding命名空间,具体代码如下:
这时候<request-meta-data>这个标签就会报错:request-meta-data is not allowed here,具体原因还不清楚,怀疑是编译器的原因,但没关系,这并不影响我们的运行。
言归正传,在<request-meta-data>标签中,name为元数据名称,之后我们进行绑定的时候根据这个名称来引用,schema需要与刚定义的Json数据中id一致,uri则是我们使用元数据绑定的DataAbility路径。
5.接下来需要在代码中请求绑定,我们在AbilitySlice中的onStart方法中添加如下代码:
刚才第4点说到,TestData为对应的XML中<request-meta-data>标签中的name,TestData类是继承自DataAbilityMetaData的类,我们可以在里面根据业务需求对数据进行处理,作用有点类似DataBinding的Model。配置完布局文件之后会自动生成XXXMetaDataBinding文件,然后通过调用requestBinding方法进行绑定,如果绑定异常的话我们就返回一个错误页面。
6.配置部分基本完成,接下来就是配置数据库部分。数据库部分内容也比较多,这里只做简单的说明。关于数据库后续会有专门的文章进行详细讲解,欢迎大家订阅关注。
在我们上面XML布局中,<request-meta-data>标签uri属性指向的就是我们的DataAbility,这边主要做的就是数据访问更新等等。
TestOperation类,是一个数据库的操作类,负责数据库的查询或写入等操作。
TestOrmDatabase类,就是我们对象关系映射数据库的相关操作,具体可看官方文档。
到目前位置我们整个元数据绑定的开发流程就完整了,下面是展示页面:
Text显示的内容就是我们TestOperation类,在数据库添加的Message的数据( bucket.putString(COL_MSG, “元数据绑定” + idx++))。
UI容器组件绑定
接下来给大家说一下容器组件绑定,容器组件也就是我们的ListContainer,无处不列表,可以说是我们平时用的最多的组件,接下来给大家讲一下ListContainer如何进行绑定。(大致配置与简单UI差不多,下面只列出它们的区别之处)
1.首先我们需要在XML中添加ListContainer组件,我们直接沿用刚才的数据:
2.跟正常使用一样,我们需要创建继承BaseItemProvider的Provider类:
3.TestRow表示列表的条目,它持有一个元数据对象,我们对每个item进行数据绑定,获取UI组件及响应点击事件。
TestlistitemlayoutMetaDataBinding是我们定义布局后自动生成的MetaDataBinding类,通过createBinding方法将布局与数据进行绑定。
4.接下来看一下item的布局:
这里需要注意的是,和普通布局区别在于item的元数据实体为<using-meta-data>。
5.接下来就是在AbilitySlice中进行请求绑定:
容器组件绑定的话,我们实现了IMetaDataObserver接口,主要用于数据的加载及数据更新,在onDataLoad将Provider跟ListContainer进行绑定,如数据有发生变化,则onDataChange对列表进行更新,而在setSyncRequest传参中我们改为false,表示为异步请求,因为IMetaDataObserver方法会异步执行,如果传Ture的话,会在onDataLoad方法执行之后requestBinding方法才会返回,之后在请求绑定requestBinding方法中第三个参数,dataCallback传入this进行监听。
6.最终实现效果
7.添加数据只需要调用我们之前的**TestOperation.insertAnAlarm(binding)**方法就可以进行数据添加:
元数据表达式
在xml文件中进行元数据绑定时 metaDataBinding会用到多种表达式,具体用法如下:
标识符 | 意义 | 示例 |
@ | 取得原数据属性的值赋值到UI属性的单项绑定 | metaDataBinding:text=“@{ClockMetaData.message}” |
@= | 元数据属性的值和UI属性双向绑定 | metaDataBinding:text=“@={ClockMetaData.message}” |
* | 绑定自定义函数 | metaDataBinding:text=“*{ClockMetaData.getTimeZone(@{ClockMetaData.hour})}” |
$ | 绑定资源文件 | metaDataBinding:image_src=“@{ClockMetaData.enabled} == 1 ? ${Media_icon_switch_enabled} : ${Media_icon_switch_disabled}” |
# | 点击事件触发给元数据赋值 | metaDataBinding:onClick=“#{ClockMetaData.enabled = (@{ClockMetaData.enabled} == 1 ? 0 : 1)}” |
总结
元数据绑定的简单使用就介绍到这里,这里只跟大家展示了我们最常用的两种布局的绑定,我们还可以进行自定义UI的绑定、自定义数据源等等更多的用法等着大家一起来探索。
回到我们最初的问题,元数据绑定框架跟DataBinding有什么区别?我个人理解是,元数据绑定框架是基于元数据,而DataBinding则是绑定ActiveData(我们专栏有专门讲解ActiveData的文章,欢迎大家前去查阅。),两者的功能及数据源是不一样的,可以针对自己的业务需求进行选择。
但在Demo的编写过程中,也发现了一个问题,同一个页面普通UI组件和容器组件不能同事绑定,问题也时处在我们容器组件第5点所说的,实现了IMetaDataObserver接口进行异步请求,这点也希望跟大家一起继续探索,欢迎在评论区共同探讨。
作者:曾瑞绅
更多原创内容请关注:中软国际 HarmonyOS 技术学院
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
中软大佬厉害了
中软是要亮剑的节奏吗?
太高产了。我还在学习呢。
了解更多HarmonyOS相关产品~请戳:【华为开发者联盟生态市场HarmonyOS专区https://developer.huawei.com/consumer/cn/market/prod-list?categoryIdL1=1fc1b638cf8d4e93a6542a505f916ad6】