Step 17: Fragment Callbacks

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.

Preview

Figure 1: The dialog now has an "OK" button

Coding

You can view and download all files in the Explored app in the Demo Kit under Walkthrough - Step 17.

webapp/controller/HelloPanel.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.wt.controller.HelloPanel", {
      onShowHello : function () {
            …
      },
      _getDialog : function () {
         // create dialog lazily
         if (!this._oDialog) {
            // create dialog via fragment factory
            this._oDialog = sap.ui.xmlfragment("sap.ui.demo.wt.view.HelloDialog", this);
            // connect dialog to view (models, lifecycle)
            this.getView().addDependent(this._oDialog);
         }
         return this._oDialog;
      },
      onOpenDialog : function () {
         this._getDialog().open();
      },
      onCloseDialog : function () {
         this._getDialog().close();
      }
   });
});

As previously described, fragments are pure UI reuse artifacts and do not have a controller. The second 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 second parameter does not necessarily have to be a controller but can be any object.

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.

webapp/view/HelloDialog.fragment.xml

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >
   <Dialog
      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.