on 08-27-2013 1:59 PM
Hi All
I am beginner in SAP UI 5 app development.
I planning to develop a simple app with multiple screens.
I want to move from one screen to another, but i found only the code in which all the pages are defined in index.html.
When i launch the SAPui 5 app, by default index.html file will be launched, how can i move from this page to some other eg: SamplePro.view.html and display the that page, I did not find any sample code for that & no documentation.
In my app i have couple of files
1. index.html
2. SamplePro.view.html
3. SamplePro.controller.js
Please suggest how to implement the above functionality.
Please find my code below.
index.html code
-----------------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-fakeOS="android"
data-sap-ui-theme="sap_mvi" >
</script>
<!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->
<!-- <script>
sap.ui.localResources("samplepro");
var app = new sap.m.App({initialPage:"idSamplePro1"});
var page = sap.ui.view({id:"idSamplePro1", viewName:"samplepro.SamplePro", type:sap.ui.core.mvc.ViewType.HTML});
app.addPage(page);
app.placeAt("content");
</script>
-->
<script>
// create a mobile App
// it initializes the HTML page for mobile use and provides animated page handling
var app = new sap.m.App("samplepro", {initialPage:"page1"}); // page1 should be displayed first
// create the first page of your application
var page1 = new sap.m.Page("page1", {
title: "Initial Page",
content : new sap.m.Button({ // content is just one Button
text : "Go to Page 2",
tap : function() {
app.to("page2"); // when tapped, it triggers drilldown to page 2
}
})
});
/* var oMyFlexbox = new sap.m.FlexBox("fB");
oMyFlexbox.setVisible(true);
//oMyFlexbox.addItem( new sap.m.T );
oMyFlexbox.addItem( new sap.m.Button({text: "Button 2"}) );
oMyFlexbox.setJustifyContent('Start');
oMyFlexbox.setAlignItems('Start'); */
// create the second page of your application
var page2 = new sap.m.Page("page2", {
title: "Page 2",
showNavButton: true, // page 2 should display a back button
navButtonTap: function(){
//app.back(); // when tapped, the back button should navigate back up to page 1
app.to("page1")
},
icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",
//content : this.createContentD()
});
/* function createContentD(){
var arr = [
oMyFlexbox
];
return arr;
} */
app.addPage(page1).addPage(page2); // add both pages to the App
app.placeAt("content"); // place the App into the HTML document
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
-----------------------------------
SamplePro.view.html code
------------------------------------------
<template data-controller-name="samplepro.SamplePro">
<div data-sap-ui-type="sap.m.Page" data-title="Title">
<div data-sap-ui-aggregation="content">
</div>
</div>
</template>
--------------------------------
SamplePro.controller.js code
----------------------------------------------------------------
sap.ui.controller("samplepro.SamplePro", {
/**
* 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 samplepro.SamplePro
*/
// onInit: function() {
//
// },
/**
* 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 samplepro.SamplePro
*/
// 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 samplepro.SamplePro
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf samplepro.SamplePro
*/
// onExit: function() {
//
// }
});
-----------------------------------------------------------------
Hi,
First you create an app (initial page is the id of the first page to show):
var app = new sap.m.App({initialPage:"searchpage"});
Then you create your pages (1 view per page):
var page = sap.ui.view({id:"searchpage", viewName:"myapp.searchpage", type:sap.ui.core.mvc.ViewType.JS});
var resultpage = sap.ui.view({id:"resultpage", viewName:"myapp.resultpage", type:sap.ui.core.mvc.ViewType.JS});
var detailpage = sap.ui.view({id:"detailpage", viewName:"myapp.detailspage", type:sap.ui.core.mvc.ViewType.JS});
Then you add the pages to your app:
app.addPage(page).addPage(resultpage).addPage(detailpage);
Don't forget to place your app to the content
app.placeAt("content");
You can navigate like this:
- to a specific page: app.to("resultpage");
- 1 page back: app.back();
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Stephanie,
I used the above approach but my UI elements are not displayed entirely. This display the UI only for a page and the remaining UI elements are ignored and unable to scroll down to see the remaining UI.
I want to do a simple navigation in a desktop application. Any details would be really helpful.
Thanks,
Nikhil
Hi Khan,
Check out this thread http://scn.sap.com/thread/3389483, it has exactly what you're looking for.
Here is a small chunk of code for reference.
var app = new sap.m.App("<main app ID>"); -> u need to create an instance of your app and then,
app.to("<app page ID of the page u want to navigate to>")
Hope it helps.
Regards,
Prathik
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi,
You can check the following blog : http://scn.sap.com/community/mobile/blog/2013/04/21/building-sapui5-mobile-application-on-ios-with-p...
Regards
Tahir
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
93 | |
10 | |
10 | |
9 | |
9 | |
7 | |
6 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.