SAP's FIORI (5) - dialog and message box
Dialog
Common attributes:
escapeHandler: When handling method clicks the Escape, the default is off dialog
draggable: whether the dialog drag
horizontalScrolling: When the width is greater than the content of the dialog box, scroll horizontally
verticalScrolling: When the width is greater than the content of the dialog, appears vertical scrolling Article
resizable: whether the dialog box can be resized
showHeader: dialog head is visible
state: status icons and color
stretch: stretch show whether
common events
afterClose
afterOpen
the BeforeClose
beforeOpen
Popover
common attributes
placement: Popover the position of the "Top", "Bottom", "Left", "Right"
showArrow: Arrow visible
modal: whether the window can not click at the Popover
Msaage Box
常用方法
alert，confirm，error，information，show，success，warning
Msaage Strip
can be embedded in an application message control
customIcon: Custom Icons
enableFormattedText: Can I use html tags
title
newDemo
manifest.json
"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.popupDemo"/><!--加载 demo项目的view文件夹下的inputDemo文件-->
</l:content>
</l:VerticalLayout>
</mvc:View>view.controller.js
<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.popupDemo"/><!--加载 demo项目的view文件夹下的inputDemo文件-->
</l:content>
</l:VerticalLayout>
</mvc:View>fragment/Popover.fragment.xml
<core:FragmentDefinition
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core">
<Popover
title="{Name}"
class="sapUiContentPadding"
placement="Bottom" contentWidth="300px" resizable="true" modal="true"
beforeClose="handleBeforeCloseEvent" afterClose="handleAfterCloseEvent">
<l:VerticalLayout class="sapUiContentPadding" width="100%">
<Image src="{ProductPicUrl}" width="15em" densityAware="false"/>
<Text text="{Description}"/>
</l:VerticalLayout>
</Popover>
</core:FragmentDefinition>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
<mvc:View controllerName="newDemo.controller.popup"
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>
<Button
text ="Dialog"
width="230px"
press="onDialogPress"
class="sapUiSmallMarginBottom" />
<Button
text ="Popover"
width="230px"
press="onPopoverPress"
class="sapUiSmallMarginBottom"
/>
<Button
text ="Message Box Error"
width="230px"
press="onMessageBoxErrorPress"
class="sapUiSmallMarginBottom"
/>
<Button
text ="Message Box Confirm"
width="230px"
press="onMessageBoxConfirmPress"
class="sapUiSmallMarginBottom"
/>
<MessageStrip text="Default (Information) with default icon and close button:"
showIcon="true" showCloseButton="true" class="sapUiMediumMarginBottom"></MessageStrip>
<MessageStrip text="Error (Information) with default icon and close button:"
type="Error" showIcon="true" showCloseButton="true" class="sapUiMediumMarginBottom"></MessageStrip>
<MessageStrip text="Warning (Information) with default icon and close button:"
type="Warning" showIcon="true" showCloseButton="true" class="sapUiMediumMarginBottom"></MessageStrip>
<MessageStrip text="Success (Information) with default icon and close button:"
type="Success" showIcon="true" showCloseButton="true" class="sapUiMediumMarginBottom"></MessageStrip>
<MessageStrip text="Information (Information) with default icon and close button:"
type="Information" showIcon="true" showCloseButton="true" class="sapUiMediumMarginBottom"></MessageStrip>
<MessageStrip text="{/default}"
type="Success" showIcon="true" showCloseButton="true" class="sapUiMediumMarginBottom"></MessageStrip>
<MessageStrip text="{/error}"
type="Information" showIcon="true" showCloseButton="true" class="sapUiMediumMarginBottom"></MessageStrip>
<l:VerticalLayout class="" id="oVerticalContent" width="100%">
<l:content>
<Button text="Generate MessageStrip" class="sapUi5SamllMarginBottom" press="showMsgStrip" width="250px"/>
</l:content>
</l:VerticalLayout>
<Button
text="Show Message Toast"
press="handleMessageToastPress"/>
</l:content>
</l:VerticalLayout>
</mvc:View>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<em>(Information)</em>with default ",
"error":"<strong>Error</strong>"
}));*/
},
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"
});
}
});
});effect
