Going Mobile with ADF – Understanding the Options


With over 90% of internet traffic now coming from mobile devices, there is a huge pressure on companies to make their customer-facing applications suitable for rendering on smart phones and tablets. A-team is involved with a number of customers who are looking for ways to adapt their existing Oracle ADF applications and make them “mobile-enabled” . This article is the first in a series of articles that describe what we learned from the experiences with these customers both from a technical and a non-technical perspective. This first article provides insight in the technology choices you need to make and the implications of those choices. It also contains a lot of links with additional information. The next articles will provide in-depth technical guidance to optimize rendering of ADF Faces applications on mobile devices, as well as techniques to support working in offline mode using ADF Mobile.

Main Article

This article is divided in three sections. The first section “Understanding the mobile user interface” discusses whether mobile-enabling existing ADF (Faces) applications is desirable at all. The second section “Choosing the right technology” discusses the technology options and choices you need to make. The third section “Conclusions and Recommendations” will provide you with Oracle’s opinion on the preferred approach to ADF-based mobile development.

Understanding the Mobile User Interface

Ask any software developer whether they understand the differences between a desktop user interface and a mobile user interface and most likely they will say “Yes, of course”. The three obvious differences are:

  • Touchscreen instead of mouse
  • No external keyboard
  • Smaller screen size

So, to mobile-enable an existing desktop web application, we need to make sure that actions typically performed with the mouse can be done with a touch gesture, and we need to make sure that the web page is still usable on a smaller screen, where part of the screen real estate might be consumed by the touch keyboard. With the aid of responsive web design techniques that shouldn’t be too hard, right? And by the way, the screen size and screen resolution on a “traditional” large tablet like the iPad is such that we hardly need to change anything in the page layout.

Well, this is the typical view of a person focused on the technical aspects. It completely ignores the fundamental differences in how mobile devices are used, and the type of user interface that makes good mobile apps so appealing and productive. Oracle’s User Experience (UX) group has created some excellent material which we consider as mandatory reading before embarking on a project to mobile-enable your existing web applications:

  • Introduction to mobile design guidelines: a set of 10 design principles that reflect key considerations in mobile application design.
  • Oracle Applications UX Tablet Guide (iBook or PDF version): excellent and very comprehensive guide that makes you truly understand mobile user interfaces, including the huge differences between smart phones and tablets.
  • ADF Mobile Design Wiki, contains lots of mobile design patterns and list of UI components available in ADF Mobile.

As said, mandatory reading, but we will summarize two key take-aways here:

  • The nature of tasks performed on mobile devices can be very different from tasks performed on desktop computers
  • The natural user interface (NUI) on mobile devices is fundamentally different from the graphical user interface (GUI) on desktop computers.

So, from a usability perspective the conclusion is clear:it is undesirable to take an existing desktop web application and make it suitable for mobile rendering with as little changes as possible. However, as with any software development project, usability and end-user friendliness is just one of many aspects to take into account. Budget constraints, time-to-market, available technical skills, ease of maintenance, deployment models, supported device types, and reuse of existing code, are just a few of the other aspects that organizations take into account when “going mobile”. The next section will discuss the technology options available when taking all of the above aspects into account.

Choosing the Right Technology

There are three Oracle technologies to consider for mobile applications

  • ADF Mobile: Java and HTML5-based framework that allows you to develop iOS and Android applications that run on the mobile device using a single code base. ADF Mobile supports access to native device services and enables offline applications. Applications built with ADF Mobile can be distributed through Google Play or the Apple store.
  • ADF Mobile Browser: Refers to server-side web applications that use Apache MyFaces Trinidad, a set of JSF components optimized to render on mobile devices using mobile-specific Cascading Style Sheets (CSS).
  • ADF Faces Rich Client: Refers to server-side web applications that use ADF Faces Rich Client, a set of over a 150 Ajax-enabled JSF components that let you build a very rich Web user interface for Java EE applications. ADF Faces RC uses specific component renderers and CSS files to optimize rendering on mobile devices using HTML5.

Here is a list of aspects and considerations that should help you make make a choice between these technologies.

Offline Usage

If you need to support offline usage of your mobile application, you have to use ADF Mobile. ADF Mobile Browser and ADF Faces RC are server-side technologies that do not support offline usage. The new HTML5 feature for running web applications offline is NOT supported by ADF Mobile Browser nor ADF Faces RC.

Device Features Integration

ADF Mobile fully supports integration with mobile device features. It is possible to update contacts, send SMS or e-mail, take or show a picture, display or store a file, or use the GPS location of the device, for example to show nearby places on a geographical map. ADF Faces RC and ADF Mobile Browser support a more basic integration with email, telephony and google maps using specific URL prefixes like “mailto:”, and “tel:”. See chapter Extending ADF Mobile Browser Applications in the Mobile Browser Developer’s Guide for ADF for more information. Note that while this is the guide for ADF Mobile Browser, the techniques described in this chapter can be used as well with ADF Faces RC.

HTML5 Support

ADF Mobile is fully based on HTML5. ADF Faces RC automatically uses HTML5 for rendering advanced components when it has detected that the browser supports HTML5. It is also possible to use the new HTML5 input types with ADF Faces RC as will be illustrated in the next article in this series. The ADF Mobile Browser option has not changed for years and does not support HTML5.

Mobile User Interface

ADF Mobile is the best choice for creating a natural user interface that has a device-native look and feel and fully integrates with mobile device features. ADF Faces RC provides by far the most rich set of user interface components, including very advanced data visualization components. The recently added Skyros skin is a “skinny” skin that minimizes the usages of images, making it the best performing choice for mobile rendering.
The user interface that can be created with the Trinidad components of ADF Mobile Browser is more sober. We have seen customers complaining about the way ADF Mobile Browser renders the calendar popup window and popup windows created using the Trinidad dialog framework. Both types of popup windows render as a new tab in the mobile browser which visually “disconnects” them from the current application.These rendering issues do not occur with ADF Faces RC which fully supports inline dialogs on mobile devices.

Mobile Browser Support

Browser support is not applicable for ADF Mobile. It runs in the native WebView of iOS and Android devices. It does not matter which browser is installed on the device. ADF Mobile Browser support a wide range of mobile browsers. ADF Faces RC supports a more limited set of mobile browsers. See the 11g and 12c certification matrices. Note: look under the heading “Browsers”, do not get confused by the heading “Mobile Browsers” in these two certification matrices, this heading only applies to browsers supported by ADF Mobile Browser, not to the mobile browsers supported by ADF Faces RC.

Reuse of Business Logic

Reuse of business logic coded in Java that has been built for existing desktop (web) applications can be achieved with all three technologies. The better the existing application adheres to the architectural  Model-View-Controller pattern the easier it will be to reuse the logic coded in the model layer. For ADF Mobile Browser and ADF Faces RC this reuse is trivial as the web application can run on the same JEE server that contains the model-layer business logic. For ADF Mobile applications, the functionality of the business logic layer needs to be disclosed through SOAP or RESTful web services.

Reuse of Web Pages – Response or Adaptive Web Design

The concept of designing and building one web page that automatically adapts its layout and behavior based on the mobile browser’s device is very attractive to many customers.It maximizes reuse of web pages, enables a fast time-to-market for mobile applications, and reduces maintenance cost as only one code base for the View and Controller layers need to be maintained. This concept has become very popular under terms like responsive web design and adaptive web design. There is some debate about the difference between these two terms, but in the context of ADF the difference made by the wikipedia definitions makes a lot of sense: responsive design is implemented client-side in the browser, adaptive design is implemented server-side.

An important technique used in client-side responsive design is CSS media queries. The following articles describe how this technique can be used with ADF Faces:

While not tested, it should be possible to use the same technique with the Apache MyFaces Trinidad components.

However, as Java Server Faces (JSF) generates the HTML that is sent to the browser on the server,it might make more sense to go for adaptive design and tweak the generated html at the server-side using the browser agent info. Otherwise, chunks of HTML might be sent over the wire that end up not being used for rendering because of some CSS media query.

ADF Faces RC has a number of adaptive design techniques built in that optimize mobile rendering:

  • Pages that have a stretching layout on a desktop browser will automatically use a flowing layout on a mobile browser, allowing the user to scroll using a swipe-down action if needed.
  • ADF data visualization components (DVT’s) that use Flash to render on older desktop browsers will automatically use HTML5 to render on mobile browsers.
  • Tables with a scrollbar on a desktop browser will automatically render with google-style pagination controls on mobile browsers.
  • Touch and tap gestures are supported to perform actions typically done with mouse clicks and mouse movements on a desktop browser

ADF product manager Shay Shmeltzer wrote two articles that highlight these behaviors: Adaptive Layout for ADF Faces on Tablets and Tablet Support in ADF Faces with 12c.

ADF product management has stated there are plans to further enhance the responsive design support in ADF Faces over the next couple of releases. One issue that must be dealt deal with though is that not all ADF Faces certified browsers support CSS3 so there has to to be a story for older browsers as well. A practical approach for page design is needed, because you can easily encounter very complex design and layout issues. It implies you are actually building more then one page layout per page and this can easily escalate the complexity.

In the meantime, additional adaptive design behavior can be built in using custom code, as illustrated in the article Running ADF Faces on Mobile Phones and Tablets in this series. Another example of this approach can be found in the article Creating an adaptive layout in ADF for desktop vs. tablet by Andrew Robinson, a member of the ADF Faces development team.

Mixing Technologies

ADF Mobile allows you to run hybrid applications, where part of the application is running locally on the device and part of the application is supplied through web pages delivered by a remote server. This means you can use ADF Mobile together with the other two technologies, creating a hybrid application where the end user can be ignorant as to which pages are served locally and which pages are served remotely.

Note that even if you do not need the unique features of ADF Mobile, it still might be worth to use an ADF Mobile application as a “UI Shell” of your remote web pages. This has two benefits:

  • the application is easily accessibly through an icon on the mobile device, there is no need to open the mobile browser and enter the application URL.
  • the web page will be shown without the browser chrome which makes it look more native AND more screen real estate is available for the web page itself.

Mixing ADF Faces RC and Apache MyFaces Trinidad components in one web page is NOT supported. We have seen customers who developed some ADF task flows with page fragments using the Trinidad components and tried embedding those task flows as regions in pages built using ADF Faces RC or vice versa. This will not work correctly as the JavaScript libraries coming with these two JSF component sets are not compatible with each other.

Conclusions and Recommendations

ADF Mobile Browser has been around for a number of years and used to be the obvious choice for bringing web applications to mobile devices including old devices with limited HTML capabilities. On  the other hand, ADF Faces RC and ADF Mobile are now offering a better solution with a more modern interface for developing mobile web applications for modern devices. In recent releases of ADF Faces RC, important new functionality has been added to optimize mobile rendering, and this will continue in future releases, increasing support for state-of-the-art technologies like HTML5 and CSS3. Given this trend, A-team and ADF product management strongly recommend to use ADF Faces RC as the primary choice for mobile-enablement of ADF applications.
ADF Mobile brings unique features to the table that can be used to build a truly natural user interface, enhancing the user experience and productivity. We recommend customers build hybrid applications using ADF Mobile. Initially, the ADF Mobile app can largely act as a UI shell for remote (ADF Faces RC) web pages, and then over time the remote pages can be replaced incrementally with local on-device pages that provide a more native look and feel and fully leverage the unique capabilities of mobile devices.

Add Your Comment