当前位置: 首页 > 科技观察

HarmonyOSUI框架关键技术分析

时间:2023-03-15 09:32:00 科技观察

更多内容请访问:Harmonyos技术社区https://harmonyos.51cto.com,与华为官方HarmonyOSUI框架共同建立,提供界面绘制相关的处理方法,如as:图形控件、页面布局和窗口管理(如图1所示)。图1UI框架HarmonyOSUI框架采用ACE(AbilityCrossplatformEnvironment)框架(如图2所示)。ACE是一个应用程序开发框架。它属于操作系统架构之上的上层框架。目前支持JAVA和JS语言开发。两种语言框架的具体区别如下:1.JAVAUI框架提供细粒度的UI编程接口,使应用更加灵活,元素以组件和布局的形式在窗口上绘制界面。2、JSUI框架采用类HTML和类CSS的声明式编程语言作为页面布局和页面样式的开发语言,页面业务逻辑支持ECMAScript规范的JavaScript语言。JSUI框架提供的声明式编程,让开发者无需为UI状态切换编写代码,视图配置信息更加直观。图2ACEUI框架HarmonyOSUI框架关键技术ACEJAVAUI框架应用程序组成能力。能力分为FA(FeatureAbility)和PA(ParticleAbility)两种。?FeatureAbility(简称FA)支持PageAbility,一般用于用户交互,在屏幕上显示一个用户界面,用于显示用户可以查看和交互的所有内容。用户界面由UI元素组成,通常包括布局、控件等,元素支持设置资源和动画。?ParticleAbility支持DataAbility(数据访问)和ServiceAbility(后台服务),一般用于后台业务逻辑的实现。图3JAVAUI1.界面组成每个用户界面的UI元素由一棵组件树组成,即由Component和ComponentContainer对象组成(如图4所示)。JavaUI框架提供了Component和ComponentContainer的一些具体子类,即创建用户界面(UI)的各种组件,包括一些常用组件(如:文本、按钮、图片、列表等)和常用组件布局(例如:DirectionalLayout和DependentLayout)等。用户可以与组件交互并获得响应。●Component:提供内容展示,是界面中所有组件的基类。●ComponentContainer:将Component或ComponentContainer对象作为容器进行放置。图4JAVAUI组件树II.AbilityPageAbility的组成一个Page可以由一个或多个AbilitySlice组成,AbilitySlice是指应用的单个页面及其控制逻辑的总和。图5PageAbility构成Ability的生命周期●onStart()该回调在系统第一次创建Page实例时触发。●onActive()页面进入INACTIVE状态后会回到前台,然后系统调用该回调。之后Page进入ACTIVE状态,也就是应用与用户交互的状态。●onInactive()当Page失去焦点时,系统会调用该回调,Page进入INACTIVE状态。●onBackground()如果Page不再对用户可见,系统将调用此回调,之后Page进入Background状态。●onForeground()的Background状态的Page仍然驻留在内存中。回到前台时,系统会先调用onForeground()回调通知开发者,然后Page生命周期状态回到INACTIVE状态。●onStop()下面是几个主要的生命周期函数。当系统即将销毁页面时,会触发该回调函数。具体的生命周期过程如下图所示:图6JavaFA生命周期JavaAbility路由JavaFA提供了三种路由方式:Abilities之间跳转(不同的Abilities)Ability内部AbilitySlice之间跳转图7JavaFA路由1.JumpbetweenAbilities(不同的Abilities):当一个Ability跳转到另一个Ability时,根据不同的动作选择不同的Slices。示例代码如下:Intentintent=newIntent();Operationoperation=newIntent.OperationBuilder().withAction("action2").build();intent.setOperation(operation);startAbility(intent);如图7所示,Ability3通过addActionRoute接口配置了三个路由规则Router:action1路由到AbilitySlice1;action2路由到AbilitySlice2;action3被路由到AbilitySlice3。Ability1和Ability2分别通过startAbility跳转到Ability3,然后根据三个路由规则选择自己对应的AbilitySlices。其顺序如图8所示:图8在Ability2之间跳转当Ability2初始化时,通过addActionRoute接口设置路由规则。当Ability1通过startAbilityForResult跳转到Ability2时,Ability2根据action选择AbilitySlice1或AbilitySlice2。当Ability2关闭返回时,Ability1通过onAbilityResult()回调方法处理请求结果。2、Ability内AbilitySlice间跳转当发起导航的AbilitySlice和作为导航目标的AbilitySlice在同一个Ability中时,可以通过present()或presentForResult()方法实现导航。对于同一Page内的AbilitySlice导航,只需要指定目标AbilitySlice的名称即可。AbilitySlice1通过present方法发起跳转,指定目标名称为AbilitySlice2,则跳转结果为显示AbilitySlice2。示例代码如下:present(newAbilitySlice2(),newIntent());其时序如图9所示:图9AbilitySlices之间的跳转Ability3包括三个AbilitySlice,AbilitySlice1,AbilitySlice2,AbilitySlice3,默认接口在初始化时通过setMainRoute方法设置。能力切片1。AbilitySlice1可以通过present()向AbilitySlice2发起导航,导航完成后界面显示AbilitySlice2。AbilitySlice1如果想在从导航目标AbilitySlice3返回时获取其返回结果,可以使用presentForResult()实现导航。当AbilitySlice3返回时,系统会回调onResult()给AbilitySlice1接收并处理返回结果,其中返回结果由AbilitySlice3在其生命周期中通过setResult()设置。3.跨设备跳转Ability还支持跨设备路由,即目标Ability可以是本设备的Ability,也可以是同一用户的不同设备。使用startAbility路由时,只需通过withDeviceId指定对端的设备id即可。如图10所示:Ability1通过action选择到Ability2的路由,并通过withDeviceId指定目标设备B,那么最终的结果就是设备B上Ability2对应的接口被拉起显示。图10跨设备路由4.资源管理JAVAUI框架下的资源管理目录如下:图12JAVAUI下的资源目录结构示例代码如下:在Java文件中,引用string.json类型为“String”且名称为“app_name”资源的文件:ohos.global.resource.ResourceManagerresManager=this.getResourceManager();Stringresult=resManager.getElement(ResourceTable.String_app_name).getString();在XML文件中,引用string.json文件中的类型是“String”,Resource名为“app_name”:ACEJSUI框架JSUI框架是一个跨设备的高性能UI开发框架,支持声明式编程和跨设备的多态UI。它包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(PortingLayer)。图13JSUI框架?Application层表示开发人员使用JSUI框架开发的FA应用程序。?Framework前端框架层主要完成前端页面解析,提供MVVM(ModelViewViewModel)开发模式、页面路由机制、自定义组件等能力。?引擎层主要提供动画解析、DOM(DocumentObjectModel)树构建、布局计算、渲染命令构建和绘制、事件管理和平台通道机制等能力。?PortingLayer适配层主要完成平台层的抽象,提供具体的抽象接口,可以对接不同的系统平台。例如:事件对接、渲染管线对接、系统生命周期对接等。1.界面组成每个用户界面的UI布局由HML+CSS文件完成,响应和业务逻辑由JS文件完成。图14JS应用组成●HML(HarmonyOSMarkupLanguage)是一套类HTML的标记语言,通过组件和事件来构造页面的内容。页面具有数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级功能。●CSS是一种描述HML页面结构的样式语言。●JS文件用于定义HML页面的业务逻辑,支持ECMA规定的JavaScript语言。示例代码如下:图15JSUI代码示例其中,UI布局由HML和CSS完成:HML中的

标签设置界面组件,组件样式由容器类定义,以及组件包含文本控件文本,文本内容由{{title}}定义填充,并为文本控件设置点击响应事件onclick,当控件被点击时执行change方法。样式是在CSS中声明的,比如容器类,它设置了HML中选项卡组件的方向和元素对齐方式。相应的业务逻辑在JavaScript中完成:初始化时,设置标题为“helloworld”,即刷新文本控件文本的填充内容{{title}}。组件是构建页面的核心。每个组件通过对数据和方法的简单封装,实现了一个独立的可视化交互功能单元。图16组件分类【组件详情】请参考官网信息:●??组件详情https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-building-ui-component-00000000005005802。AbilityJSUI的Ability生命周期下面是几个主要的生命周期函数。●onCreate()在创建应用程序时调用。(应用生命周期)●onInit()在页面数据初始化完成时触发,只触发一次。●onReady()在页面创建时触发,仅一次。●onShow()当页面显示时触发。●onHide()在页面消失时触发。●onDestroy()当页面被销毁时触发。具体生命周期流程如下图所示:图17JSFA页面生命周期JSAbility路由JSFA也提供了三种路由方式:Abilities间跳转Ability内部JS页面间跳转图18JSFA路由1.跳转JS中的Ability继承自AceAbility。AceAbility之间的跳转JS接口是通过FeatureAbility.startAbility完成的:letactionData={uri:'www.huawei.com'};lettarget={bundleName:"com.example.harmonydevsample",abilityName:"com.example.harmonydevsample.EntryJSApiAbility",data:actionData};letresult=awaitFeatureAbility.startAbility(target);letret=JSON.parse(result);if(ret.code==0){console.log('success');}else{console.log('cannotstartbrowingservice,reason:'+ret.data);}2.Ability内部JS页面间跳转JSAbility可以有多个不同的页面,每个界面都是一个JsPage(定义在pages目录下),如下surface的包括index和detail两个页面:{..."pages":["pages/index/index","pages/detail/detail"]...}JS页面可以通过router跳转,对于例如跳转到详情页:importrouterfrom'@system.router';router.push({uri:"pages/detail/detail",params:{eventId:item,}});3.Cross-device跳转cross-device跳转路由的原理和JavaUI上的跨设备一样,只是JSUI提供了JS对应的接口:FeatureAbility.startAbility(OBJECT)FeatureAbility.startAbilityForResult(OBJECT)3.资源管理JSUI框架下的资源管理目录如下:图19JSUI下的资源目录结构●app.js文件用于全局JavaScript逻辑和应用生命周期管理。●pages目录用于存放所有的组件页面。●common目录用于存放常用的资源文件,如:媒体资源、自定义组件、JS文件等。●resources目录用于存放资源配置文件,例如全局样式、多分辨率加载等配置文件。●i18n目录用于配置不同语言场景下的资源,如:应用文本入口、图片路径等资源。资源文件名为“LanguageRegion.json”格式。其中,●以.hml结尾的HML模板文件,该文件用于描述当前页面的文件布局结构。●以.css结尾的CSS样式文件,用于描述页面样式。●.js结尾的JS文件,该文件用于处理页面与用户的交互。资源引用:?t方法引用资源,t方法引用资源,t在html和js中都可以使用,$t参数说明如下:示例代码如下:?enUS.json中定义:{"strings":{"hello":"Helloworld!",...},}?在HML中引用:
{{$t('strings.hello')}}
?JS中的引用:exportdefault{data:{hello:'',},onInit(){this.hello=this.$t('strings.hello');},}?通过tc引用单复数资源,通过json格式的key定义单复数资源的内容为“零”、“一”、“二”、“少”、“多”和“other”区分,tc指的是resources,通过json格式的key定义单复数资源的内容为“zero”,“one”,“two”,“few”,“many”,“other””。tc参数说明如下:示例代码如下:?enUS.json中的定义:{"strings":{"people":{"one":"oneperson","other":"{count}people"}}}HML中的引用:
{{$tc('strings.people',2)}}
?JS中的引用:exportdefault{data:{people:'',},onInit(){this.people=this.$tc('strings.people',2);},}?r方法引用资源,r方法引用资源。r可以在html和js中使用。$r参数说明如下:示例代码如下:?resldpi。在json中定义:{"image":{"wearable":"common/wearable.png",...}}?在HML中引用:
中的配置文件路径?JS中引用:exportdefault{private:{wearable:'',},onInit(){//资源格式:this.wearable=this.$r('image.wearable');},}最后,本文介绍的HarmonyOS应用UI开发方法可以涵盖最简单的服务,开发者可以根据需要自由选择JS或者JAVA框架。更多信息,请访问:Harmonyos.51cto.com