UI5-文档-4.23-Custom Formatters
如果希望对数据模型的属性进行更复杂的格式化逻辑,还可以编写自定义格式化函数。现在我们将使用自定义格式化程序添加本地化状态,因为数据模型中的状态是一种相当技术性的格式。
Preview
A status is now displayed with a custom formatter
Coding
You can view and download all files at Walkthrough - Step 23.
webapp/model/formatter.js (New)
sap.ui.define([],function(){
"use strict";
return{
statusText:function(sStatus){
var resourceBundle =this.getView().getModel("i18n").getResourceBundle();
switch(sStatus){
case"A":
return resourceBundle.getText("invoiceStatusA");
case"B":
return resourceBundle.getText("invoiceStatusB");
case"C":
return resourceBundle.getText("invoiceStatusC");
default:
return sStatus;
}
}
};
});
我们的新格式化程序文件位于应用程序的model文件夹中,因为格式化程序正在处理数据属性并格式化它们以便在UI上显示。到目前为止,除了发票之外,我们没有任何与模型相关的 Invoices.json 文件, 现在,我们将把文件夹webapp/model添加到我们的应用程序中。这一次,我们不从任何基本对象进行扩展,只返回一个JavaScript对象,其中包含sap.ui.define调用中的formatter函数。
函数lawstext从数据模型获取技术状态作为输入参数,并返回从resourceBundle文件读取的可读文本。
webapp/controller/InvoiceList.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/demo/walkthrough/model/formatter"
], function (Controller, JSONModel, formatter) {
"use strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
formatter: formatter,
onInit : function () {
var oViewModel = new JSONModel({
currency: "EUR"
});
this.getView().setModel(oViewModel, "view");
}
});
});
要加载格式化程序函数,必须将其添加到invoiclist .controller.js中。在这个控制器中,我们首先向自定义格式化程序模块添加一个依赖项。控制器只是将加载的格式化程序函数存储在本地属性格式化程序中,以便能够在视图中访问它们。
webapp/view/InvoiceList.view.xml
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<List
headerText="{i18n>invoiceListTitle}"
class="sapUiResponsiveMargin"
width="auto"
items="{invoice>/Invoices}">
<items>
<ObjectListItem
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {
showMeasure: false
}
}"
numberUnit="{view>/currency}"
numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }">
<firstStatus>
<ObjectStatustext="{
path: 'invoice>Status',
formatter: '.formatter.statusText'
}"/>
</firstStatus>
</ObjectListItem> </items>
</List>
</mvc:View>
我们使用firstStatus聚合向ObjectListItem添加一个状态,该状态将显示发票的状态。自定义格式化程序函数是用绑定语法的保留属性格式化程序指定的。formatter名称前面的“.”表示在当前视图的控制器中查找该函数。在那里,我们定义了一个属性formatter,它保存我们的formatter函数,因此我们可以通过.formatter.statusText.访问它。
webapp/i18n/i18.properties
# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5 # Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok # Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=Done
我们向资源包中添加了三个新条目,它们反映了翻译后的状态文本。这些文本现在显示在ObjectListItem的number属性下面,该属性取决于发票的状态。
Parent topic: Walkthrough
Previous: Step 22:
Expression Binding
Next: Step 24:
Filtering
Related Information
Formatting,
Parsing, and Validating Data
UI5-文档-4.23-Custom Formatters的更多相关文章
- Apache DolphinScheduler 使用文档(2-3/8):集群规划及环境准备
本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 2. 集群规划 2.1 集群配置 2.2 软件版本 2 ...
- Spring Boot中使用Swagger2构建API文档
程序员都很希望别人能写技术文档,自己却很不愿意写文档.因为接口数量繁多,并且充满业务细节,写文档需要花大量的时间去处理格式排版,代码修改后还需要同步修改文档,经常因为项目时间紧等原因导致文档滞后于代码 ...
- Apache DolphinScheduler 使用文档(5/8):使用与测试
本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 5. 使用与测试 5.1 安全中心(Security) ...
- Apache DolphinScheduler 使用文档(4/8):软件部署
本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 4. 软件部署 4.1 为 dolphinschedu ...
- Apache DolphinScheduler 1.2.0 使用文档(1/8):架构及名词解释
本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 1. 架构及名词解释 1.1 DolphinSched ...
- Apache DolphinScheduler 使用文档(7/8):系统参数及自定义参数
本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 7. 参数 7.1 系统参数 7.2 时间自定义参数 ...
- Apache DolphinScheduler 使用文档(8/8):附录
本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 附录.队列管理 附录.令牌管理 附录.队列管理 Q : ...
- Apache DolphinScheduler 使用文档(6/8):任务节点类型与任务参数设置
本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 6. 任务节点类型和参数设置 6.1 Shell节点 ...
- JIRA6.36-7.23数据迁移文档
JIRA6.3.6-JIRA7.2.3数据迁移文档 安装JIRA7.2.3 安装包位于服务器/opt/SOFTWARE_PACKAGE目录下 建立JIRA安装的目录数据目录 cd /opt mkdir ...
- [实战]MVC5+EF6+MySql企业网盘实战(23)——文档列表
写在前面 上篇文章实现了图片列表,这篇文章实现文档列表将轻车熟路,因为逻辑基本相似,只是查询条件的不同.这里将txt,doc,docx,ppt,pptx,xls,xlsx的文件都归为文档列表中. 系列 ...
随机推荐
- tomcat源码阅读之StandardContext
Context实例表示一个具体的web应用程序,其中包含一个或者多个Wrapper实例,每个Wrapper表示一个具体的servlet定义.StandardContext类是Context接口的标准实 ...
- Flyway 简单入门教程
原文地址:Flyway 简单入门教程 博客地址:http://www.extlight.com 一.前言 Flyway 是一款开源的数据库版本管理工具,它更倾向于规约优于配置的方式.Flyway 可以 ...
- 【数据库】Eclipse连接MySQL数据库
我的环境:MySQL:mysql-essential-5.1.51-win32 jdbc驱动:我已经上传到csdn上一个:http://download.csdn.net/detail/paulwin ...
- 1、搭建HBase完全分布式集群
搭建完全分布式集群 HBase集群建立在hadoop集群基础之上,所以在搭建HBase集群之前需要把Hadoop集群搭建起来,并且要考虑二者的兼容性.现在就以5台机器为例,搭建一个简单的集群. 软件版 ...
- C# 解析 json Newtonsoft果然强大,代码写的真好
C# 解析 json JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集. JSON采用完全独立于语言的 ...
- eclipse 新项目导入到tfs 步骤
为了下次导入项目 不动脑子,写下此步骤.... 1.右键要导入的项目>> share project(如果有这项就点它,然后 进入 分享至你的tfs服务器即可) 1.右键要导入的项目> ...
- Hadoop高级培训课程大纲-管理员版
一.课程概述 本次培训课程主要面向大数据系统管理人员和开发设计人员,基于开源社区大数据应用最活跃的Hadoop和HBase技术框架.围绕分布式文件存储(HDFS).分布式并行计算(Map/Recue) ...
- jmeter监控服务器的方法
先下载Jmeter资源监控插件,我的百度云jmeter视频里面有说. 地址如下: JMeterPlugins-Standard-1.3.1.zip 下载 https://jmeter-plugins ...
- 关于UC、火狐、谷歌浏览器屏蔽布局中广告的解决办法
关于UC浏览器屏蔽了广西人才网的名企.品牌.热点的logo,是因为当成广告过滤掉了,以后div的class和id不能以“ad”开头.这可能只是其中一个规则,adxxxx是可以的,不能是adXxxx, ...
- (jsp/html)网页上嵌入播放器(常用播放器代码整理) http://www.jb51.net/article/37267.htm
网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助 这个其实很简单,只要在HTML上添加以上代码就O ...