on 03-04-2014 7:06 AM
Dear All,
I am doing some basic development on SAPUI5 framework using Eclipse Kepler.
Problem Statement:
In the below code, I am trying to create a Split App wherein I have Master pages and Detail pages.
But somehow after running the application on Apache server or Web App Preview in Eclipse,
the statement " alert(oSplitApp.addMasterPage(oMasterPage1).addMasterPage(oMasterPage2)); " did not execute and consequently I did not get the output !
Note:
I have added few alerts to track/debug the issue where i found that alert("3"); did not come as its is after the addMasterPage statement.
* Please review my code and share your views or experiences on the same.
Code:-
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">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->
<script>
alert("0"); // This alert comes.. so we can move ahead ..
var oSplitApp = new sap.m.SplitApp("mySplitApp", {});
var oDetailPage1 = new sap.m.Page("detail1", {
title : "Detail 1",
content : [ new sap.m.Label({
text : "this is Detail 1"
}) ]
});
var oDetailPage2 = new sap.m.Page("detail2", {
title : "Detail 2",
content : [ new sap.m.Label({
text : "this is Detail 2"
})
]
});
var oMasterPage1 = new sap.m.Page("master1",{
title : "Master",
content : [ new sap.m.List({
items : [ new sap.m.StandardListItem({
title : "To Master 2",
type : "Navigation",
tap : function() {
oSplitApp.toMaster("master2");
}
})]
}) ]
});
var oMasterPage2 = new sap.m.Page("master2",{
title : "Master2",
navButtonTap : function() {oSplitApp.backMaster();},
content : [ new sap.m.List({
mode:"SingleSelectMaster",
select: function(oEv) {
if(oEv.getParameter("listItem").getId() == "listDetail2") {
oSplitApp.toDetail("detail2");
}
else {
oSplitApp.toDetail("detail1");
}
},
items : [ new sap.m.StandardListItem("listDetail2",{
title : "To Detail 2"
}),
new sap.m.StandardListItem("listDetail",{
title : "To Detail 1"
}) ]
}) ]
});
alert("2"); // alert 2 did appears , so great..
//add the master pages to the splitapp control
oSplitApp.addMasterPage(oMasterPage1).addMasterPage(oMasterPage2) ; /// This does not execute...
alert("3"); // alert 3 did not come . !!
//add the detail pages to the splitapp control
oSplitApp.addDetailPage(oDetailPage1).addDetailPage(oDetailPage2);
oSplitApp.setInitialDetail("detail1");
oSplitApp.setInitialMaster("master1");
oSplitApp.setDefaultTransitionNameDetail("fade");
oSplitApp.placeAt("content");
oSplitApp.setMode("PopoverMode");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
.......
Thanks and Regards,
Anshul Arora
Hi Anshul,
I do not see any error in above code. I just recreated this example on JS Bin and did not find any error.
I am getting all alerts as well. you can check at JS Bin - Collaborative JavaScript Debugging
Regards,
Chandra
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Anshul,
Yes I recreated this example and tried to run in eclipse but was not able to see any output. yes seems to be issue with eclipse but not sure on exact reason. but it is always better to run the application on chrome browser as it has great tool Developer console(F12) which helps us to troubleshoot problems.
Regards,
Chandra
Hi Chandrashekhar,
I have another query.
Given Information description :
I can create a SAPUI mobile app project using SAPUI5 framework in eclipse.
As all the development in SAPUI5 is web based such as HTML, JS, CSS .
We can package it and import in an Android native app project in Android SDK/ADT that is deployed as standalone app in the device.
SAPUI5 mobile application can be deployed on variety of servers such as SAP Netweaver ABAP server / SAP NW Java Server / 3rd party Java Application Server.
Queries :
We create solutions on SAP MII product that runs on SAP Netweaver.
We can developed many pages(.irpt ) , charts and dashboards as a part of manufacturing integration and intelligent solutions on SAP MII.
Query1:
If I want to bring those developed pages that work on desktop browser on Mobile Device, Will SAPUI5 be of any help ?
Query2:
Secondly,
SAPUI5 mobile application can be deployed on variety of servers such as SAP Netweaver ABAP server.
* Is SAP ABAP NW server is same as SAP Netweaver that we normally use as a platform for many SAP product like SAP ME / SAP MII ?
Query 3:
If it is same then Can we integrate SAP MII with SAPUI5 mobile application ? If yes then what is the way ?
Aim:
The ultimate aim is to bring our developed application on SAP MII to mobile devices or we want to use SAP MII as an app on Mobile device.
I have researched that SAP APP builder, Phonegap, SAP Fiori, SMP are ways by which we can build mobile apps but I did not get integration of those app with SAP Product like SAP MII.
Thanks and Regards,
Anshul Arora
This is my component.js file
when i using subrouters for detailPage it give me error like that "Control with ID splitApp could not be found - EventProvider sap.ui.core.routing.Target "
how can i resolve this
jQuery.sap.declare("sap.demo.timeCart.Component");
sap.ui.core.UIComponent.extend("sap.demo.timeCart.Component",{
metadata: {
routing: {
config: {
viewType: "XML",
viewPath: "timecart",
targetControl: "splitApp",
clearTarget: false,
transition: "slide"
},
routes: [
{ pattern: "",
name: "default",
view: "Category",
targetAggregation: "masterPages",
subroutes: [
{
pattern: "",
name: "welcome",
view: "Welcome",
targetAggregation : "detailPages"
}
]
}
]
}
},
init: function() {
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
jQuery.sap.require("sap.ui.core.routing.HashChanger");
//call createContent
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
this._router = this.getRouter();
//initlialize the router
this._routeHandler = new sap.m.routing.RouteMatchedHandler(this._router);
this._router.initialize();
},
createContent: function() {
var oView = sap.ui.view({
id: "app",
viewName: "timecart.App",
type: "XML",
viewData: {component: this}
});
var oModel = new sap.ui.model.json.JSONModel('mockdata/products.json');
oView.setModel(oModel,'products');
var data = {
items: []
}
var oCartModel = new sap.ui.model.json.JSONModel(data);
oView.setModel(oCartModel,'cart');
return oView;
}
})
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
84 | |
25 | |
12 | |
9 | |
6 | |
6 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.