了解更多开源请访问：开源基础软件社区https://ost.51cto.com一、ACE_Engine框架概述：ACE_Engine框架是OpenHarmony的UI开发框架，它为开发者提供了应用程序UI开发所必需的各种组件，并定义了这些组件的属性、样式、事件和方法。通过这些组件，可以非常方便的在OpenHarmony上开发UI应用。ACE_Engine提供的组件分为两种类型，即：类Web开发范式类型和声明式开发范式类型。其中，类Web开发范式中定义一个页面需要三个文件，html、css和js文件。html文件负责页面布局，css文件负责定义组件的样式，js文件负责业务逻辑实现。声明式范式只需要一个ets文件，页面布局和组件样式以及业务逻辑实现都在这个文件中。如图：2.ACE_Engine框架模块划分针对类Web开发范式组件，按照组件从前端到后端的流程，整个框架可以分为四个模块：JsFrameWork、DomNode、ComPonent和渲染节点。其功能如下：1.JsFrameWork：负责解析前端的html和css文件，并创建DomNode树。树的结构和前端页面是一一对应的。2.DomNode：负责将Dom树转换为Component树。注意，一个Dom节点转换后的Component节点其实并不是一个单独的节点，而是一棵以rootComponent为根节点的组件树。对应的功能组件在树中被一层层包裹，最里面才是真正的主节点（这个功能是为了解耦功能，将具体的功能放到对应的组件中）。比如BoxComponent负责绘制组件的边框，DisplayComponent负责绘制组件的透明度，TouchComponent负责处理组件的触摸时间。详细过程参见DOMNode::GenerateComponentNode函数。3.ComPonent：负责为Component树中继承自RenderComponent的所有节点（drawable节点）创建对应的RendNode节点，并生成对应的RendNode树。参见RenderComponent::CreateRenderNode虚函数，4.RenderNode：RenderNode是一个可以绘制的节点，负责组件的最终布局和绘制。其中布局函数是PerformLayout的虚函数，由各个组件对应的实现类Render类实现。绘图函数是一个Paint虚函数，由各个组件对应的子类FlutterRender类实现。对于声明式开发范式组件，按照组件从前端到后端的流程，整个框架可以分为四个模块：EtsLoader、JsView、ComPonent、RenderNode。其职能如下：1.EtsLoader负责解析ets页面，根据组件标签创建对应的JsView对象，生成jsView树。2、JsView负责处理组件的属性、方法和事件。并通过Create函数创建对应的Component树。3、Component：同Web开发范式组件中的Component4、RenderNode：同Web开发范式组件中的RenderNode。传递过程1、前端页面保存组件的属性和样式，通过JsframeWork解析页面，调用JsEngine的CreateDomNode接口创建Dom节点，传递新的节点属性和样式。如果页面中的属性样式发生变化，则分别调用SetAttr或SetStyle来更新属性和样式。2、DomNode接收到属性和样式后，会把通用的属性保存在Declation类中，通过SetSpecialAttr和SetSpecialStyle函数将组件特有的属性保存在自己中。3、DomNode调用对应Component类的Set***函数，为Component设置所有的属性和样式。4.RenderNode创建完成后，会调用其Update函数。该函数调用对应Component的Get***函数接收组件的所有属性和样式。5、在PipeLine中，会遍历各个RenderNode进行布局绘制。此时会根据RenderNode中接收到的属性和样式进行布局和绘制。4.总结ACE_Engine框架整体代码比较复杂，涉及的类也比较多。本文简单介绍一个ACE组件从前端页面描述，到中间层三棵树的创建和属性传递，最后到UI布局和绘制的全过程。简单总结一下流程就是：JS页面—>Dom树—>组件树—>Render树，最后画出Render树。只要了解了这个基本流程，就应该结合代码注意关键流程。相信大家一定能够对ACE_Engine框架的代码有个整体的了解。在此基础上，可以进行ACE组件的增强功能开发，包括增加一个ACE组件等。了解更多开源请访问：开源基础软件社区https://ost.51cto.com
