SAP Fiori Elements原理介绍之类型为Value Help的Smart Field工作原理
In previous blog Currency example – how Smart field works, one simple smart field is introduced:
In this blog, let’s go further to study how the value help of currency field is implemented by framework:
Once we open F4 value help of currency field, we could see a new popup. both the value help on currency field itself and this popup dialog are implemented by UI5 framework, there is no application coding at all. The source code of xml view and controller remain unchanged compared with previous example – but indeed the UI element, the currency field, behaves differently – this is actually the meaning of “smart” – the behavior of UI element depends on the annotation defined in OData model metadata.
How could Framework know the currency field should be rendered as F4 value help?
We set breakpoint on this line which is already discussed in previous blog.
For the logic how the variable oMetaData.annotations.uom is parsed from metadata.xml, please refer to previous blog. In OData Metadata, we use the following annotation to tell Framework that the UI element which is bound to “CurrencyCode” field in the model must be rendered as value list.
And the Target property is parsed in the runtime:
The calculated annotation from line 495 above is used to enable the original currency field with value help in line 1694 below by control Factory.
In the function addValueHelp, two new object instances ValueHelpProvider and ValueListProvider are created. They will be used later when F4 is pressed.
Finally, in the rendering process, since now the currency field has value help assigned, the corresponding UI5 icon is rendered by InputRender so that end user can easily identify the field has value help supported.
Implementation of F4 value help click
We have just now mentioned ValueHelpProvider. When F4 is pressed, it will react the press event and create an instance of ValueHelpDialog, which is a composite control acting as a container for all UI elements you could see in the popup dialog.
The controls are created separately as shown below:
Go button implementation
By default after you click F4 value help, the table is empty unless you click “Go” button.
The go button is implemented as instance of smartFilterBar created byValueHelpProvider.
The event handler of search is defined in line 317, the function _onFilterBarSearchPressed. In this event handler, it will delegate to _rebindTable.
ValueHelpProvider.prototype._onFilterBarSearchPressed = function() {
this._rebindTable();
};
_rebindTable will fire a request to backend to ask for data for currency value list:
Once the response is available ( from mock data Currency.json in project ), the table is updated with data binding:
How the item selected from popup dialog could pass back to application
In the metadata, we have defined via annotation that the “Price” field has “CurrencyCode” field as its unit code.
Here below is the type definition for CurrencyCode, one property CURR for currency code and DESCR for currency description.
<EntityType Name="Currency">
<Key>
<PropertyRef Name="CURR" />
</Key>
<Property Name="CURR" Type="Edm.String" MaxLength="4"
sap:display-format="UpperCase" sap:text="DESCR" sap:label="Currency Code"
sap:filterable="false" />
<Property Name="DESCR" Type="Edm.String" MaxLength="25"
sap:label="Description" />
</EntityType>
It is this annotation which tells UI framework that once end user selects one currency from popup dialog, the value of field “CURR” in popup dialog must be passed back to field “CurrencyCode” in application.
How is this annotation parsed in the runtime? They are separately parsed in function addValueHelp we discussed previously and assigned to variable sValueListProprty and sLocalDataProperty.
When the first entry in currency list table is selected:
This selected state is passed into event handler via variable oControlEvent:
The key is parsed:
An event is raised with this selected key & text:
Now we are back to ValueHelpDialog:
Fire an OK event with selected key & text:
- 自然语言处理指南(第1部分)
- GreenDao 兼容升级,保留旧数据的---全方面解决方案
- 基于 xorm 的服务端框架 XGoServer
- 全面总结: Golang 调用 C/C++,例子式教程
- 架构之路(六):把框架拉出来
- 第二届游戏运营技术论坛——云时代的游戏运营之道
- 如何才能准确测量 APP 的功耗?
- 可用性更高:设计优秀的MySQL和Percona XtraDB集群
- 如何使用scikit-learn在Python中生成测试数据集
- OpenStack Neutron之持续测试
- 干货丨 用 Python 进行股票分析
- 小故事:架构师需要做什么?
- 浅谈用Python计算文本BLEU分数
- Fourinone如何实现并行计算和数据库引擎
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Centos7安装配置NFS服务和挂载教程(推荐)
- 轻松搞定VIM高亮NGINX配置文件的方法
- CentOS7 下安装telnet服务的实现方法
- Linux内核启动参数详解
- CentOS6.3添加nginx系统服务的实例详解
- Linux中在防火墙中开启80端口方法示例
- Apache 获取真实ip的配置的实现方法
- Linux下文件的切分与合并的简单方法介绍
- ubuntu 系统上为php加上redis 扩展的实现方法
- deepin linux 手动升级内核的方法
- UGL之单色位图
- Linux网络启动问题:Device does not seem to be present解决办法
- UGL之透明位图
- 关于ISR
- python 井字棋-文字版(下)