Hello everyone, in this SAPUI5 tutorial we will learn about page navigation in SAPUI5/SAP Fiori using Routing-制造途程，生产某一机种的过程. Lets get started.
1.What is Routing-制造途程，生产某一机种的过程 in SAPUI5/SAP Fiori
Routing-制造途程，生产某一机种的过程 is a mechanism used to navigate between views in SAPUI5/SAP Fiori applications. There are two main routing classes used for this purpose, they are
sap.ui.core.routing.Targets
sap.ui.core.routing.Route
In this tutorial we will learn how to use sap.ui.core.routing.Targets.
2.SAPUI5 Version Needed
1.28
3.Step-by-Step Procedure
1. Create a new SAPUI5 Application Project in Eclipse IDE.
2. In the Create a New View window, provide the initial view name and choose the type of view as XML.
3. Now application structure will like below.
4. As we require two views to demonstrate view navigation, create two views in the same way.Create a new folder to move all views into this folder, as this a best practice to have all views in one place.
5. Now the application structure will look like below.
6. Go to the First view and add Text , a button to navigate to second view and Go to the second view, add Text.Below is the code for both First and Second view.
First.view.xml
|
1 2 3 4 5 6 7 8 9 10 11 |
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="demorouting.views.First"> <Page title="Page-1"> <content> <Text xmlns="sap.m" text="I am in Page-1"> </Text> <Button xmlns="sap.m" text="Go to Page-2" press="onPress"> </Button> </content> </Page> </core:View> |
Second.view.xml
|
1 2 3 4 5 6 7 8 9 10 11 |
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="demorouting.views.Second"> <Page title="Page-2" showNavButton="true" navButtonType="Back" navButtonPress="onBack"> <content> <Text xmlns="sap.m" text="I am in Page-2"> </Text> </content> </Page> </core:View> |
7. The configuration of the routing in maintained in a separate file called Component.js.So create a new file with the name “Component.js” and copy the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
jQuery.sap.declare("demorouting.Component"); sap.ui.core.UIComponent.extend("demorouting.Component", { metadata : { rootView : "demorouting.views.MainView", routing : { config : { targetsClass : "sap.m.routing.Targets", viewPath : "demorouting.views", controlId : "rootControl", controlAggregation : "pages", viewType : "XML" }, targets : { page1 : { viewName : "First", viewLevel : 0 }, page2 : { viewName : "Second", viewLevel : 1 } } } }, init : function() { sap.ui.core.UIComponent.prototype.init.apply(this, arguments); this.getTargets().display("page1"); }, }); |
8. Component.js file contains routing information with possible target of navigation.
9. As we have defined the routing, next would be implementing the “onPress” event on the first view to navigate to second view and “onPress” event in the second view to come back to first view. Go the controller of the First view and copy the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// onInit: function() { // // }, onPress: function(){ this.getOwnerComponent().getTargets().display("page2"); }, // onBeforeRendering: function() { // // }, // onAfterRendering: function() { // // }, // onExit: function() { // // } }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// onInit: function() { // // }, onBack: function(){ this.getOwnerComponent().getTargets().display("page1"); }, // onBeforeRendering: function() { // // }, // onAfterRendering: function() { // // }, // onExit: function() { // // } }); |
10. display( ) method in the routing class is used to call the next page.
11. Main View and its controllers is code is below. Main view just contains the App, its kind of holder for all the views.
|
1 2 3 4 |
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="demorouting.views.MainView"> <App xmlns="sap.m" id="rootControl"/> </core:View> |
12. Final SAPUI5 project structure will look like below.
12. Save the project and run the index.html file to see the output. You should see First View with a text and button like below.
