SAP之FIORI(5)-对话框与提示框

SAP之FIORI(5)-对话框与提示框

Dialog

常用属性:

escapeHandler:当点击Escape时的处理方式，默认为关闭对话框 draggable：对话框是否可拖动 horizontalScrolling：当内容大于对话框的宽度，出现水平滚动条 verticalScrolling：当内容大于对话框的宽度，出现垂直滚动条 resizable:对话框是否可调整大小 showHeader：对话框头部是否可见 state：图标状态和颜色 stretch:是否拉伸显示 常用事件 afterClose afterOpen beforeClose beforeOpen

 

Popover 常用属性 placement:Popover 显示位置 "Top"，“Bottom”，"Left"，“Right” showArrow:箭头可见 modal：是否无法点击Popover下的窗口  

Msaage Box 常用方法 alert，confirm，error，information，show，success，warning

 

Msaage Strip 可以在应用中嵌入消息的控件 customIcon :自定义图标 enableFormattedText :是否可以使用html标签  

项目名

newDemo

manifest.json

	"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

fragment/Popover.fragment.xml

mockdata/products.json

{
	"ProductCollection":[
	{
		"ProductId":"HT-1002",
		"Category":"Laptops",
		"MainCategory":"Computer Systems",
		"Name":"Notebook Basic 2",
		"Description":"otebook Basic 2 80 GHz",
	    "ProductPicUrl":"img/timg.jpg",
		"Quantity":10
	},
	{
		"ProductId":"HT-1003",
		"Category":"Laptops",
		"MainCategory":"Computer Systems",
		"Name":"Notebook Basic 3",
		"Quantity":11
	},
	{
		"ProductId":"HT-1005",
		"Category":"Laptops",
		"MainCategory":"Computer Systems",
		"Name":"Notebook Basic 5",
		"Quantity":12
	},
	{
		"ProductId":"HT-1006",
		"Category":"Laptops",
		"MainCategory":"Computer Systems",
		"Name":"Notebook Basic 6",
		"Quantity":13
	},
	{
		"ProductId":"HT-1007",
		"Category":"Laptops",
		"MainCategory":"Computer Systems",
		"Name":"Notebook Basic 7"
	},
	{
		"ProductId":"HT-1001",
		"Category":"Laptops",
		"MainCategory":"Computer Systems",
		"Name":"Notebook Basic 1",
		"Quantity":14
	},
	{
		"ProductId":"HT-1008",
		"Category":"Laptops",
		"MainCategory":"Computer Systems",
		"Description": "Notebook Basic 15 with 2,80GHz",
		"ProductPicUrl":"img/1.jpg",
		"Name":"Notebook Basic 8",
		"Quantity":15
	},
	{
		"ProductId":"HT-1009",
		"Category":"Laptops",
		"MainCategory":"Computer Systems",
		"Name":"Notebook Basic 9",
		"Quantity":16
	}
	],
	"ProductCollectionStats":{
		"Counts":{
			"Total":123,
			"Weight":{
				"Ok":53,
				"Heavy":51,
				"Overweight":19
			}
		},
		"Groups":{
			"Category":{
				"Accessproes":34
			}
		}
	}
}

img/timg.jpg

popupDemo.view.xml

popup.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"jquery.sap.global",
	"sap/m/Button",
	"sap/m/List",
	"sap/m/Dialog",
	"sap/m/StandardListItem",
	"sap/m/MessageBox",
	"sap/ui/core/Fragment",
	"sap/m/MessageStrip",
	"sap/m/MessageToast"
], function(Controller,JSONModel,jQuery,Button,List,Dialog,StandardListItem,MessageBox,Fragment,MessageStrip,MessageToast) {
	"use strict";

	return Controller.extend("newDemo.controller.popup", {
    onInit:function(evt){
    	//List中的内容从json文件中获取
        var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
        this.getView().setModel(oModel);
        
       /*this.getView().setModel(new JSONModel({
       	"default":"Default(Information)with default ",
       	"error":"Error"
       }));*/
    },
    pressDialog:null,
    onDialogPress:function(){
    	if(!this.pressDialog){
    		this.pressDialog = new Dialog({
    			title:"Available Products",
    			contentWidth:"550px",
    			contentHeight:"300px",
    			//resizable:true,
    			//draggable:true,
    			//state:"Warning",
    			stretch:true,
    			content:new List({
    				items:{
    					path:'/ProductCollection',
    					template:new StandardListItem({
    						title:"{Name}",
    						counter:"{Quantity}"
    					})
    				}
    			}),
    			beginButton:new Button({
    				text:"Submit",
    				press:function(){
    					alert("Submit pressed")
    					this.pressDialog.close();
    				}.bind(this)
    			}),
    			endButton:new Button({
    				text:"Cancel",
    				press:function(){
    					this.pressDialog.close();
    				}.bind(this)
    			})
    		});
    		this.getView().addDependent(this.pressDialog);
    	}
    	this.pressDialog.open();
    },
    //Popove
    onPopoverPress:function(oEvent){
    	if(!this._oPopover){
    		this._oPopover = sap.ui.xmlfragment("newDemo.fragment.Popover", this);
    		this.getView().addDependent(this._oPopover);
    		this._oPopover.bindElement("/ProductCollection/0");
    	}
    		this._oPopover.openBy(oEvent.getSource());
    },
    handleBeforeCloseEvent:function(oEvent){
    	alert("Before Close")
    },
    handleAfterCloseEvent:function(oEvent){
    		alert("After Close")
    },
    onMessageBoxErrorPress:function(evt){
    	MessageBox.error("The quantity you have reported",{});
    },
    onMessageBoxConfirmPress:function(evt){
    	MessageBox.confirm("Approve purchase order 12345?.",{
    		actions:["Confirm","Cancel"],
    		onClose:function(sAction){
    			alert("Action select"+sAction)
    		}
    	})
    },
    
    //Message Strip
    showMsgStrip:function(){
    	var oMs = sap.ui.getCore().byId("msgStrip");
    	if(oMs){
    		oMs.destroy();
    	}
    	this._generateMsgStrip();
    },
    _generateMsgStrip:function(){
    	var aTypes = ["Information","Warning","Error","Success"],
    	oVC = this.byId("oVerticalContent"),
    	oMsgStrip= new MessageStrip("msgStrip",{
    		text:"Rondom",
    		showCloseButton:!(Math.round(Math.random())),
    		showIcon:!(Math.round(Math.random())),
    		type:aTypes[Math.round(Math.random()*4)]
    	});
    	oVC.addContent(oMsgStrip);
    },
    handleMessageToastPress:function(oEvent){
    	var msg = "Toast";
    	MessageToast.show(msg,{
    		duration:10000,
    		at:"center bottom"
    	});
    }
    
	});
});

效果