田可輝
鴻湖萬(wàn)聯(lián)高級(jí)技術(shù)專(zhuān)家
鴻湖萬(wàn)聯(lián)產(chǎn)品推薦官
ACE_Engine框架是OpenAtom OpenHarmony(簡(jiǎn)稱(chēng)“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提供的組件分為兩種類(lèi)型,即類(lèi)Web開(kāi)發(fā)范式類(lèi)型和聲明式開(kāi)發(fā)范式類(lèi)型。其中類(lèi)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)都在此文件中。如圖:對(duì)于類(lèi)Web開(kāi)發(fā)范式組件,根據(jù)組件從前端到后端的過(guò)程,可以將整個(gè)框架劃分為JsFrameWork、DomNode、ComPonent、RenderNode四個(gè)模塊。其作用分別如下:?JsFrameWork:負(fù)責(zé)解析前端html和css文件,創(chuàng)建出DomNode樹(shù)。該樹(shù)的結(jié)構(gòu)和前端頁(yè)面是一一對(duì)應(yīng)的。?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ù)。?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ù)。?RenderNode:RenderNode即可繪制的節(jié)點(diǎn),負(fù)責(zé)組件的最終布局和繪制。其中布局函數(shù)為PerformLayout虛函數(shù),由每個(gè)組件對(duì)應(yīng)的實(shí)現(xiàn)類(lèi)Render***類(lèi)來(lái)實(shí)現(xiàn)。繪制函數(shù)為Paint虛函數(shù),由每個(gè)組件對(duì)應(yīng)的子類(lèi)FlutterRender***類(lèi)來(lái)實(shí)現(xiàn)。對(duì)于聲明式開(kāi)發(fā)范式組件,根據(jù)組件從前端到后端的過(guò)程,可以將整個(gè)框架劃分為EtsLoader、JsView、ComPonent、RenderNode四個(gè)模塊。其作用分別如下:?EtsLoader:負(fù)責(zé)解析ets頁(yè)面,根據(jù)組件的tag標(biāo)簽創(chuàng)建對(duì)應(yīng)的JsView對(duì)象,生成jsView樹(shù)。?JsView:負(fù)責(zé)處理組件的屬性,方法和事件。并通過(guò)Create函數(shù)創(chuàng)建對(duì)應(yīng)的Component樹(shù)。?ComPonent:同Web開(kāi)發(fā)范式組件中的Component?RenderNode:同Web開(kāi)發(fā)范式組件中的RenderNode各模塊間的調(diào)用關(guān)系及主要函數(shù)如下:1.組件的屬性和樣式是保存在前端頁(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)更新屬性和樣式。2.DomNode收到屬性和樣式之后,會(huì)將通用屬性保存在Declaration類(lèi)中,將組件特有的屬性通過(guò)SetSpecialAttr和SetSpecialStyle函數(shù)保存在自身。3.DomNode調(diào)用對(duì)應(yīng)Component類(lèi)的Set***函數(shù),將所有屬性和樣式設(shè)置到Component中。4.RenderNode創(chuàng)建后,會(huì)調(diào)用其Update函數(shù)。該函數(shù)內(nèi)調(diào)用對(duì)應(yīng)Component的Get***函數(shù),來(lái)接收組件的所有屬性和樣式。5.在PipeLine中會(huì)遍歷每個(gè)RenderNode進(jìn)行布局和繪制,此時(shí),就依據(jù)RenderNode中接收的屬性和樣式,進(jìn)行布局并繪制。ACE_Engine框架整體代碼較復(fù)雜,涉及的類(lèi)別也比較多。本文介紹了一個(gè)ACE組件從前端的頁(yè)面描述,到中間層三棵樹(shù)的創(chuàng)建和屬性傳遞,以及最終進(jìn)行UI布局和繪制的整個(gè)過(guò)程。該過(guò)程總結(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組件等。新增一個(gè)類(lèi)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
- DevEco Studio新特性分享-跨語(yǔ)言調(diào)試,讓調(diào)試更便捷高效
- 基于 OpenHarmony 的智聯(lián)北斗海防系統(tǒng)
- 玩轉(zhuǎn)OpenHarmony智能家居:如何實(shí)現(xiàn)樹(shù)莓派“碰一碰”設(shè)備控制
- 玩轉(zhuǎn)OpenHarmony社交場(chǎng)景:即時(shí)通訊平臺(tái)
提示:本文由電子發(fā)燒友社區(qū)發(fā)布,轉(zhuǎn)載請(qǐng)注明以上來(lái)源。如需社區(qū)合作及入群交流,請(qǐng)?zhí)砑游⑿臙EFans0806,或者發(fā)郵箱liuyong@huaqiu.com。
原文標(biāo)題:一文總結(jié) ACE 代碼框架
文章出處:【微信公眾號(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)題:一文總結(jié) ACE 代碼框架
文章出處:【微信號(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),一加 A
發(fā)表于 12-27 11:52
?165次閱讀
2024年12月26日,一加正式發(fā)布游戲體驗(yàn)天花板一加Ace5系列——一加Ace5及一加
發(fā)表于 12-27 10:19
?266次閱讀
: 是Spring框架的一部分,易于與其他Spring技術(shù)(如Spring Security、Spring AOP)集成。 提供了豐富的實(shí)用程序庫(kù),用于處理用戶(hù)請(qǐng)求、渲染視圖、實(shí)現(xiàn)控制反轉(zhuǎn)(IoC)以及事件發(fā)布和訂閱
發(fā)表于 11-25 09:14
?242次閱讀
不久前,一加Ace 3 Pro全面上市。作為一款Pro級(jí)別的全新性能旗艦,一加Ace 3 Pro搭載第三代驍龍8移動(dòng)平臺(tái),實(shí)現(xiàn)了突破性的流暢
發(fā)表于 11-08 11:20
?710次閱讀
時(shí),就像調(diào)用本地過(guò)程一樣方便。 1.2 RPC與Http的關(guān)系 用一句話來(lái)總結(jié)就是: RPC是一種概念,http是一種協(xié)議,可以認(rèn)
發(fā)表于 08-16 15:18
?784次閱讀
我可以使用 EVAL-AD9779A 和 Genesys ZU-5EV(不使用 SDP-H1 板)嗎,連接AD-DAC-FMC 實(shí)現(xiàn) DDS 的功能
我嘗試單獨(dú)使用 ACE 重置
發(fā)表于 07-11 07:59
新發(fā)布的一加Ace 3 Pro智能手機(jī)搭載逐點(diǎn)半導(dǎo)體X7 Gen 2視覺(jué)處理器
發(fā)表于 07-03 09:40
?468次閱讀
6月27日晚間,一加在夏季性能生態(tài)新品發(fā)布會(huì)上正式發(fā)布一加Ace 3 Pro、一加平板Pro、一加手表2等多款新品。性能強(qiáng)悍的
發(fā)表于 07-01 18:13
?3545次閱讀
在近日舉辦的WAVE SUMMIT大會(huì)上,百度公司震撼發(fā)布了全新的智能代碼助手——“文心快碼”。這款基于百度文心大模型的強(qiáng)大工具,結(jié)合了海量的編程數(shù)據(jù),旨在為開(kāi)發(fā)者提供一站式的
發(fā)表于 07-01 11:20
?922次閱讀
在配件方面,全新的一加 SUPERVOOC 100W 超級(jí)閃充移動(dòng)電源提供銀翼白和碧云綠兩種配色,擁有 12000mAh 的超大容量和最高 100W 的充電速度,只要 17 分鐘即可為一加 Ace 3 Pro 充至 60%。
發(fā)表于 06-28 12:52
?441次閱讀
一加手機(jī)正式宣布,性能猛獸一加 Ace 3 Pro 徹底征服三大“地獄級(jí)難度”超級(jí)重載場(chǎng)景,帶來(lái)行業(yè)最強(qiáng)性能體驗(yàn)。作為年度性能巔峰大作,一加 Ace
發(fā)表于 06-24 14:02
?356次閱讀
采用 NVIDIA 宣布全面推出 NVIDIA ACE 生成式 AI 微服務(wù),以加速新一代數(shù)字人的發(fā)展,并將在平臺(tái)上推出全新的生成式 AI 突破??蛻?hù)服務(wù)、游戲和醫(yī)療健康領(lǐng)域的公司率先采用 ACE
發(fā)表于 06-04 10:18
?680次閱讀
2024 年 3 月 21 日,一加正式發(fā)布一加 Ace 3V 。一加 Ace 3V 全球首發(fā)第三代驍龍 7+ 移動(dòng)平臺(tái),采用5500mAh
發(fā)表于 03-22 09:27
?523次閱讀
3 月 14 日,一加正式宣布一加 Ace 3V 即將登場(chǎng),帶來(lái)代際式升級(jí)的性能表現(xiàn)、顛覆慣例的質(zhì)感設(shè)計(jì)和旗艦級(jí)的AI能力。一加 Ace 3
發(fā)表于 03-14 14:29
?574次閱讀
NAPI 框架生成工具 可以根據(jù)用戶(hù)指定路徑下的 ts(typescript)接口文件一鍵生成 NAPI 框架代碼、業(yè)務(wù)代碼
發(fā)表于 02-28 17:00
?703次閱讀
評(píng)論