前言
由于工作需要,对Fiori的开发有了一些具体实践,所以做一些记录和总结。
准备工作
对前端有一定的了解,熟悉Node.js,Vue等前端服务器和基础框架。
后端使用ABAP系统。
使用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修改:
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>
<List
items="{/ProductCollection}"
headerText="Products">
<ObjectListItem
title="{Name}"
type="Active"
press="onListItemPress"
number="{
parts:[{path:'Price'},{path:'CurrencyCode'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {showMeasure: false}
}"
numberUnit="{CurrencyCode}">
<firstStatus>
<ObjectStatus
text="{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修改:
javascript
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:
javascript
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);
然后前端显示为:
结论
以实际ABAP后端为依托,新建了一个Fiori项目,运行、启动,并在首页做了一个简单的List清单,希望对你了解Fiori有所帮助。