In this tutorial we will be focusing on creating nested
views, and how nested views are useful in SAPUI5. So as you must know, re usability
is one of the main and important features that any framework must include. And
as seen in my previous blog on Fragments, the
concept of re usability was pretty clear.
Watch My video, for better understanding of both Formatters and Nested Views.
Watch My video, for better understanding of both Formatters and Nested Views.
Fragments are not only the container elements that can be
used in a view for re usability. We can also nest Views into one another, i.e we
could use Nested Views. This pattern is very useful , if you have parts of your
UI which you want to reuse in different places of your particular application
So unlike Fragments, which doesn’t have their own
controllers, Nested views have their own controllers just as usual views. Just
a single line of code is required to integrate a Nested view into a view.
<mvc:XMLView viewName=”name of you view”/>
So there are basically 3 steps required:
1)Create a View and its controller in the specific folders.
2)Instantiate the
Nested view in the view, with the above single line of code.
3)Write the desired code in the newly created Nested View.
Example
Suppose, I have to add a Text in two of my pages. Here these buttons are used twice, hence I
will use Nested Views to achieve this. This won’t be any real life requirement,
but just for the sake of understanding, I have chosen this scenario.
Let me just follow the steps mentioned above.
1)Create views
So here NewView .view.xml is the new view that I have
created in the view folder, similarly I have created the NewView.controller.js in the controller folder.
2)Instantiate the Nested view in the views. I will Instantiate
it in the App.view.xml and S2.view.xml.
App.view.xml
S2.view.xml
3) Now, mention the code in the new view
<mvc:View
controllerName="sap.myApp.controller.NewView"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Text text="This is the
new reusable view"/>
</mvc:View>
Now that been done, our purpose here is done. We have reused
the text 2 times in two different views. I am sharing my output here.
Output
So, this was all Nested Views in SAPUI5. You might want to take a look at my previous
tutorial on Fragments
in SAPUI5.
For any queries, mail me at sapui5tutors@gmail.com. If you loved
my tutorials, comment down below your views. It always inspires me for making
better blogs and stay tuned for more tutorials!!
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.
ConversionConversion EmoticonEmoticon