SAP UI5 formatter的工作原理

简介: SAP UI5 formatter的工作原理

Recently I am following the exercise Building SAP Fiori-like UIs with SAPUI5( it is really a fantastic guide

image.pngimage.pngWhy the formatter for status is not called at all

Since none of other SCNers has complained about this issue, so I assume there must be something wrong in my own code. So I began to debug to compare why formatter for CreatedAt works.


Soon I found out how formatter for CreatedAt works. In the runtime, firstly the raw value of field CreatedAt is fetched from line 22833 and stored in variable oValue, and then passed to its formatter in line 22838.


The “this.fnFormatter” actually points to the formatter scn_exercise.util.Formatter.date defined in my code.

image.pngHow does framework parse xml view to get metadata such as formatter information

The screenshot below contains a good entry point for xml view parse debugging.The XMLTemplateProcessor-dbg.js contains the implementation to parse xml source code and create UI5 control accordingly.

image.pngFinally I reached the code below. After line 21082 is executed, the formatter for field CreatedAt will be parsed.

image.pngI will explain how the reference pointing to my formatter for CreatedAt is parsed via text.

before the for loop, variable oObject points to the global window object, since no context exists in this case.


The first for loop: i = 0, execute line 15162, aNames[0] = “scn_exercise”, so after that oObject now points to window.scn_exercise.

The secondfor loop: i = 1, aNames[1] = util, so after line 15162 oObject points to window.scn_exercise.util.


The third loop: i = 2, aNames[2] = Formatter, so after line 15162 oObject points to window.scn_exercise.util.Formatter

The fourth loop: i = 3, aNames[3] = date, so after line 15162 oObject points to window.scn_exercise.util.Formatter.date.Then quit for loop.

image.pngimage.pngWhen the attribute util become available under window.scn_exercise

Since I have defined the usage of formatter implementation in detail view’s controller:

jQuery.sap.require(“scn_exercise.util.Formatter”);


the js file will be downloaded via AJAX and execModule is called on it after a successful download:

image.pngimage.png


相关文章
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
15 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
33 0
|
1月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
14 0
|
1月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
15 0
|
1月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
15 0
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
28 0
|
1月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
18 0
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0

热门文章

最新文章