SAP成都研究院非典型程序猿，菜園子小哥：當我用UI5診斷工具時我用些什麼

身邊有些年輕同事曾經向我表達過這種困擾：儘管完成平常工做沒有任何問題，可是還想更進一步，把代碼寫得更好些，作到精益求精。如今寫的代碼能實現功能，可是不知道能夠怎樣寫得更好。

除了閱讀優秀的開源庫開源框架，一點一滴積累以外，Jerry的一個建議是你們能夠多琢磨琢磨天天工做使用到的一些工具，研究下這些工具裏本身感興趣的那些功能的實現原理。想想這個功能若是讓本身實現，該怎樣去設計和編碼，琢磨完以後再去看工具的實現，和本身心中所想進行比較。這樣一來，既學習了這些工做優秀的設計和實現，又進一步熟悉了工做自己，能夠提升平時編碼和調試的效率，一箭雙鵰。

SAP的前端UI給你們提供了各式各樣的診斷工具，這些工具能方便你們調試，或是提供一些輔助技術信息，提升排錯效率。

好比CRM WebClient UI的Ctrl+Alt+F2:

SAP Cloud for Customer的Ctrl+鼠標左鍵：

以及SAP UI5的兩組診斷工具：

• Ctrl+Alt+Shift+P

• Ctrl+Alt+Shift+S

今天，就由SAP成都研究院的菜園子小哥王聰給你們聊聊他是如何專研第二組工具的。

和梁山好漢菜園子張青在大樹坡開店以前的職業同樣，王聰的一大愛好也是種菜。

據王聰的老闆Mint介紹，王聰的廚藝也不錯，喜歡烹飪。不過，各位單身妹紙們，遺憾的是，王聰已經結婚了，現在是一位模範丈夫。

躬耕于田間之餘，王聰也時常文藝一把。請經過下面的鏈接，欣賞王聰3分30秒的吉他演奏：《個人歌聲裏》。

http://compaign.tudou.com/v/611489926.html?from=timeline&isappinstalled=0

試想一個春雨綿綿的午後，王聰置身於滿園蒼翠欲滴的田間，一人一吉他一臺筆記本電腦。吉他彈奏，電腦編程，這畫面太美，依稀有幾分陶淵明「採菊東籬下，悠然見南山」的風雅。

王聰除了種菜以外，另外一個技能就是德語。你們點擊這篇文章尾部的"閱讀原文", 就能看到這篇文章的英語和德語版本。Jerry是不懂德語的，因此也不知道文章裏德語運用的水平如何。不過Jerry認識一位在德國SAP圈打拼了20多年的資深留德華，林峋博士。去年Jerry和林博士去Walldorf鎮上的商店買牀墊，聽他和賣牀小妹德語對話那個流利，羨慕極了。好事的Jerry把王聰的這篇文章給林博士過目，讓他幫忙品評下王聰的德語水平，獲得了林博士的讚譽。

王聰的SAP Community上的博客都是下面這種風格的，這些是Jerry達不到的水平：

這就是王聰，一個能寫代碼能種菜能玩音樂的非典型程序猿。下面是王聰的正文。

---

你們好我是王聰，目前在SAP成都研究院Revenue Cloud團隊負責話嘮和捧場王的角色。之前年輕的時候還喜歡攝攝影聽聽音樂啥的，可慢慢的我卻在通往"油膩中年"的路上漸行漸遠，再也不"面朝大海春暖花開"，而開始"關心糧食和蔬菜"。作飯和種菜成了我如今的愛好，我成了一個真正的"馬農"(顛着大馬勺的農民)。

前段時間承蒙汪主編賞臉約稿，讓我寫一寫工做中用到的一些工具。心中激動之餘衝入腦子的第一感受就是標題的這幾個大字。通常來講拿審題後的第一印象當題目老是有那麼點不負責任，但想來村上春樹寫出來的書名不也就是長這個樣子，因此心中也就無所謂了。

以汪主編的風格，在技術正餐以前總得來點三國水滸金庸古龍之類的小零嘴先墊吧墊吧。今天我想談談刀，但我談的不是武俠的刀，而是小巧現代的瑞士軍刀。

我人生中的第一把瑞士軍刀是我08年考上大學時我媽媽的一個同事阿姨送的。當時她問我報的什麼專業，我怕「通訊工程」在她們看來不太好理解，就索性說本身是學「電腦」的。而後她就特意挑了一把有不少改錐的CyberTool系列的瑞士軍刀送給我，並真誠的叮囑我好好學習，之後修電腦的時候必定用獲得。這把刀伴隨了我不少年，卻在我以後的一次疏忽中易主給了機場的安檢大哥。再加上畢業以後我並無開個小店修電腦，想來當真辜負了阿姨的期冀。

以後我又有過一些其餘的瑞士軍刀，但到頭來手裏只剩一把Waiter系列的小刀。由於用來用去會發現不少花哨的功能幾乎永遠都不會被用到。除了偶爾拿來開瓶啤酒剔剔牙以外，只有那片鋒利好用的主刀纔是我一次次把它摸出口袋的理由。

在去年初識UI5的時候我就被強大的UI5診斷工具震驚了，功能豐富簡單易用隨喚隨出活好不粘人，簡直是一把出色的瑞士軍刀。但慢慢的新鮮感褪去，於我來講Control Tree模塊就是那片百用不膩的主刀。

Control Tree瞭解一下？

這裏咱們用一個簡單的例子認識一下Control Tree，在頁面上顯示一個sap.m.Text文本。經過Shift+Ctrl+Alt+S呼出UI5診斷工具，而後在Control Tree標籤下咱們能夠清楚的看到整個頁面的控件樹形結構，點擊Text節點，咱們就能夠看到以下行爲：

• 相應的屬性被展現出來，用戶能夠動態修改，也可在相應屬性的Get/Set方法中加斷點——這邊打個勾，運行時執行到Get/Set方法後斷點就自動觸發了，如此神奇。怎麼作到的？這其實是面向切片編程思想的一個應用。細節參看汪主編博客：https://blogs.sap.com/2016/05/16/a-small-tip-i-learn-from-ui5-diagnostics-tool-a-practice-of-aop-programming/

• 能夠在查看控件相關的綁定信息

• 能夠在控件的全部方法中加斷點 （原理同第一條後半段）

• 相應控件被高亮一秒鐘

這裏咱們對其中的部分行爲debug下去，看看其背後的邏輯。

屬性列表是哪來的？

首先咱們經過萬能的在EventProvider.js的229行加斷點方式定位到sap/ui/core/support/plugins/ControlTree.js文件，並找到目標方法getControlProperties。衆所周知一切UI5控件都是派生自sap.ui.core.Element。而咱們也注意到了這樣的一個while循環。而這也就解釋了爲何屬性列表會按照BaseType加以劃分，並會一直劃分到Element一層。

而在遍歷的過程當中，每個BaseType的各項屬性以及aggregation都被整理成方便後續渲染列表的格式。進而在renderPropertiesTab方法中逐級渲染出DOM段落。

如何經過修改屬性列表中的值去修改控件的屬性？

咱們在屬性列表當中能夠直接去實時地修改某一項屬性，這又是如何作到的呢？想來這個過程最終必定是調用到了控件自己的set方法，咱們就在sap.m.Text的setText方法中打一個斷點，而後在調用棧中向上追溯，發現了目標方法onsapUiSupportControlTreeChangeProperty。原來是在控件的Metadata中存有各個屬性所對應的Set方法的名稱，在經過簡單的校驗以後用戶所輸入的值就經過setText方法被賦值進去了。

雖然綠色的高亮很醜，但我想知道它是怎麼來的？

咱們繼續嘗試在EventProvider中尋求突破口。進而定位到了Selector.js中的onsapUiSupportSelectorHighlight方法。在這裏咱們發現所謂的高亮其實並非元素自己的行爲，而是在元素上面覆蓋一層綠色的「遮罩」（div）。

綠色「遮罩」

而後會根據被高亮的控件的寬度高度來調整「遮罩」的大小，並將其顯示在控件的位置，以達到高亮的效果。

快速在Control Tree中定位元素

若是一個頁面很是複雜，想在其中靠層級結構找到元素將變得困難。而Control Tree則提供了一個經過Ctrl+Alt+Shift+鼠標點擊快速定位元素的功能，好用得讓人沒法自拔。

這裏咱們能夠看到當UI5診斷工具處於打開狀態時，mousedown事件的處理方法會增長一個，即是Selector的_fSelectHandler方法。而在這裏將會判斷若是三個修飾鍵同時被按下，則幫助用戶在Control Tree中選中相應的元素節點。

以上就是我對於UI5診斷工具中Control Tree模塊部分功能的理解。但願你也能和我同樣愛上這個工具。

更多閱讀

• Jerry和您聊聊Chrome開發者工具

• 那些年我用過的SAP IDE

• Jerry的Fiori原創文章合集

• Jerry的UI5框架代碼自學教程

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: