一、前言
ACE_Engine框架是OpenAtom OpenHarmony(简称“OpenHarmony”)的UI开发框架,为开发者提供在进行利用UI开发时所必须的各种组件,以及定义这些组件的属性、款式、事件及办法,通过这些组件能够不便进行OpenHarmony上UI利用的开发。
ACE_Engine提供的组件分为两种类型,即类Web开发范式类型和申明式开发范式类型。其中类Web开发范式中定义一个页面须要三个文件,html,css和js文件。html文件负责页面布局,css文件负责定义组件的款式,js文件负责业务逻辑实现。而申明式范式仅须要1个ets文件,页面布局和组件的款式以及业务逻辑实现都在此文件中。如图:
二、ACE_Engine框架模块划分
对于类Web开发范式组件,依据组件从前端到后端的过程,能够将整个框架划分为JsFrameWork、DomNode、ComPonent、RenderNode四个模块。其作用别离如下:
• JsFrameWork:负责解析前端html和css文件,创立出DomNode树。该树的构造和前端页面是一一对应的。
• DomNode:负责将Dom树转换为Component树。留神一个Dom节点转换过后的Component节点实际上并不是一个独自的节点,而是一棵以rootComponent为根节点的组件树。该树中逐层包裹了对应的性能组件,最外部才是真正的主节点(这样的作用是性能解耦合,将某一特定的性能放到对应的组件中去)。如BoxComponet负责组件的边框绘制,DisplayComponent负责组件透明度绘制,TouchComponent负责组件触摸工夫的解决等,一个具体过程见DOMNode::GenerateComponentNode函数。
• ComPonent:负责将Component树中所有继承自RenderComponent的节点(可绘制节点)创立对应的RendNode节点,生成对应的RendNode树。见RenderComponent ::CreateRenderNode虚函数。
• RenderNode:RenderNode即可绘制的节点,负责组件的最终布局和绘制。其中布局函数为PerformLayout虚函数,由每个组件对应的实现类Render类来实现。绘制函数为Paint虚函数,由每个组件对应的子类FlutterRender类来实现。
对于申明式开发范式组件,依据组件从前端到后端的过程,能够将整个框架划分为EtsLoader、JsView、ComPonent、RenderNode四个模块。其作用别离如下:
• EtsLoader负责解析ets页面,依据组件的tag标签创立对应的JsView对象,生成jsView树。
• JsView负责解决组件的属性,办法和事件。并通过Create函数创立对应的Component树。
• ComPonent:同Web开发范式组件中的Component
• RenderNode:同Web开发范式组件中的RenderNode
各模块创立示意图如下图所示:
各模块间的调用关系及次要函数如下:
三、组件的属性和款式的传递过程
- 组件的属性和款式是保留在前端页面的,通过JsframeWork解析页面,并调用JsEngine的CreateDomNode接口创立Dom节点的同时传递新节点属性和款式。如果页面中属性款式发生变化,则独自调用SetAttr或SetStyle来更新属性和款式。
- DomNode收到属性和款式之后,会将通用属性保留在Declaration类中,将组件特有的属性通过SetSpecialAttr和SetSpecialStyle函数保留在本身。
- DomNode调用对应Component类的Set*函数,将所有属性和款式设置到Component中。
- RenderNode创立后,会调用其Update函数。该函数内调用对应Component的Get*函数,来接管组件的所有属性和款式。
- 在PipeLine中会遍历每个RenderNode进行布局和绘制,此时,就根据RenderNode中接管的属性和款式,进行布局并绘制。
四、总结
ACE_Engine框架整体代码较简单,波及的类别也比拟多。本文介绍了一个ACE组件从前端的页面形容,到中间层三棵树的创立和属性传递,以及最终进行UI布局和绘制的整个过程。该过程总结一下就是:JS页面 —> Dom树 —> Component树 —> Render树,最初绘制Render树。大家只有了解这个根本过程,再联合代码关注重点流程,就可能对ACE_Engine框架的代码有整体的了解。在此基础上能够进行ACE组件的加强性能开发,包含新增一个ACE组件等。
参考
新增一个类Web范式组件开发指南
https://gitee.com/yan-shuifen...前端新增组件开发指南%EF%BC%9A以新增MyCircle组件为例_ver1.0.md
新增一个申明式范式组件开发指南
https://gitee.com/yan-shuifen...前端新增组件开发指南%EF%BC%9A以新增MyCircle组件为例_ver1.0.md