|
Hi, After following SAPUI5 project setup for beginners with HTML views – Part1: Installation you can start with development in SAPUI5. In this blog I’ll explain a good way to build your SAPUI5 project with navigation between two views and how to pass data between views. This blog is the second part of the blog series “SAPUI5 project setup for beginners with HTML views”. All different parts: Part1: Installation Part2: Navigation and storing data with a global model – full project https://github.com/lemaiwo/SAPUI5-part1 Part3: Navigation and storing data with different models – full project https://github.com/lemaiwo/SAPUI5-part2 Part4: Testing your application Part2: Navigation and storing data with a global modelOverview: Create a SAPUI5 project with a JS View Create two new HTML Views Create a javascript file and extend the SAP application object Change the theme and add the required library’s Instantiate the two views and the navigation in a root View Add content to the first HTML View and create the functions in the controller Add content to the second HTML View and create the functions in the controller Test the application
Create a SAPUI5 project with a JS ViewStart with creating your SAPUI5 project 
Select Desktop as traget device. The mobile library will be added later to the project later. It’s possible to combine the two library’s. 
Create a Javascript View, which will be the container for the application.
 
Create two new HTML ViewsCreate two html views, a First view and a Second view. Later in this blog I will pass data between these views. Starting with the firstview 
 
Create a javascript file and extend the SAP application objectAfter creating these two views, create a javascript file called “Application.js” under the folder WebContent. This file will be used for declaring our global models and instantiate the application container view. 
Add the following code to this javascript file: jQuery.sap.declare("Application");
jQuery.sap.require("sap.ui.app.Application");
sap.ui.app.Application.extend("Application", {
init : function() {
// set global models
var model = new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(model, "model");
},
main : function() {
// create app view and put to html root element
var root = this.getRoot();
sap.ui.jsview("app", "firstsapui5project.App").placeAt(root);
}
});
This code defines this file with the name “Application”. So the file can be used with this name. The code loads the SAP version of application, “sap.ui.app.Application”, and then extends it. In the init the global modal is defined which is in currently empty. This could be connected with a gateway service. In the main function the “App” view is pushed to the root div on the index.html which will come in the next step. Change the theme and add the requires library’sIn the index.html page is some default SAPUI5 generated content: <script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("firstsapui5project");
var view = sap.ui.view({id:"idApp1", viewName:"firstsapui5project.App", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
Delete the second part and start changing the first part where the SDK is defined. In my case I’ve changed the src to my local version of the SDK. This is two folders up from the index.html page. The SDK is in the same folder as the project. It has to go two levels up because the index.html page is under the WebContent folder. Instead of the local SDK, it is possible to use the online version and change the src to https://sapui5.hana./sdk/resources/sap-ui-core.js 
Add the sap library’s sap.m and sap.me to data-sap-ui-libs and change the theme to the new Fiori look-a-like design, “Blue Cristal”, in data-sap-ui-theme. <script src="../../HTML5Evaluation_complete_1.16.3_1/sapui5-sdk-static/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons, sap.m, sap.me"
data-sap-ui-theme="sap_bluecrystal">
</script>
Next step is to load all the files and the Application.js . Create an object of the “Application” with the name of the div where the views have to be placed, “content”. <script>
sap.ui.localResources("firstsapui5project");
//Register your application js
jQuery.sap.registerModulePath('Application', 'Application');
// Load your application js
jQuery.sap.require("Application");
//Create an object of the Application class and set content as root
//the DIV content will be used to put the views in
var app = new Application({ root : "content" });
</script>
Instantiate the two views and the navigation in a root ViewSo far so good, the index.html calls the Application which, again, calls the first view. This view is a jsview which will be used as a container for the application. Now the container view has to be build. Therefore I will copy the content of the App.controller.js and the App.view.js from the inbox application of the mobile demo kit in the test-resources of the SAPUI5 SDK. This is explained in part 1 of this blog: SAPUI5 project setup for beginners with HTML views – Part1: Installation
In the controller I change the custom part with the views and preferences (such as the transition,…) Change the Pages, default page and the first part in getViewName to the name of the folder where all your views are stored. //=== Custom Part ==================================================================
PAGE : {
FirstView : { type : "HTML", app : "App", master : undefined },
SecondView : { type : "HTML", app : "App", master : undefined }
},
getDefaultPage : function() {
return "FirstView";
},
getViewType : function(pageId) {
return this.PAGE[pageId].type;
},
getViewName : function(pageId) {
return "firstsapui5project." + pageId;
},
getAppId : function(pageId) {
return this.PAGE[pageId].app;
},
isMaster : function(pageId) {
return this.PAGE[pageId].master;
},
getTransition : function(pageId) {
if ("App" === this.getAppId(pageId)) {
return "flip";
} else if (jQuery.device.is.phone || this.isMaster(pageId)) {
return "slide";
} else {
return "show";
}
},
isRootInApp: function(pageId) {
return false;
},
writeToHistory : function(pageId) {
return true;
},
Everything generic may stay the same and can be reused. This code is used in the application for the navigation between pages. Also add the following at top of the page: jQuery.sap.require(“sap.m.InstanceManager”); jQuery.sap.require(“jquery.sap.history”); For the App.view.js we add the following code to the method createContent. This is based on the App.view.js from the inbox application in the test-resources. createContent : function(oController) {
// to avoid scrollbars on desktop the root view must be set to block display
this.setDisplayBlock(true);
// create app control
this.shell = new sap.m.Shell("Shell", {
title : "My First SAPUI5 Project"
});
this.app = new sap.m.App("App");
// add only the first page. Second page is lazy loaded
this.app.addPage(sap.ui.htmlview("FirstView", "firstsapui5project.FirstView"));
this.app.addPage(sap.ui.htmlview("SecondView", "firstsapui5project.SecondView"));
this.shell.setApp(this.app);
// done
return this.shell;
}
The code instantiate a Shell component and an App component. It also instantiate the two HTML views and add them to the App component. The first view added to the App component will be shown on the screen. In the last step the App component is added to the Shell component and it returns the Shell component. All available views are instantiated but only the first one is shown. The first parameter to instantiate the htmlview is the name of the view and has to be identically to the name of the PAGE in the App.controller.js. The second parameter is the id of the view which you can find at top of the page of the html view as well in the controller as in the view. Add content to the first HTML View and create the functions in the controllerIn the first HTML view I’ve added the following code between the template tags: <div data-sap-ui-type="sap.m.Page" data-title="First View">
<div data-sap-ui-aggregation="content">
<div data-sap-ui-type="sap.ui.commons.form.Form" id="myForm">
<div data-sap-ui-aggregation="layout" data-sap-ui-type="sap.ui.commons.form.ResponsiveLayout"id="myLayout"></div>
<div data-sap-ui-aggregation="formContainers">
<div data-sap-ui-type="sap.ui.commons.form.FormContainer" id="myInfoContainer" data-title="Form Input">
<div data-sap-ui-aggregation="formElements">
<!-- input field -->
<div data-sap-ui-type="sap.ui.commons.form.FormElement">
<div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-linebreak="true" data-margin="false"></div>
<div data-sap-ui-aggregation="label" data-sap-ui-type="sap.m.Label" id="inputLabel" data-text="Input">
<div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "2"></div>
</div>
<div data-sap-ui-aggregation="fields" data-sap-ui-type="sap.m.Input" id="inputValue" data-value="{model>/input}">
<div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "8"></div>
</div>
<div data-sap-ui-aggregation="fields" data-sap-ui-type="sap.m.Button" id="btn1" data-text="To Second Page" data-tap="secondView">
<div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-sap-ui-aggregation="customHeader">
<div data-sap-ui-type="sap.m.Bar">
<div data-sap-ui-aggregation="contentMiddle">
<div data-sap-ui-type="sap.m.Label" data-text="First View">
</div>
</div>
</div>
</div>
</div>
The first DIV is to define the page and it is possible to add a title. In this DIV, there are two other parts. ther is the content and the custom header. In the custom header I add the bar component with a label in the middle for the title of the first view. The other part, the content part, is the part which is the main of the application. Here I’ve added a form with responsive layout which contains a label, input and a button.The input field is binded to the global model defined in the Application.js: data-value=”{model>/input}” In the button we add a tap event: data-tap=”secondView” The method behind this tap event is defined in the controller of the first view: secondView: function(){
var bus = sap.ui.getCore().getEventBus();
bus.publish("nav", "to", {
id : "SecondView"
});
}
Use the EventBus to navigate to the SecondView, therefore the EventBus needs the ID of the view which is defined in App container Add content to the second HTML View and create the functions in the controllerIn the seconde view I’ve added the following html code between the template tags: <div data-sap-ui-type="sap.m.Page" data-title="Second View">
<div data-sap-ui-aggregation="content">
<div data-sap-ui-type="sap.ui.commons.form.Form" id="myForm">
<div data-sap-ui-aggregation="layout" data-sap-ui-type="sap.ui.commons.form.ResponsiveLayout"id="myLayout"></div>
<div data-sap-ui-aggregation="formContainers">
<div data-sap-ui-type="sap.ui.commons.form.FormContainer" id="myInfoContainer" data-title="Option 1">
<div data-sap-ui-aggregation="formElements">
<!-- input field -->
<div data-sap-ui-type="sap.ui.commons.form.FormElement">
<div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-linebreak="true" data-margin="false"></div>
<div data-sap-ui-aggregation="label" data-sap-ui-type="sap.m.Label" id="inputLabel" data-text="Input">
<div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "2"></div>
</div>
<div data-sap-ui-aggregation="fields" data-sap-ui-type="sap.m.Text" id="inputValue" data-text="{model>/input}">
<div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "10"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-sap-ui-aggregation="customHeader">
<div data-sap-ui-type="sap.m.Bar">
<div data-sap-ui-aggregation="contentLeft">
<div data-sap-ui-type="sap.m.Button" data-icon="sap-icon://nav-back" data-tap="back">
</div>
</div>
<div data-sap-ui-aggregation="contentMiddle">
<div data-sap-ui-type="sap.m.Label" data-text="Second View">
</div>
</div>
</div>
</div>
</div>
This is a comparable to the first view except for the input field. The input field is changed to a text view, but also bound to the global model: data-text=”{model>/input}” In the customHeader I’ve added an back button: <div data-sap-ui-aggregation="contentLeft">
<div data-sap-ui-type="sap.m.Button" data-icon="sap-icon://nav-back" data-tap="back">
</div>
</div>
In the controller we have to add a function to catch the tap event on the back button: back: function(){
var bus = sap.ui.getCore().getEventBus();
bus.publish("nav", "back");
}
Test the applicationNow you are ready to test the application. For testing this application there is SAPUI5 project setup for beginners with HTML views – Part4: Testing your application with the required steps: First View:
Second View:
As you can see the text that we have typed in the first view is visible in the second screen. This is how you can pass data from one view to another. But there are other ways like in the following blog: You can find the full project at https://github.com/lemaiwo/SAPUI5-part1 Next step Part3: Navigation and storing data with different models Kind regards, Wouter
|
