一:ACE_Engine框架概述:
ACE_Engine框架是OpenHarmony 的UI開(kāi)發(fā)框架,提供開(kāi)發(fā)者在進(jìn)行應(yīng)用UI開(kāi)發(fā)時(shí)所必需的各種組件,以及定義這些組件的屬性,樣式,事件及方法。通過(guò)這些組件可以很方便的進(jìn)行OpenHarmony上UI應(yīng)用的開(kāi)發(fā)。
ACE_Engine提供的組件分為兩種類型,即:類Web開(kāi)發(fā)范式類型和聲明式開(kāi)發(fā)范式類型。其中類Web開(kāi)發(fā)范式中定義一個(gè)頁(yè)面需要三個(gè)文件,html,css和js文件。html文件負(fù)責(zé)頁(yè)面布局,css文件負(fù)責(zé)定義組件的樣式,js文件負(fù)責(zé)業(yè)務(wù)邏輯實(shí)現(xiàn)。而聲明式范式僅需要1個(gè)ets文件,頁(yè)面布局和組件的樣式以及業(yè)務(wù)邏輯實(shí)現(xiàn)都在此文件中。如圖:
?
二:ACE_Engine框架模塊劃分對(duì)于類Web開(kāi)發(fā)范式組件,根據(jù)組件從前端到后端的過(guò)程,可以將整個(gè)框架劃分為JsFrameWork,DomNode, ComPonent, RenderNode四個(gè)模塊。其作用分別如下:負(fù)責(zé)解析前端html和css文件,創(chuàng)建出DomNode樹(shù)。該樹(shù)的結(jié)構(gòu)和前端頁(yè)面是一一對(duì)應(yīng)的。2. DomNode:
負(fù)責(zé)將Dom樹(shù)轉(zhuǎn)換為Component樹(shù)。注意一個(gè)Dom節(jié)點(diǎn)轉(zhuǎn)換過(guò)后的Component節(jié)點(diǎn)實(shí)際上并不是一個(gè)單獨(dú)的節(jié)點(diǎn),而是一顆以rootComponent為跟節(jié)點(diǎn)的組件樹(shù)。該樹(shù)中逐層包裹了對(duì)應(yīng)的功能組件,最內(nèi)部才是真正的主節(jié)點(diǎn)(這樣的作用是功能解耦合,將某一特定的功能放到對(duì)應(yīng)的組件中去)。如BoxComponet負(fù)責(zé)組件的邊框繪制,DisplayComponent負(fù)責(zé)組件透明度繪制,TouchComponent負(fù)責(zé)組件觸摸時(shí)間的處理等。,一個(gè)詳細(xì)過(guò)程見(jiàn)DOMNode::GenerateComponentNode函數(shù)。3. ComPonent:
負(fù)責(zé)將Component樹(shù)中所有繼承自RenderComponent的節(jié)點(diǎn)(可繪制節(jié)點(diǎn))創(chuàng)建對(duì)應(yīng)的RendNode節(jié)點(diǎn),生成對(duì)應(yīng)的RendNode樹(shù)。見(jiàn)RenderComponent ::CreateRenderNode虛函數(shù),4. RenderNode:
RenderNode即可繪制的節(jié)點(diǎn),負(fù)責(zé)組件的最終布局和繪制。其中布局函數(shù)為PerformLayout虛函數(shù),由每個(gè)組件對(duì)應(yīng)的實(shí)現(xiàn)類Render***類來(lái)實(shí)現(xiàn)。繪制函數(shù)為Paint虛函數(shù),由每個(gè)組件對(duì)應(yīng)的子類FlutterRender***類來(lái)實(shí)現(xiàn)。
對(duì)于聲明式開(kāi)發(fā)范式組件,根據(jù)組件從前端到后端的過(guò)程,可以將整個(gè)框架劃分為EtsLoader,JsView, ComPonent, RenderNode四個(gè)模塊。其作用分別如下:負(fù)責(zé)解析ets頁(yè)面,根據(jù)組件的tag標(biāo)簽創(chuàng)建對(duì)應(yīng)的JsView對(duì)象,生成jsView樹(shù)。2. JsView
負(fù)責(zé)處理組件的屬性,方法和事件。并通過(guò)Create函數(shù)創(chuàng)建對(duì)應(yīng)的Component樹(shù)。3. ComPonent:
同Web開(kāi)發(fā)范式組件中的Component4. RenderNode:
同Web開(kāi)發(fā)范式組件中的RenderNode
各模塊創(chuàng)建示意圖如下圖所示:
?
各模塊見(jiàn)的調(diào)用關(guān)系及主要函數(shù)如下:
?
三:組件的屬性/樣式的傳遞過(guò)程-
組件的屬性和樣式是保存在前端頁(yè)面的,通過(guò)JsframeWork解析頁(yè)面,并調(diào)用JsEngine的CreateDomNode接口創(chuàng)建Dom節(jié)點(diǎn)的同時(shí)傳遞新節(jié)點(diǎn)屬性和樣式。
如果頁(yè)面中屬性樣式發(fā)生變化,則單獨(dú)調(diào)用SetAttr或SetStyle來(lái)更新屬性和樣式。
-
DomNode收到屬性和樣式之后,會(huì)將通用屬性保存在Declation類中,將組件特有的屬性通過(guò)SetSpecialAttr和SetSpectialStyle函數(shù)保存在自身。
-
DomNode調(diào)用對(duì)應(yīng)Component類的Set***函數(shù),將所有屬性和樣式設(shè)置到Component中。
-
RenderNode創(chuàng)建后,會(huì)調(diào)用其Update函數(shù)。
該函數(shù)內(nèi)調(diào)用對(duì)應(yīng)Component的Get***函數(shù),來(lái)接收組件的所有屬性和樣式。
-
在PipeLine中會(huì)遍歷每個(gè)RenderNode進(jìn)行布局和繪制,此時(shí),就依據(jù)RenderNode中接收的屬性和樣式,進(jìn)行布局并繪制。
?
?
四:總結(jié)ACE_Engine框架整體代碼較復(fù)雜,涉及的類也比較多。本文簡(jiǎn)單介紹了一個(gè)ACE組件從前端的頁(yè)面描述,到中間層三棵樹(shù)的創(chuàng)建和屬性傳遞,以及最終進(jìn)行UI布局和繪制的整個(gè)過(guò)程。該過(guò)程簡(jiǎn)單總結(jié)一下就是:JS頁(yè)面 —> Dom樹(shù) —> Component樹(shù) —> Render樹(shù),最后繪制Render樹(shù)。大家只要理解這個(gè)基本過(guò)程,在結(jié)合代碼關(guān)注重點(diǎn)流程。相信一定能夠?qū)CE_Engine框架的代碼有整體的理解。再此基礎(chǔ)上可以進(jìn)行ACE組件的增強(qiáng)功能開(kāi)發(fā),包括新增一個(gè)ACE組件等。
文章轉(zhuǎn)自:鴻湖萬(wàn)聯(lián)
參考:新增一個(gè)類Web范式組件開(kāi)發(fā)指南:https://gitee.com/yan-shuifeng/arkui_docs/blob/master/wiki/Ace1.0前端新增組件開(kāi)發(fā)指南%EF%BC%9A以新增MyCircle組件為例_ver1.0.md
新增一個(gè)聲明式范式組件開(kāi)發(fā)指南https://gitee.com/yan-shuifeng/arkui_docs/blob/master/wiki/Ace2.0前端新增組件開(kāi)發(fā)指南%EF%BC%9A以新增MyCircle組件為例_ver1.0.md
更多熱點(diǎn)文章閱讀-
玩轉(zhuǎn)OpenHarmony PID:教你打造兩輪平衡車
-
基于 OpenHarmony 的智聯(lián)北斗海防系統(tǒng)
-
玩轉(zhuǎn)OpenHarmony智能家居:如何實(shí)現(xiàn)樹(shù)莓派“碰一碰”設(shè)備控制
-
帶你玩轉(zhuǎn)OpenHarmony AI:基于Seetaface2的人臉識(shí)別
-
帶你玩轉(zhuǎn)OpenHarmony AI:打造智能語(yǔ)音子系統(tǒng)
提示:本文由電子發(fā)燒友社區(qū)發(fā)布,轉(zhuǎn)載請(qǐng)注明以上來(lái)源。如需社區(qū)合作及入群交流,請(qǐng)?zhí)砑游⑿臙EFans0806,或者發(fā)郵箱liuyong@huaqiu.com。
原文標(biāo)題:OpenHarmony ACE 代碼框架總結(jié)
文章出處:【微信公眾號(hào):電子發(fā)燒友開(kāi)源社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
聲明:本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題,請(qǐng)聯(lián)系本站處理。
舉報(bào)投訴
原文標(biāo)題:OpenHarmony ACE 代碼框架總結(jié)
文章出處:【微信號(hào):HarmonyOS_Community,微信公眾號(hào):電子發(fā)燒友開(kāi)源社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
相關(guān)推薦
一加 Ace 5系列正式發(fā)布。該系列中,一加 Ace 5 Pro搭載全新的驍龍8至尊版移動(dòng)平臺(tái),一加 Ace 5則搭載第三代驍龍8移動(dòng)平臺(tái)。兩款新機(jī)在性能、屏幕、設(shè)計(jì)以及影像等方面帶來(lái)全方位升級(jí),為用戶打造出更加硬核的電競(jìng)傳奇體
發(fā)表于 12-27 11:52
?107次閱讀
收到龍芯2K0300蜂鳥(niǎo)開(kāi)發(fā)板后,對(duì)開(kāi)發(fā)板做了一些了解和研究,現(xiàn)將OpenHarmony代碼提供給大家測(cè)試,也希望大家能更多的認(rèn)識(shí)龍芯2K0300蜂鳥(niǎo)開(kāi)發(fā)板,下面先簡(jiǎn)單介紹一下這塊開(kāi)發(fā)板。
廣東
發(fā)表于 09-18 11:42
2024年7月8日,據(jù)OpenAtomOpenHarmony(以下簡(jiǎn)稱“OpenHarmony”)官網(wǎng)顯示,深開(kāi)鴻在OpenHarmony社區(qū)主倉(cāng)代碼貢獻(xiàn)總量超過(guò)400萬(wàn)行,在華為以外
發(fā)表于 07-09 08:33
?358次閱讀
ArkUI作為OpenHarmony的默認(rèn)開(kāi)發(fā)框架,在本項(xiàng)目(ArkUI-X)中需要做到一套代碼同時(shí)支持多平臺(tái)構(gòu)建,所以會(huì)采取共倉(cāng)開(kāi)發(fā)的方式,部分倉(cāng)直接指向OpenHarmony相關(guān)開(kāi)
發(fā)表于 05-25 16:45
?2089次閱讀
ACE Tools是一套為ArkUI-X項(xiàng)目跨平臺(tái)應(yīng)用開(kāi)發(fā)者提供的命令行工具,支持在Windows/Ubuntu/macOS平臺(tái)運(yùn)行,用于構(gòu)建OpenHarmony/HarmonyOS、Android和iOS平臺(tái)的應(yīng)用程序,其功能包括開(kāi)發(fā)環(huán)境檢查,新建項(xiàng)目,編譯打包,安裝
發(fā)表于 05-21 17:39
?1788次閱讀
OpenHarmony的分布式特性、并發(fā)驗(yàn)證框架及可信執(zhí)行環(huán)境,并與來(lái)自全球各地的專家學(xué)者深入探討了其在移動(dòng)操作系統(tǒng)、分布式系統(tǒng)、系統(tǒng)架構(gòu)設(shè)計(jì)、移動(dòng)
發(fā)表于 05-16 09:28
?435次閱讀
本文介紹了如何下載開(kāi)源鴻蒙(OpenHarmony)操作系統(tǒng) 4.1 Release版本的源代碼,該方法同樣可以用于下載OpenHarmony最新開(kāi)發(fā)版本(master分支)或者4.0 Release、3.2 Release等發(fā)
發(fā)表于 04-27 23:16
?928次閱讀
OpenHarmony js/ts三方庫(kù)使用的是OpenHarmony靜態(tài)共享包,即HAR(Harmony Archive),可以包含js/ts代碼、c++庫(kù)、資源和配置文件。通過(guò)HAR,可以實(shí)現(xiàn)
發(fā)表于 03-18 16:27
?754次閱讀
今天我們來(lái)從OpenHarmony簡(jiǎn)介、環(huán)境搭建、創(chuàng)建第一個(gè)OpenHarmony項(xiàng)目等方面開(kāi)始OpenHarmony應(yīng)用開(kāi)發(fā)的第一步。一.OpenHarmony簡(jiǎn)介
發(fā)表于 03-14 08:31
?549次閱讀
本文在不改變?cè)邢到y(tǒng)基礎(chǔ)框架的基礎(chǔ)上, 介紹了一種OpenAtom OpenHarmony(以下簡(jiǎn)稱“OpenHarmony”)輕量系統(tǒng)適配方案。
發(fā)表于 03-05 09:24
?1169次閱讀
媒體框架簡(jiǎn)介 媒體框架 multimedia_player_framework 主要提供音視頻的錄制與播放功能。 框架簡(jiǎn)介 從框架圖中可以看出,媒體
發(fā)表于 02-26 22:05
?944次閱讀
。 OpenHarmony 為了集成 C/C++ 代碼和提升編譯速度,使用了 GN + Ninja 的編譯構(gòu)建系統(tǒng)。GN 的構(gòu)建語(yǔ)言簡(jiǎn)潔易讀,Ninja 的匯編級(jí)編譯規(guī)則直接高效。 為了在 OpenHarmony
發(fā)表于 02-26 17:28
?894次閱讀
OpenHarmony 4.0藍(lán)牙代碼結(jié)構(gòu)簡(jiǎn)析前言 OpenHarmony 4.0上藍(lán)牙倉(cāng)和目錄結(jié)構(gòu)進(jìn)行一次較大整改,本文基于4.0以上版本對(duì)藍(lán)牙代碼進(jìn)行分析,便于讀者快速了解和學(xué)習(xí)
發(fā)表于 02-26 16:08
?1570次閱讀
環(huán)境中的 JS 變量與方法。 OpenHarmony 中的 NAPI OpenAtom OpenHarmony(以下簡(jiǎn)稱 “OpenHarmony”)應(yīng)用層基于 javascript 語(yǔ)言開(kāi)發(fā),而系統(tǒng)
發(fā)表于 02-01 17:34
?702次閱讀
個(gè)智能終端設(shè)備操作系統(tǒng)的框架和平臺(tái),促進(jìn)萬(wàn)物互聯(lián)產(chǎn)業(yè)的繁榮發(fā)展。在OpenHarmony項(xiàng)目群技術(shù)指導(dǎo)委員會(huì)領(lǐng)導(dǎo)下,OpenHar
發(fā)表于 01-02 16:51
?515次閱讀
評(píng)論