Download Delivering a Compelling Mobile Experience with WebCenter

yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Oracle White Paper—
Mobile First - Delivering a Compelling Mobile Experience with WebCenter
An Oracle White Paper
April 2012
Mobile First - Delivering a Compelling Mobile
Experience with WebCenter
Oracle White Paper—
Mobile First - Delivering a Compelling Mobile Experience with WebCenter
Morgan Stanley predicts that the number of mobile Internet users, 1.6 billion, will exceed desktop Internet users
by 2014.
In its recent report, "Mobile Applications and Interfaces: New Approaches for a Multichannel Future", Gartner
predicts that mobile phones will overtake PCs as the most common Web access devices by 2013, and that the
installed base for smartphones and tablets will triple from 2012 to 2014.
With this in mind, organizations are having to re-prioritize their mobile application development strategies, in
some cases considering "mobile-only" or "mobile first" approaches.
Oracle WebCenter provides a unified platform for Multi Channel aolutions that can be used to develop compelling
mobile experiences. This paper will cover the following areas.:
Mobile Architectures
WebCenter Portal Mobile Design
WebCenter Sites Mobile Design
WebCenter Mobile Clients
Oracle White Paper—
Mobile First - Delivering a Compelling Mobile Experience with WebCenter
1. Mobile Architectures
There are 3 prevalent mobile architectures solutions are based upon (mobile web, native, and hybrid)
Mobile Web
Mobile Web solutions are applications developed to work entirely within the mobile browser (client OS agnostic) normally
using HTML5 and JavaScript. They have the advantage of being cross platform and since they follow a web based
deployment model there is no App Store presence required. While cross platform there is limited access to native services
Native mobile applications are developed and targeted for a specific mobile platform (client OS specific). With full access
to all native device services it is much easier to develop a sophisticated user experience. It does however require the need to
develop applications for each platform you consider strategic.
Hybrid mobile applications are mobile web applications deployed using a thin native application container. While the native
container is client OS specific most of the application content can actually be client OS agnostic. The native container gives
the developer access to most native services. Oracle’s ADF Mobile provides a full hybrid application development
It is important understand that depending on the solution required all 3 options can be the right choice
If you have a web presence it needs to be able to adapt to mobile and thus supporting a mobile web architecture is
For some simply being mobile aware is sufficient. There is a need to ensure that the generated
HTML/Javacript renders properly in native mobile browsers.
For others it is imperative that their mobile web solution be optimized for each mobile platform.
If you have marketing requirements for an App store presence and you need a mobile application which can use
all the most recent device services and UI components where being avant-garde is of utmost importance then you
may be looking to develop a fully native application.
If you are looking to develop an enterprise mobile application for your knowledge workers that can use native
services but needs to be deployed to multiple platforms then a hybrid based approach using ADF mobile is a good
2. WebCenter Portal Mobile Design
For mobile web developers should designing sites using adaptive programming techniques. If they are building net new
application using WebCenter Portal both Native and Hybrid mobile application development is supported.
Apaptive Programming
Developers can make use CSS Media Queries and adaptive design techniques to provide a desktop browser, tablet and
mobile experience from a single portal.
Oracle White Paper—
Mobile First - Delivering a Compelling Mobile Experience with WebCenter
Designing an interface for a desktop display, smartphone, and tablet can be accomplished with one template. CSS3 can be
used and based on the user’s environment, screen resolution, platform and orientation; the make-up of the page can be
adjusted. JavaScript, fluid grids, flexible images, breakpoints, and media queries can be used quite effectively..
It is important to be aware of the target platforms and to design your portal to adjust to the available viewport
Graph and Gauge now support HTML5 output format, supporting touch gestures for all the major interactivity features,
such as selection, zoom and scroll, legend scrolling, time selector, data cursor and magnify lens.
For tablet devices that support touch screens and do not have a mouse, the browser simulates some mouse events, but not
all. In order to achieve functional equivalency for these platforms, client components need to be broadcast touch events. A
new touch event object AdfComponentTouchEvent has been made available to components when agents support single
or multiple "touchScreen" capabilities
Provided access to right click menus is often a challenge. Under the desktop platform the contextMenu event is derived
from the right mouse click. Since these tablet devices do not fire contextMenu events or show tooltips, Oracle has added
an enhancement to simulate this event from touch gestures. The default gesture is tap+hold (500ms). However, this
gesture is also used to active component drag-and-drop. To resolve this conflict in the cases where drag-and-drop
behaviors exist for a component, the context menu and tooltip will be activated on tap+hold+finger-up. Only single finger
gestures can be used to active context menus and tooltips.
If they need to go beyond just being mobile aware the use of multiple page templates per portal should be considered,
perhaps one for desktop and tablet using adaptive techniques and one for mobile smartphones where a parallel can be customized for smartphone use..
For smartphones you may want consider incorpoating your own touch events using a lightweight solution such as Jquery
or ZeptoJS
You can also use JavaScript to control the type of image that gets downloaded based on the platform. This is especially
useful when implementing support for mobile users in areas where mobile internet speed is limited. This option means that
users are not forced to download large bandwidth-heavy images. WebCenter Content can provide this optimization
functionality out of the box and can create multiple files optimized from a source image and at different resolutions for you
to pull content into your website.
The following is a simple JavaScript example of how redirection might be done.
var Browser = navigator.userAgent;
if (Browser.indexOf('iPad') > 0)
else if (Browser.indexOf('iPhone') > 0)
else {
For some solutions a manual redirect might be all that is necessary
#{requestContext.agent.platformName=='windows' ? '' :
'Click <A HREF="http://host/myApp/faces/welcome.jspx">here</A> to view the mobile site' }
Oracle White Paper—
Mobile First - Delivering a Compelling Mobile Experience with WebCenter
For more information please refer to
Native Programming
Oracle’s own WebCenter Mobile Spaces for iOS application is a prime example of a native mobile application developed
using WebCenter’s rich web services.
Hybrid Programming
Oracle’s ADF Mobile enables developers to build once, and deploy to many mobile platforms. Given the hybrid
architecture developers have direct access to device capabilities and can provide a native mobile user experience with
complete Security Support. The flexible runtime architecture provides rapid and declarative development environment
WebCenter plus ADF Mobile provides a full environment for both Mobile Web and Mobile Application development
WebCenter Web Services are fully consumable within ADF Mobile and Developers can re-use Mobile Web pages directly
within their hybrid applications
WebCenter is looking to make it very easy to leverage work done using WebCenter by providing an ability to auto generate
an ADF Mobile project based on a site or portal. In addition we hope to provide ADF Mobile project templates (e.g
Collaboration Template, Project Template, etc…) as well as numerous ADF Mobile based sample applications
For more information please refer to
3. WebCenter Sites Mobile Design
Sites developers can also consider designing sites using adaptive programming techniques. The use of CSS media queries
and adaptive design techniques to provide a desktop browser, tablet and mobile experience is supported. In addition REST
based WebCenter Sites services facilitate the development of both native and hybrid applications for a mobile specific
application solution. Solutions that require support for all mobile devices should however consider the WebCenter Sites
Mobility Server
Mobility Server
Oracle WebCenter Sites Mobility Server enables organizations to easily extend their Web presence to the mobile channel
and effectively deliver multichannel marketing and customer experience initiatives, while also saving significant time and
effort in managing mobile sites. By reusing existing Web content and Websites optimized for mobile delivery, Oracle
WebCenter Sites Mobility Server enables enterprises to deliver an engaging mobile Web experience based on their existing
online presence and brand.
For more information please refer to
4. WebCenter Mobile Clients
WebCenter’s client strategy include mobile as a first class client during product development together with web and
desktop clients. We are working to deliver Apps for the mobile workforce with functionality designed for mobile users and
form factors focused on modern tablets and smartphones (iPhone, iPad, Android)
The Oracle Mobile Content client will provide fast and easy access to content for the modern business user. It will expose
an optimized interface based on the device with consistent functions across devices.
Oracle White Paper—
Emphasis on Viewing and workflow
Browse libraries, folders, and documents
Easily locate important content
Access Favorites
Upload photos, video, and recordings
Send documents as email attachments
Edit documents using native mobile app
Access documents while offline
Sync across devices
Mobile First - Delivering a Compelling Mobile Experience with WebCenter
The Oracle Mobile OSN client will enable users to stay connected to people when ever, where ever.
Monitor activity across your business teams and applications
Fully participate in Conversations
Review document annotations
Participate in web conferences
Upload photos, videos, and recordings to a conversation
Upload email attachments to a conversation
Access maps for any posted address
Access documents while offline
WebCenter provides a common, unified platform for developing multi channel solutions which can be delivered across
multiple devices and make use of multiple mobile architectures.
Oracle White Paper—
Mobile First - Delivering a Compelling Mobile Experience with WebCenter
Mobile First - Delivering a Compelling Mobile
Experience with WebCenter
April 2012
Oracle Corporation
World Headquarters
500 Oracle Parkway
Redwood Shores, CA 94065
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. This document is provided for information purposes only and
the contents hereof are subject to change without notice. This document is not warranted to be error-free, nor subject to any other
warranties or conditions, whether expressed orally or implied in law, including implied warranties and conditions of merchantability or
fitness for a particular purpose. We specifically disclaim any liability with respect to this document and no contractual obligations are
formed either directly or indirectly by this document. This document may not be reproduced or transmitted in any form or by any
means, electronic or mechanical, for any purpose, without our prior written permission.
Worldwide Inquiries:
Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective
Phone: +1.650.506.7000
Fax: +1.650.506.7200