UI5 Component Concept issue

Question

I'm trying to use the component concept for UI5 and have just built the below:

Index.html snippet:

<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.ui5test.myapp": "./"
            }'>
        </script>
        <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

        <script>
        new sap.m.Shell({
            app : new sap.ui.core.ComponentContainer({
                name : "sap.ui.ui5test.myapp"
            })
        }).placeAt("content");

        </script>

Component.js snippet:

jQuery.sap.declare("sap.ui.ui5test.myapp.Component");

sap.ui.core.UIComponent.extend("sap.ui.ui5test.myapp.Component", {

        createContent : function() {
            var oView = new sap.ui.core.mvc.View({
                id : "testview",
                name : "sap.ui.ui5test.myapp.views.FirstView",
                type : "JS",
                viewData : {component : this}
            });

            var jsonModel = new sap.ui.model.json.JSONModel();
            jsonModel.loadData('http://api.openweathermap.org/data/2.5/weather?q=Auckland');
            //jsonModel.loadData('http://api.openweathermap.org/data/2.5/group?id=524901,703448,2643743&units=metric');
            sap.ui.getCore().setModel(jsonModel);

            oView.setModel(jsonModel);


        }

});

In the above snippet for component.js, if I return the view as return oView; it is giving me an error saying "Uncaught TypeError: undefined is not a function". It goes away as soon as I remove the return statement.

If I dont return the view will it navigate to the view I instantiated and loaded above? As I see in the chrome developer tools, I do not seem to find the js file for FirstView to open it as I think it is not getting loaded.

Please suggest how to correct this and how to navigate further.

Awaiting your prompt responses eagerly.

Cheers, AW

createContent : function(oController) { // to avoid scroll bars on desktop the root view must be set to block display this.setDisplayBlock(true); this.app = new sap.m.SplitApp(); var masterView = new sap.ui.core.mvc.XMLView({ id : "master", // sap.ui.core.ID viewName : "sap.ui.ui5test.myapp.views.Master", // string }); this.app.addPage(masterView, true); return app; /*return new sap.m.Page({ title: "Title", content: [ ] });*/ } Snippet for FirstView.js — user3905218

Haojie Haojie · Accepted Answer · 2014-08-06T04:53:57

I checked your FirstView.js. Please do the following in your return statement:

return this.app;

As there is no local variable called app, if you write return app, then app is undefined.

Please use sap.ui.view in your createContent method:

     var oView = new sap.ui.view({
        id : "testview",
        viewName : "sap.ui.ui5test.myapp.views.FirstView",
        type : "JS",
        viewData : {component : this}
    });

UI5 Component Concept issue

1 Answers