Step 4: XML Views

Putting all our UI into the index.html 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. SAPUI5 supports multiple view types (XML, HTML, JavaScript). We choose XML 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

Figure 1: The "Hello World" text is now displayed by a SAPUI5 control (No visual changes to last step)

Coding

You can view and download all files in the Explored app in the Demo Kit under Walkthrough - Step 4.

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

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

We create a new view folder in our app and a new file for our XML view inside the app folder. The root node of the XML structure is the view. Here, we reference the default namespace sap.m where the majority of our UI assets is located. We define an additional sap.ui.core.mvc namespace with alias mvc, where the SAPUI5 views and all other Model-View-Controller (MVC) assets are located.

webapp/view/App.view.xml

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

Inside the view tag, we add the declarative definition of our text control with the same properties as in the previous step. The XML tags are mapped to controls and the attributes are mapped to the properties of the control.

In SAPUI5, each control has its own ID. In the XML view above we did not specify an ID attribute, and therefore the SAPUI5 runtime generates an own ID and adds it to the control. However, it is a good practice to set the IDs of controls explicitly, so that controls can be identified easily.

webapp/index.html

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
      <script
         id="sap-ui-bootstrap"
         src="/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_bluecrystal"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async"
         data-sap-ui-resourceroots='{
            "sap.ui.demo.wt": "./"
         }' >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
            sap.ui.xmlview({
               viewName : "sap.ui.demo.wt.view.App"
            }).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

We tell SAPUI5 core that resources in the sap.ui.demo.wt namespace are located in the same folder as index.html. This is, for example, necessary for apps that run in the SAP Fiori launchpad.

We replace the instantiation of the sap.m.Text control by our new App XML view. The view is created by a factory function of SAPUI5 which makes sure that the view is correctly configured and can be extended by customers. The name is prefixed with the namespace sap.ui.demo.wt.view in order to uniquely identify this resource.

Note

From this step onwards, it is necessary to run the app on a Web server. We structure the app with multiple files that are loaded from the local file system. Without a Web server, this is prevented by the browser due to security reasons. If the error message "sap is not defined" appears in the developer tools of the browser, you need to check the resource path in the bootstrap.

Conventions

View names are capitalized
All views are stored in the view folder
Names of XML views always end with *.view.xml
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