SAP之FIORI(1)-绪论

SAP之FIORI(1)-绪论

web-IDE的下载地址：

https://tools.hana.ondemand.com/#sapui5

下载好运行之后orion.exe之后登录网址

http://localhost:8080/webide/index.html

便可以使用web-ide进行sap的开发了

 

SAP Fiori是SAP软件和应用程序的最新用户体验(UX)标准，以用户为中心，适应不同的终端。基于SAP UI5框架开发出符合Fiori风格的各种Apps，被称为SAP Fiori Apps。

常见的SAP UI5控制库

sap.ui.commons - 文本字段、按钮、字体等控件。

sap.ui.table - 表控件。

sap.ui.ux3 - 包括UX3模式的属性。

sap.m - 移动端设备(手机、平板电脑)等的控制。

 

SAP Fiori用户设计原则

1、基于角色 分解各种SAP事务，只向用户显示最相关的信息。

2、跨平台响应 支持各种屏幕尺寸，运行设备。

3、无缝体验 SAP提供了基于相同语言的所有Fiori应用程序，在步数和平台上无所谓。

4、易于部署 易于步数在现有的SAP系统上。

 

Code Formatting

1、每句代码结尾加";"。

2、圆括号前后无空格(方法调用、方法参数)

3、if/else/for/while/do/switch/try/catch/finally后，"{}" 前后，运算符前后，逗号后添加空格。

4、方法、for、if-else、swith后的"{" 不换行。

5、用"===" 和 "!=="代替"==" 和"!="

 

Hello World 案例

在web-ide中 New -> Project for Template ->SAPUI5 Application 就会生成一个模板项目了

让我们看一下默认生成了什么

项目名为demo

view.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";
   //表示的是demo项目下的controller文件夹下的名称为view的文件
	return Controller.extend("demo.controller.view", {

	});
});

index.html

attachInit方法中的参数(匿名方法)作为一个回调函数，当core的Init事件被触发时调用，开始 SAP UI5控件的初始化。

	
		
		

		testDemo

         
		
		

		

		
			sap.ui.getCore().attachInit(function() {
				/*new sap.m.Shell({
					app: new sap.ui.core.ComponentContainer({
						height : "100%",
						name : "testDemo"
					})
				}).placeAt("content");*/
				//定义相应事件的处理函数
				var onPressImage = function(oEvent){
					var oSrc = oEvent.getSource();
					var sId = oSrc.getId();
					if(sId==="imgId"){
					alert("Hello World");
					alert("oEvent.getSource().getId()");
					}
				};
				//图片的显示 
				var oImage = new sap.m.Image("imgId",{
					src : "img/UI5_logo.png",
					alt : "SAPUI5 Logo",
					press : onPressImage
				})
				oImage.placeAt("content");
			});
		
	

	
	

index.html页面要显示的内容为xml文件

view.view.xml

manifest.json

设置项目的住展示页面为demo.view.view

{
	"_version": "1.7.0",
	"sap.app": {
		"id": "demo",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"sourceTemplate": {
			"id": "ui5template.basicSAPUI5ApplicationProject",
			"version": "1.40.12"
		}
	},

	"sap.ui": {
		"technology": "UI5",
		"icons": {
			"icon": "",
			"favIcon": "",
			"phone": "",
			"phone@2": "",
			"tablet": "",
			"tablet@2": ""
		},
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": [
			"sap_hcb",
			"sap_belize"

		]
	},

	"sap.ui5": {
		"rootView": {
			"viewName": "demo.view.view", 
			"type": "XML"
		},
		"dependencies": {
			"minUI5Version": "1.30.0",
			"libs": {
				"sap.ui.core": {},
				"sap.m": {},
				"sap.ui.layout": {},
				"sap.ushell": {},
				"sap.collaboration": {},
				"sap.ui.comp": {},
				"sap.uxap": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "demo.i18n.i18n"
				}
			}
		},
		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		}
	}
}

 

就可以展示图片了

index.html

		
			sap.ui.getCore().attachInit(function() {
				/*new sap.m.Shell({
					app: new sap.ui.core.ComponentContainer({
						height : "100%",
						name : "All"
					})
				}).placeAt("content");*/
				var oText = sap.m.Text({text:"Hello world"})
				oText.placeAt("content");
			});