国产欧美色区,五月久久久久伊人

田可輝

鴻湖萬聯(lián)高級技術(shù)專家

鴻湖萬聯(lián)產(chǎn)品推薦官

一、前言

ACE_Engine框架是OpenAtom OpenHarmony（簡稱“OpenHarmony”）的UI開發(fā)框架，為開發(fā)者提供在進(jìn)行應(yīng)用UI開發(fā)時所必需的各種組件，以及定義這些組件的屬性、樣式、事件及方法，通過這些組件可以方便進(jìn)行OpenHarmony上UI應(yīng)用的開發(fā)。

ACE_Engine提供的組件分為兩種類型，即類Web開發(fā)范式類型和聲明式開發(fā)范式類型。其中類Web開發(fā)范式中定義一個頁面需要三個文件，html，css和js文件。html文件負(fù)責(zé)頁面布局，css文件負(fù)責(zé)定義組件的樣式，js文件負(fù)責(zé)業(yè)務(wù)邏輯實現(xiàn)。而聲明式范式僅需要1個ets文件，頁面布局和組件的樣式以及業(yè)務(wù)邏輯實現(xiàn)都在此文件中。如圖：

二、ACE_Engine框架模塊劃分

對于類Web開發(fā)范式組件，根據(jù)組件從前端到后端的過程，可以將整個框架劃分為JsFrameWork、DomNode、ComPonent、RenderNode四個模塊。其作用分別如下：

?JsFrameWork：負(fù)責(zé)解析前端html和css文件，創(chuàng)建出DomNode樹。該樹的結(jié)構(gòu)和前端頁面是一一對應(yīng)的。

?DomNode：負(fù)責(zé)將Dom樹轉(zhuǎn)換為Component樹。注意一個Dom節(jié)點轉(zhuǎn)換過后的Component節(jié)點實際上并不是一個單獨的節(jié)點，而是一棵以rootComponent為根節(jié)點的組件樹。該樹中逐層包裹了對應(yīng)的功能組件，最內(nèi)部才是真正的主節(jié)點（這樣的作用是功能解耦合，將某一特定的功能放到對應(yīng)的組件中去）。如BoxComponet負(fù)責(zé)組件的邊框繪制，DisplayComponent負(fù)責(zé)組件透明度繪制，TouchComponent負(fù)責(zé)組件觸摸時間的處理等，一個詳細(xì)過程見DOMNode::GenerateComponentNode函數(shù)。

?ComPonent：負(fù)責(zé)將Component樹中所有繼承自RenderComponent的節(jié)點（可繪制節(jié)點）創(chuàng)建對應(yīng)的RendNode節(jié)點，生成對應(yīng)的RendNode樹。見RenderComponent ::CreateRenderNode虛函數(shù)。

?RenderNode：RenderNode即可繪制的節(jié)點，負(fù)責(zé)組件的最終布局和繪制。其中布局函數(shù)為PerformLayout虛函數(shù)，由每個組件對應(yīng)的實現(xiàn)類Render***類來實現(xiàn)。繪制函數(shù)為Paint虛函數(shù)，由每個組件對應(yīng)的子類FlutterRender***類來實現(xiàn)。

對于聲明式開發(fā)范式組件，根據(jù)組件從前端到后端的過程，可以將整個框架劃分為EtsLoader、JsView、ComPonent、RenderNode四個模塊。其作用分別如下：

?EtsLoader：負(fù)責(zé)解析ets頁面，根據(jù)組件的tag標(biāo)簽創(chuàng)建對應(yīng)的JsView對象，生成jsView樹。

?JsView：負(fù)責(zé)處理組件的屬性，方法和事件。并通過Create函數(shù)創(chuàng)建對應(yīng)的Component樹。

?ComPonent：同Web開發(fā)范式組件中的Component

?RenderNode：同Web開發(fā)范式組件中的RenderNode

各模塊創(chuàng)建示意圖如下圖所示：

各模塊間的調(diào)用關(guān)系及主要函數(shù)如下：

三、組件的屬性和樣式的傳遞過程

1.組件的屬性和樣式是保存在前端頁面的，通過JsframeWork解析頁面，并調(diào)用JsEngine的CreateDomNode接口創(chuàng)建Dom節(jié)點的同時傳遞新節(jié)點屬性和樣式。如果頁面中屬性樣式發(fā)生變化，則單獨調(diào)用SetAttr或SetStyle來更新屬性和樣式。

2.DomNode收到屬性和樣式之后，會將通用屬性保存在Declaration類中，將組件特有的屬性通過SetSpecialAttr和SetSpecialStyle函數(shù)保存在自身。

3.DomNode調(diào)用對應(yīng)Component類的Set***函數(shù)，將所有屬性和樣式設(shè)置到Component中。

4.RenderNode創(chuàng)建后，會調(diào)用其Update函數(shù)。該函數(shù)內(nèi)調(diào)用對應(yīng)Component的Get***函數(shù)，來接收組件的所有屬性和樣式。

5.在PipeLine中會遍歷每個RenderNode進(jìn)行布局和繪制，此時，就依據(jù)RenderNode中接收的屬性和樣式，進(jìn)行布局并繪制。

四、總結(jié)

ACE_Engine框架整體代碼較復(fù)雜，涉及的類別也比較多。本文介紹了一個ACE組件從前端的頁面描述，到中間層三棵樹的創(chuàng)建和屬性傳遞，以及最終進(jìn)行UI布局和繪制的整個過程。該過程總結(jié)一下就是：JS頁面 —> Dom樹 —> Component樹 —> Render樹，最后繪制Render樹。大家只要理解這個基本過程，再結(jié)合代碼關(guān)注重點流程，就能夠?qū)CE_Engine框架的代碼有整體的理解。在此基礎(chǔ)上可以進(jìn)行ACE組件的增強(qiáng)功能開發(fā)，包括新增一個ACE組件等。

參考

新增一個類Web范式組件開發(fā)指南

https://gitee.com/yan-shuifeng/arkui_docs/blob/master/wiki/Ace1.0前端新增組件開發(fā)指南%EF%BC%9A以新增MyCircle組件為例_ver1.0.md

新增一個聲明式范式組件開發(fā)指南

https://gitee.com/yan-shuifeng/arkui_docs/blob/master/wiki/Ace2.0前端新增組件開發(fā)指南%EF%BC%9A以新增MyCircle組件為例_ver1.0.md

更多熱點文章閱讀

DevEco Studio新特性分享-跨語言調(diào)試，讓調(diào)試更便捷高效
基于 OpenHarmony 的智聯(lián)北斗海防系統(tǒng)
玩轉(zhuǎn)OpenHarmony智能家居：如何實現(xiàn)樹莓派“碰一碰”設(shè)備控制
玩轉(zhuǎn)OpenHarmony社交場景：即時通訊平臺
HarmonyOS多媒體框架介紹

提示：本文由電子發(fā)燒友社區(qū)發(fā)布，轉(zhuǎn)載請注明以上來源。如需社區(qū)合作及入群交流，請?zhí)砑游⑿臙EFans0806，或者發(fā)郵箱liuyong@huaqiu.com。

原文標(biāo)題：一文總結(jié) ACE 代碼框架

文章出處：【微信公眾號：電子發(fā)燒友開源社區(qū)】歡迎添加關(guān)注！文章轉(zhuǎn)載請注明出處。

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。舉報投訴