SAPUI5 Views

[former_member484715]

Hello Readers,

In this post, I am going to write about well known concept of SAP UI5 Views. Views in SAPUI5 is like a user interface. Views display data using the model to the user and also enables them to modify the data. In SAPUI5, the views basically is a container for UI5 screen elements (such as button, input fields, tables, lists, etc) and UI5 layouts (HBox, VBox, Flex box, etc). The views are used to define and render the UI.

In SAPUI5, there are 4 types of views:

• JS Views


• XML Views


• HTML Views


• JSON Views

Among the four, JS and XML views are widely used for SAPUI5 applications. Amongst them also, XML view is mostly used. In all FIORI apps, we use the XML views. Apart from these views, the user can define an custom view, by entending the sap.ui.core.mvc.View library.

JS View :

It is in JavaScript format. The extension of the view file is ".view.js". By default, every JS view has the foll. two methods :

getControllerName(): Specifies the controller belonging to this view.If this method is not implemented or returns NULL, the view has no controller.

createContent(): Called initially once after the controller has been instantiated.This method is used to create the UI. As the method knows the controller, it can directly attach the event handler

Advantages :

• Data binding is customizable.


• Templating can be done.


• No parsing overhead, hence relatively faster execution.

Disadvantages :

• Functions (Behaviour code) can be written within the view itself (Not following MVC).


• Cannot embed HTML elements.

Example :

sap.ui.jsview("my_first_project.first", {







       /** Specifies the Controller belonging to this View.



       * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.



       * @memberOf my_first_project.first



       */



       getControllerName : function() {



              return "my_first_project.first";



       },







       /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.



       * Since the Controller is given to this method, its event handlers can be attached right away.



       * @memberOf my_first_project.first



       */



       createContent : function(oController) {



              return new sap.m.Page({



                     title: "Title",



                     content: [



                    



                     ]



              });



       }







});

XML View :

It is in the XML format. The file name ends with the extension ".view.xml". There are no predefined methods in the XML view.

Advantages :

• Validation of elements.


• Supports embedding of HTML elements.

Example

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"



              controllerName="sap.ui.myApp.controller.App" xmlns:html="http://www.w3.org/1999/xhtml">



       <App id="rootControl">



       </App>



</core:View>

JSON View :

It is in JSON format.  The file name ends with the extension ".view.json".

Example

{



       "Type":"sap.ui.core.mvc.JSONView",



       "controllerName":"view.aa",



       "content": [{



              "Type":"sap.m.Page",



              "title":"Title",



              "content":[



             



              ]



       }]



}

HTML view :

It is in HTML format. The file name ends with the extension ".view.html". Here we create the controls within the <div> tags, as we do while developing HTML pages.

Example

<template data-controller-name="view.aa">



       <div data-sap-ui-type="sap.m.Page" data-title="Title">



              <div data-sap-ui-aggregation="content">



             



              </div>



       </div>



</template>

An insight into the class: sap.ui.core.mvc.View

sap.ui.core.mvc.View is the base class for views in SAPUI5. It also extends the sap.ui.core.Control class. The constructor for this class is :

new sap.ui.core.mvc.View(sId?, mSettings?)

It has properties such as width, height, view name, etc. which are required to specify the dimensions of the view. It has an aggregration content, which is used for defining the child controls.

Regards,

Arjun Biswas