久久精品国产一区二区三区香蕉 ,久久精品成人一区二区三区,97精品,91国产精品久久久

田可輝

鴻湖萬聯高級技術專家

鴻湖萬聯產品推薦官

一、前言

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

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

二、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

各模塊創建示意圖如下圖所示：

各模塊間的調用關系及主要函數如下：

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

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

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

3.DomNode調用對應Component類的Set***函數，將所有屬性和樣式設置到Component中。

4.RenderNode創建后，會調用其Update函數。該函數內調用對應Component的Get***函數，來接收組件的所有屬性和樣式。

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

四、總結

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

參考

新增一個類Web范式組件開發指南

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

新增一個聲明式范式組件開發指南

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

更多熱點文章閱讀