Deutsche Version ist in der Mitte des Artikel
中文版位于文章底部
--------------------------------------------------------------------------------------------------------------------------------------
In the last month my mentor Jerry wants me to explore UI5 Diagnostics. My first feeling is exactly the title of this blog. Normally, it's not so good to choose a title so sloppily. But the famous writer Haruki Murakami has a book called What I Talk About When I Talk About Running. Then I feel relaxed.:D About UI5 Diagnostics I would like to talk about pocket knife firstly.
My first pocket knife is a gift from my aunt when I graduated from high school. She asked me "what will you study at university?". I thought that telecommunication might be a bit hard for her to understand, so I answered "I study something about computers". Then she sent me a "CyberTool" pocket knife. This knife has many screwdrivers. For my aunt "something about computers" means computer repair.
After that I bought some more pocket knives. But my favorite one is a "Waiter" knife. It only has a few functions, but they are enough for me. And the main knife I use most often.
I learned UI5 from last year. At that time I found UI5 Diagnostics is very similar to a pocket knife. So many functions and very good to use. For me, "Control Tree" is the main knife of the pocket knife.
About Control Tree
Here we have a small example, there is a sap.m.text in a page. Press Shift + Ctrl + Alt + s we could open UI5 Diagnostics. Then we click the "Text" node in the Control Tree.
- All properties are on the right side, you can change them and add breakpoints in the corresponding set/get functions. (How are the breakpoints inserted? Please read Jerry's blog)
- You can see Binding Information of the control
- You can add breakpoints in all the functions of the control
- The control is highlighted for a second
Where does the property list come from?
Let's add a breakpoint on the code line 229 in EventProvider.js. It can help us to locate the function "getControlProperties" in sap/ui/core/support/plugins/ControlTree.js. We know that all controls are derived from Element. And here we can find a "while" loop. That's why all the properties are separated into different "BaseTypes".
In the "while" loop all property are reorganized, and in the function "renderPropertiesTab" they will be rendered into DOM.
How is a property changed?
In the property list we can change a property. I believe that the last step must be the function "setText" in sap.m.Text. So I add a breakpoint there. In the Call Stack I find the function onsapUiSupportControlTreeChangeProperty. It turns out that in the Metadata there are names for set/get functions for all the properties.
The green highlight is really ugly, but I would like to explore it:D
Let's keep trying in EventProvider. Then we can find the function onsapUiSupportSelectorHighlight in Selector.js. It turns out that "highlight" is not the standard behavior of a control. But actually a green "mask" (div).
The size of the "mask" is determined by height and width of the Text. And it will put the mask exactly on the position of the Text. That's why it looks like "the Text is highlighted".
Locate a control in Control Tree
If a page is too complex it's really hard to find a control in the Control Tree. But fortunately we can do it with Ctrl + Alt + Shift +mouse clicking.
If the UI5 Diagnositcs is open, there is an extra handler for "mouse down" event. It is _fSelectHandler in Selector.js. The corresponding control node is selected when all the three modifier keys are pressed.
--------------------------------------------------------------------------------------------------------------------------------------
Deutsch Version
Hallo ich bin Cong. Jetzt bin ich ein Developer an Hybris Revenue Cloud in Chengdu, China. Ich möchte Programmierkenntnisse hier teilen und mein Deutsch verbessern. Deshalb schreibe ich Blogs in Deutsch und Enghlish. Wenn Sie Syntaxfehler finden, oder mein Deutsch ist zu schwer zu verstehen, bitte lesen Sie die English Version und sagen Sie mir den richtigen Ausdruck. Herzlich Dank und ich hoffe, dass Sie meinen Blog genießen. Prost!
--------------------------------------------------------------------------------------------------------------------------------------
Im letzte Monate mein Mentor jerry.wang möchtet, dass ich kann UI5 Diagnostics erforschen. Mein erst Gefuhl ist gerade die Überschrift von diesem Blog. Normalerweise ist es nicht so gut wenn man eine Überschrift so leicht zu bestimmen. Aber der berühmter Schriftsteller Haruki Murakami hat eines Buch nennt Wovon ich rede, wenn ich vom Laufen rede. Dann finde ich entspannt.:D Über UI5 Diagnostics möchte ich zuerst Taschenmesser reden.
Mein erstes Taschenmesser ist ein Geschenk meiner Tante, als ich Abitur gemacht habe. Sie fragte mir “Was wirst du an der Universität studieren?”. Ich dachte, dass Telekommunication vielleicht ist ein bischen schwer für sie zu verstehen, deshalb antwortete ich “ich studiere etwas über Computer”. Dann schickte sie mir eines “CyberTool” Taschenmesser. Dieses Taschenmesserhat viele Schraubendreher. Für meine Tante “etwas über Computer” bedeutet Computerreparatur.
Danach kaufte ich einige Taschenmesser. Aber mein liebstes ist ein “Waiter” Taschenmesser. Es hat nur paar Funktionen, aber sie sind genug für mich. Und das Hauptmesser benutze ich am häufigsten.
Ich habe UI5 gelernt von letztes Jahr. Damals findte ich UI5 Diagnostics ist sehr ähnlich zu Taschenmesser. Viele Funketionen und sehr gut zu benutzen. Für mich ist “Control Tree” das Hauptmesser von dem Taschenmesser.
Über Control Tree
Hier haben wir eines kleines Beispiel, da gibt es ein sap.m.Text in eine Seite. Drücken wir Shift+Ctrl+Alt+s um UI5 Diagnostics zu öffnen. Dann klicken wir “Text” in Control Tree.
- Alle Eigenschaft sind rechts, man kann sie verändern und Haltepunkte im dazugehörigen Set/Get Functionen einfügen. (Wie werden die Haltepunkte eingefügt? Lesen Sie bitte Blog von Jerry)
- Man kann Binding Information sehen
- Man kann in alle Funktionen Haltepunkte einfügen
- Das Text ist makiert für eine Sekunde
Woher kommt die Eigenschaftliste
Setzen wir ein Haltepunkt auf der Codezeile 229 in EventProvider.js. Dann können wir die Funktion “getControlProperties” in sap/ui/core/support/plugins/ControlTree.js finden. Wir wissen, dass alle Steuerelemente sind von Element abgeleitet. Und hier können wir ein “While” Schleife finden. Das ist Grund warum alle Eigenschafts werden in verschiedene “BaseType” getrennt.
In die “While” Scheife alle Eigenschafts werden organisierte, und in die Funktion “renderPropertiesTab” sie werden DOM.
Wie wird ein Eigenschaft verändert？
In die Eigenschaftliste können wir ein Eigenschaft verändern. Ich glaube, dass der letzter Schritt muss “setText” in sap.m.Text sein. Dann setze ich ein Haltepunkt dort. In Call Stack finde ich onsapUiSupportControlTreeChangeProperty. Es stellt sich heraus, dass in Metadata gibt es der Name der Set/Get Funktion von alle Eigenschafts.
Das grünes Höhepunkt ist wirklich hässlich, aber möchte ich da erforschen ?
Probieren wir noch in EventProvider können wir die Funktion onsapUiSupportSelectorHighlight in Selector.js finden. Es stellt sich heraus, dass Höhepunkt ist nicht eigen Verhalten von Text. Aber eine grüne “Maske”(div).
Die größe der “Maske” wird bei Höhe und Breite von Text bestimmt. Dann setzt es die “Maske” an dem Text. Deshalb sieht es wie “Höhepunkt” aus.
Lokalisieren ein Steuerelement in Control Tree
Wenn eine Seite ist sehr komplex ist es wirklich schwer um ein Steuerelement zu finden. Aber wir können das mit Ctrl+Alt+Shift+clicken machen.
Wenn UI5 Diagnositcs ist offen, da gibt es ein Handler für “mouse down” Event. Er ist _fSelectHandler in Selector.js. Die dazugehörige Steuerelement wird gewählt, wenn die drei Modifikatortasten gedrücht werden.
--------------------------------------------------------------------------------------------------------------------------------------
中文版
--------------------------------------------------------------------------------------------------------------------------------------
前段时间承蒙汪主编赏脸约稿，让写一写UI5诊断工具中我自己感兴趣的功能。心中激动之余冲入脑子的第一感觉就是标题的这几个大字。一般来说拿审题后的第一印象当题目总是有那么点不负责任，但想来村上春树写出来的书名不也就是长这个样子，所以心中也就无所谓了。
以汪主编的风格，在技术正餐之前总得来点三国水浒金庸古龙之类的小零嘴先垫吧垫吧。今天我想谈谈刀，但我谈的不是武侠的刀，而是小巧现代的瑞士军刀。
我人生中的第一把瑞士军刀是我08年考上大学的时候我妈妈的一个同事阿姨送的。当时她问我报的什么专业，我怕“通信工程”在她们看来不太好理解，就索性说自己是学“电脑”的。然后她就特地挑了一把有很多改锥的CyberTool系列的瑞士军刀送给我，并真诚的叮嘱我好好学习，以后修电脑的时候一定用得到。这把刀伴随了我很多年，却在我之后的一次疏忽中易主给了机场的安检大哥。再加上毕业之后我并没有开个小店修电脑，想来当真辜负了阿姨的期冀。
之后我又有过一些其他的瑞士军刀，但到头来手里只剩一把Waiter系列的小刀。因为用来用去会发现很多花哨的功能几乎永远都不会被用到。除了偶尔拿来开瓶啤酒剔剔牙之外，只有那片锋利好用的主刀才是我一次次把它摸出口袋的理由。
在去年初识UI5的时候我就被强大的UI5诊断工具震惊了，功能丰富简单易用随唤随出活好不粘人，简直是一把出色的瑞士军刀。但慢慢的新鲜感褪去，于我来说Control Tree模块就是那片百用不腻的主刀。
Control Tree了解一下？
这里我们用一个简单的例子认识一下Control Tree，在页面上显示一个sap.m.Text文本。通过Shift+Ctrl+Alt+s呼出UI5诊断工具，然后再Control Tree标签下我们可以清楚的看到整个页面的控件树形结构，点击Text节点，我们就可以看到如下行为：
- 相应的属性被展示出来，用户可以动态修改，也可在相应属性的Get/Set方法中加断点（这边打个勾断点就加进去了，怎么做到的？参看汪主编博客）
- 可以在查看控件相关的绑定信息
- 可以在控件的所有方法中加断点 （原理同第一条后半段）
- 相应控件被高亮一秒钟
这里我们对其中的部分行为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模块部分功能的理解。希望你也能和我一样爱上这个工具。
- SAP Managed Tags:
