0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ACE开发框架总结

OpenHarmony技术社区 来源:OST开源开发者 作者:OST开源开发者 2023-01-09 10:05 次阅读

ACE_Engine 框架是 OpenHarmony 的 UI 开发框架,提供开发者在进行应用 UI 开发时所必需的各种组件,以及定义这些组件的属性,样式,事件及方法。通过这些组件可以很方便的进行 OpenHarmony 上 UI 应用的开发。

ACE_Engine 框架概述

ACE_Engine 提供的组件分为两种类型,即:类 Web 开发范式类型和声明式开发范式类型。其中类 Web 开发范式中定义一个页面需要三个文件,html,css 和 js 文件。

html 文件负责页面布局,css 文件负责定义组件的样式,js 文件负责业务逻辑实现。

而声明式范式仅需要 1 个 ets 文件,页面布局和组件的样式以及业务逻辑实现都在此文件中。

如下图:

311141fc-8f42-11ed-bfe3-dac502259ad0.png

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。 各模块创建示意图如下图所示:

312a91ca-8f42-11ed-bfe3-dac502259ad0.png

各模块见的调用关系及主要函数如下:

31450564-8f42-11ed-bfe3-dac502259ad0.png

组件的属性/样式的传递过程

组件的属性和样式是保存在前端页面的,通过 JsframeWork 解析页面,并调用 JsEngine 的 CreateDomNode 接口创建 Dom 节点的同时传递新节点属性和样式。

如果页面中属性样式发生变化,则单独调用SetAttr或SetStyle来更新属性和样式。

DomNode 收到属性和样式之后,会将通用属性保存在 Declation 类中,将组件特有的属性通过 SetSpecialAttr 和 SetSpectialStyle 函数保存在自身。

DomNode 调用对应 Component 类的 Set*** 函数,将所有属性和样式设置到 Component 中。

RenderNode 创建后,会调用其 Update 函数。

该函数内调用对应 Component 的 Get*** 函数,来接收组件的所有属性和样式。

PipeLine 中会遍历每个 RenderNode 进行布局和绘制,此时,就依据 RenderNode 中接收的属性和样式,进行布局并绘制。

316beca6-8f42-11ed-bfe3-dac502259ad0.png

总结

ACE_Engine 框架整体代码较复杂,涉及的类也比较多。本文简单介绍了一个 ACE 组件从前端的页面描述,到中间层三棵树的创建和属性传递,以及最终进行UI布局和绘制的整个过程。

该过程简单总结一下就是:JS 页面→Dom 树→Component 树→Render 树,最后绘制 Render 树。

大家只要理解这个基本过程,在结合代码关注重点流程。相信一定能够对 ACE_Engine 框架的代码有整体的理解。在此基础上可以进行 ACE 组件的增强功能开发,包括新增一个 ACE 组件等。

审核编辑:汤梓红

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 框架
    +关注

    关注

    0

    文章

    293

    浏览量

    17035
  • 开源
    +关注

    关注

    3

    文章

    2953

    浏览量

    41602
  • ACE
    ACE
    +关注

    关注

    0

    文章

    18

    浏览量

    10562
  • 鸿蒙
    +关注

    关注

    54

    文章

    1446

    浏览量

    42033
  • OpenHarmony
    +关注

    关注

    23

    文章

    3104

    浏览量

    15123

原文标题:鸿蒙ACE开发框架总结

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    【课程连载】高级硬件工程师张飞带你学习鸿蒙驱动开发和系统烧录

    的烧录5、使用Hi3516DV300开发板搭载鸿蒙操作系统如何运行一个简单的驱动程序6、Hi3516DV300开发板搭载鸿蒙操作系统对WiFi外设驱动程序调试
    发表于 09-17 09:36

    鸿蒙开发AI应用(八)JS框架访问内核层

    + CSS + HTML的技术上进行,相关内容可以回顾用鸿蒙开发AI应用(五)UI篇。JS应用开发框架原理在第六篇里,我们已经体验了一下使用JS
    发表于 02-06 19:36

    JS应用开发框架组件

    应用开发框架源代码在/foundation/ace/ace_engine_lite下,目录结构如下图所示:/foundation/ace/
    发表于 04-23 18:05

    openharmony ACE开发框架详解

      ACE(Ability Cross-platform Environment)开发框架ACE框架的轻量实现。它可以提供一套跨平台的类w
    发表于 04-07 14:52

    鸿蒙应用开发的JS UI框架如何实现高德地图的访问?

    鸿蒙应用,现在分为Java UI框架和Ark UI框架,其中JS UI开发框架Ark UI框架
    发表于 04-28 11:44

    一文总结ACE代码框架

    一、前言ACE_Engine框架是OpenAtom OpenHarmony(简称“OpenHarmony”)的UI开发框架,为开发者提供在进
    发表于 01-10 11:09

    ACE代码框架总结

    一.ACE_Engine框架概述:ACE_Engine框架是OpenHarmony 的UI开发框架
    发表于 03-22 09:11

    鸿蒙 OS 应用开发初体验

    的操作系统平台和开发框架。HarmonyOS 的目标是实现跨设备的无缝协同和高性能。 DevEco Studio 对标 Android Studio,开发鸿蒙 OS 应用的 IDE。
    发表于 11-02 19:38

    基于Struts框架和Procedure的Web开发模式

    介绍基于MVC设计模式的Struts框架的组成和实现原理,总结开发框架的应用特点和开发步骤。在分析和比较其他基于Struts
    发表于 04-23 10:16 79次下载

    鸿蒙系统中JS框架的逐行分析

    中,V 其实是由 C++ 来承担的。JavaScript 代码只是其中的 ViewModel 层。 鸿蒙 JS 框架是零依赖的,只在开发打包过程中
    的头像 发表于 10-21 14:37 1714次阅读

    使用鸿蒙JS框架写出来的JS代码长什么样

    鸿蒙 JS 框架是零依赖的,只在开发打包过程中使用到了一些 npm 包。打包完之的代码是没有依赖任何 npm 包的。
    的头像 发表于 03-26 15:46 1934次阅读

    基于鸿蒙的JS框架ace_lite_jsfwk开发

    world 程序,还顺手给鸿蒙文档提了 2 个 PR。 当然我最感兴趣的就是鸿蒙的 JS 框架 ace_lite_jsfwk,从名字中可以看出来这是一个非常轻量级的
    的头像 发表于 02-26 10:54 2493次阅读
    基于<b class='flag-5'>鸿蒙</b>的JS<b class='flag-5'>框架</b><b class='flag-5'>ace</b>_lite_jsfwk<b class='flag-5'>开发</b>

    OpenHarmony源码剖析之ACE(JavaScript运行环境初始化)

      张亮亮 深圳开鸿数字产业发展有限公司     简介     JS UI 框架引擎  ACE  全称 Ability Cross-platform Environment
    的头像 发表于 11-18 10:40 4412次阅读
    OpenHarmony源码剖析之<b class='flag-5'>ACE</b>(JavaScript运行环境初始化)

    OpenHarmony ACE 代码框架总结

    一:ACE_Engine框架概述: ACE_Engine框架是OpenHarmony 的UI开发框架
    的头像 发表于 12-30 19:05 867次阅读

    一文总结 ACE 代码框架

    田可辉 鸿湖万联高级技术专家 鸿湖万联产品推荐官 一、前言 ACE_Engine框架是OpenAtom OpenHarmony(简称“OpenHarmony”)的UI开发框架,为
    的头像 发表于 01-11 03:30 1268次阅读