Fragments are reusable UI parts like views and can be used
in any other app if they fit in. Fragments should only contain UI elements. It
does not have controllers like views. Event handling methods for UI elements
which are defined in Fragment can be implemented in the respective view
controllers in which they are used.
Let’s take an example to understand them better, If an
application having dialog box and this dialog box is used in many views by
declaring it separately in every view. By following this approach we are
declaring same UI control in many places which leads to development overhead.
To avoid this we use fragments. Declare the dialog control in fragments and use
the fragment where ever you need to use the dialog control.
They are 3 types of fragments in SAPUI5.
·
JS
fragments
·
XML
fragments
·
HTML
fragments.
Let us create a sample application and understand it better.
1.
Create a SAPUI5 application project in Eclipse.
2. Enter the view name and click on Next or
Finish.
3. Create a new folder “fragments” under
WebContent folder to store all fragments files. Right click on WebContent
folder and choose New → Folder.
4. Now create a new fragment file which contains
reusable dialog control. To create fragment file Right click on newly created
fragments folder → New → File. In this example we are going to create a new XML
fragment.
5. Double click on the file to write the code.
We start writing the code by declaring the Fragment definition and include the
UI libraries which are needed to declare the UI elements in the fragments. In
the code below i have declared Dialog in the fragment.
Dialog.fragment.xml
JavaScript
1
2
3
4
5
6
7
8
9
10
|
<core:FragmentDefinition
xmlns="sap.m" xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core">
<Dialog
title="My Dialog">
<content>
<Text
text="This dialog is from XML fragment" />
</content>
<endButton>
<Button
text="Close" press="onClose" />
</endButton>
</Dialog>
</core:FragmentDefinition>
|
6. This completes our reusable fragment
declaration. Next step will be call to this fragment and open the dialog in a
view. To do this go to the view in the SAPUI5 application project and write the
below code inside it.
MainView.view.xml
JavaScript
1
2
3
4
5
6
7
8
9
|
<core:View
xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
controllerName="demo_fragments.MainView"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page
title="Demo on Fragments">
<content>
<Button
text="Open Dialog" press="onPress">
</Button>
</content>
</Page>
</core:View>
|
In the view we added a button and declared a press event.
The press event handler will be implemented in view controller. When you click
on the button we need to open the dialog.
7. Go to view controller and implement the “onPress”
event of the button. Inside this event handler method we will get the instance
of the fragment by providing the full path and by using the same instance we
can call the dialog.
MainView.controller.js
JavaScript
1
2
3
4
5
6
7
8
9
|
sap.ui.controller("demo_fragments.MainView",
{
onPress
: function() {
this._Dialog
= sap.ui.xmlfragment("demo_fragments.fragments.Dialog",
this);
this._Dialog.open();
},
});
|
8. Now we ready to test the application. What we
should expect is, by clicking on the button a dialog should be opened.
9. Now we need to implement the event handler of
the button Close on the popup dialog which we declared in the fragments. As
mentioned earlier all the event handler implementations of the fragments are
performed in respective view controllers where they are used. So go to
the view controller and write the below code to close the popup dialog.
MainView.controller.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
|
sap.ui.controller("demofragments.MainView",
{
onPress
: function() {
this._Dialog
= sap.ui.xmlfragment("demofragments.fragments.Dialog",
this);
this._Dialog.open();
},
//
onClose event handler of the fragment
onClose
: function() {
this._Dialog.close();
}
});
|
10. Now save the code changes and test the
application again, we should be able to close the popup dialog.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
1 comments:
Click here for commentsHai
is it possible to have a fragment inside a fragment. When the answer is Yes, could you please give me an example? Thanks in Advance
ConversionConversion EmoticonEmoticon