一区二区三区三上|欧美在线视频五区|国产午夜无码在线观看视频|亚洲国产裸体网站|无码成年人影视|亚洲AV亚洲AV|成人开心激情五月|欧美性爱内射视频|超碰人人干人人上|一区二区无码三区亚洲人区久久精品

搜索歷史

清空
搜索熱詞
      0
      • 聊天消息
      • 系統(tǒng)消息
      • 評論與回復(fù)
      VIP于 到期 續(xù)費(fèi)
      登錄后你可以
      • 下載海量資料
      • 學(xué)習(xí)在線課程
      • 觀看技術(shù)視頻
      • 寫文章/發(fā)帖/加入社區(qū)
      會員中心
      創(chuàng)作中心
      發(fā)布
      創(chuàng)作活動(dòng)

      完善資料讓更多小伙伴認(rèn)識你，還能領(lǐng)取20積分哦，立即完善>

      3天內(nèi)不再提示

      一文總結(jié) ACE 代碼框架

      電子發(fā)燒友開源社區(qū) ? 來源：未知 ? 2023-01-11 03:30 ? 次閱讀
      加入交流群
      微信小助手二維碼

      掃碼添加小助手

      加入工程師交流群


      田可輝

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

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

      一、前言

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

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


      二、ACE_Engine框架模塊劃分

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

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

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

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

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

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

      ?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é)點(diǎn)的同時(shí)傳遞新節(jié)點(diǎn)屬性和樣式。如果頁面中屬性樣式發(fā)生變化，則單獨(dú)調(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中會遍歷每個(gè)RenderNode進(jìn)行布局和繪制，此時(shí)，就依據(jù)RenderNode中接收的屬性和樣式，進(jìn)行布局并繪制。


      四、總結(jié)

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

      參考

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

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

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

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



      更多熱點(diǎn)文章閱讀
      • DevEco Studio新特性分享-跨語言調(diào)試，讓調(diào)試更便捷高效
      • 基于 OpenHarmony 的智聯(lián)北斗海防系統(tǒng)
      • 玩轉(zhuǎn)OpenHarmony智能家居：如何實(shí)現(xiàn)樹莓派“碰一碰”設(shè)備控制
      • 玩轉(zhuǎn)OpenHarmony社交場景：即時(shí)通訊平臺
      • 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)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。 舉報(bào)投訴
      • 電子發(fā)燒友
        +關(guān)注

        關(guān)注

        33

        文章

        566

        瀏覽量

        33509
      • 開源社區(qū)
        +關(guān)注

        關(guān)注

        0

        文章

        95

        瀏覽量

        626

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

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

      收藏 人收藏
      加入交流群
      微信小助手二維碼

      掃碼添加小助手

      加入工程師交流群

        評論

        相關(guān)推薦
        熱點(diǎn)推薦

        ArkUI-X框架LogInterface使用指南

        ArkUI-X框架支持日志攔截能力，Android側(cè)提供原生接口，用于注入LogInterface接口，框架日志及ts日志通過該接口輸出，本文的核心內(nèi)容是介紹如何在Android平臺上有效利用
        發(fā)表于 06-15 23:20

        一加Ace 5至尊版搭載聯(lián)發(fā)科天璣9400+處理器

        想要成為掌管游戲的“神”？當(dāng)然要性能、觸控、網(wǎng)絡(luò)都在線！新發(fā)布的一加 Ace 5 至尊版搭載游戲全鏈路芯片級硬件解決方案「電競?cè)尽?，集天璣 9400+ 旗艦芯、靈犀觸控芯、電競 Wi-Fi 芯片 G1 于一體，打造超流暢的至尊
        的頭像 發(fā)表于 06-03 17:28 ?665次閱讀

        電競?cè)?游戲至尊 一加 Ace 5 至尊系列售價(jià) 2499 元起

        2025年5月27日,一加正式推出一加Ace5至尊系列,包含一加Ace5至尊版與一加
        的頭像 發(fā)表于 05-27 16:55 ?425次閱讀
        電競?cè)?游戲至尊 <b class='flag-5'>一</b>加 <b class='flag-5'>Ace</b> 5 至尊系列售價(jià) 2499 元起

        電競?cè)?，游戲至?一加 Ace 5 至尊系列正式定檔5月27日

        5月20日,一加官方宣布一加Ace5至尊系列正式定檔5月27日。一加Ace5至尊系列搭載天璣9400系列旗艦性能芯的同時(shí),集靈犀觸控芯、電競
        的頭像 發(fā)表于 05-20 16:04 ?390次閱讀
        電競?cè)?，游戲至?<b class='flag-5'>一</b>加 <b class='flag-5'>Ace</b> 5 至尊系列正式定檔5月27日

        基于Django89的web框架代碼

        基于Django89的web框架代碼，超詳細(xì)
        發(fā)表于 02-10 15:38 ?0次下載

        游戲體驗(yàn)天花板，一加 Ace 5 系列售價(jià) 2299 元起

        的市場需求，一加品牌于2024年12月26日正式推出了其最新的游戲性能旗艦——一加 Ace 5系列，包括一加 Ace 5與
        的頭像 發(fā)表于 02-06 18:11 ?1982次閱讀
        游戲體驗(yàn)天花板，<b class='flag-5'>一</b>加 <b class='flag-5'>Ace</b> 5 系列售價(jià) 2299 元起

        AI開發(fā)框架集成介紹

        隨著AI應(yīng)用的廣泛深入，單一框架往往難以滿足多樣化的需求，因此，AI開發(fā)框架的集成成為了提升開發(fā)效率、促進(jìn)技術(shù)創(chuàng)新的關(guān)鍵路徑。以下，是對AI開發(fā)框架集成的介紹，由AI部落小編整理。
        的頭像 發(fā)表于 01-07 15:58 ?553次閱讀

        一加 Ace 5 系列Pop-up快閃來襲，電競女神程瀟驚喜現(xiàn)身

        12月28日,一加Ace5系列主題快閃活動(dòng)「宿舍戰(zhàn)神挑戰(zhàn)賽」在深圳舉行,來自深圳大學(xué)電競社四大學(xué)生戰(zhàn)隊(duì)同臺集結(jié),為現(xiàn)場海量加油獻(xiàn)上精彩激烈的《和平精英》對抗賽。一加Ace特邀電競官程瀟
        的頭像 發(fā)表于 12-30 09:33 ?634次閱讀
        <b class='flag-5'>一</b>加 <b class='flag-5'>Ace</b> 5 系列Pop-up快閃來襲，電競女神程瀟驚喜現(xiàn)身

        一加Ace 5系列正式發(fā)布

        一加 Ace 5系列正式發(fā)布。該系列中，一加 Ace 5 Pro搭載全新的驍龍8至尊版移動(dòng)平臺，一加 A
        的頭像 發(fā)表于 12-27 11:52 ?2231次閱讀

        游戲體驗(yàn)天花板，一加 Ace 5 系列售價(jià) 2299 元起

        2024年12月26日,一加正式發(fā)布游戲體驗(yàn)天花板一加Ace5系列——一加Ace5及一加
        的頭像 發(fā)表于 12-27 10:19 ?1316次閱讀
        游戲體驗(yàn)天花板，<b class='flag-5'>一</b>加 <b class='flag-5'>Ace</b> 5 系列售價(jià) 2299 元起

        ACE無線溫度電流復(fù)合傳感器

        產(chǎn)品概述： ?ACE100無線溫度電流復(fù)合傳感器主要用于低壓開關(guān)柜輸電電纜的的溫度和電流的檢測。傳感器采用內(nèi)部電池和電磁取能的雙供電方式，快速準(zhǔn)確的測量低壓電纜的溫度及電流數(shù)據(jù)，通過無線的方式上傳至
        的頭像 發(fā)表于 12-20 15:27 ?510次閱讀
        <b class='flag-5'>ACE</b>無線溫度電流復(fù)合傳感器

        SSM框架在Java開發(fā)中的應(yīng)用 如何使用SSM進(jìn)行web開發(fā)

        SSM框架，即Spring、SpringMVC和MyBatis的整合，是Java Web開發(fā)中常用的技術(shù)棧。它通過分層架構(gòu)，實(shí)現(xiàn)了視圖、控制、業(yè)務(wù)邏輯和數(shù)據(jù)訪問的分離，提高了代碼的可維護(hù)性和可擴(kuò)展性
        的頭像 發(fā)表于 12-16 17:28 ?1570次閱讀

        JavaWeb框架比較

        ： 是Spring框架的一部分，易于與其他Spring技術(shù)（如Spring Security、Spring AOP）集成。 提供了豐富的實(shí)用程序庫，用于處理用戶請求、渲染視圖、實(shí)現(xiàn)控制反轉(zhuǎn)（IoC）以及事件發(fā)布和訂閱
        的頭像 發(fā)表于 11-25 09:14 ?679次閱讀

        一加Ace 3 Pro搭載第三代驍龍8移動(dòng)平臺

        不久前，一加Ace 3 Pro全面上市。作為一款Pro級別的全新性能旗艦，一加Ace 3 Pro搭載第三代驍龍8移動(dòng)平臺，實(shí)現(xiàn)了突破性的流暢
        的頭像 發(fā)表于 11-08 11:20 ?1649次閱讀

        Dubbo源碼淺析（一）—RPC框架與Dubbo

        時(shí)，就像調(diào)用本地過程一樣方便。 1.2 RPC與Http的關(guān)系 用一句話來總結(jié)就是： RPC是一種概念，http是一種協(xié)議，可以認(rèn)
        的頭像 發(fā)表于 08-16 15:18 ?1146次閱讀
        Dubbo源碼淺析（<b class='flag-5'>一</b>）—RPC<b class='flag-5'>框架</b>與Dubbo