介绍
Now that we have integrated the dialog, it’s time to add some user interaction. The user will definitely want to close the dialog again at some point, so we add a button to close the dialog and assign an event handler.
1.练习效果
2.源码
You can view and download all files at Walkthrough – Step 17.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast", "sap/ui/core/Fragment" ], function (Controller, MessageToast, Fragment) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", { onShowHello : function () { // read msg from i18n model var oBundle = this.getView().getModel("i18n").getResourceBundle(); var sRecipient = this.getView().getModel().getProperty("/recipient/name"); var sMsg = oBundle.getText("helloMsg", [sRecipient]); // show message MessageToast.show(sMsg); }, onOpenDialog : function () { var oView = this.getView(); // create dialog lazily if (!this.byId("helloDialog")) { // load asynchronous XML fragment Fragment.load({ id: oView.getId(), name: "sap.ui.demo.walkthrough.view.HelloDialog", controller: this }).then(function (oDialog) { // connect dialog to the root view of this component (models, lifecycle) oView.addDependent(oDialog); oDialog.open(); }); } else { this.byId("helloDialog").open(); } }, onCloseDialog : function () { this.byId("helloDialog").close(); } }); }); |
As previously described, fragments are pure UI reuse artifacts and do not have a controller. The third parameter of the
sap.ui.xmlfragment function is optional and allows passing in a reference to a (controller) object. For our
dialog we reference the HelloPanel controller. However, the third parameter does not necessarily have to be a
controller but can be any object. Just don’t forget the this keyword.
The event handler function is put into the same controller file and it closes the
dialog by accessing the internal helper function that returns the dialog.
3.webapp/view/HelloDialog.fragment.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" > <Dialog id="helloDialog" title ="Hello {/recipient/name}"> <beginButton> <Button text="{i18n>dialogCloseButtonText}" press=".onCloseDialog"/> </beginButton> </Dialog> </core:FragmentDefinition> |
In the fragment definition, we add a button to the beginButton aggregation of the dialog. The press handler is referring to an
event handler called .onCloseDialog, and since we passed in the reference to the HelloPanel
controller, the method will be invoked there when the button is pressed. The dialog has an aggregation named
beginButton as well as endButton. Placing buttons in both of these aggregations makes sure that
the beginButton is placed before the endButton on the UI. What before means,
however, depends on the text direction of the current language. We therefore use the terms begin and
end as a synonym to “left” and “right”. In languages with left-to-right direction, the
beginButton will be rendered left, the endButton on the right side of the dialog footer; in
right-to-left mode for specific languages the order is switched.
4.webapp/i18n/i18n.properties
1 2 3 4 5 6 7 8 9 10 11 |
# App Descriptor appTitle=Hello World appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5 # Hello Panel showHelloButtonText=Say Hello helloMsg=Hello {0} homePageTitle=Walkthrough helloPanelTitle=Hello World openDialogButtonText=Say Hello With Dialog dialogCloseButtonText=Ok |
The text bundle is extended by the new text for the dialog’s close button.