Working with XML Views

Objectives

After completing this lesson, you will be able to:

  • Create and use XML views

Model View Controller (MVC)

The Model View Controller (MVC) concept is used in SAPUI5 to separate the presentation of information from user interaction. This separation facilitates the development and modification of an application.

Watch the video to understand the roles assigned to model, view, and controller in MVC.

The relationship between views and models will be covered later in the course.

View Types

For the implementation of views, SAPUI5 provides predefined view types.

Let's look at the predefined view types available in SAPUI5.

Note

It is recommended to use XML views because XML views enforce a clear separation of the UI definition from the application logic (which must be implemented in the controller). This makes the code more readable and easier to support.

Therefore, this training course focuses exclusively on XML views, which are used throughout the examples and exercises. For information on JSON views and typed views, see the documentation.

XML Views

View Names

If you define an XML view using an XML string, no file is required.

If, on the other hand, you define an XML view in a file, which is more common, the file name ends with .view.xml. For example, in the figure, Simple XML View, the file name is App.view.xml.

Typically, views are stored in the view folder of the project structure. The file name together with the location of the file in the project structure and the module Id prefix determine the name of the view. This view name corresponds to the SAPUI5 module name, via which the view can later be loaded and instantiated (see below).

Example

Suppose in the index.html file of the project, the following attribute is specified in the bootstrap script:

Code snippet
data-sap-ui-resourceroots='{"sap.training.exc": "./"}'
Copy code

This registers the webapp folder of the project as a resource location, which is assigned to the module Id prefix sap.training.exc. If the App.view.xml file shown in the figure is now stored in the webapp/view folder of the project, this results in the following view name:

Code snippet
sap.training.exc.view.App
Copy code

The prefix sap.training.exc of this view name refers to the webapp folder. The view segment following sap.training.exc specifies the view subfolder as the location of the file, and the last segment in the view name represents the file name, whereby the suffix .view.xml is automatically added later when the view is loaded by SAPUI5.

View Implementation

Each control used in an XML view is represented by an XML tag with the name of the control.

The <View> tag is used as the root node in an XML view. This tag corresponds to the sap.ui.core.mvc.View control. The names of the SAPUI5 control libraries used in the view and the corresponding subpackages are thereby mapped to XML namespaces via xmlns attributes of the <View> tag.

Note
A control can be in a subpackage of a control library. For example, sap.ui.core.mvc.View is in the sap.ui.core library, but the full package name is sap.ui.core.mvc. You must specify this subpackage as an XML namespace even if sap.ui.core were already defined as a namespace.

Let's examine the above example of a simple XML view in more detail.

Note
The names of the properties available for a control can be looked up in the API Reference. They are listed there for the corresponding control in the Properties section. The existing properties are also displayed in the SAP Business Application Studio using the Auto Completion functionality in the editor.

View Instantiation

Let's look at an example.

Create and Use an XML View

Business Scenario

In this exercise, you will create an XML view with a Hello World Text UI element. Then you delete the code that creates a Hello World Text UI element and places it on the HTML page in the module you created in the previous exercise. Instead, you will instantiate the XML view there and place it on the HTML page.

Template:Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/3_modules
Model solution:Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/4_views

Task 1: Implement an XML View

Steps

  1. Create a new file named App.view.xml in the subfolder view of the webapp folder.

    1. Open the context menu for the webapp/view folder in the project structure.

    2. Select New File.

    3. In the New File dialog that appears, type App.view.xml and choose OK.

    Result

    The App.view.xml file is created and displays in the editor.

  2. Add the following code to the App.view.xml file to define an XML view with a Hello World Text UI element:

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

  <Text text="Hello World"/>

</mvc:View>
    Copy code

Result

The XML view should be implemented as follows:

Task 2: Instantiate the XML View

Steps

  1. Make sure the index.js module is open in the editor.

  2. Delete the code that creates a Hello World Text UI element and places it on the HTML page in the index.js module.

    1. Delete the following line:

      Code snippet
      new Text({ text: "Hello World" }).placeAt("content");
      Copy code

    Result

    The index.js module should now look like this:

  3. Modify the implementation of the index.js module as follows to instantiate the XML view created above and place it on the HTML page:

    Code snippet
    sap.ui.define(["sap/ui/core/mvc/XMLView"], function (XMLView) {
  "use strict";

  XMLView.create({
    id: "App",
    viewName: "sap.training.exc.view.App"
  }).then(function (oView) {
    oView.placeAt("content");
  });

});
    Copy code
    Note
    Pay attention to the changed dependency array and parameter of the factory function. index.js now depends on sap/ui/core/mvc/XMLView instead of sap/m/Text.

    Result

    The index.js file should be implemented as follows:

  4. Test run your application by starting it from the SAP Business Application Studio.

    1. Right-click on any subfolder in your sapui5-development-learning-journey project and select Preview Application from the context menu that appears.

    2. Select the npm script named start-noflp in the dialog that appears.

    3. In the opened application, check if the XML view with the Hello World text of the sap.m.Text UI element is displayed on the HTML page.

Log in to track your progress & complete quizzes