SAPUI5-Routing

最新推荐文章于 2022-11-26 23:15:20 发布

Liuyingao_dao

最新推荐文章于 2022-11-26 23:15:20 发布

阅读量2.3k

点赞数

分类专栏： SAPUI5

SAPUI5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里写图片描述

这里写图片描述
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='{"sap.ui.demo" : "./",
                             "routingdemo" : "./routingdemo"}'>

</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

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

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

Component.js

jQuery.sap.declare("sap.ui.demo.Component");

sap.ui.core.UIComponent.extend("sap.ui.demo.Component", {
    // https://sapui5.hana.ondemand.com/sdk/#docs/guide/902313063d6f45aeaa3388cc4c13c34e.html
    metadata : {
        routing : {
            config : {
                // config contains the default values for every route default
                // values are overwritten by custom route values
                viewType : "JS",
                viewPath : "routingdemo",
                targetControl : "NavContainer",
                clearTarget : false
            },

            routes : [ {
                // routes contains an array of all routes defined by the
                // component
                pattern : "", // which appears in URL, while you navigate
                name : "first", // Name that is used in navTo method
                view : "FirstPage", // target view that you are navigating to
                viewPath : "routingdemo", // path of the target view
                targetAggregation : "pages" // [pages/content/masterpages/detailpages]
            }, {
                pattern : "InSecondPage",
                name : "second",
                view : "SecondPage",
                viewPath : "routingdemo",
                targetAggregation : "pages"
            } ]

        }
    },

    init : function() {
        // 1. some very generic requires
        jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
        jQuery.sap.require("sap.ui.demo.MyRouter");

        // 2. call overridden init (calls createContent)
        sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

        // 3. monkey patch the router
        var router = this.getRouter();
        router.myNavBack = sap.ui.demo.MyRouter.myNavBack;

        // 4. initialize the router
        this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
        router.initialize();
    },

    destroy : function() {
        if (this.routeHandler) {
            this.routeHandler.destroy();
        }
        // call overridden destroy
        sap.ui.core.UIComponent.prototype.destroy.apply(this, arguments);
    },

    createContent : function() {
        var oView = new sap.ui.view({
            id : "app",
            viewName : "routingdemo.App",
            type : "JS"
        });

        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            myName : null,
            myPass : null
        });

        oView.setModel(oModel);

        return oView;
    }
});

App.view

sap.ui.jsview("routingdemo.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 routingdemo.App
     */
    getControllerName : function() {
        return "routingdemo.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 routingdemo.App
     */
    createContent : function(oController) {
        this.setDisplayBlock(true);
        return new sap.m.App("NavContainer");
    }

});

FirstPage.view

sap.ui.jsview("routingdemo.FirstPage", {

    /**
     * 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 routingdemo.FirstPage
     */
    getControllerName : function() {
        return "routingdemo.FirstPage";
    },

    /**
     * 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 routingdemo.FirstPage
     */
    createContent : function(oController) {
        var flexbox = new sap.m.FlexBox({
            direction : "Column"
        });

        flexbox.addItem(new sap.m.Input("name", {
            placeholder : "Enter User Name",
            value : "{/myName}"
        }));

        flexbox.addItem(new sap.m.Input("password", {
            placeholder : "Enter Password",
            value : "{/myPass}"
        }));

        flexbox.addItem(new sap.m.Button("login", {
            text : "Log in",
            press : function() {
                oController.navigate();
            }
        }));

        flexbox.setAlignItems("Center");
        flexbox.setJustifyContent("Center");

        var page1 = new sap.m.Page({
            title : "Routing Demo",
            content : flexbox,
        });

        return page1;
    }

});

FirstPage.controller

sap.ui.controller("routingdemo.FirstPage", {

    /**
     * Called when a controller is instantiated and its View controls (if
     * available) are already created. Can be used to modify the View before it
     * is displayed, to bind event handlers and do other one-time
     * initialization.
     * 
     * @memberOf routingdemo.FirstPage
     */
    onInit : function() {
        this.router = sap.ui.core.UIComponent.getRouterFor(this);
    },

    navigate : function() {
        this.router.navTo("second");
    }

/**
 * Similar to onAfterRendering, but this hook is invoked before the controller's
 * View is re-rendered (NOT before the first rendering! onInit() is used for
 * that one!).
 * 
 * @memberOf routingdemo.FirstPage
 */
// onBeforeRendering: function() {
//
// },
/**
 * Called when the View has been rendered (so its HTML is part of the document).
 * Post-rendering manipulations of the HTML could be done here. This hook is the
 * same one that SAPUI5 controls get after being rendered.
 * 
 * @memberOf routingdemo.FirstPage
 */
// onAfterRendering: function() {
//
// },
/**
 * Called when the Controller is destroyed. Use this one to free resources and
 * finalize activities.
 * 
 * @memberOf routingdemo.FirstPage
 */
// onExit: function() {
//
// }
});

SecondPage.view

sap.ui.jsview("routingdemo.SecondPage", {

    /**
     * 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 routingdemo.SecondPage
     */
    getControllerName : function() {
        return "routingdemo.SecondPage";
    },

    /**
     * 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 routingdemo.SecondPage
     */
    createContent : function(oController) {
        var flexbox = new sap.m.FlexBox({
            direction : "Column"
        });

        flexbox.addItem(new sap.m.Text({
            text : "{/myName}"
        }));

        flexbox.addItem(new sap.m.Text({
            text : "{/myPass}"
        }));

        flexbox.setAlignItems("Center");
        flexbox.setJustifyContent("Center");

        var page2 = new sap.m.Page({
            content : flexbox,
            showNavButton : true,
            navButtonPress : function() {
                oController.handleNavBack();
            }
        });
        return page2;
    }

});

SecondPage.controller

sap.ui.controller("routingdemo.SecondPage", {

    /**
     * Called when a controller is instantiated and its View controls (if
     * available) are already created. Can be used to modify the View before it
     * is displayed, to bind event handlers and do other one-time
     * initialization.
     * 
     * @memberOf routingdemo.SecondPage
     */
    onInit : function() {
        this.router = sap.ui.core.UIComponent.getRouterFor(this);
    },

    handleNavBack : function() {
        this.router.myNavBack("first");
    }

/**
 * Similar to onAfterRendering, but this hook is invoked before the controller's
 * View is re-rendered (NOT before the first rendering! onInit() is used for
 * that one!).
 * 
 * @memberOf routingdemo.SecondPage
 */
// onBeforeRendering: function() {
//
// },
/**
 * Called when the View has been rendered (so its HTML is part of the document).
 * Post-rendering manipulations of the HTML could be done here. This hook is the
 * same one that SAPUI5 controls get after being rendered.
 * 
 * @memberOf routingdemo.SecondPage
 */
// onAfterRendering: function() {
//
// },
/**
 * Called when the Controller is destroyed. Use this one to free resources and
 * finalize activities.
 * 
 * @memberOf routingdemo.SecondPage
 */
// onExit: function() {
//
// }
});

MyRouter.js

jQuery.sap.declare("sap.ui.demo.MyRouter");
sap.ui.demo.MyRouter = {
    myNavBack : function(route, data) {
        var history = sap.ui.core.routing.History.getInstance();
        var url = this.getURL(route, data);
        var direction = history.getDirection(url);
        if ("Backwards" === direction) {
            window.history.go(-1);
        } else {
            var replace = true; // otherwise we go backwards with a forward
                                // history
            this.navTo(route, data, replace);
        }
    },
};