专栏首页Jerry的SAP技术分享SAP UI5框架自学教程

SAP UI5框架自学教程

As an application developer using SAP UI5, when I deal with some issues reported by end users, it turns out that I cannot find out the root cause without debugging UI5 framework code.

Why an UI5 application developer needs to study framework code

Normally an UI5 application consists of various controls provided by UI5 library. If you just want to use a certain control and make it work in your application, it is enough for you to just go through the control API document, play it around in UI5 demokit. But if you meet with issues with the control, or you would like to know how the control is manipulated by UI5 framework to write a more robust and more efficient application, it is then inevitable that you need to dive into the UI5 framework source code.

During my struggle against customer issues during this year, I gained some experience how to debug UI5 framework code. I would like to share them with you here. Thus I write this tutorial, using the more simple button control for example, to illustrate how to thoroughly understand this control, together with theinvolved framework code in an step-by-step way.

Another benefit of studying UI5 framework code is, since the code are written by JavaScript veterans, by being familiar with those code everyday, you can learn how to program JavaScript in a more robust, elegant, generic, and efficient way, to upgrade your JavaScript skills.

Since all of the knowledge introduced here is gained through the debugging on my own, so if you find anything wrong within this tutorial, please do point it out and I will correct it.

The content of this tutorial

Part 1 UI5 module lazy load mechanism

You run UI5 application in Chrome and you observe lots of JavaScript files loaded in the network tab of Chrome development tool. And you wonder who triggers their download. For example, as long as you have used UI5 button control, you will see Button.js downloaded. Why? See answer here.

Part 2 Control renderer

You have used UI5 button control, and you find in Chrome development tool that it is drawn as “button” tag in generated html page. However you never declared any native html tag in your application, where does it come from?

You assume it is Framework which does this trick, and you want to know more: when and where this button tag is generated by who? See answer here.

Part 3 Native html event VS UI5 semantic event

If you have some basic html knowledge, you will probably know the “click” event of button tag. However, after you go through the UI5 button API document, you find that its available event it exposes for your application to register is not “click”, but “press”. Would like to know why? See answer here.

Or if you would also like to know something about event handling design of other popular framework like Angular, you can read this blog: Compare Event handling mechanism: SAPUI5 and Angular.

Part 4 control metadata

You have one variable which points to a button control instance, for example “oButton”. You type “oButton.” in Chrome console, and you will see lots of functions in auto-complete list. You want to know by which rules are these functions chosen to display here, and where do they come from? See answer here.

Part 5 control instance data

Take button control’s text property for example, you use getText and setText to read and change it. Take another property, width, for example, can you imagine whether the getWidth and setWidth are implemented in a similar way? See answer here.

Part 6 control data binding

Data binding is an important concept in MVC world. It should never be the first time you touched this concept. You know for example after you bind the text property of control to a field of a JSON model, in the runtime the control will display the value in that JSON model field accordingly. However have you even thought about how UI5 framework implements this for you under the hood? See answer here.

Part 7 Implementations for different binding mode: OneWay, TwoWay, OneTime

You probably see these different mode in SAP help document and you learn their different use scenarios through the documentation, and perhaps you never explicitly specify the binding mode in your application, that is, you use the default one.

So, what is the default binding mode? How does UI5 framework treat each binding mode differently?

See answer here.

Part 8 Control ID

You create a button control in the sample application and use Chrome development tool “inspect element” function to get the id of generated button tag and you get its id “__button0”. You would like to know where does this prefix “__button” and the zero come from? See answer here.

Part 9 Control internationalization support

If you use Chrome development tool to observe a standard SAP Fiori application running under debug mode, you probably could observe there are several files like i18n_en.properties downloaded. What are usage of these files? See answer here.

Part 10 Button control in XML view

In all previous nine blogs so far, you directly create button control via JavaScript code – you are the god who determines the born of button control. How about the control defined in xml view? Since you never use JavaScript code any more to explicitly create it, it makes sense that UI5 framework will act as God this time. You want to know in which code the button control is created by framework? See answer here.

Part 11 Button control and its underlying DOM node

You want to change the text color and the background color of button control, however there is no functions such as setText or setBackgroundColor available. Would like to know how to achieve? See answer here.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • How to debug Interaction center inbox workflow WS14000164

    (1) sent one mail to IC inbox via outlook:

    Jerry Wang
  • 如何能够快速获得一个用户在SAP ABAPNetweaver系统上设置的所有断点

    Sometimes when you are debugging for a complicated issue, you set several breakp...

    Jerry Wang
  • SAP Fiori应用里出现http request错误的原因分析

    Issue: When you try to create a new Opportunity in Fiori, you meet with the foll...

    Jerry Wang
  • 数学--数论--HDU1825(积性函数性质+和函数公式+快速模幂+非互质求逆元)

    As we all know, the next Olympic Games will be held in Beijing in 2008. So the y...

    风骨散人Chiam
  • SAP Fiori应用里出现http request错误的原因分析

    Issue: When you try to create a new Opportunity in Fiori, you meet with the foll...

    Jerry Wang
  • Osmotic Study ----Mysql Safe

    @坤的
  • 数据驱动的人类责任管理系统(AI)

    理想的安全工作场所被描述为一个员工井井有条地履行职责,对潜在的危险事件进行实时监控,事故数量和相关损害最小化的地方。但是,由于缺乏全面的安全管理,与职业相关的死...

    田冠宇
  • C++ 自由存储区是否等价于堆?

    Tencent JCoder
  • SkinMaster(原LOL换肤大师)同步更新——小文’s blog

    神无月
  • [计算机视觉论文速递] 2018-03-05

    通知:这篇推文有16篇论文速递信息,涉及目标检测、图像分割、风格迁移和GAN等方向。 [1]《Hashing with Mutual Information》 ...

    Amusi

扫码关注云+社区

领取腾讯云代金券