Using SAPUI5 in Mobile Application Development: Wim Verhelst October 2013

Wim Verhelst
October 2013
MOB107
Using SAPUI5 in Mobile Application Development
2013 SAP AG or an SAP affiliate company. All rights reserved. 2
Disclaimer
This presentation outlines our general product direction and should not be relied on in making a
purchase decision. This presentation is not subject to your license agreement or any other agreement
with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to
develop or release any functionality mentioned in this presentation. This presentation and SAP's
strategy and possible future developments are subject to change and may be changed by SAP at any
time for any reason without notice. This document is provided without a warranty of any kind, either
express or implied, including but not limited to, the implied warranties of merchantability, fitness for a
particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this
document, except if such damages were caused by SAP intentionally or grossly negligent.
Agenda
SAP UI5 Overview

SAP UI5 for Mobile Applications
SAP UI5 Mobile UI Controls and Features
Mobile Look and Feel
Events and Navigation
Phone/Tablet Specific Functionality

Deployment and Development Options

SAP UI5 and SAP Fiori
What is SAP UI5?
A development toolkit for HTML5
A cross-browser JavaScript library for building rich
internet applications
Includes tooling support for development and
testing
Used for the UI of standard SAP solutions and
custom solutions
Available on desktop, mobile and cloud
Extensible; custom UI controls, custom theming,
Browser
How are SAP UI5 Applications developed?
SAP UI5 Applications run in a browser or a
browser component
The start page of a SAP UI5 Application is a
HTML page (e.g., index.html)
SAP UI5 Applications use the Model-View-
Controller concept for the screens and logic
of the application
SAP UI5 Applications consist of
the standard SAP UI5 Libraries
custom files (Javascript, XML, CSS,..)
SAP UI5 Application
Models Views
index.html
Other components (formatter, app,)
SAP UI5 Libraries
Models Controllers Views
Model - View - Controller (MVC)
The Model-View-Controller concept is
used in SAP UI5 Applications
Controller
Model View
Define and
render the UI
Manage the
application data
Manage interaction
between View and
Model
Data binding
Types of SAP UI5 Views
XML View UI is defined in an XML file/string
Javascript View UI is constructed in a traditional manner
JSON View UI is defined via JSON in a file/string
HTML View UI is defined in an HTML file/string
Types of SAP UI5 Models
Resource Model Model based on resource bundles,
OData Model Model for data source in Odata format
XML Model Model for data source in XML format
JSON Model Model for data source in JSON format
Different types of Views and Models can be defined
and combined.
C
o
n
t
r
o
l
l
e
r

SAP UI5 Application
Sample code
Usually each SAP UI5 View has a corresponding Controller.
sap.ui.controller( "myproject.myview" ,{

// onInit: function(){},

// onBeforeRendering: function(){},

// onAfterRendering: function(){},

// onExit: function(){}
});
V
i
e
w

sap.ui.jsview("myproject.myview", {
getControllerName : function() {
return "myproject.myview";
},

createContent : function(oController) {
}
});
To retrieve corresponding controller

Here the UI controls will be added to the view
(for example buttons, edit boxes, images,)

Optional exit methods to manage the views behavior
SAP UI5 Application
Sample code
<html>
<head>

<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>

<script>
var view = sap.ui.view({id:"idmyview1",
viewName:"myproject.myview",
type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
I
n
d
e
x
.
h
t
m
l

Bootstrap the application

Declare the view
Add view to the content
The index.html file refers to the view
Agenda
SAP UI5 Overview



Goal of this session
SAP UI5 for Mobile
SAP UI5 Applications can be accessed on different devices;

SAP UI5 App
SAP
UI5
App
SAP UI5 App
Desktop Tablet Phone
Focus of this session
+ +
SAP UI5 App Concept
SAP UI5 Screen Controls for Mobile
Topics covered
SAP UI5 Mobile Deployment Options
Integration with Mobile Device features

SAPUI5 for Mobile
Supported Mobile Platforms
The SAP UI5 sap.m library is required to define apps, screens, UI controls, for SAP UI5
mobile applications.
sap.m is supported on following plaforms :
Agenda
SAP UI5 Overview



SAP UI5 Mobile Controls
SAP UI5 comes with a lot of mobile specific Controls and Feature
This section will focus on 3 UI Controls; Lists, Charts and SplitApp Control
Features UI Controls
Button
CheckBox
DateTimeInput
Input
NavContainer
MessageToast
Charts
Switch
RadioButton

Carousel
Lists
SplitApp
Popover
TileContainer
Pull to Refresh
Responsive Design
Growing Lists
Swipe Gestures
.
Lists
Examples
SAP UI5 offers a variety of list types for mobile applications
Standard List Display List Input List Custom List Grouped List
Selection List HTML List Action List Inset List
Lists
Examples
Lists as Table
List with HTML
formatting
Lists
Definition
How do you define a list with SAP UI5?

For example:
sap.m.list sap.m.ListItem SAP UI5 List with ListItem
+ =
sap.m.list sap.m.StandardListItem SAP UI5 Standard List
+ =
sap.m.list sap.m.DisplayListItem SAP UI5 Display List
+ =
sap.m.list sap.m.CustomListItem SAP UI5 Custom List
+ =
sap.m.list .
+ =
Lists
Definition
How do you define a list with SAP UI5?

For example:
sap.m.list sap.m.ListItem SAP UI5 List with ListItem
+ =
SAP UI5 Standard List SAP UI5 Input List
Lists
Code Sample
var oListDisplay = new sap.m.List(
{
inset : false,
showUnread: true,
headerText : "Person",
...
items: [
new sap.m.DisplayListItem({
label : "First Name",
value : "Francis"}),
new sap.m.DisplayListItem({
label : "Last Name",
value : "Douglas"}),
....
]
});

List
List Properties
List Item Type
List Item Properties
Split App Control
Examples Portrait Mode
ShowHide Mode Popover Mode Stretch Mode
Hide the master view automatically
when the user switches the device
into portrait mode
The master view is shown inside a
Popover when the user switches the
device into portrait mode

The master view is shown in both
the portrait and landscape mode of
the device
Split App Control
Examples
Seamless transition to mobile phone screen size no separate screen definition necessary
SplitApp
Split App Control
Definition
Master Detail
1. Define a SplitApp
2. Define Master Page(s)
3. Define Detail Page(s)
4. Add Master and Detail Pages to SplitApp
M
1
D
1
M
1
D
2
M
1
D
1
M
2
D
1
M
1
D
2
Split App Control
Code Sample
var oSplitApp = new sap.m.SplitApp("mySplitApp", {});

var oDetailPage1 = new sap.m.Page("detail1", {
...
});

var oMasterPage2 = new sap.m.Page("master2",{
...
});

//add the master pages to the splitapp control
oSplitApp.addMasterPage(oMasterPage2);

//add the detail pages to the splitapp control
oSplitApp.addDetailPage(oDetailPage1);

oSplitApp.setMode("PopoverMode")
SplitApp Control
Define Detail Page 1
Define Master Page 1
Define SplitApp Control
Add Master and Detail
Pages to SplitApp Control
Set Mode of SplitApp Control
Mobile Analytics Kit (MAKit)
Examples
Examples
Definition
Categories
Values
Series
Categories represent a criteria on which to
evaluate the data.
For example year, month, region

The series represent a type of the data.
For example laptop, pc, tablet,

The values express the value of the series
over the displayed categories.
For example, sales of laptops, pcs and
tablets per year.
Code Sample
var oChart = new sap.makit.Chart({
height: "80%", width: "100%"
category : new sap.makit.Category({ column : "yearCategory" }),
series : new sap.makit.Series({ column : "productSeries" }),
values : [new sap.makit.Value({ expression : "revenueValue"})]
});
...
var jsonModel = new sap.ui.model.json.JSONModel();
...
oChart.addColumn(new sap.makit.Column(
{name:"yearCategory", value:"{year}"}));
{name:"productSeries", value:"{product}"}));
{name:"revenueValue", value:"{revenue}", type:"number"}));

oChart.setModel(jsonModel);
oChart.bindRows("/mycollection");
MAKit Chart
Define Chart
Define Model
Add Columns to Chart
(Category, Series and
Values)
Define Category,
Series and Values
Bind Data Model
to Chart
Agenda
SAP UI5 Overview



Layout with Flexboxes
Screen
Flexbox
Screen
Flexbox
Row Layout
Column Layout
var oMyFlexbox = new sap.m.FlexBox({
items: [
new sap.m.Button(...),
new sap.m.Button(...)
]
});

items: [
new sap.m.Button(...),
new sap.m.Button(...)
],
direction: "Column"
});
Screen
element 1
Screen
element 2
Screen element 1
Screen element 2
Flexbox
Horizontal Alignment
Screen
element 1
Screen
element 2
Justify - Start
items: []
});
oMyFlexbox.setJustifyContent('Start');
items: []
});
oMyFlexbox.setJustifyContent(Center');
items: []
});
oMyFlexbox.setJustifyContent(End');
Flexbox
Screen
element 1
Screen
element 2
Justify - Center
Flexbox
Screen
element 1
Screen
element 2
Justify - End
Vertical Alignment
var oMyFlexbox =
new sap.m.FlexBox({
items: []

}).setAlignItems('Start);
Flexbox
Screen element 2
Screen element 1
Justify - Start
var oMyFlexbox =
new sap.m.FlexBox({
items: []

}).setAlignItems(Center);
Flexbox
Screen element 2
Screen element 1
Justify - Center
var oMyFlexbox =
new sap.m.FlexBox({
items: []

}).setAlignItems(End);
Flexbox
Screen element 2
Screen element 1
Justify - End
Adapting to Platform and Screen Size
SAP UI5 adapts to the Mobile OS, browser and screen size;
1. Automatic Adaptation
The Look & Feel of SAP UI5 screen elements is automatically adapted to reflect the Mobile
OS and/or device running the SAP UI5 application.
2. Manual Adaptation
SAP UI5 Developers can selectively override the automatic adaptation and adapt the Look &
Feel of the SAP UI5 application for a specific Mobile OS and/or devices.
Automatic Adaptation
new sap.m.List({
items: [
new sap.m.InputListItem({
label: Vendor",
value : Pacific United",
}),

new sap.m.InputListItem({
label: Status",
value : Dirty",
}),
],
});
iOS Look & Feel
+ SAP Gold Theme
Android Look & Feel
+ SAP Gold Theme
Automatic Adaptation
new sap.m.Slider(...);
iOS Look & Feel
+ SAP Gold Theme
Android Look & Feel
+ SAP Gold Theme
new sap.m.Switch(...);
new sap.m.CheckBox(...);
new sap.m.Label(...);
New sap.m.Input(...);
SAP UI5 Control
CSS
Manual Adaptation
Mobile OS specific styling with CSS
SAP UI5 provides standard CSS classes for each
mobile OS type;
sap-ios
sap-android
sap-winphone
sap-bb
Developers can use these standard CSS classes to
apply custom styling based on the mobile OS type.
iOS
<style>
.sap-ios #myControl {
color: red;}
</style>
var oLabel = new sap.m.Label(
"myControl",
{text : "sample text"});
non-iOS
Manual Adaptation
Mobile OS specific styling with CSS
SAP UI5 provides standard HTML tag attributes;
data-sap-ui-browser :
for browser and browser version information
data-sap-ui-os
for OS and OS version information
Developers can use these standard CSS attributes
to apply custom styling based on the browser and/or
mobile OS type (including version).
SAP UI5 Control
CSS
iOS 5 non-iOS 5
<style>
html[data-sap-ui-os="iOS5.0"] #myControl {
color: red;}
</style>
var oLabel = new sap.m.Label(
"myControl",
{text : "sample text"});
Agenda
SAP UI5 Overview



Navigation
Concept
Recommendation : For SAP UI5 Mobile Applications use the SAP UI5 App concept
App
The root element of the mobile app
Handles navigation
Event Bus
Event broker of the mobile app
Allows to publish and subscribe to events
App
EventBus
View 1
Controller 1
View 2
Controller 2
App View
App
Controller
Navigation
How does navigation work?
Step 1 : App Controller subscribes to Navigation Events of Event Bus (at start up)

Subscribe to events
App Controller
onInit : function() {
...
var bus = sap.ui.getCore().getEventBus();
bus.subscribe("nav", "to", this.navTo, this);
bus.subscribe("nav", "back", this.navBack, this);
...},

navTo : function() {
...
this.app.to();
...},

navBack : function() {
...
this.app.back();
...}
App
EventBus
View 1
Controller 1
View 2
Controller 2
App View
App
Controller
Nav
Button
Navigation
Step 2 : View 1 triggers navigation to View 2 by calling Controller 1

Trigger
Navigation
View 1
createContent : function(oController) {

var oButton = new sap.m.Button({
...
tap : [oController.buttonPushed, oController]
...});

}
View 1
Controller 1
View 2
Controller 2
Nav
Button
App
EventBus
App View
App
Controller
Navigation
Step 3 : Controller 1 publishes navigation event to the Event Bus

View 1
Controller 1
View 2
Controller 2
Publish Event
Controller 1
buttonPushed: function() {
...

var bus = sap.ui.getCore().getEventBus();

bus.publish("nav", "to", {
id : "View2"
...});

...},
Nav
Button
App
EventBus
App View
App
Controller
Navigation
Step 4 : The App receives navigation event and switches the display to View 2

View 1
Controller 1
View 2
Controller 2
Nav
Button
Switch to View 2
Detect Navigation Event
App
EventBus
App View
App
Controller
Mobile Events
SAP UI5 Mobile Applications support all desktop events and additionally some mobile specific
events.

Usually, on<eventName> handler methods are used to react to these events.
click
select
Desktop Events Mobile Browser Events Other Mobile Events
touchstart
touchend
swipe
swipeleft
scrollstart
tap
swiperight
scrollstop
dragstart

touchmove
touchcancel
SAP UI5 Mobile Events
+ +
Mobile Events
Mobile specific SAP UI5 screen controls support the relevant mobile events.

View
var showToast = function()
{
jQuery.sap.require("sap.m.MessageToast");
sap.m.MessageToast.show("Tapped");
};

var oButton = new sap.m.Button(
{text: "Tap me",
width : "100%",
tap : showToast});
Before
Button
tapped
After
Button
tapped
To debug touch events, set the UI5 configuration parameter"xx-test-mobile" to "true on non-
touch devices, for example by appending the url parameter "sap-ui-xx-test-mobile=true".
Agenda
SAP UI5 Overview



Triggering Phone / SMS / E-Mail
SAP UI5 allows to trigger the mobile devices phone, SMS and E-mail functionality and to
launch custom URLs on the device.
Phone
Trigger Phone : sap.m.URLHelper.triggerTel( [Telephone Number] );
View
var triggerPhone =
function(){
sap.m.URLHelper.triggerTel(
0032496000000);
};

var oButtonPhone =
new sap.m.Button(
{text: "Call",
width : "100%",
tap : triggerPhone});
E-mail
View
var triggerMail =
function(){
sap.m.URLHelper.triggerEmail(
"sap@teched2013.com",
"SAP UI5 for Mobile",
"Hello" );
};

var oButtonMail =
new sap.m.Button(
{text: "Send an E-mail",
width : "100%",
tap : triggerMail});
Trigger E-mail : sap.m.URLHelper.triggerEmail( [Address], [Subject], [Text], [CC], [BCC] );
Agenda
SAP UI5 Overview



Deployment Scenarios
Option 1 : Deployment on Servers
SAP UI5 Mobile Applications can be
deployed on a variety of servers
SAP HANA Cloud
SAP NW ABAP Server
SAP NW Java Server
3rd Party Java Application Server
3rd Party Static Web Server
The app will run in the browser on the
mobile device

Data Service
SAP
UI5 App
SAP
UI5 App
SAP
UI5 App
SAP
UI5 App
NW
ABAP
Server
NW
Java
Server
Java
Appl.
Server
Static
Web
Server
SAP
UI5 App
SAP HANA
Cloud Mobile Browser
runs SAP UI5
App
Deployment Scenarios
Option 2 : Deployment in Web Container
SAP UI5 Mobile Applications can be
deployed as a Web Container App
A Web Container App uses a hybrid approach;

Data Service
SAP UI5 App runs as a
Web Container App
SAP
UI5 App
The UI and logic of the app are developed
in HTML/Javascript/CSS
(with SAP UI5 in this case)

These HTML/Javascript/CSS pages are
packaged inside a native app that is
deployed as a standalone app to the device
Running in Web Containers
Example : Generating a native Android SAP UI5 App with Cordova
Develop SAP UI5 as Web App
Test SAP UI5 App on server
Using Cordova, generate a native mobile OS
application project
Import native mobile OS application project into
native OS IDE
Import SAP UI5 libraries and SAP UI5 App Files
into native mobile OS application project
Compile native mobile OS application project into
native app and deploy

SAP UI5 Eclipse
Server
Cordova
Android Eclipse
SAP UI5
App Files
Android
Project
SAP UI5
App Files
SAP UI5
Libs
SAP UI5
App Files
SAP UI5
Libs
Android App
SAP UI5
Libs
SAP UI5 App
SAP UI5 Libs
Android
Project
1
2
3
4
5
1
2
3
5
6
4
6
Development Tips & Tricks
To improve performance of SAP UI5 mobile applications deployed in a web container, minimize
the SAP UI5 standard libraries by removing unnecessary files:
Delete the files of the themes you don't use (for example the "base" and the "sap_bluecrystal"
theme)

Delete the files for the MAKit Charts if you don't use MAKit Charts

Each SAP UI5 Javascript file comes with a debug version; delete debug-version of each file for
productive apps

Delete JQuery files when SAP UI5 is used in the regular way (with sap-ui-core.js)

Consult the SAP UI5 documentation before removing any standard SAP UI5 files.
Agenda
SAP UI5 Overview



Introducing SAP Fiori
A collection of apps with a simple, easy to
use consumer-grade user experience for
broadly and frequently used SAP software
functions that work seamlessly across
devices desktop, tablet, or smartphone

First wave of SAP Fiori already includes 25 apps
My Leave Requests
My Timesheet
My Travel Requests
My Shopping Cart
Track Shopping Carts
Approvals
Insights
Approve Requests
Approve Leave Requests
Approve Timesheets
Approve Travel Requests
Approve Travel Expenses
Approve Shopping Carts
Approve Purchase Orders
Approve Requisitions
Approve Purchase Contracts

Purchasing
My Spend

Track Purchase Order
Order from Requisitions
Requests Insights
My Paystub
My Benefits

Purchasing
Agent
Manager
Employee
Transactions
Insights
SAP
Fiori
Sales
Rep
Create Sales Orders
Change Sales Orders

Check Price and Availability
Track Sales Orders
Track Shipments
Customer Invoices

SAP Fiori allows employees to work seamlessly across devices desktop, tablet, or smartphone.
It provides improved user satisfaction and enables quicker approvals and better decisions.
Architecture SAP Fiori components
SAP NetWeaver AS ABAP
SAP NetWeaver Gateway
Desktop/Tablet/Smartphone
HTML5
Browser SAP Fiori Apps
SAPUI5
Fiori OData Service Proxy
SAP Business Suite
Fiori Data + Model Provider
Odata/HTTPS
Business Application
RFC
Business Content Customizing
Authorization
R
R
R
SAP Fiori Apps
SAPUI5
Fiori components
How to modify a SAP Fiori App?
Export SAP UI5 Code of SAP Fiori App that needs
to be changed
Create a new SAP UI5 Project
Import SAP UI5 Code of SAP Fiori App in SAP
UI5 Project
Make changes in SAP UI5 Project
Export SAP UI5 Code of modified SAP Fiori App
Upload SAP UI5 Code of modified SAP Fiori App
SAP Gateway
Eclipse SAP UI5 SDK
SAP UI5 App Code
SAP UI5
App Files
Upload /
Download
Report
SAP UI5 Project
SAP UI5 App Code
1
2
3
4
5
6
1
2
3
4
5
6
Conclusion
Further Information
SAP Education and Certification Opportunities
www.sap.com/education

Watch SAP TechEd Online
www.sapteched.com/online

SAP Public Web
scn.sap.com
www.sap.com
SAP TechEd Virtual Hands-on Workshops and SAP TechEd Online
Continue your SAP TechEd education after the event!
SAP TechEd Virtual Hands-on Workshops
Access hands-on workshops post-event
Available January March 2014
Complementary with your SAP TechEd registration

SAP TechEd Online
Access replays of keynotes, Demo Jam, SAP TechEd
LIVE interviews, select lecture sessions, and more!
View content only available online
http://saptechedhandson.sap.com/

http://sapteched.com/online
Feedback
Please complete your session evaluation for MOB107.
Thanks for attending this SAP TechEd session.
2013 SAP AG or an SAP affiliate company. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG.
The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and
SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth
in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and
other countries.
Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.

Using SAPUI5 in Mobile Application Development: Wim Verhelst October 2013

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Using SAPUI5 in Mobile Application Development: Wim Verhelst October 2013

Enviado por

Direitos autorais:

Formatos disponíveis

Wim Verhelst

Você também pode gostar