SAP Fiori · Small Fire

原文：Small Fire · SAPUI5 Message · SAP Fiori 子专栏 · Small Fire 技术笔记 消息设置 sap.m.MessageBox SAPUI5 提供的对话框，可以显示信息、警告、错误等等。MessageBox 类是静态类，在使用之前必须执行 jQuery.sap.require("sap.m.MessageBox") 语句 SAPUI5 包含 jQuery 包，jQuery.sap.require(vModuleName) 方法的作用是加载指定的模块并且执行，这样 MessageBox 的 show() 方法才能运行。 sap.m.MessageBox.alert(vMessage, mOptions*?*) 对话框显示消息，有一个OK按钮（“确定”），没有图标 sap.m.MessageBox.confirm(vMessage, mOptions*?*) 确认对话框，询问是否确定，有一个OK按钮和Cancel按钮，一个问号的图标。 sap.m.MessageBox.error(vMessage, mOptions*?*) 显示错误对话框，带有错误图标和关闭按钮Displays an error dialog with the given message, an ERROR icon, a CLOSE button。 sap.m.MessageBox.information(vMessage, mOptions*?*) 消息对话框，带有INFO图标和OK按钮。 sap.m.MessageBox.show(vMessage, mOptions*?*) 显示对话框，类型为sap.m.DialogType.Message，图标和按钮由开发人员自行定义，相对灵活一些。 sap.m.MessageBox.success(vMessage, mOptions*?*) 显示成功对话框，带有SUCCESS图标和OK按钮。 sap.m.MessageBox.warning(vMessage, mOptions*?*) 显示警告消息，带有WARNING图标和OK按钮。 sap.m.MessageToast.show()对用户操作提供一种简单的反馈，并且经过一段时间后自动消失，除非用户将鼠标放在消息上面。

原文：Small Fire · SAPUI5 Mock Server · SAP Fiori 子专栏 · Small Fire 技术笔记 Mock server 在开发过程中，通过使用模拟服务器的方法方便测试，SAPUI5 将模拟服务器称为 mock server.mock server 的基本功能是模拟 oData 数据的提供者，截获应用程序对服务器端的 http 或 https 请求，并传回模拟请求的回应，可以降低与真实后端的耦合。

原文：Small Fire · SAPUI5 Routing 导航 · SAP Fiori 子专栏 · Small Fire 技术笔记 Routing导航 Openui5 的 routing 基于模式 ( pattern )，使用 # 符号表示不同的路径 ( route )，导航通过路径的改变来实现。 Pattern 表达式 Openui5 一共有 5 种 pattern表达式: 硬编码模式 : 页面之间根据模式导航，没有参数传递，比如 product/settings 表示导航到产品配置。 路径含有必输参数模式 : 模式中 大括号({}) 包含的部分表示参数必须输入。比如 product/{id} 表示导航到产品某一 id，比如 product/5 表示 id 为 5 的产品，id 为必输。 路径含有可选参数模式 : 模式中 冒号 包含的部分为必输参数。比如 product/{id}/detail/:detailId:，detailId 为可选参数。product/5/detail 以及 product/3/detail/2 都能与此模式匹配。 路径含有查询参数模式 : 查询参数 ( query parameter ) 在问号之后。比如 product{?query}，query 这个参数为必输项。product:?query: 中的 query 这个参数为可选参数。 通配参数模式 :以星号结尾的参数是通配参数，通配参数将根据模式尽可能匹配。 导航调用 父导航 ...

原文：Small Fire · SAPUI5 数据绑定 · SAP Fiori 子专栏 · Small Fire 技术笔记 Model Binding 单数据绑定 使用数据绑定前 需要先实例化Model。构造函数获取实例的 URL 或则数据本身作为第一个参数。 JSON-Model: var oModel = new sap.ui.model.json.JSONModel(dataUrlOrData); XML-Model: var oModel = new sap.ui.model.xml.XMLModel(dataUrlOrData); OData-Model: var oModel = new sap.ui.model.odata.ODataModel(dataUrl[,userJSON,user,pass]); 给 Model 设置值 oModel.setData(data);：绑定定义的数据 oModel.loadData(“models/suppliers.json”);：从文件中读取数据绑定 将 Model 分配给 Core 或则其他的控制器（setModel）方法 Global model: sap.ui.getCore().setModel(oModel) : 这样oModel对整个应用程序可见 Bind a model to a view var oView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS,viewName:"text.view"}) oView.setModel(oModel); Bind a model to a specific control var oTable = sap.ui.getCore().byId("table"); oTable.setModel(oModel); Model属性绑定方法（{ } curly braces，bindProperty()） 控件的大多数属性都可以绑定到模型属性。 ...

原文：Small Fire · SAPUI5 模块化 · SAP Fiori 子专栏 · Small Fire 技术笔记 模块化 如何加载模块 jQuery.sap.declare(sModuleName,bCreateNamespace)申明一个模块，以确保模块存在。这个语句必须出现在 模块代码（也就是代码文件)的第一句。 jQuery.sap.require(vModuleName)确保当前代码继续之前，所指定的模块被加载和执行。如果所需要的模块没有被加载，将会被同步加载和执行，如果已经加载，就忽略。 sap.ui.define(sModuleName,aDependencies,vFactory,bExport)定义module，异步加载依赖模块,sap.ui.define()定义的模块具有全局命名空间。2:定义依赖 3:继承工厂函数。 sap.ui.require()异步加载依赖的模块，不具有全局命名空间。 使用模块方法实现Controller sap.ui.define( ["Dependencies1","Dependencies2"], function(Controller){ "use strict"; return Controller.extend("ControllerName",{ onInit:function(){}, onBeforeRendering:function(){}, onAfterRendering:function(){}, onExit:function(){} }); } ); 参数1 : 不定义，便于对模块进行访问 参数2 : 指定依赖的模块，可指定多个 参数3 : 定义工厂函数，实现Controller功能

原文：Small Fire · SAPUI5 数据类型和操作 · SAP Fiori 子专栏 · Small Fire 技术笔记 数据类型和操作 基本数据类型 sap.ui.model.type.Integer(oFormatOptions?, oConstraints?):支持minimum,maximum sap.ui.model.type.Float(oFormatOptions?, oConstraints?):decimalSeparator定义小数位的分隔符 sap.ui.model.type.String(………) sap.ui.model.type.Boolean sap.ui.model.type.Date : ui5支持原数据为JavaScript和原数据为String的日期数据进行格式输出 sap.ui.model.type.Time : Time也支持原数据为Time类型或者字符串类型 sap.ui.model.type.DateTime 属性设置 尽可能使用数据类型而不是自定义格式化程序。 number="{ parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}], type: 'sap.ui.model.type.Currency', formatOptions: { showMeasure: false } }" 计算字段绑定(parts)：它允许将来自不同模型的多个属性绑定到控件的单个属性。 控件的属性是数字，从两个不同模型检索的绑定属性（“部件”）invoice> ExtendedPrice和view> / currency。 Expression Binding 仅使用表达式绑定进行简单的计算。 numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' } 数据校验 基本使用 sap.ui.core.message.MessageManager(); registerObject(oObject,bHandelValidation)：第一个参数是 ManagedObject 对象的实例；第二个参数是 boolean 类型变量，为 true 时执行数据校验。 ...

原文：Small Fire · SAPUI5 Dialog and Fragment · SAP Fiori 子专栏 · Small Fire 技术笔记 Dialogs and Fragments Fragments 片段是一个轻量级的 UI 部分，它只是一组重用控件的容器。包含一到多个控件，不需要控制器。 定义并调用已存在的 Fragments : “sap/ui/core/Fragment” 定义xxx.fragment.xml <core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core"> <Dialog id="helloDialog" title="Hello {/recipient/name}"> <content> <core:Icon src="sap-icon://hello-world" size="80px" class="sapUiMediumMargin"> </core:Icon> </content> <beginButton> <Button text="{i18n>dialogCloseButtonText}" press=".onCloseDialog"></Button> </beginButton> </Dialog> </core:FragmentDefinition> // create dialog lazily if (!this.byId("helloDialog")) { //如果id为helloDialog的Dialog不存在 // load asynchronous XML fragment Fragment.load({ id: oView.getId(), name: "sap.ui.demo.walkthrough.view.HelloDialog", controller:this //函数的回调 }).then(function (oDialog) { // connect dialog to the root view of this component (models, lifecycle) oView.addDependent(oDialog); oDialog.open(); }); } else { this.byId("helloDialog").open(); }, onCloseDialog:function(){ this.byId("helloDialog").close(); } 始终使用addDependent方法将对话框连接到视图的生命周期管理和数据绑定，即使它未添加到其UI树中。 如果片段中的对话框尚不存在，则通过使用以下方法调用sap.ui.xmlfragment方法来实例化片段 ...

原文：Small Fire · SAPUI5 Layout · SAP Fiori 子专栏 · Small Fire 技术笔记 Layout设置 多页面显示和跳转 sap.m.App : 是一个全局对象，可以通过 app.to(sPageId) 跳转到另一个页面。 to(sPageId, sTransitionName ? , oData ? , oTransitionParameters ? ): [sap.m.NavContainer] app.back()则跳回到刚才的page： back(oBackData ? , oTransitionParameters ? ): [sap.m.NavContainer] sap.m.Page中，showNavButton设置为true，就会出现 Navigation 按钮，点击按钮的 event hander 通过 Controller 中onNavPress函数来实现。 var oDetailPage = new sap.m.Page({ showNavButton: true, navButtonPress: [oController.onNavPress, oController], title: "供应商明细", content: [oObjectHeader] }); sap.m.ColumnListItem的 type 必须为 Navigation，否则不能实现跳转。sap.m.ColumnListItem的 press 属性设置为一个数组，这种方法能够保证在 Controller 中，this 表示 Controller 本身，而不是某个控件。 布局类型 sap.ui.layout.HorizontalLayout() : 水平布局 sap.ui.layout.VerticalLayout() : 垂直布局 sap.ui.layout.Grid() : 表格式布局 ...

原文：Small Fire · SAPUI5 概述 · SAP Fiori 子专栏 · Small Fire 技术笔记 SAPUI5 概述 SAPUI5：一套基于 HTML5、CSS3、JavaScript 的开发框架。 SAPUI5 内容 重构的 JavaScript 语法规范，帮助用户使用一致的、规范的语法使用 JavaScript 帮助用户构建大型应用的框架，包括 MVC、数据绑定、路由控制、缓存、组件化、模块化 丰富的基于桌面和移动端的基础 UI 控件 SAP 在开发 Fiori App 过程中积累的可复用的高度封装的 UI 控件 便于页面排版的布局控件 创建自定义控件和整合第三方控件的组件 基于 LESS 框架和主题设计器的 CSS 架构 SAP 核心优势 基于 Web 端开发的一站式解决方案 快速开发，相对高效运行 作为 SAP 未来标准产品使用的 UI 技术，已经经过大量实践验证，稳定可靠 具有大量的参考示例程序，可以快速的编写与 SAP 标准风格类似的应用程序 具有编写大型应用程序所需要的框架和技术 能够完美的整合第三方的 JavaScript 库 开发工具：WebIDE 优势和功能 基于云端，注册就可以使用 具有强大的代码生成 具有所见即所得的视图编辑功能 具有预先定义的样例程序 SAP 支持的控件 桌面控件库 UX3 控件库 表格控件库 移动端控件库 MVC 模式 MVC 是程序设计的思想实现，通过将界面展示，用户操作，程序数据进行分离，降低模块间的耦合性，有利于项目的开发和维护。 ...

原文：Small Fire · SAPUI5 概述 · SAP Fiori 子专栏 · Small Fire 技术笔记 SAPUI5概述 SAPUI5:一套基于HTML5,CSS3,JavaScript的开发框架 SAPUI5包括内容 重构的JavaScript语法规范，帮助用户使用一致的、规范的语法使用JavaScript 帮助用户构建大型应用的框架，包括MVC、数据绑定、路由控制、缓存、组件化、模块化 丰富的基于桌面和移动端的基础UI控件 SAP在开发Fiori App过程中积累的可复用的高度封装的UI控件 便于页面排版的布局控件 创建自定义控件和整合第三方控件的组件 基于LESS框架和主题设计器的CSS架构 SAP核心优势 基于Web端开发的一站式解决方案 快速开发，相对高效运行 作为SAP未来标准产品使用的UI技术，已经经过大量实践验证，稳定可靠 具有大量的参考示例程序，可以快速的编写与SAP标准风格类似的应用程序 具有编写大型应用程序所需要的框架和技术 能够完美的整合第三方的JavaScript库 开发工具：WebIDE 优势和功能 基于云端，注册就可以使用 具有强大的代码生成 具有所见即所得的视图编辑功能 具有预先定义的样例程序 SAP支持的控件 桌面控件库 UX3控件库 表格控件库 移动端控件库 MVC模式 ​ MVC是程序设计的思想实现，通过将界面展示，用户操作，程序数据进行分离，降低模块间的耦合性，有利于项目的开发和维护。 ​ M : Model 代表应用程序的数据 ​ V : View 通过界面展示应用程序的数据和其它界面元素 ​ C : Controller 处理应用程序的数据，以及处理用户的交互 ● Model & View : SAPUI5 有单向绑定和双向绑定两种。通过绑定，当 model 变更时，UI 自动更新。 ● Controlle &View : View 通知 Controller，或者 Controller使用API来修改 View。 ...