[UI5 常用控件] 10.MessageBox,MessageToast,Illustrated Message,Message Strip,Message View,MessagePopover

文章目录

前言1. MessageBox1.1 类型

2. MessageToast3. IllustratedMessage3.1 enableVerticalResponsiveness3.2 illustrationType3.3 illustrationSize3.4 additionalContent

4. MessageStrip5. MessageView5.1 视图里直接使用5.2 与Popover控件一起使用5.3 与Dialog控件一起使用

6. MessagePopover

前言

本章节记录常用控件 MessageBox,MessageToast,Illustrated Message,Message Strip,Message View,MessagePopover 其路径分别是：

sap.m.MessageBoxsap.m.MessageToastsap.m.IllustratedMessagesap.m.MessageStripsap.m.MessageViewsap.m.MessagePopover

1. MessageBox

此控件一般在Controller中使用。

用法

MessageBox.confirm("Message Here");

1.1 类型

confirm

alert

error

information

warning

success

Custom Action

onConfirmationMessageBoxPress: function () {

MessageBox.confirm("Approve purchase order 12345?");

},

onAlertMessageBoxPress: function () {

MessageBox.alert("The quantity you have reported exceeds the quantity planed.");

},

onErrorMessageBoxPress: function () {

MessageBox.error("Select a team in the \"Development\" area.\n\"Marketing\" isn't assigned to this area.");

},

onInfoMessageBoxPress: function () {

MessageBox.information("Your booking will be reserved for 24 hours.");

},

onWarningMessageBoxPress: function () {

MessageBox.warning("The project schedule was last updated over a year ago.");

},

onSuccessMessageBoxPress: function () {

MessageBox.success("Project 1234567 was created and assigned to team \"ABC\".");

},

onError2MessageBoxPress: function () {

MessageBox.error("Product A does not exist.", {

actions: ["Manage Products", MessageBox.Action.OK, MessageBox.Action.CLOSE],

emphasizedAction: "Manage Products",

initialFocus: "Manage Products",

details: "

This can happen if:

" +

"

" +

"

• You are not connected to the internet
" +

"

• a backend component is not available
" +

"

• or an underlying system is down
" +

"

" +

"

Get more help here.",

onClose: function (sAction) {

sap.m.MessageToast.show("Action selected: " + sAction);

}

});

},

2. MessageToast

Code

onMessageToastPress:function(){

MessageToast.show("Message Toast Clicked");

}

3. IllustratedMessage

IllustratedMessage是一个用于显示带有图标的消息的UI5控件。 它提供了一种可视化的方式来向用户传达信息，并可以帮助用户更好地理解和处理消息。

3.1 enableVerticalResponsiveness

排列布局

enableVerticalResponsiveness="true"

illustrationType="sapIllus-NoMail"

/>

enableVerticalResponsiveness="false"

illustrationType="sapIllus-NoMail"

/>

3.2 illustrationType

预定义的图标样式及文字

3.3 illustrationSize

属性有：Auto，Base，Spot，Dialog，Dot，Scene

3.4 additionalContent

IllustratedMessage内部创建额外的控件

Code

enableVerticalResponsiveness="true"

illustrationType="sapIllus-NoActivities"

>

4. MessageStrip

主要使用的属性有showIcon,showCloseButton,text,type,customIcon

headerText="Message Strip"

width="50%"

>

text="Default (Information) with default icon and close button:"

showIcon="true"

showCloseButton="true"

class="sapUiTinyMarginBottom"

/>

text="Error with default icon and close button:"

type="Error"

showIcon="true"

showCloseButton="true"

class="sapUiTinyMarginBottom"

/>

text="Warning with default icon and close button:"

type="Warning"

showIcon="true"

showCloseButton="true"

class="sapUiTinyMarginBottom"

/>

text="Success with default icon and close button:"

type="Success"

showIcon="true"

showCloseButton="true"

class="sapUiTinyMarginBottom"

/>

text="Information with default icon."

type="Information"

showIcon="true"

class="sapUiTinyMarginBottom"

/>

text="Information with custom icon"

type="Information"

showIcon="true"

customIcon="sap-icon://locked"

class="sapUiTinyMarginBottom"

/>

text="Error with link"

type="Error"

showCloseButton="true"

class="sapUiTinyMarginBottom"

>

text="Open SAP Homepage"

target="_blank"

href="http://www.sap.com"

/>

5. MessageView

5.1 视图里直接使用

Code

type="{msg>type}"

title="{msg>title}"

subtitle="{msg>subtitle}"

description="{msg>description}"

/>

Controller

var aMockMessages = [{

type: 'Error',

title: 'Error message',

active: true,

description: sErrorDescription,

subtitle: 'Example of subtitle',

counter: 1

}, {

type: 'Warning',

title: 'Warning without description',

description: ''

}, {

type: 'Success',

title: 'Success message',

description: 'First Success message description',

subtitle: 'Example of subtitle',

counter: 1

}, {

type: 'Error',

title: 'Error message',

description: 'Second Error message description',

subtitle: 'Example of subtitle',

counter: 2

}, {

type: 'Information',

title: 'Information message',

description: 'First Information message description',

subtitle: 'Example of subtitle',

counter: 1

}];

this.getView().setModel(new JSONModel(aMockMessages), "msg");

5.2 与Popover控件一起使用

this.oMessageView = new MessageView({

showDetailsPageHeader: false,

itemSelect: function () {

oBackButton.setVisible(true);

},

items: {

path: "msg>/",

template: oMessageTemplate

}

});

var oBackButton = new sap.m.Button({

icon: IconPool.getIconURI("nav-back"),

visible: false,

press: function () {

that.oMessageView.navigateBack();

that._oPopover.focus();

this.setVisible(false);

}

});

var oCloseButton = new sap.m.Button({

text: "Close",

press: function () {

this._oPopover.close();

}.bind(this)

}).addStyleClass("sapUiTinyMarginEnd"),

oPopoverFooter = new sap.m.Bar({

contentRight: oCloseButton

}),

oPopoverBar = new sap.m.Bar({

contentLeft: [oBackButton],

contentMiddle: [

new sap.m.Title({ text: "Messages" })

]

});

this._oPopover = new sap.m.Popover({

customHeader: oPopoverBar,

contentWidth: "440px",

contentHeight: "440px",

verticalScrolling: false,

modal: true,

content: [this.oMessageView],

footer: oPopoverFooter

});

this.oMessageView.setModel(new JSONModel(aMockMessages), "msg");

this._oPopover.openBy(oEvent.getSource());

5.3 与Dialog控件一起使用

Controller

handleDialogPress: function (oEvent) {

var oBackButton = new sap.m.Button({

icon: IconPool.getIconURI("nav-back"),

visible: false,

press: function () {

that.oMessageView.navigateBack();

this.setVisible(false);

}

});

this.oDialog = new sap.m.Dialog({

resizable: true,

content: this.oMessageView,

state: 'Error',

beginButton: new sap.m.Button({

press: function () {

this.getParent().close();

},

text: "Close"

}),

customHeader: new sap.m.Bar({

contentLeft: [oBackButton],

contentMiddle: [

new sap.m.Title({

text: "Error",

level: 'H1'

})

]

}),

contentHeight: "50%",

contentWidth: "50%",

verticalScrolling: false

});

this.oDialog.open();

},

6. MessagePopover

MessagePopover可以看作是MessageView和Popover结合体

View

Controller

var sErrorDescription = "

Heading h2

" +

"

Paragraph. At vero eos et accusamus et iusto odio dignissimos ducimus qui ...

" +

"

" +

"

• Unordered list item 1 Absolute URL that is disabled after validation.
" +

"

• Unordered list item 2
" +

"

" +

"

" +

"

1. Ordered list item 1 Relative URL that is allowed after validation.
" +

"

2. Ordered list item 2
" +

"

";

var oLink = new Link({

text: "Show more information",

href: "http://sap.com",

target: "_blank"

});

var oMessageTemplate = new MessageItem({

type: '{msg>type}',

title: '{msg>title}',

activeTitle: "{msg>active}",

description: '{msg>description}',

subtitle: '{msg>subtitle}',

counter: '{msg>counter}',

link: oLink,

markupDescription: true

});

oMessagePopover = new MessagePopover({

items: {

path: 'msg>/',

template: oMessageTemplate

},

activeTitlePress: function () {

MessageToast.show('Active title is pressed');

}

});

oMessagePopover.toggle(oEvent.getSource(),null,sap.m.PlacementType.Left);