SAP之FIORI(2)-SAP的基本控件
基本的组件
项目名称为newDemo
manifest 根页面
"sap.ui5": {
"rootView": {
"viewName": "newDemo.view.view",
"type": "XML"
},
}index.html
要进行显示的页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>demo</title>
<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='{"newDemo":"","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 : "demo"
})*/
//input demo
//demo为项目名
new sap.m.App({
pages : [
new sap.m.Page({
title : "SAP UI5",
enableScrolling:true,
content:[
new sap.ui.core.ComponentContainer({
name:"newDemo",
settings:{
id:"newDemo"
}
})
]
})
]
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
view.view.xml
根布局页面
<mvc:View controllerName="newDemo.controller.view"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<l:VerticalLayout
class="sapUiContentPadding"
width="100%">
<l:content>
<mvc:XMLView viewName="newDemo.view.inputDemo"/><!--加载 demo项目的view文件夹下的inputDemo文件-->
</l:content>
</l:VerticalLayout>
</mvc:View>
view.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("newDemo.controller.view", {
});
});
加载的页面
inputDemo.view.xml
<mvc:View controllerName="newDemo.controller.input"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Panel
class="sapUiContentPadding"
width="100%">
<l:VerticalLayout
class="sapUiContentPadding"
width="100%">
<l:content>
<Label text="Text" labelFor = "inputText"/>
<Input
id="inputText"
required="true"
maxLength = "10"
class = "sapUiSmallMarginBottom"
placeholder="Enter Text..."
width="300px"/>
<Label text="Password" labelFor = "pwdId"/>
<Input
id="pwdId"
type="Password"
placeholder="Enter Password..."
width="300px"/>
<Label text="Name" labelFor = "nameInput"/>
<Input
id="nameInput"
class = "sapUiSmallMarginBottom"
type="Text"
placeholder="Enter Name..."
width="300px"
value="{
path : '/name',
type : 'sap.ui.model.type.String',
constraints : {
minLength :1,
maxLength :10
}
}"/>
<Label text="Name2" labelFor = "nameInput2"/>
<Input
id="nameInput2"
class = "sapUiSmallMarginBottom"
placeholder="Enter Name..."
width="300px"
type="Text"
tooltip= "大小：10000至99999"
value="{
path : '/name2',
type : 'sap.ui.model.type.Integer',
constraints : {
minLength :1,
maxLength :10,
minIntegerDigits: 5,
maxIntegerDigits: 5,
minimum:10000,
maximum:99999
}
}
"
/>
<Label text="Email" labelFor = "emailInput"/>
<Input
id="emailInput"
class = "sapUiSmallMarginBottom"
placeholder="Email Name..."
width="300px"
type="Text"
change="handleChangeEvent"
liveChange="handleLiveChangeEvent"
/>
<Text text="An example of a radio group"/>
<RadioButtonGroup columns="3" selectedIndex="4" select="handleSelectEvent">
<buttons>
<RadioButton text="Option 1" enabled="false"/>
<RadioButton text="Option 2" enabled="false"/>
<RadioButton text="Option 3" />
<RadioButton text="Option 4" enabled="false"/>
<RadioButton text="Option 5" enabled="false"/>
</buttons>
</RadioButtonGroup>
<Label text="Please Choose:"/>
<CheckBox id="OptionAId" text = "Option a" selected="true" select="handleCheckBoxSelectEvent"/>
<CheckBox id="OptionBId" text = "Option b" useEntireWidth="false" width="60px"/>
<CheckBox text = "Option c" selected="true" useEntireWidth="true" width="60px"/>
<CheckBox text = "Option d"/>
<CheckBox text = "Option e" enabled="false"/>
<CheckBox text = "Warning" valueState="Warning"/>
<CheckBox text = "Error" valueState="Error"/>
<Select width="150px" selectedKey = "b" autoAdjustWidth="true" change="handleSelectChangeEvent">
<core:Item key="a" text="a1"/>
<core:Item key="b" text="b2aaaaaaaaaaaaaaaaa"/>
<core:Item key="c" text="c3aaaaaaaaaaaaaaaaa"/>
</Select>
<Select selectedKey="{/ProductCollection/0/ProductId}"
items="{
path:'/ProductCollection',
sorter:{path:'Name'}
}" >
<core:Item key = "{productId}" text="{Name}"/>
</Select>
<TextArea width="500px" growingMaxLines="10"
rows="5" growing="true" maxLength="10"/>
<DatePicker id="sdp" width = "150px" displayFormat="short"
valueFormat="yyyy-MM-dd" change="handleDateChangeEvent"/>
</l:content>
</l:VerticalLayout>
</Panel>
</mvc:View>
input.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller,JSONModel) {
"use strict";
return Controller.extend("newDemo.controller.input", {
onInit:function(evt){
var oView = this.getView();
oView.setModel(new JSONModel({
name :"aa",
name2 :22222222222
}));
//MessageManage 校验数据
sap.ui.getCore().getMessageManager().registerObject(oView.byId("nameInput2"), true);
//下拉列表内容从Json中获取
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
//日期初始化
this.getView().byId("sdp").setDateValue(new Date());
this.getView().byId("sdp").setMinDate(new Date(2019,1,10));
this.getView().byId("sdp").setMaxDate(new Date(2020,1,10));
//this.getView().byId("sdp").setInitialFocusedDateValue(new Date(2018,9,29));
},
handleChangeEvent:function(evt){
alert(evt.getParameter("value"));
},
handleLiveChangeEvent:function(evt){
alert(evt.getParameter("value"));
},
handleSelectEvent:function(evt){
alert(evt.getParameter("selectedIndex"));
},
handleCheckBoxSelectEvent:function(evt){
alert(evt.getParameter("selected"));
alert(evt.getSource().getText());
},
handleSelectChangeEvent:function(evt){
alert(evt.getParameter("selectedItem").getKey()+"<->"+evt.getParameter("selectedItem").getText());
},
handleDateChangeEvent:function(evt){
alert(evt.getParameter("value"));
}
});
});
mockdata/products.json
{
"ProductCollection":[
{
"ProductId":"HT-1000",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 2"
},
{
"ProductId":"HT-1000",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 3"
},
{
"ProductId":"HT-1000",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 5"
},
{
"ProductId":"HT-1000",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 6"
},
{
"ProductId":"HT-1000",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 7"
},
{
"ProductId":"HT-1000",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 1"
},
{
"ProductId":"HT-1000",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 8"
},
{
"ProductId":"HT-1000",
"Category":"Laptops",
"MainCategory":"Computer Systems",
"Name":"Notebook Basic 9"
}
],
"ProductCollectionStats":{
"Counts":{
"Total":123
},
"Groups":{
"Category":{
"Accessproes":34
}
}
}
}输出：
输入框
单选、多选框
