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

相关推荐
熊的猫42 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc3 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9153 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼4 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨5 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山10 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄11 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript