SAPUI5 Routing with Master-Detail and Fullscreen

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8" />

        <title>FullScreen - Master-Detail</title>

        <script id="sap-ui-bootstrap"
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m, sap.ui.core"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-xx-bindingSyntax="complex"
            data-sap-ui-preload="async"
            data-sap-ui-resourceroots='{"hirse": "."}'>
        </script>

        <script>
            sap.ui.getCore().attachInit(function() {
                sap.ui.require([
                    "sap/m/Shell",
                    "sap/ui/core/ComponentContainer"
                ], function (Shell, ComponentContainer) {
                    new Shell({
                        app: new ComponentContainer({
                            height: "100%",
                            name: "hirse"
                        })
                    }).placeAt("content");
                });
            });
        </script>
    </head>

    <body class="sapUiBody" id="content"></body>

</html>

sap.ui.define([
    "jquery.sap.global",
    "sap/ui/core/UIComponent"
], function (jQuery, UIComponent) {
    "use strict";

    var Component = UIComponent.extend("hirse.Component", {
        metadata: {
            dependencies: {
                libs: [
                    "sap.m",
                    "sap.ui.core"
                ]
            },

            rootView: "hirse.App",
            routing: {
                config: {
                    routerClass: sap.m.routing.Router,
                    viewType: "XML",
                    viewPath: "hirse",
                    controlId: "appControl",
                    controlAggregation: "pages",
                    bypassed: {
                        target: ["detailTarget", "masterTarget"]
                    }
                },
                // Route names suffixed for demonstration only
                routes: {
                    mainRoute: {
                        pattern: "",
                        target: ["detailTarget", "masterTarget"]
                    },
                    detailRoute: {
                        pattern: "detail/{id}",
                        target: ["masterTarget", "detailTarget"]
                    },
                    fullscreenRoute: {
                        pattern: "fullscreen",
                        target: "fullscreenTarget"
                    }
                },
                // Target names suffixed for demonstration only
                targets: {
                    splitviewTarget: {
                        viewName: "SplitView"
                    },
                    masterTarget: {
                        viewName: "Master",
                        parent: "splitviewTarget",
                        controlId: "splitContainerControl",
                        controlAggregation: "masterPages"
                    },
                    detailTarget: {
                        viewName: "Detail",
                        parent: "splitviewTarget",
                        controlId: "splitContainerControl",
                        controlAggregation: "detailPages"
                    },
                    fullscreenTarget: {
                        viewName: "FullScreen"
                    }
                }
            }
        }
    });

    Component.prototype.init = function () {
        UIComponent.prototype.init.apply(this, arguments);

        this.getRouter().initialize();
    };

    return Component;
});

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displayBlock="true">
    <App id="appControl" />
</mvc:View>

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" >
    <Page title="Detail Page">
        <ObjectHeader title="Item Details" />
    </Page>
</mvc:View>

<mvc:View controllerName="hirse.Master" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" >
    <Page title="Master Page">
      <subHeader>
        <Toolbar>
          <Button text="Fullscreen" press=".onFullScreenPressed" />
        </Toolbar>
      </subHeader>
        <List>
          <StandardListItem text="List Item" />
        </List>
    </Page>
</mvc:View>

<mvc:View controllerName="hirse.FullScreen" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" >
    <Page showNavButton="true" title="FullScreen Page" navButtonPress=".onBackPressed">
        <ObjectHeader title="Item Details" />
    </Page>
</mvc:View>

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
    <SplitContainer id="splitContainerControl" mode="StretchCompressMode" />
</mvc:View>

sap.ui.define([
  "jquery.sap.global",
  "sap/ui/core/mvc/Controller"
], function(jQuery, Controller) {
  "use strict";

  var FullScreenController = Controller.extend("hirse.FullScreen");

  FullScreenController.prototype.onBackPressed = function() {
    this.getOwnerComponent().getRouter().navTo("mainRoute");
  };

  return FullScreenController;
});

sap.ui.define([
  "jquery.sap.global",
  "sap/ui/core/mvc/Controller"
], function(jQuery, Controller) {
  "use strict";

  var MasterController = Controller.extend("hirse.Master");

  MasterController.prototype.onFullScreenPressed = function() {
    this.getOwnerComponent().getRouter().navTo("fullscreenRoute");
  };

  return MasterController;
});