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控件的初始化。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>testDemo</title>
<!--资源初始化
libs 包含绝大部分的控件，并支持在多设备上运行，适配多种分辨率
theme 加载主题
compatvision:"edge"(允许使用UI5的最新功能)
resourceroots:资源路径 指定了别名，空代表了根路径，比如下面的加載圖片，就可以省略前綴，直接寫webapp下的image路徑了
-->
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"testDemo": "","sap.ui.demo.mock":"mockdata"}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
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");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>index.html页面要显示的内容为xml文件
view.view.xml
<mvc:View controllerName="demo.controller.view" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<!--设置别名 l core mvc-->
<!--页面布局-->
<l:VerticalLayout
class="sapUiContentPadding"
width="100%">
<l:content>
<mvc:XMLView viewName="demo.view.inputDemo"></mvc:XMLView><!--加载 demo项目的view文件夹下的inputDemo文件-->
<mvc:XMLView viewName="demo.view.listDemo"></mvc:XMLView>
<mvc:XMLView viewName="demo.view.popupDemo"></mvc:XMLView>
<mvc:XMLView viewName="demo.view.tileDemo"></mvc:XMLView>
</l:content>
</l:VerticalLayout>
<!-- <App>
<pages>
<Page title="{i18n>title}">
<content></content>
</Page>
</pages>
</App>-->
</mvc:View>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
<script>
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");
});
</script>