1. Develop Your First Mobile Application
[ with Portal on Device
Dong Pan, Aviad Rivlin

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

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

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

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

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

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

8. [ 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);
}
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
Real Experience. Real Advantage. 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.

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

10. [ Demo – Application Skeleton
Real Experience. Real Advantage. 11

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

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

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

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

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

16. [ Demo: Display Sales Orders
Real Experience. Real Advantage. 17

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

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

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

20. [ Demo: Retrieve Bank List from NetWeaver Gateway via Portal
Real Experience. Real Advantage. 21

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
 Let’s Take This Offline
 Shake it to Find Local Banks
 Consume HANA Data
 Summary
Real Experience. Real Advantage. 22

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 X Gateway
http://<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
Real Experience. Real Advantage. 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.

23. [ 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> Portal
Cross
Document
Messaging
Hidden iframe
http://<gateway>/ProxyPage.html Gateway
Datajs lib
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
Real Experience. Real Advantage. 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.

24. [ Demo: Retrieve Bank List from NetWeaver Gateway Directly
Real Experience. Real Advantage. 25

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

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

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 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
Main Web Sync
Thread Worker
Portal
DB
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
Real Experience. Real Advantage. 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.

28. [ Demo: Offline-Capable iView on Home Screen
Real Experience. Real Advantage. 29

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

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

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

32. [ Demo: Find Local Banks with a Shake Gesture
Real Experience. Real Advantage. 33

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
 Let’s Take This Offline
 Shake it to Find Local Banks
 Consume HANA Data
 Summary
Real Experience. Real Advantage. 34

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

35. [ Demo: Consume HANA Data
Real Experience. Real Advantage. 36

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
 Let’s Take This Offline
 Shake it to Find Local Banks
 Consume HANA Data
 Summary
Real Experience. Real Advantage. 37

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

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

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

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
]
[ SESSION CODE:
2211
Real Experience. Real Advantage. 41