Reputation: 79
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
Upvotes: 1
Views: 8473
Reputation: 5713
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}
});
Upvotes: 1