PrimeFaces Mobile has been a mobile add-on for PrimeFaces, as a separate project it reached 0.9.4 however never managed to reach a production ready stage due to various reasons. For PF5 is has been built from scratch, merged in PF5 and finally becomes a first-class citizen in PrimeFaces ecosystem.
New PFM
New PrimeFaces Mobile (PFM) is a UI Kit to create JSF applications optimized for mobile devices. PFM is built on top of jQuery Mobile, a touch-optimized HTML5 UI framework providing support for various platforms.
In addition to the seamless integration with jQuery Mobile, PFM features a Mobile Renderkit for popular PrimeFaces components, ajax framework extensions, mobile ajax behavior events, integrated navigation model, lazy loading of pages, responsive widgets and more. Note that new PFM is not backward compatible with old mobile.
Separate Page vs Responsive Design
There are two popular approaches to mobile web development, separate page approach focuses on mobile devices with separate resources and responsive pages uses same page with media queries. Both approaches have pros and cons over each other and PFM follows an optimized separate page design which suits better for JSF web applications. Responsive widgets such as panelGrid are integrated to deal with different mobile device screen sizes (e.g. smartphone, tablet).
Design Changes
Old approach was too limiting, new PFM follows same design of a regular JSF page with PFM features putting page author back in control. See single page structure for more information.
Mobile Widgets
Each Mobile component is handcrafted with care, if you are already have PrimeFaces experience, thanks to JSF RenderKit feature, using same components with same backend code, you can create a mobile web application in no time. We have provided mobile renderers and widgets for commonly used components such as datalist, menu, panel, accordion, tabview, dialog, growl, forms and many more. Some of the widgets are from jQuery Mobile and we have written various mobile widgets tuned for JSF.
Navigation
Navigations in same xhtml between multiple pages are handled by a specialized navigation handler. Prepending the outcome of the page with “pm:” marks the outcome as a multi page navigation. Regular same domain and external domain navigations are supported as well.
Ajax
jQuery Mobile initializes mobile widgets at page load time automatically for once and widgets have to be refreshed manually if their state changes with ajax e.g. adding new items to datalist otherwise UI doesn’t get enhanced for mobile. This makes jQuery Mobile almost impossible to use in ajax enabled JSF applications.
PrimeFaces Mobile provides ajax update support for all widgets in the mobile renderkit under the hood.
Transitions
If the mobile device has a modern browsers, several cool transitions are supported via the navigation model.
Events
Mobile events are integrated with components as behaviors, best way to describe this is with an example. Check out this DataList demo where swipe event removes an item and taphold shows details in a growl.
Lazy Load
Pages in a multi-page view can be loaded lazily on demand to improve initial page load time. These lazy pages might not even be accessed by the user so loading them with an on-demand approach has a significant speed boost with many pages in a single view. To mark a page to be lazy loaded, enable lazy option.
Pass Through Data
JSF 2.2 brought pass through attributes feature and PFM takes advantage of this. No jQuery Mobile feature is hidden by PFM and can be used by passing the necessary html5 data-* attribute to the component.
Theming
Just like in PrimeFaces Core, PFM theming is built on top of the ThemeRoller, this time the Mobile ThemeRoller.
Demo
New Mobile Showcase is a created from scratch and uses a responsive design.
In addition to framework features, we have also created a couple of apps to show what you can do with new PFM; weather, twitter, news, translate, contacts and push. Push sample is especially important because it is powered by the brand new PrimeFaces Push 2.0, as it deserves a separate announcement, we’ll leave it for later.
Roadmap
New PFM will be available in PF5.