Step 19: Reuse Dialogs

介绍

In this step, we expand our reuse concept and invoke the dialog at component level.

1.练习效果

2.源码

You can view and download all files at Walkthrough – Step 19.

The dialog instantiation is refactored to a new helper object which is stored in a private property of the component. For instantiation of the
helper object, we have to pass the view instance to which the dialog is added (see method call addDependent in the
implementation of the helper object HelloDialog.js below).

We want to connect the reuse dialog to the lifecycle of the root view of the app, so we pass an instance of the root view on to the constructor. It can be retrieved by calling the getRootControl method of the component.

4.Note

As defined in parameter rootView in the manifest.json file, our root view is sap.ui.demo.walkthrough.view.App. From the component, the root view can be retrieved at runtime by accessing the rootControl aggregation.

To be able to open the dialog from other controllers as well, we implement a reuse function openHelloDialog which calls the
open method of our helper object. By doing so, we also decouple the implementation details of the reuse dialog from the
application coding.

Up to this point we added the new property _helloDialog to the component and assigned an instance of the HelloDialog object to it. We want to make sure that the memory allocated for this helper object is freed up when the component is destroyed. Otherwise our application may cause memory leaks.

To do so, we use the exit hook. The SAPUI5 framework calls the function assigned to exit when destroying the component. We call the destroy function of HelloDialog to clean up the helper class and end its lifecycle. Nevertheless, the instance itself would still exist in the browser memory. Therefore we delete our reference to the HelloDialog instance by calling delete this._helloDialog and the garbage collection of the browser can clean up its memory.

4.Note

We don’t have to destroy the instance of JSONModel that we created, because we assigned it to the component with the setModel function. The SAPUI5 framework will destroy it together with the component.

The implementation of the HelloDialog reuse object extends an sap.ui.base.ManagedObject object to
inherit some of the core functionality of SAPUI5.

Our open method is refactored from the HelloPanel controller and instantiates our dialog fragment as
in the previous steps.

4.Note

We do not pass a controller as third parameter to function sap.ui.xmlfragment but a local helper object oFragmentContoller which included the needed event handler function onCloseDialog for the fragment.

The open method now contains our dialog instantiation. The first time the open method is called, the
dialog is instantiated. The oView argument of this method is used to connect the current view to the dialog. We will
call the open method of this object later in the controller.

The onCloseDialog event handler is simply moved from the HelloPanel controller to the reuse
object.

We also add an exit function, just like we did in the component, that will be called automatically when the object is
being destroyed. To free up all allocated memory in the helper object, we delete the property that holds the reference to the view.
The view itself will be destroyed by the component, so we don’t need to take care for that.

The onOpenDialog method now accesses its component by calling the
helper method getOwnerComponent. When calling the open method of
the reuse object we pass in the current view to connect it to the dialog.

We
add a button to the header area of the app view to show the reuse of the hello world dialog. When pressing the button the dialog will be
opened as with the button that we previously created in the
panel.

We
add the method onOpenDialog also to the app controller so that the dialog will open with a reference to the current
view.

• Put all assets that are used across multiple controllers in separate modules.