View
2.405
Download
0
Category
Preview:
DESCRIPTION
Citation preview
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
Real Experience. Real Advantage.
[
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.
[ 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
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.
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.
[
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.
[
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.
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-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>
Real Experience. Real Advantage.
[
11
Demo – Application Skeleton
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.
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.
[
13
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.
[
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 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.
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)
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.
[
17
Demo: 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.
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.
[
19
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.
[
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 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
Real Experience. Real Advantage.
[
21
Demo: Retrieve Bank List from NetWeaver Gateway via Portal
Real Experience. Real Advantage.
[
22
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.
[
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 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
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
Hidden iframe
http://<gateway>/ProxyPage.html
Datajs lib
Main Page
http://<portal>
Cross
Document
Messaging
Portal
Gateway
Real Experience. Real Advantage.
[
25
Demo: Retrieve Bank List from NetWeaver Gateway Directly
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.
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.
[
27
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.
[
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 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
Real Experience. Real Advantage.
[
29
Demo: Offline-Capable iView on Home Screen
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.
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
Real Experience. Real Advantage.
[
31
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.
[
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 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.
[
33
Demo: Find Local Banks with a Shake Gesture
Real Experience. Real Advantage.
[
34
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.
[
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 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.
[
36
Demo: Consume HANA Data
Real Experience. Real Advantage.
[
37
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.
[
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
Real Experience. Real Advantage.
[ 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
Real Experience. Real Advantage.
[ 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
Real Experience. Real Advantage.
[
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
Recommended