Routing from full to split screen



Routing from full to split screen
Here, we will implement routing in a full screen to a split screen, hence clearing all aspects of routing. The scenario is, there would be 4 Pages, out of which 1st three are full screen pages and last one is a split screen.


Follow these simple steps:
1.       Create a SAPUI5 Project, name it accordingly.

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

2.       Create 4 views and 4 controllers, for full pages and 3 views and 3 controllers for split screen, since we are showing navigation among these pages.

Here, I have created 4 views and 4 controllers with the name App.view.js which describe the full screen, page1.view.js, page2.view.js, page3.view.js and oapp.view.js which describe the split screen, omasterpage.view.js, odetailpage.view.js, similarly there controllers.

3.       Start coding in the component.js file for the adding the routes.
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"
      data-sap-ui-resourceroots='{
                              "com.tutorial":"./",
                              "route":"./route"}'
      data-sap-ui-preload=''>
            </script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>
            new sap.m.Shell("Shell",{
                  title:"Routing",
                  app: new sap.ui.core.ComponentContainer({
                        name : 'com.tutorial'
                  })
            }).placeAt("content");
            </script>

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

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

App.view.js
sap.ui.jsview("route.App", {

      /** Specifies the Controller belonging to this View.
      * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
      * @memberOf route.App
      */
      getControllerName : function() {
            return "route.App";
      },

      /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
      * Since the Controller is given to this method, its event handlers can be attached right away.
      * @memberOf route.App
      */
      createContent : function(oController) {
            this.setDisplayBlock(true);
            return new sap.m.App("navContainer");
      }

}); 


Page1.view.js
            sap.ui.jsview("route.page1", {

      /** Specifies the Controller belonging to this View.
       * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
       * @memberOf route.page1
       */
      getControllerName : function() {
            return "route.page1";
      },

      /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
       * Since the Controller is given to this method, its event handlers can be attached right away.
       * @memberOf route.page1
       */
      createContent : function(oController) {
            var button = new sap.m.Button("sas", {
                  text : "to view 2",
                  press : function(oEvent) {
                        var router = sap.ui.core.routing.Router.getRouter("appRouter"); // Get instance of router 
                        router.navTo("page2", null, false);// Call navTo() method of Router class to trigger the navigation 
                  }
            });

            return new sap.m.Page({
                  title : "Page 1",
                  content : [ button ]
            });
      }
});

Page2.view.js
sap.ui.jsview("route.page2", {

      /**
       * Specifies the Controller belonging to this View. In the case that it is
       * not implemented, or that "null" is returned, this View does not have a
       * Controller.
       *
       * @memberOf route.page2
       */
      getControllerName : function() {
            return "route.page2";
      },

      /**
       * Is initially called once after the Controller has been instantiated. It
       * is the place where the UI is constructed. Since the Controller is given
       * to this method, its event handlers can be attached right away.
       *
       * @memberOf route.page2
       */
      createContent : function(oController) {
            var button1 = new sap.m.Button("sasx",
                        {
                              text : "to view 3",
                              press : function(oEvent) {

                                    var oRouter = sap.ui.core.routing.Router
                                                .getRouter("appRouter");
                                    oRouter.navTo("page3");
                              }
                        });
            var button2 = new sap.m.Button("zxxx",
                        {
                              text : "to view 1",
                              press : function(oEvent) {

                                    var oRouter = sap.ui.core.routing.Router
                                                .getRouter("appRouter");
                                    oRouter.navTo("page1");
                              }
                        });

            return new sap.m.Page({
                  title : "Page 2",
                  content : [ button1, button2 ]
            });
      }

});

Page3.view.js
sap.ui.jsview("route.page3", {

      /** Specifies the Controller belonging to this View.
      * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
      * @memberOf route.page3
      */
      getControllerName : function() {
            return "route.page3";
      },

      /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
      * Since the Controller is given to this method, its event handlers can be attached right away.
      * @memberOf route.page3
      */
      createContent : function(oController) {
            var button2 = new sap.m.Button({
            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("page2"));
            }
           
        }) ;
            var button3 = new sap.m.Button({
            text: "to split view",
            press: function (oEvent){
                  var router = sap.ui.core.routing.Router.getRouter("appRouter"); // Get instance of router 
                  router.navTo("omasterpage", null, false);
            }});
            return new sap.m.Page({
                  title: "Page 3",
                  content: [
button2,button3
                  ]
            });
      }

});
Oapp.view.js
sap.ui.jsview("route.oapp", {

      /**
       * Specifies the Controller belonging to this View. In the case that it is
       * not implemented, or that "null" is returned, this View does not have a
       * Controller.
       *
       * @memberOf route.oapp
       */
      getControllerName : function() {
            return "route.oapp";
      },

      /**
       * Is initially called once after the Controller has been instantiated. It
       * is the place where the UI is constructed. Since the Controller is given
       * to this method, its event handlers can be attached right away.
       *
       * @memberOf route.oapp
       */
      createContent : function(oController) {
            this.setDisplayBlock(true);
            var oapp = new sap.m.SplitApp("SplitApp", {});
            return oapp;
      }

});
Omasterpage.view.js
sap.ui.jsview("route.omasterpage", {

      getControllerName : function() {
            return "route.omasterpage";
      },
      createContent : function(oController) {
            return new sap.m.Page(
                        {
                              title : "Title",
                              showNavButton : true,

                              navButtonTap : function() {
                                    var oRouter = sap.ui.core.routing.Router
                                                .getRouter("appRouter");
                                    window.history.go(-1);
                              },
                              content : []
                        });
      }

});
Odetailpage.view.js
sap.ui.jsview("route.odetailpage", {

      getControllerName : function() {
            return "route.odetailpage";
      },
      createContent : function(oController) {
            return new sap.m.Page({
                  title : "Title",

                  content : [

                  ]
            });
      }

});
Cmponent.js
jQuery.sap.declare("com.tutorial.Component");

sap.ui.core.UIComponent.extend("com.tutorial.Component",{
      metadata : {
            rootView : "com.tutorial.route.App",
            routing : {
                  config : {
                        viewType:"JS", // viewType defines type of the target views 
                        viewPath:"route",
//                      targetControl:"navContainer",  // targetControl refers to the id of control where all the target views are to be placed 
                // this is defined in 'MainView' createcontent method 
                        targetAggregation:"pages", // targetAggregation refers to aggregation namw of targetControl. For splitApp 
                // control there are two Aggregations, 'detailPages' and 'masterPages' 
                        clearTarget : false//The clear target parameter defines a boolean that is used to specify if the aggregation 
                //should be cleared before adding the view to it. 
                  },
                  routes : [

                                      {
                                      pattern : "",
                                      name:"page1",
                                      view:"page1",// This is the target view, to where navigation happens
                                      targetControl:"navContainer",
                                      targetAggregation:"pages",
                                      
                                  },
                                  {
                                      pattern : ["new2","page2"],
                                      name : "page2",
                                      view : "page2",
                                      targetControl:"navContainer",
                                      targetAggregation:"pages",
                                      
                                  },
                                  {
                                      pattern : ["new3","page3"],
                                      name : "page3",
                                      view : "page3",
                                      targetControl:"navContainer",
                                      targetAggregation:"pages",
                                      
                                  },
                                      {
                                            pattern:"splitApp",
                                            name:"oapp",
                                            view:"oapp",
                                            targetControl:"navContainer",
                                            targetAggregation:"pages",
                                            subroutes:[{
                                                  pattern:"splitApp/",
                                                  name:"omasterpage",
                                                  view:"omasterpage",
                                                  targetControl:"SplitApp",
                                                  targetAggregation:"masterPages",
                                           
                                            subroutes:[
                                            {
                                                  pattern:"splitApp/",
                                                  name:"odetailpage",
                                                  view:"odetailpage",
                                                  targetControl:"SplitApp",
                                                  targetAggregation:"detailPages"
                                                 
                                            }],
                                            }]
                                      }],
            }}
});
com.tutorial.Component.prototype.init = function(){
      jQuery.sap.require("sap.ui.core.routing.History");
      jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
     
      sap.ui.core.UIComponent.prototype.init.apply(this);
     
      var router = this.getRouter();
      this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
      router.register("appRouter");  // Assign a name to Router, so that we can access it in all controllers by using this name 
      router.initialize(); // Initialise the Router  
};
com.tutorial.Component.prototype.createContent = function(){
      var view = sap.ui.view({viewName:"route.App",type:sap.ui.core.mvc.ViewType.JS});
      return view;
};

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


Previous
Next Post »

3 comments

Click here for comments
Pedro Freire
admin
5 September 2016 at 09:12 ×

Awesome post! Just what i was looking for. Thanks!

Reply
avatar
phani
admin
26 September 2016 at 00:52 ×

Hi,

What is the difference between oHashChanger.setHash(oRouter.getURL("page2")) & oRouter.navTo("page2")?

Reply
avatar
Sanjo Thomas
admin
26 September 2016 at 01:29 ×

Hi, both serves the same purpose here, i.e for navigating.In hashChanger, we are expliitly setting the URL, in the second case, we have mention the roots, and "page2" is the name given in the roots, which matches the pattern and then the navigation is done. Hope it helps, and if someone has a better explanation, please comment down ;)

Reply
avatar