介绍
In this step, we will take a closer look at another element which can be used to assemble views: the fragment.
1.练习效果
2.源码
You can view and download all files at Walkthrough – Step 16.
|
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 |
<mvc:View controllerName="sap.ui.demo.walkthrough.controller.HelloPanel" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Panel headerText="{i18n>helloPanelTitle}" class="sapUiResponsiveMargin" width="auto" > <content> <Button id="helloDialogButton" text="{i18n>openDialogButtonText}" press=".onOpenDialog" class="sapUiSmallMarginEnd"/> <Button text="{i18n>showHelloButtonText}" press=".onShowHello" class="myCustomButton"/> <Input value="{/recipient/name}" valueLiveUpdate="true" width="60%"/> <FormattedText htmlText="Hello {/recipient/name}" class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/> </content> </Panel> </mvc:View> |
We add a new button to the view to open the dialog. It simply calls an event handler function in the controller of the panel’s content view. We
will need the new id=”helloDialogButton” in Step 29: Integration Test with OPA.
It is a good practice to set a unique ID like helloWorldButton to key controls of your app so that can be identified
easily. If the attribute id is not specified, the OpenUI5 runtime generates unique but changing ID like __button23 for the
control. Inspect the DOM elements of your app in the browser to see the difference.
3.webapp/view/HelloDialog.fragment.xml (New)
|
1 2 3 4 5 6 7 8 |
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" > <Dialog id="helloDialog" title="Hello {/recipient/name}"> </Dialog> </core:FragmentDefinition> |
We add a new XML file to declaratively define our dialog in a fragment. The fragment
assets are located in the core namespace, so we add an
xml namespace for it inside the
FragmentDefinition tag.
The syntax is similar to a view, but since fragments do not have a controller this attribute is missing. Also, the fragment does not have any footprint in
the DOM tree of the app, and there is no control instance of the fragment itself (only the contained controls). It is simply a container for a
set of reuse controls.
We also add an id for our Dialog to be able to access the dialog from our HelloPanel controller.
4.webapp/controller/HelloPanel.controller.js
|
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 |
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 () { … }, 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" }).then(function (oDialog) { // connect dialog to the root view of this component (models, lifecycle) oView.addDependent(oDialog); oDialog.open(); }); } else { this.byId("helloDialog").open(); } } }); }); |
method with the following arguments:
- The ID of the HelloPanel view
This parameter is used to prefix the IDs inside our fragment. There, we have defined the ID helloDialog
for the Dialog control, and we can access the dialog via the view by calling
oView.byId(“helloDialog”). This makes sure that even if you instantiate the same fragment in other
views in the same way, each dialog will have its unique ID that is concatenated from the view ID and the dialog ID.Using unique IDs is important, because duplicate IDs lead to errors in the framework.
- The path of the fragment definition
We add the dialog as “dependent” on the view to be connected to the lifecycle of the view’s model. A convenient side-effect is that the
dialog will automatically be destroyed when the view is destroyed. Otherwise, we would have to destroy the dialog manually to free its
resources.
5. Conventions
- Always use the addDependent method to connect the dialog to the lifecycle management and data binding of the view, even
though it is not added to its UI tree. - Private functions and variables should always start with an underscore.
6.webapp/i18n/i18n.properties
|
1 2 3 4 5 6 7 8 9 10 |
# 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 |
We add a new text for the open button to the text bundle.