OpenUI5 Routing Like ASP.NET MVC?

Question

I am attempting to build an OpenUI5 application that first runs through a Router for all its navigation config. I can see that my Routes are firing, but they never attempt to load Controllers/Views. I would expect to see 404 errors when OpenUI5 tries to find my missing Views.

I'm trying to mirror ASP.NET, which follows what I'd call a Route-First approach. Before a Controller is instantiated in ASP.NET, the Routing engine first needs to match a Route to a given URL; the matching Controller is then instantiated.

I have just two files, a Component.js file, and an index.html file. I will later add Controllers and Views, but with my current setup, I do not even see OpenUI5 firing off any HTTP requests to fetch my missing Controllers/Views.

Component.js

Query.sap.declare("cag.sbx.Component");
sap.ui.core.UIComponent.extend("cag.sbx.Component",
{
    metadata:
    {
        name: "OpenUI5 Simple Routing",
        includes: [],
        dependencies: {
            libs: ["sap.m", "sap.ui.layout"],
            components: []
        },
        routing:
        {
            config:
            {
                viewType: "JS",
                viewPath: "cag.sbx.views",
                targetControl: "emptyElement",
                clearTarget: false
            },
            routes:
            [
                {
                    pattern: "products/{id}",
                    name: "product",
                    view: "Products"
                },
                {
                    pattern: "",
                    name: "default",
                    view: "Home"
                }
            ]
        }
    },
    init: function()
    {
        sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
        // this component should automatically initialize the router!
        this.getRouter().initialize();
    },
    createContent: function()
    {
        var panel = new sap.ui.commons.ResponsiveContainer("emptyElement");
        return panel;
    }
});

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script id="sap-ui-bootstrap"
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.ui.commons,sap.m"></script>
    <script>
        jQuery.sap.registerModulePath("cag.sbx", "./components/sbx");
        new sap.ui.core.ComponentContainer({
                name: 'cag.sbx'
            }).placeAt("content");
    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

I have created a GitHub repo with the full project and a JSFiddle. In the JSFiddle, you'll notice that there's no HTTP request for a Products.View.js or Login.View.js file if using your browser dev tools.

https://github.com/peder/openui5-simplerouting/

http://jsfiddle.net/nbjvqL96/1/

Naresh Kumar Devalapally Naresh Kumar Devalapally · Accepted Answer · 2015-04-21T05:23:43

You are actually missing two things here :

The base container needs to contain either an sap.m.App or SplitApp so that the pages can be aggregated.
targetAggregation is where these created pages will be placed in targetControl's aggregation. In case of App its pages and for splitapp it can be masterPages or detailPages

I have the updated code at http://jsfiddle.net/nbjvqL96/2/

OpenUI5 Routing Like ASP.NET MVC?

Component.js

index.html

1 Answers