Since smartphones, like iPhone or Android phones, are getting more and more popular, more companies are getting serious about a “mobile strategy”. JavaServer Faces is a natural fit, since it’s rich component model allows you to simply switch the renderer… Yes you could introduce new tags/components for that, but’s that for sure an anti-pattern.
Besides the device-specific CSS creating (and detaching) a custom skin is fairly easy. In the trinidad-config.xml you have the following:
The trinidad-skins.xml file, which contains would look like:
<style-sheet-name> iPhone/iPhone.css </style-sheet-name>
While the “phoneFamily()” method in the underlying JavaBean would do something like:
public String getPhoneFamily()
FacesContext fc = FacesContext.getCurrentInstance();
HttpServletRequest req =
//Get the User Agent string from the browser
String agent = req.getHeader("User-Agent");
// Prints out user agent. Comment out the line below for production system
if (agent != null && agent.indexOf("iPhone") > -1)
// If iPhone is returned.
// Comment out the followling line for production system
Tipp: You can ship your skins in a JAR, so that multiple (mobile) applications could benefit from the work!
Once that all is done, you are good to go! The source code of the JSPX/XHTML pages look like regular Trinidad pages! No new tags/components are required! That’s a good news, since you can leverage the knowledge you gained.
So to give an idea how rich your page could look on different phones, below are some screenshots:
This screenshot has also some information about the Trinidad TAGs that are used.
There my iPod touch and my (old ) Nokia phone:
The both show the same page, just with a different style sheet. The JSPX page is not different. All the magic is done by the Trinidad Skinning-Engine.
The ADF mobile team at Oracle put together a nice tutorial, which contains a decent demo application. It includes already some Skinnings for different mobile phones. So the getting started is fairly simple with that demo! The Trinidad developers guide has also some resources on mobile JSF development.
Generally the Trinidad library offers a pretty decent and stable framework-core (besides the 100+ components). Without its rock-solid architecture doing mobile applications would be way more odd (or complicated)!