Step 4: XML Views

Putting all our UI into the index.ts file will very soon result in a messy setup and there is quite a bit of work ahead of us. So let’s do a first modularization by putting the sap/m/Text control into a dedicated view.

When working with OpenUI5, we recommend the use of XML views, as this produces the most readable code and will force us to separate the view declaration from the controller logic. Yet the look of our UI will not change.

Preview

^{The "The "Hello World" text is now displayed by an OpenUI5 control (No visual changes to last step)}

You can access the live preview by clicking on this link: 🔗 Live Preview of Step 4.

To download the solution for this step as a zip file, just choose the link here: 📥 Download Solution for Step 4.

Coding

webapp/view/App.view.xml (New)

We create a new folder called view inside the webapp folder. This folder will hold all our XML view files. Inside the view folder, we create a new file called App.view.xml. In OpenUI5, the root node of an XML view is the <mvc:View> tag. To use this tag, we need to declare the XML namespace mvc, which corresponds to the sap.ui.core.mvc namespace. This namespace provides classes for creating and working with views and other Model-View-Controller (MVC) assets. Additionally, we declare the default XML namespace to the sap.m namespace. This namespace contains the majority of OpenUI5's UI assets, including the Text control that we want to use with our view.

Inside the <mvc:View> tag, we add the <Text> tag from the default XML namespace. This <Text> tag represents the text control that will be displayed on the view. We set the text attribute of the <Text> tag to "Hello World". This will display the text "Hello World" on the view.

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Text text="Hello World"/>
</mvc:View>

We have created an XML view that displays a text control with the text "Hello World".

💡 Tip:
XML tags are mapped to UI controls, and attributes are mapped to the properties of the control. In this case, the <Text> tag represents the Text control in the sap.m library, and the text attribute sets the text property of the control.

📝 Note:
The namespace identifies all resources of the project and has to be unique. If you develop your own application code or library, you cannot use the namespace prefix sap, because this namespace is reserved for SAP resources. Instead, simply define your own unique namespace (for example, myCompany.myApp).

webapp/index.ts

As a next step, we are going to replace the sap/m/Text control in our index.ts file with the app view that we've just created. To do this, we utilize the XMLView.create function, which is a part of the sap/ui/core/mvc/View module. This function needs a viewName property, which indicates the resource that needs to be loaded. The viewName is a combination of the namespace defined in the bootstrap and the path to the app view, but without the ".view.xml" extension. In addition, we set the id property to "app". Providing a stable ID is beneficial as it offers an easy and consistent way to identify and refer to specific views and elements in your code, thus helping to keep your code organized.

import XMLView from "sap/ui/core/mvc/XMLView";

XMLView.create({
    viewName: "ui5.walkthrough.view.App",
    id: "app"
}).then(function (view) {
    view.placeAt("content");
});

We have now embed our app view to the body of the HTML document.

💡 Tip:
Although setting an ID is not mandatory, it greatly improves the maintainability and flexibility of your code. With a stable ID, you can easily locate and update specific parts of your application.

Conventions

View names are capitalized
All views are stored in the view folder
Names of XML views always end with *.view.xml
XML namespaces are declared in the root element of teh view
As a general rule, the default XML namespace is sap.m
Other XML namespaces use the last part of the SAP namespace as alias (for example, mvc for sap.ui.core.mvc)