develop your first mobile application with portal on device

Develop Your First Mobile Application

with Portal on Device Dong Pan, Aviad Rivlin

[

Real Experience. Real Advantage.

[

2

Learning Points

Simplified mobile business app development with Portal on

Device

Near-native user experience with HTML5-based mobile web

applications

Lower TCO with the device-agnostic approach to mobile app

development


[

3

Agenda

Introduction to Portal on Device

Create the Application Skeleton

Device-Portal Interaction Model

Consume NetWeaver Gateway Services

Java-based Consumption

Take the Load off Portal

Let’s Take This Offline

Shake it to Find Local Banks

Consume HANA Data

Summary


[ Portal in the Overall SAP Strategy

4

Improvements for portal core (TCO reduction) Enhancing Enterprise Workspaces Professional Web Content Management Professional Document Management

Smart integration with on demand solutions (SAP and third party services)

Social Intelligence tools for SAP StreamWork Support for common web standards

Easy consumption via browser or mobile devices Appealing branding based on Ajax Framework Aligned offering with Sybase portfolio

Reliable infrastructure with minimal TCO


[

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.

The Underlying UI of Portal on Device

jQuery Mobile is a unified, HTML5-based, touch-optimized Web

user interface framework for smartphones and tablets.

Multiple “pages" may exist in the same HTML file.

Rich, native-like experience, such as advanced transitions.

Uses HTML5 data- attributes for page styling and component

behavior.

Unlimited theming possibilities with simple tools


[

6

Agenda









Consume HANA Data

Summary


[


Steps to Create a HelloWorld PoD Application

Create a regular Portal Application project and an

AbstractPortalComponent

Use the HTML5 Utility library to set HTML5 DOCTYPE

Create mobile UI in JSP/html pages

Include jQuery Mobile JS, CSS, image and JSP/html files in the

doContent method


[


Important: Set HTML5 DOCTYPE

Default portal pages are not compliant with HTML5. To render the

mobile pages correctly, we need to:

Override service method of AbstractPortalComponent

Use the utility library to set the correct DOCTYPE

public void service(IPortalComponentRequest request, IPortalComponentResponse response)

throws PortalComponentException {

EnhancedPortalResponse epResponse = new EnhancedPortalResponse(request, true,

false);

epResponse.setDocTypeToHtml5();

super.service(request, response);

}


[


Create helloworld.jsp Page

<div data-role="page" data-theme="a" id="HomePage" class="backgroundFixed">

<div data-role="header" data-theme="b">

<h1>Demo App</h1>…

</div>

<div data-role="content">

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">

<li><a href="#Page_MyLinks" data-transition="slide">My Links<span class="ui-li-

count” >5</span></a></li>

…

</ul>

</div>

<div data-role="footer" data-position="fixed" data-theme="b">

<h1 align="center"></h1>

</div>

</div>

<div data-role="page" data-theme="a" id="Page_MyLinks" class="backgroundFixed">

…

</div>


[

11

Demo – Application Skeleton


[


Useful Tips

The HTML5 utility library can be used to add additional

elements, e.g.

Cache Manifest file (we will talk about this later)

External JavaScript files

Meta and Link tags

Custom URL schemes can be used to launch native apps,

bridging the web app and native apps


[

13

Agenda









Consume HANA Data

Summary


[


The Scenario

Add a page to show a list of sales orders retrieved from an

ECC system

JCA (Java EE Connector Architecture) will be used to

connect to the ECC system.


[


D

evic

e

Design Pattern I: Device-Portal Interaction Model

• Business logic encapsulated in the mobile-oriented portal components

• Data exchange between mobile UI and the business logic components is

based on AJAX and JSON

• Decoupling the business logic and UI allows the freedom to choose any

mobile UI library

• Minimizing the data volume transferred on the mobile network.

P

ort

al

Portal Services

Portal Components (Business Logic here)

AJAX Response in JSON format

Mobile UI

AJAX Requests (plain/JSON)


[


Overall Steps

Add build-time and runtime references for JCA

Create a separate portal component to handle sales order

retrieval and delivery

Add JavaScript functions to retrieve JSON-formatted sales

orders by AJAX calls

Add a jQuery Mobile page to helloworld.jsp to display sales

orders


[

17

Demo: Display Sales Orders


[


Useful Tips

JSON utility classes can be found in the HTML5 utility library.

To output pure JSON, bypass document hooks by using the

following URL:

/irj/servlet/prt/prtrw/prtroot/myMobileApp.SalesOrder

Build semi-static data into the DOM for smooth navigation

back and forth.


[

19

Agenda









Consume HANA Data

Summary


[


The Scenario and the Implementation Steps

The Scenario

Add a page to show a list of banks retrieved from NetWeaver

Gateway

Overall Steps:

Add build-time and runtime references to Gateway Java

Library

Create a separate AbstractPortalComponent to handle data

retrieval from Gateway and data delivery (JSON) to devices

Add an AJAX call to consume the JSON-formatted bank list

Add a page to render the bank list


[

21

Demo: Retrieve Bank List from NetWeaver Gateway via Portal


[

22

Agenda



Backend Data Consumption Model






Consume HANA Data

Summary


[


The Scenario

Scenario: Retrieve the list of banks directly from NetWeaver

Gateway by JavaScript.

Challenge: Impossible to retrieve data from Gateway due to

JavaScript Same-Origin Policy

Mobile Browser

Main Page

Portal

http://<portal>

Gateway

http://<Gateway> datajs lib REST

calls X


[


Design Pattern II: HTML5-based Cross-Site Data Retrieval

Add a ProxyPage on the Gateway system to handle generic Gateway calls by

datajs.

Use HTML5 Cross Document Messaging for cross-domain data exchange

Main page dynamically spawns a hidden iframe that points to the ProxyPage.

Main page sends commands to the ProxyPage to perform data

retrieval/update/etc.

ProxyPage sends REST data (in JSON format) back to main page

Mobile Browser

Hidden iframe

http://<gateway>/ProxyPage.html

Datajs lib

Main Page

http://<portal>

Cross

Document

Messaging

Portal

Gateway


[

25

Demo: Retrieve Bank List from NetWeaver Gateway Directly


[


Best Practices

Take the load off portal for better scalability if the data is

already exposed to Internet directly

The typical cross-domain challenge can be addressed by

Cross Document Messaging and Cross-Origin Resource

Sharing (CORS)

Generalize ProxyPage in the Gateway system to suit all kinds

of consuming applications


[

27

Agenda









Consume HANA Data

Summary


[


Design Pattern III: Make Your iView an Offline Web App

“Appify” offline-capable iViews (HTML5 Offline Web App) to make it always available

Sync semi-static data to the browser’s local database, eliminating unnecessary roundtrips

to portal

Use a dedicated Web Worker thread for background synchronization to create a highly

responsive UI

Ideal for lightweight data centric application

Offline iView

Web

Worker

DB

Portal Main

Thread

Sync


[

29

Demo: Offline-Capable iView on Home Screen


[


Best Practices

Place the pages in a HTML file (not JSP) in the portal application,

which will serve as the entry point to install the offline app.

Use HTML5 offline cache to speed up loading of both online

and offline applications

Configure AS Java to serve the correct MIME type for the cache

manifest.

Configure your offline app to run full-screen with a startup

image to give it a professional look

Android browser does not support Web Workers yet. Use in-

thread sync instead.

Consider Sybase Unwired Platform for complex DB sync


[

31

Agenda









Consume HANA Data

Summary


[


Design Pattern IV: New Ways of Human Interaction

Use the new ways of human interaction to create highly

professional mobile web applications

Modern mobile devices are equipped with smart sensors that were

never available to desktops and laptops

The smart sensors have made possible cool new ways of human-machine

interaction

HTML5 applications have access to most sensors including

accelerometer, gyroscope, GPS, compass, camera*, microphone*.


[

33

Demo: Find Local Banks with a Shake Gesture


[

34

Agenda









Consume HANA Data

Summary


[


Design Pattern V: Visualize Data with Canvas and SVG

Requirements

Retrieve data from HANA and show it on mobile devices in an

appealing way.

Solution:

Maintain HANA as a JDBC DataSource on AS Java.

Use HTML5 Canvas or SVG to visualize the data. SVG and

Canvas are well supported on popular mobile devices.


[

36

Demo: Consume HANA Data


[

37

Agenda









Consume HANA Data

Summary


[

38

Key Learnings

Leverage NetWeaver Portal’s rich connectivity to various

backend systems.

Separate business logic and UI into different portal components

to allow UI flexibility, responsiveness and reusability

Use cross-site data retrieval via JavaScript whenever possible

to build a highly scalable solution

Make offline-capable iViews always available on home screen.

Use HTML5 Canvas and SVG for a more vivid user experience

without browser plug-ins.

Leverage new ways of human interaction to impress your users


[ Further information

General Information

Follow us on Twitter: http://twitter.com/#!/PORTAL_SAP

Demo videos: http://www.youtube.com/user/SAPNetWeaverPortals

Decisions Makers

Overview information on www.sap.com

Technical Consultants, Developers & Architects

SCN Portal Community: http://scn.sap.com/community/portal

Detailed release notes for SAP NetWeaver 7.3

Project Managers

Release Notes, Documentation: http://help.sap.com > SAP NetWeaver

SAP Release Brochure: http://service.sap.com/releasestrategy

Partners

Partner Portal: https://service.sap.com/partnerportal/products

Solutions on SAP EcoHub: http://ecohub.sdn.sap.com

39

http://twitter.com/

http://www.youtube.com/user/SAPNetWeaverPortals

http://www.sap.com/platform/netweaver/components/portal/index.epx

http://scn.sap.com/community/portal

http://help.sap.com/saphelp_nw73/helpdata/en/a2/fc644eb17e43b3a6442c5c522ad55e/frameset.htm

http://help.sap.com/

http://service.sap.com/releasestrategy

https://service.sap.com/partnerportal/products

http://ecohub.sdn.sap.com/


[ Join other portal-related ASUG sessions

2214 SAP Portal Roadmap: Innovations On Premise, On Demand and On Device

3903 SAP Portal Influence Council

2201 SAP NetWeaver Portal 7.3 – top 5 reasons to upgrade to the new portal release

2203 Best practices for successfully upgrading your portal to SAP NetWeaver 7.3

2207 "From Document Management to Social and Mobile Content Management –

with SAP Portal Content Management by OpenText"

2114 External Facing Portal: solution that fits your needs

2112 Lessons learned for implementing appealing extranets with SAP NetWeaver Portal

2102 Content consumption and interoperability between SAP NetWeaver Portals

2204 SAP NetWeaver Portal On Device – accessing your existing SAP NetWeaver Portal on mobile devices

2209 A day in a life of a manger: mobile intranet using desktop, tablets and smartphone devices

2211 Develop your first mobile application with Portal on Device

2108 Leverage the Power of Social Networks in your organization, by SAP Enterprise Workspaces

2110 Customer story: use EP inside multi-portal organizations

2213 Lessons learned by Colgate-Palmolive with Enterprise Workspaces 1.x for SAP NetWeaver Portal

40


[

41

[

] Thank you for participating.

SESSION CODE:

2211

Please remember to complete and return your

evaluation form following this session.

For ongoing education on this area of focus, visit the

Year-Round Community page at www.asug.com/yrc

develop your first mobile application with portal on device

Technology