[

Develop Your First Mobile Application with Portal on Device

Dong Pan, Aviad Rivlin

[ 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

Real Experience. Real Advantage.

[ 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 Lets Take This Offline Shake it to Find Local Banks

Consume HANA Data Summary

Real Experience. Real Advantage.

[ Portal in the Overall SAP Strategy

Easy consumption via browser or mobile devices Appealing branding based on Ajax Framework Aligned offering with Sybase portfolio Smart integration with on demand solutions (SAP and third party services) Social Intelligence tools for SAP StreamWork Support for common web standards Improvements for portal core (TCO reduction) Enhancing Enterprise Workspaces Professional Web Content Management Professional Document Management Reliable infrastructure with minimal TCO

Real Experience. Real Advantage.

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

Real Experience. Real Advantage.

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.

[ 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 Lets Take This Offline Shake it to Find Local Banks

Consume HANA Data Summary

Real Experience. Real Advantage.

[ 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

Real Experience. Real Advantage.

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.

[ 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); }

Real Experience. Real Advantage.

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.

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

Real Experience. Real Advantage.

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.

[ Demo Application Skeleton

Real Experience. Real Advantage.

11

[ 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

Real Experience. Real Advantage.

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.

[ 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 Lets Take This Offline Shake it to Find Local Banks

Consume HANA Data Summary

Real Experience. Real Advantage.

13

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

Real Experience. Real Advantage.

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.

[ 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.
Device
Mobile UI

AJAX Requests (plain/JSON)

AJAX Response in JSON format

Portal Components (Business Logic here)

Portal

Portal Services

Real Experience. Real Advantage.

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.

[ 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

Real Experience. Real Advantage.

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.

[ Demo: Display Sales Orders

Real Experience. Real Advantage.

17

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

Real Experience. Real Advantage.

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.

[ 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 Lets Take This Offline Shake it to Find Local Banks

Consume HANA Data Summary

Real Experience. Real Advantage.

19

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

Real Experience. Real Advantage.

[ Demo: Retrieve Bank List from NetWeaver Gateway via Portal

Real Experience. Real Advantage.

21

[ Agenda
Introduction to Portal on Device Create the Application Skeleton Backend Data Consumption Model Consume NetWeaver Gateway Services
Java-based Consumption Take the Load off Portal Lets Take This Offline Shake it to Find Local Banks

Consume HANA Data Summary

Real Experience. Real Advantage.

22

[ 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
Portal
http://<portal>
Main Page

datajs lib

REST calls

Gateway http://<Gateway>

Real Experience. Real Advantage.

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.

[ 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
Main Page http://<portal>
Cross Document Messaging

Portal

Hidden iframe
http://<gateway>/ProxyPage.html Datajs lib
Real Experience. Real Advantage.

Gateway

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.

[ Demo: Retrieve Bank List from NetWeaver Gateway Directly

Real Experience. Real Advantage.

25

[ 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

Real Experience. Real Advantage.

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.

[ 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 Lets Take This Offline Shake it to Find Local Banks

Consume HANA Data Summary

Real Experience. Real Advantage.

27

[ 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 browsers 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
Main Thread Web Worker
Sync

Portal

DB
Real Experience. Real Advantage.
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.

[ Demo: Offline-Capable iView on Home Screen

Real Experience. Real Advantage.

29

[ 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 inthread sync instead. Consider Sybase Unwired Platform for complex DB sync
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.

Real Experience. Real Advantage.

[ 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 Lets Take This Offline Shake it to Find Local Banks

Consume HANA Data Summary

Real Experience. Real Advantage.

31

[ 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*.

Real Experience. Real Advantage.

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.

[ Demo: Find Local Banks with a Shake Gesture

Real Experience. Real Advantage.

33

[ 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 Lets Take This Offline Shake it to Find Local Banks

Consume HANA Data Summary

Real Experience. Real Advantage.

34

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

Real Experience. Real Advantage.

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.

[ Demo: Consume HANA Data

Real Experience. Real Advantage.

36

[ 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 Lets Take This Offline Shake it to Find Local Banks

Consume HANA Data Summary

Real Experience. Real Advantage.

37

[ Key Learnings
Leverage NetWeaver Portals 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

Real Experience. Real Advantage.

38

[ 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
Real Experience. Real Advantage.
39

[ Join other portal-related ASUG sessions

2214 3903 2201 2203 2207 2114 2112 2102 2204 2209 2211 2108 2110 2213 SAP Portal Roadmap: Innovations On Premise, On Demand and On Device SAP Portal Influence Council SAP NetWeaver Portal 7.3 top 5 reasons to upgrade to the new portal release Best practices for successfully upgrading your portal to SAP NetWeaver 7.3 "From Document Management to Social and Mobile Content Management with SAP Portal Content Management by OpenText" External Facing Portal: solution that fits your needs Lessons learned for implementing appealing extranets with SAP NetWeaver Portal Content consumption and interoperability between SAP NetWeaver Portals SAP NetWeaver Portal On Device accessing your existing SAP NetWeaver Portal on mobile devices A day in a life of a manger: mobile intranet using desktop, tablets and smartphone devices Develop your first mobile application with Portal on Device Leverage the Power of Social Networks in your organization, by SAP Enterprise Workspaces Customer story: use EP inside multi-portal organizations Lessons learned by Colgate-Palmolive with Enterprise Workspaces 1.x for SAP NetWeaver Portal

Real Experience. Real Advantage.

40

Thank you for participating.

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

]
41

SESSION CODE: 2211

Real Experience. Real Advantage.