SAP之FIORI(2)-SAP的基本控件

SAP之FIORI(2)-SAP的基本控件

基本的组件

项目名称为newDemo

manifest 根页面

	"sap.ui5": {
		"rootView": {
			"viewName": "newDemo.view.view",
			"type": "XML"
		},
     }

index.html

要进行显示的页面

	
		
		

		demo

		
		

		

		
			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");
			});
		
	

	
	

view.view.xml

根布局页面

view.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	return Controller.extend("newDemo.controller.view", {

	});
});

加载的页面

inputDemo.view.xml

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
			}
		}
	}
}

输出：

输入框

单选、多选框