PrimeFaces Mobile Reloaded

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.

This entry was posted in Uncategorized. Bookmark the permalink.

4 thoughts on “PrimeFaces Mobile Reloaded

  1. Great and Hats Off! to Primefaces Team. And also I would like to add my wishlist and suggestions to primefaces team.
    For Primefaces Mobile
    1) DataTable with report exporting like pdf, xls, csv
    2) For responsive slider animations primefaces can use https://github.com/IanLunn/Sequence

    For Primefaces
    1) For charts primefaces could integrate dimplejs.org or d3js.org (It helps primefaces to get into enterprise big data analytics market)
    2) For responsive slider animations primefaces can use https://github.com/IanLunn/Sequence

  2. New demo looks good! Congrats Cagatay.

    Regarding “Separate Page vs Responsive Design” – there is a third hybrid approach calling “Conditional Loading for Responsive Design” (something like this http://adactio.com/journal/5042/). That means, the content itself and not only the content’s position will be adjusted depending on the screen size and device. This is a compilcated approach, but the most coolest one because you don’t need separate pages for mobile and the page content is aware of current device and screen size.

  3. When PF5 is going to be ready for download? I am interested to develop with New PrimeFaces Mobile. Thank you