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.


Step 4: XML Views - 第1张  | 优通SAP


You can view and download all files at Walkthrough – Step 4.

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

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 are 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.


The namespace identifies all resources of the project and has to be unique. If you develop your own application code or controls, 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).


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.


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.walkthrough.view in order to uniquely identify this resource.


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.

You can find more information about how to install a Web server for your particular environment at Development Environment.

7. 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



seventeen − 15 =