XML Views with Navigation in SAPUI5

[Former Member]

Dear all,

In this document I'll give you an explanation about how to navigate between 2 XML views in a SAPUI5 application.

Prerequisites:

• Eclipse Mars (4.5) or Luna (4.4)
• SAPUI5 development toolkit (SAP Development Tools for Eclipse)

Explanation

The new version of SAPUI5 is working with XML views in stead of JavaScript views. All the documentations and tutorials is written in XML views. For people who always written JavaScript views, it's completely different.

Advantages of XML View:

• Syntax is easier
• Syntax is better know
• It's easy to learn
• Syntax is shorter

Disadvantages of XML View:

• Totally different way
• Completely new aspect

Tutorial

The first thing you have to do is creating an empty SAPUI5 project (File - New - Other ...):

In the next screen, you just need to enter a Project name (don't change the others settings):

Enter the name of the view and select 'XML' in the development paradigm setting:

Click on finish and your SAPUI5 project is created!

First you have to correct some things in the created project:

• Create a 'controller' and a 'view' folder. When you run the application, it'll search for these folders..
  • Move the .controller.js file in the controller folder
  • Move the .view.xml file in the view folder

         

• After starting the application, it'll look for code in 3 more files which are not created automatically.. So you have to create them or you can download them from the tutorials of SAPUI5 Explored and place them in the WebContent folder.
  • Component.js file: is the component controller and provides the runtime metadata and the component methods. Here you declare your models which you can use in the controllers and views.
  • Component-preload.js: is the next step of performance improvements (by reduction of requests). It's supposed to contain the entire application code, including all Views, Controllers, etc. within ONE file. (to reduce requsts).
  • manifest.json: this is the application descriptor. It provides a central, machine-readable and easy-to-access location for storing metadata associated with an application or application component. The data is stored in json format in the manifest.json file with attributes in different namespaces. It contains, for example, the app ID, the version, the data sources used, along with the required SAPUI5 components andSAPUI5 libraries. The existence of the manifest.json file must be declared in the component metadata.

Now, create the second view 'Slave' (File - New - Other) and click on finish:

Move the '.view.xml' in the view folder, and the '.controller.js' in the controller folder, like this:

Create the Component.js file like this:

sap.ui.define([

  "sap/ui/core/UIComponent",

  "sap/ui/model/json/JSONModel"

], function (UIComponent, JSONModel) {

  "use strict";

  return UIComponent.extend("sap.ui.demo.wt.Component", {

  metadata : {

  manifest: "json"

  },

  init : function () {

  // call the init function of the parent

  UIComponent.prototype.init.apply(this, arguments);

  // create the views based on the url/hash

  this.getRouter().initialize();

  }

  });

});

Line 13: the initialize method will start the routing – it will parse the initial hash, create the needed views, start listening to hash changes and trigger the router events.

The router is retrieved by a call ofgetRouteron the component.

Create the manifest.json file like this:

{

  "_version": "1.1.0",

  "sap.app": {

  "_version": "1.1.0",

  "id": "sap.ui.demo.wt",

  "type": "application",

  "applicationVersion": {

   "version": "1.0.0"

  },

  "ach": "CA-UI5-DOC"

  },

  "sap.ui": {

  "_version": "1.1.0",

  "technology": "UI5",

  "deviceTypes": {

   "desktop": true,

   "tablet": true,

   "phone": true

  },

  "supportedThemes": [

   "sap_bluecrystal"

  ]

  },

  "sap.ui5": {

  "_version": "1.1.0",

  "rootView": "sap.ui.demo.wt.view.Master",

  "dependencies": {

   "minUI5Version": "1.30",

   "libs": {

  "sap.m": {}

   }

  },

  "models": {

   "i18n": {

  "type": "sap.ui.model.resource.ResourceModel",

  "settings": {

   "bundleName": "sap.ui.demo.wt.i18n.i18n"

  }

   }

  },

  "routing": {

   "config": {

  "routerClass": "sap.m.routing.Router",

  "viewType": "XML",

  "viewPath": "sap.ui.demo.wt.view",

  "controlId": "app",

  "transition": "slide",

  "controlAggregation": "pages"

   },

   "routes": [

  {

   "pattern": "",

   "name": "master",

   "target": "master"

  },

  {

   "pattern": "second",

   "name": "second",

   "target": "second"

  }

   ],

   "targets": {

  "master": {

   "viewName": "Master"

  },

  "second": {

   "viewName": "Slave"

  }

    }

  }

  }

}

Line 24 to 31: the applications knows the rootview and which type it is (JS, XML or HTML).

Line 50 to 60: Each route defines a name, a pattern, and one or more targets to navigate to when the route has been hit. The pattern is basically the hash part of the URL that matches the route. The sequence of the routes is important because only the first matched route is used by the router.

Line 62 to 68: A target defines the view that is displayed. It is associated with one or more routes or it can be displayed manually from within the app.

Create the Master view like this:

<mvc:View

  xmlns:mvc="sap.ui.core.mvc"

  xmlns="sap.m"

  xmlns:core="sap.ui.core"

  controllerName="sap.ui.demo.wt.controller.Master">

  <App id="app">

  <Page title="Master view">

  <content>

  <VBox>

  <Label text="Welcome on the first view !" />

  <Button text="Navigate to the second view" press="onPress" />

  </VBox>

  </content>

  </Page>

  </App>

</mvc:View>

This view displays a label and a button to navigate to the second screen (an event is fired in the controller after clicking on the button).

Create the Master controller like this:

sap.ui.define([

               "sap/ui/core/mvc/Controller"

               ], function (Controller, JSONModel) {

  "use restrict";

  return Controller.extend("sap.ui.demo.wt.controller.Master",{

  onInit: function () {

  },

  onPress: function(oEvent)

  {

  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

  oRouter.navTo("second");

  }

  });

});

Line 12: retrieves all the views from the manifest.json file.

Line 13: the target name is bound to the viewName, so the view of 'second' is called when the button is clicked.

Create the Slave view like this:

<mvc:View

  xmlns:mvc="sap.ui.core.mvc"

  xmlns="sap.m"

  xmlns:core="sap.ui.core"

  controllerName="sap.ui.demo.wt.controller.Slave">

  <App id="app">

  <Page title="Slave view"

  showNavButton="true"

  navButtonPress="onBack">

  <content>

  <VBox>

  <Label text="Welcome on the second view !" />

  <Button text="Navigate back to the first view" press="onBack" />

  </VBox>

  </content>

  </Page>

  </App>

</mvc:View>

This view displays a label and a back button, also a back button in the page bar.

Create the Slave controller like this:

sap.ui.define([

               "sap/ui/core/mvc/Controller",

               "sap/ui/core/routing/History"

               ], function (Controller, History) {

  "use restrict";

  return Controller.extend("sap.ui.demo.wt.controller.Slave",{

  onInit: function () {

  },

  onBack: function()

  {

  var oHistory = History.getInstance();

  var sPreviousHash = oHistory.getPreviousHash();

  if (sPreviousHash !== undefined) {

  window.history.go(-1);

  } else {

  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

  oRouter.navTo("overview", true);

  }

  }

  });

});

Line 11: onBack is fired after clicking on the button and also after clicking on the back icon in the page bar

Line 13 to 22: the previous view will be called, or when there is no view found, it will navigate the the viewName of 'overview'(implemented in manifest.json file).

After implementing this code, you'll have an application wich navigation and with XML views.

In the SAP HANA Web IDE the files (manifest.json, Component.js and Component-preload.js) are already created, also the controller and view folders.

Kind regards,

Pieter