深入學(xué)習(xí) UI5框架代碼系列之二：UI5 控件的渲染器

使用Jerry的文章 一個(gè)用于SAP UI5學(xué)習(xí)的腳手架應(yīng)用，沒(méi)有任何后臺(tái)API的依賴，創(chuàng)建一個(gè)只包含一個(gè)button控件的SAP UI5應(yīng)用，用Chrome開(kāi)發(fā)者工具里的Elements工具欄查看該button控件的原生HTML代碼：

在Jerry的前一篇文章 深入學(xué)習(xí)SAP UI5框架代碼系列之一：UI5 Module的懶加載機(jī)制，我們已經(jīng)了解到UI5 Button Module之一，ButtonRenderer,專門(mén)負(fù)責(zé)將sap.ui.commons.button的實(shí)例數(shù)據(jù)，渲染成原生的HTML代碼。

在ButtonRenderer.render函數(shù)里設(shè)置斷點(diǎn)，然后F5刷新頁(yè)面，斷點(diǎn)觸發(fā)，就可從調(diào)用棧觀察到RenderManager是如何調(diào)用ButtonRenderer執(zhí)行渲染工作的。

下圖畫(huà)得有些亂，意圖是想表達(dá)，最終渲染出的HTML源代碼里的button標(biāo)簽的各個(gè)屬性，分別是由ButtonRenderer哪一行代碼實(shí)現(xiàn)的。

Jerry剛剛做SAP UI5開(kāi)發(fā)時(shí)，了解到Renderer機(jī)制后，心里有個(gè)疑問(wèn)，SAP UI5怎么知道button控件的渲染器是ButtonRenderer。換言之，SAP UI5控件和其渲染器之間的一一對(duì)應(yīng)關(guān)系是如何維護(hù)的？

SAP UI5框架里，每類控件都各自維護(hù)了一份Metadata(元數(shù)據(jù))，其中有個(gè)getRenderer方法，返回控件對(duì)應(yīng)的渲染器名稱。

關(guān)于SAP UI5控件元數(shù)據(jù)，本系列后續(xù)文章會(huì)介紹。

從調(diào)試器里能觀察到button控件元數(shù)據(jù)里，變量_sRendererName維護(hù)了button渲染器的名稱：sap.ui.commons.ButtonRenderer. 然而，這個(gè)變量在何時(shí)賦的值？

從下圖第42971行能夠看出：控件的渲染器滿足命名規(guī)范：<控件名稱>+ “Renderer”, 一個(gè)簡(jiǎn)單的字符串拼接操作。

RenderManager在哪些時(shí)刻會(huì)開(kāi)啟控件的重繪？

讓我們對(duì)腳手架應(yīng)用里的button點(diǎn)擊事件處理函數(shù)稍作修改：每次點(diǎn)擊按鈕時(shí)，調(diào)用setText修改button的text屬性：

點(diǎn)擊按鈕，發(fā)現(xiàn)ButtonRenderer.render再次被觸發(fā)。

原因在于，oButton1.setText最終會(huì)調(diào)用button原型鏈上的ManagedObject.setProperty方法，該方法內(nèi)部有一個(gè)顯式的invalidate調(diào)用。

如果忘記了SAP UI5控件的原型鏈設(shè)計(jì)，可以查看Jerry之前的文章：深入學(xué)習(xí)SAP UI5框架代碼系列之一：UI5 Module的懶加載機(jī)制。

Control.invalidate內(nèi)部經(jīng)過(guò)計(jì)算，會(huì)得出當(dāng)前頁(yè)面需要重繪的區(qū)域，最終調(diào)用RenderManager進(jìn)行重繪。

我們?cè)賮?lái)簡(jiǎn)單了解下Angular里的控件繪制。以SAP Spartacus的產(chǎn)品轉(zhuǎn)盤(pán)(Product Carousel)顯示控件為例: 最暢銷(xiāo)的產(chǎn)品共有12款，分多屏顯示在轉(zhuǎn)盤(pán)控件里，每屏顯示若干個(gè)產(chǎn)品。通過(guò)控件提供的左右箭頭，進(jìn)行屏與屏之間的切換。轉(zhuǎn)盤(pán)底部的小紅點(diǎn)，表示當(dāng)前轉(zhuǎn)盤(pán)顯示的是第幾個(gè)屏幕的數(shù)據(jù)。

SAP UI5也能實(shí)現(xiàn)類似的復(fù)合控件，官方稱呼為Custom Control.

Spartacus產(chǎn)品轉(zhuǎn)盤(pán)控件的HTML代碼表現(xiàn)形式為標(biāo)簽cx-product-carousel，內(nèi)部重用了另一個(gè)自定義標(biāo)簽cx-carousel:

當(dāng)前顯示在屏幕里的產(chǎn)品信息，通過(guò)cx-carousel標(biāo)簽里三個(gè)class為item active的div標(biāo)簽顯示。

這個(gè)自定義產(chǎn)品轉(zhuǎn)盤(pán)控件通過(guò)Spartacus里的Angular Product Carousel Component實(shí)現(xiàn)。

Product Carousel Component的layout實(shí)現(xiàn)里，將Component自身的屬性items

和

t

i

t

l

e

和title

和title作為輸入，傳入另一個(gè)Component cx-carousel, 讓其將屬性值title

作為轉(zhuǎn)盤(pán)的標(biāo)題渲染，而轉(zhuǎn)盤(pán)的數(shù)據(jù)源，來(lái)自傳入的屬性

i

t

e

m

s

作為轉(zhuǎn)盤(pán)的標(biāo)題渲染，而轉(zhuǎn)盤(pán)的數(shù)據(jù)源，來(lái)自傳入的屬性items

作為轉(zhuǎn)盤(pán)的標(biāo)題渲染，而轉(zhuǎn)盤(pán)的數(shù)據(jù)源，來(lái)自傳入的屬性items.

因?yàn)閏x-carousel是一個(gè)可重用控件，除了顯示產(chǎn)品轉(zhuǎn)盤(pán)外，還可以用于顯示其他同類實(shí)體的轉(zhuǎn)盤(pán)顯示，比如折扣轉(zhuǎn)盤(pán)，促銷(xiāo)活動(dòng)轉(zhuǎn)盤(pán)等等。因此，除了將items

和

t

i

t

l

e

和title

和title傳入cx-carousel之外，還需要告知后者，在轉(zhuǎn)盤(pán)內(nèi)部，以何種布局邏輯顯示轉(zhuǎn)盤(pán)的每一個(gè)元素。

因此，下圖第九行通過(guò)標(biāo)簽定義了一個(gè)id為#carouselItem的模板，將此id一并傳入cx-carousel. 這樣，轉(zhuǎn)盤(pán)控件在運(yùn)行時(shí)，針對(duì)轉(zhuǎn)盤(pán)數(shù)據(jù)源items$內(nèi)存儲(chǔ)的每一個(gè)產(chǎn)品數(shù)據(jù)，就會(huì)按照此模板定義的布局，進(jìn)行繪制。

當(dāng)初Jerry學(xué)習(xí)Spartacus這個(gè)產(chǎn)品轉(zhuǎn)盤(pán)的設(shè)計(jì)時(shí)，覺(jué)得很親切，因?yàn)槠湓O(shè)計(jì)思路和SAP UI5 List Binding(Aggregation Binding)是一致的。

SAP UI5官網(wǎng)上講解List Binding的一個(gè)例子：

有一個(gè)companies JSON數(shù)組：

將companies路徑傳入List控件，完成了數(shù)據(jù)源的指定，通知List去繪制companies數(shù)組里的數(shù)據(jù)。具體渲染哪些數(shù)據(jù)？List不知道，需要items子控件來(lái)定義，比如子控件的title屬性，顯示JSON數(shù)組的name字段，description屬性，顯示JSON數(shù)組的city字段。List會(huì)根據(jù)JSON數(shù)組里的company節(jié)點(diǎn)的個(gè)數(shù)，動(dòng)態(tài)創(chuàng)建對(duì)應(yīng)數(shù)目的items子控件。

這里的SAP UI5 items子控件，扮演的就是本文之前介紹的Spartacus產(chǎn)品轉(zhuǎn)盤(pán)控件頁(yè)面里，用定義出的id為#carouselItem的模板同樣的角色。

感謝閱讀，本系列下一篇文章：HTML原生事件 VS SAP UI5 Semantic事件。

ABAP ERP HTML 渲染

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。