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修改:

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有所帮助。

相关推荐
烛阴1 天前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
前端Hardy1 天前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy1 天前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙1 天前
替代 Object.freeze 的精准只读模式
前端·javascript
小菜全1 天前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
白水清风1 天前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy1 天前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
车口1 天前
滚动加载更多内容的通用解决方案
javascript
艾小码1 天前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
Jedi Hongbin1 天前
Three.js shader内置矩阵注入
前端·javascript·three.js