一文總結ACE程式碼框架
一、前言
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正規化元件開發指南
新增一個宣告式正規化元件開發指南
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70011554/viewspace-2931508/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- MongoDb博文總結MongoDB
- 一文總結設計模式設計模式
- AlexNet論文總結
- Objects as Points 論文總結Object
- 對話論文總結
- 一文總結你需要的OpenCV操作OpenCV
- 基於ACE Proactor框架下高併發、大容量吞吐程式設計既最近的一個產品開發總結框架程式設計
- 圖文總結:正向代理與反向代理
- Laravel-admin 中引入 Ace 程式碼編輯器Laravel
- ACE 1.1.9 釋出,開源雲端程式碼編輯器
- ZooKeeper最全詳解(萬字圖文總結)
- 常用負載均衡詳解(圖文總結)負載
- [React Hooks長文總結系列一]初出茅廬,狀態與副作用ReactHook
- ACE(01):Oracle ACE 申請Oracle
- 一文總結條件熵、交叉熵、相對熵、互資訊熵
- web指令碼編輯器ACE EditorWeb指令碼
- IOS常用程式碼總結(一)iOS
- 《Spanner: Google’s Globally-Distributed Database》論文總結GoDatabase
- 美團小程式框架mpvue踩坑總結編一框架Vue
- ACE(02):Oracle ACE常見問題Oracle
- ACE之(二)ACE Socket封裝器封裝
- Ace editor 線上網頁版的vscode!程式碼編輯器網頁VSCode
- leopard, 一個線上程式碼除錯框架除錯框架
- Oracle ACEOracle
- 2014伊始Oracle ACE新專案ACE Associate 記 ACE FAQOracle
- 用 js 獲取頁面元素的位置圖文總結JS
- 五種分散式事務解決方案(圖文總結)分散式
- 機房收費系統總結——窗體程式碼框架框架
- 一文總結分析聚集索引、非聚集索引、覆蓋索引的工作原理!索引
- beego框架程式碼分析Go框架
- RocketMQ訊息中介軟體詳解(萬字圖文總結)MQ
- 訊息佇列MQ最全詳解(萬字圖文總結)佇列MQ
- Oracle ACE AssociateOracle
- what is ORACLE ACEOracle
- Oracle Ace DirectorOracle
- ACE日誌
- LearnVIORB程式碼框架筆記ORB框架筆記
- 程式碼生成框架Velocity框架