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 <a
href="http://www.oracle.com/technetwork/developer-tools/jdev/jdev-11gr2-nf-404365.html">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 <a
href="http://download.oracle.com/otn_hosted_doc/jdeveloper/11gdemos/adfmobile/ShermanNewFeatiure-ADFMobileBrowser.html">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.
alt="JDeveloper Project View"
src="//cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/f4a5b21d-66fa-4885-92bf-c4e81c06d916/Image/be0f81d536a07011292bfd3982e6cfa2/shermancss.jpg">
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.
== '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:
style="font-style: italic;"> <skins
xmlns="http://myfaces.apache.org/trinidad/skin"><br
style="font-style: italic;">
<skin>
<id>richmobile</id><br
style="font-style: italic;">
<family>richmobile</family><br
style="font-style: italic;">
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id><br
style="font-style: italic;">
<style-sheet-name>styles/richmobile.css</style-sheet-name><br
style="font-style: italic;">
</skin>
<skin>
<id>mobile</id><br
style="font-style: italic;">
<family>mobile</family><br
style="font-style: italic;">
<render-kit-id>org.apache.myfaces.trinidad.pda</render-kit-id><br
style="font-style: italic;">
<style-sheet-name>styles/mobile.css</style-sheet-name><br
style="font-style: italic;">
</skin>
</skins></br
</br
</br
</br
</br
</br
</br
</br
</br
</span
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 <a
href="http://forums.oracle.com/forums/forum.jspa?forumID=83">JDeveloper
forum.
Thanks,
Joe Huang</a
</a
</a</a
