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

<!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:VerticalLayoutclass="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:VerticalLayoutclass="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"><Popovertitle="{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:VerticalLayoutclass="sapUiContentPadding"width="100%"><l:content><Buttontext ="Dialog"width="230px"press="onDialogPress"class="sapUiSmallMarginBottom" /><Buttontext ="Popover"width="230px"press="onPopoverPress"class="sapUiSmallMarginBottom"/><Buttontext ="Message Box Error"width="230px"press="onMessageBoxErrorPress"class="sapUiSmallMarginBottom"/><Buttontext ="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><Buttontext="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();},//PopoveonPopoverPress: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 StripshowMsgStrip: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"});}});
});

效果

SAP之FIORI(5)-对话框与提示框相关推荐

仿windows关机对话框的提示框效果
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2<HTML>3<HEA ...
php js对话框,JavaScript_js弹出框、对话框、提示框、弹窗实现方法总结(推荐)，一、JS的三种最常见的对话框- phpStudy...
js弹出框.对话框.提示框.弹窗实现方法总结(推荐) 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ==================== ...
（转）基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化...
http://www.cnblogs.com/wuhuacong/p/4775282.html 在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验 ...
JavaScript弹出框、对话框、提示框、弹窗总结
JavaScript弹出框.对话框.提示框.弹窗总结. 1.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 =================== ...
php点击文字弹出js提示框,js弹出框、对话框、提示框、弹窗实现方法总结(推荐)...
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ========================//弹出对话框并输出一段提示信息functio ...
弹出框之对话框和提示框，可共用代码
弹出框: //对话框,title是标题文字,content是提示框内容,test是一个function(点击确定按钮触发的事件) function dialogBox(title,content,te ...
java弹出浏览器提示框_js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
html关闭页面弹出再见信息提示框,js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框//====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 functi ...

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

SAP之FIORI(5)-对话框与提示框相关推荐

最新文章

热门文章