Routing in Full Screen Application



Routing in Application
Here, we will implement routing in a full screen application. The scenario is, there would be 3 Pages, and we will show navigation to every page through buttons.
Follow these simple steps:
1.       Create a SAPUI5 Project, name it accordingly.

Here, I have named it as “nav”, you can choose your own project name.

2.       Create 3 views and 3controllers, since we are showing navigation among these 3 pages.

Here, I have created 3 views and 3 controllers with the name new.view.js, new2.view.js, new3.view.js and new.controller.js, new2.controller.js, new3.controller.js.

3.       Start coding in the index.html file for the adding the routes. This is not the best way for routing, since we add the routes in component.js file, which is made separately. Still, in this project we will add routes in index.html file.
Index.html
<!DOCTYPE HTML>
<html>
      <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
           

            <script src="resources/sap-ui-core.js"
                        id="sap-ui-bootstrap"
                        data-sap-ui-libs="sap.m"
                        data-sap-ui-theme="sap_bluecrystal">
            </script>
            <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

            <script>
           
                        sap.ui.localResources("nav");//we have provided the local path,                                                                   //else we will have to define the full path in the routes every time.
                        var app = new sap.m.App("appId");
                        app.placeAt("content");
                       
                 var myroutes = [{
                   
                 pattern: "",
                 name:"new",
                 view:"nav.new",
                 viewType:sap.ui.core.mvc.ViewType.JS,
                 targetControl: "appId",
                 clearTarget: true,
                 callback: function(){
                   myCallback(this);
                 }
                 },
                 {
                   
                     pattern: ["new2","new2"],
                     name:"new2",
                     view:"nav.new2",
                     viewType:sap.ui.core.mvc.ViewType.JS,
                     targetControl: "appId",
                     clearTarget: true,
                     callback: function(){
                         myCallback(this);
                     }
                
                 },
{
                   
                     pattern: ["new3","new3"],
                     name:"new3",
                     view:"nav.new3",
                     viewType:sap.ui.core.mvc.ViewType.JS,
                     targetControl: "appId",
                     clearTarget: true,
                     callback: function(){
                         myCallback(this);
                     }
                
                 }
                 ];
                
                 var myCallback = function($this)
                 {
                   var viewId = "id" + $this.name;
                   var view = sap.ui.getCore().byId(viewId);
                   
                 if(view == undefined){
                   view = sap.ui.view({
                         id:viewId,
                         viewName:$this.view,
                         type: sap.ui.core.mvc.ViewType.JS
                   });
                   
                   app.addPage(view);
                 }
                 app.to(viewId);
                 };
                
                 var router = new sap.ui.core.routing.Router(myroutes);
                 router.register("appRouter");
                 router.initialize();
                
                
                
            </script>

      </head>
      <body class="sapUiBody" role="application">
            <div id="content"></div>
      </body>
</html>

·         Here callback function defines the default view, or if the view is not found then what viewhas to be loaded.
·         We define the router using the class sap.ui.core.routing.Router(myroutes)
·         Then we register the router, so that it could be used anywhere within the application.
·         Then we Initialise the router.

4.       Create buttons in each Page, for navigating from one Page to another.

new.view.js
sap.ui.jsview("nav.new", {
      getControllerName : function() {
            return "nav.new";
      },

       
      createContent : function(oController) {
        var button = new sap.m.Button({
            text: "to view 2",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                oRouter.navTo("new2");
            }
        }) ;
    
        return new sap.m.Page({
                  title:"Page 1",
                  content: [
button
                  ]
            });
    }
}); 


new2.view.js
            var button1 = new sap.m.Button("button1", {
            text: "to view 3",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                oRouter.navTo("new3");
            }
        }) ;
            var button2 = new sap.m.Button("button2", {
            text: "to view 1",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                oRouter.navTo("new");
            }
        }) ;
Place the buttons in page’s content.
new3.view.js
var button3 = new sap.m.Button("button3" ,{
            text: "to view 2",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                var oHashChanger = new sap.ui.core.routing.HashChanger();
                oHashChanger.setHash(oRouter.getURL("new2"));
            }
        }) ;

Output
Page 1
Page 2
Page 3
Hope it Helped!!! Thanks…..