New ADF Mobile features in JDeveloper 11g Release 2

Hi, everyone:

As many of you probably have noticed, a new version of JDeveloper (11g Release 2) has just been released.  This represents a major leap forward for JDeveloper - for a complete list of features, please follow this new JDeveloper feature link.  

This latest version of ADF and JDeveloper also contains a significant enhancement for developing mobile browser based application. There is an online video and demo of developing for mobile browser-based application, and it has been updated with the latest enhancements.  There is also an important limitations that you must now be aware.

First, the enhancement: we have greatly simplified the steps in applying mobile-optimized style sheets to the project.  In the past, developers would need to download sample CSS files from OTN, add them to the project, and also modify/add configuration files to use these CSS files.  In JDev 11gR2, these default mobile optimized CSS files are automatically generated and added to the project.  We have also consolidated many mobile optimized CSS from many (one per mobile platform) to just two style sheets.  As soon as you create a JSF page that can be "Rendered on Mobile Device", these artifacts are automatically added to your project as shown below.

JDeveloper Project View

These artifacts are:

  • Two CSS files: richmobile.css is used for WebKit-based full mobile browsers found in iOS, Android, latest BlackBerry devices, etc.  mobile.css is used for all other mobile browsers.  These files are explicitly added to the project, so you may either use them as is, modify them directly, or create copies of these as starting points.  Please note that if you added your own style sheets, please make sure you update the trinidad-config and trinidad-skins file (explained below).
  • images folder and gif/png files: these files are used by the style sheet to achieve mobile-optimized look and feel.
  • trinidad-config.xml is modified to invoke the logic to determine which style sheet to use.  The updated content is shown as below.  Note that if you need to change which CSS file to use, you would replace the EL expression below to call a different CSS.
<skin-family>#{requestContext.agent.type == 'desktop'? 'richmobile': 'mobile'}</skin-family>
  • trinidad-skins.xml is created, and is used to list and point to the mobile CSS files.  The content of the file is as follows:
  <skins xmlns="">

Now, the limitation.  Previously you might be able to create the ViewController project as a "Fusion Web Application" application or project template, and then simply check the "Render on Mobile Device" box in the Create JSF Page dialog box to ensure mobile support.  This is no longer recommended, because this would disable the automatic creation of the mobile-optimized CSS files.  It is recommended that you create a "Custom Project" instead, and then add the "ADF Mobile Browser" feature to the project.  If you have created a mobile JSF page but did not see the CSS files automatically generated, please double check how you have created the project.

This also means that, in order to use ADF Task Flow in an Mobile Browser application, you create a "Custom Project" with both ADF Mobile Browser and ADF Page Flow features.  You can also add the ADF Task Flow item or the feature later - as long as you do not start with a Fusion Web Application or Project template.

Feel free to drop us a comment.  For questions and issues, please leverage the JDeveloper forum.


Joe Huang

Post a Comment:
  • HTML Syntax: NOT allowed

This blog is is dedicated to announcements,tips and tricks and other items related to developing, integrating, securing, and managing mobile applications using Oracle's Mobile Platform. It is created and maintained by the Oracle Mobile product development team.

Archive of past entries

Even More Mobile Development Blogs

Oracle A-Team Site - Mobile Related Entries

Code samples from the Community

Fusion Middleware Blogs


« June 2016