SPA Fiori开发实战课程（一）

前言

由于工作需要，对Fiori的开发有了一些具体实践，所以做一些记录和总结。

准备工作

1. 对前端有一定的了解，熟悉Node.js，Vue等前端服务器和基础框架。

2. 后端使用ABAP系统。

3. 使用Visual Studio Code进行开发。

工程搭建

打开Visual Studio Code，点击View->Command Palette...，鼠标左键。

然后Visual Studio Code中间会弹出选择框，输入Fiori：

选择Fiori:Open Application Generator:

会发现有很多模板，可以根据自己需求选择，这里主要是demo，所以选择Basic即可，点击Next：

这里要填写正确的url，找ABAP后端要，只有输入了正确的url地址，用户名和密码才能显示出来，输入正确的用户名和密码，点击登录，再点击Next进去下一步。

给Fiori默认初始化页面一个值，这里使用默认的View1。

点击下一步，这里主要是选择项目路径和SAPUI5的版本，这里选择最新版本：

点击Finish完成Demo功能的创建。

这里说下，完成初始化需要一些时间，不要关闭Visual Studio Code，需要等待右下角的依赖安装完成。

启动项目

在新项目根路径下，执行npm run start命令：

启动后界面：

这里外面新增一个清单，需要在webapp/view/View1.view.xml修改：

<mvc:View controllerName="project1.controller.View1"xmlns:mvc="sap.ui.core.mvc" displayBlock="true"xmlns="sap.m"><Page id="page" title="{i18n>title}"><content><Listitems="{/ProductCollection}"headerText="Products"><ObjectListItemtitle="{Name}"type="Active"press="onListItemPress"number="{parts:[{path:'Price'},{path:'CurrencyCode'}],type: 'sap.ui.model.type.Currency',formatOptions: {showMeasure: false}}"numberUnit="{CurrencyCode}"><firstStatus><ObjectStatustext="{Status}"state="{path: 'Status',formatter: 'project1.controller.Formatter.status'}" /></firstStatus><ObjectAttribute text="{WeightMeasure} {WeightUnit}" /><ObjectAttribute text="{Width} x {Depth} x {Height} {DimUnit}" /></ObjectListItem></List></content></Page>
</mvc:View>

这里的xml相当于html页面，还需要配置对应的后台逻辑，在webapp/controller/View1.controller.js修改：

sap.ui.define(["sap/ui/core/mvc/Controller",'sap/m/MessageToast','./Formatter','sap/ui/model/json/JSONModel'
],/*** @param {typeof sap.ui.core.mvc.Controller} Controller*/function (Controller, MessageToast, Formatter, JSONModel) {"use strict";return Controller.extend("project1.controller.View1", {onInit: function () {var oModel = new JSONModel({ProductCollection: [{"ProductId": "HT-1000","Category": "Laptops","MainCategory": "Computer Systems","TaxTarifCode": "1","SupplierName": "Very Best Screens","WeightMeasure": 4.2,"WeightUnit": "KG","Description": "Notebook Basic 15 with 2,80 GHz quad core, 15\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro","Name": "Notebook Basic 15","DateOfSale": "2017-03-26","ProductPicUrl": "https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1000.jpg","Status": "Available","Quantity": 10,"UoM": "PC","CurrencyCode": "EUR","Price": 956,"Width": 30,"Depth": 18,"Height": 3,"DimUnit": "cm"},{"ProductId": "HT-1001","Category": "Laptops","MainCategory": "Computer Systems","TaxTarifCode": "1","SupplierName": "Very Best Screens","WeightMeasure": 4.5,"WeightUnit": "KG","Description": "Notebook Basic 17 with 2,80 GHz quad core, 17\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro","Name": "Notebook Basic 17","DateOfSale": "2017-04-17","ProductPicUrl": "https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1001.jpg","Status": "Available","Quantity": 20,"UoM": "PC","CurrencyCode": "EUR","Price": 1249,"Width": 29,"Depth": 17,"Height": 3.1,"DimUnit": "cm"}]});this.getView().setModel(oModel);},onListItemPress: function (oEvent) {MessageToast.show("Pressed : " + oEvent.getSource().getTitle());}});});

controller文件夹下Formatter.js：

sap.ui.define(function() {"use strict";var Formatter = {status :  function (sStatus) {if (sStatus === "Available") {return "Success";} else if (sStatus === "Out of Stock") {return "Warning";} else if (sStatus === "Discontinued"){return "Error";} else {return "None";}}};return Formatter;},  /* bExport= */ true);

然后前端显示为：