Apr 15

PrimeFaces Elite 4.0.12 Released

Although PrimeFaces team is extremely busy with the first release candidate of 5.0, we have managed to pull off the 4.0.12 release for ELITE and PRO users.

New Features

Enhancements

Defect Fixes

Download
Binaries, Sources, API docs and VDL docs are available in PrimeFaces Elite Portal for Elite Subscribers as an official release bundle. PrimeFaces PRO Users can access the files from PRO Portal.

Posted in PrimeFaces | Comments Off
Apr 08

PrimeFaces 5.0 Charts

Chart components have been working well and doing the job however there were limitations such as customizable axis, multi axis support and more in the API preventing us to add enhancements.  For 5.0, charts have been reimplemented using a brand new model driven api aimed to be flexible and easy to use.

Highlights of the changes are;

  • Introduce new generic p:chart component
  • Model driven instead of tag attributes
  • MultiAxis support.
  • DateAxis support
  • Customizable axis and series
  • Various new options introduced

Old p:*chart components are still supported but deprecated at the moment, they will be removed in a future release. We highly suggest migrating to new chart apis until then.

Demos are available at PrimeFaces 5.0 Labs.

Posted in PrimeFaces | Comments Off
Mar 26

PrimeFaces Elite 4.0.11 Released

PrimeFaces 4.0.x is back with a brand new Elite Release bringing various improvements to Elite Subscribers. Most of the enhancements in 4.0.11 are requested by PrimeFaces PRO users.

Highlights

Schedule component is improved greatly with new features such as viewChangeListener, event tooltip support, built-in timeZone handling for users in different zones and more. Also tooltip component now supports tracking the mouse.

New Features

Enhancements

Defect Fixes

Download
Binaries, Sources, API docs and VDL docs are available in PrimeFaces Elite Portal for Elite Subscribers as an official release bundle. PrimeFaces PRO Users can access the files from PRO Portal.

Posted in PrimeFaces | Comments Off
Mar 24

Enhanced DataTable Filtering

PrimeFaces DataTable Filtering has been a useful feature to quickly filter data using ajax. However there were two main limitations; it was only based on string comparison and no support for custom filtering implementations. Thanks to a PrimeFaces PRO sponsorship, filtering is greatly enhanced for PF5.

Filter Facets

Filtering elements were limited to an input text and a native dropdown, now if an input component is defined using filter facet, it becomes the filter. This enables customizable UIs, ajax update support for filters, using objects instead of simple strings as filter values and more.

New filterMatchMode options

As objects are not used instead of strings during filtering, in addition to existing startsWith, endsWidth, contains and exact modes, we have added more modes including lt, lte, gt, gte, equals and in.

...
<p:column id="yearColumn" filterBy="year" headerText="Year" footerText="lte" filterMatchMode="lte">
    <f:facet name="filter">
        <p:spinner onchange="PF('carsTable').filter()" min="1960" max="2010" styleClass="year-spinner">
            <f:converter converterId="javax.faces.Integer" />
        </p:spinner>
    </f:facet>
    <h:outputText value="#{car.year}" />
</p:column>
...

Custom Filtering
Sorting has sortFunction option on column component to enable custom sorting implementation, same is also now available to filtering as well. New filterFunction refers to a method that takes 3 parameters and expected result is a boolean to decide if value matches the filter.

<p:column id="priceColumn" filterBy="price" headerText="Price" footerText="custom (min)" filterFunction="#{tableBean.filterByPrice}">
    <h:outputText value="#{car.price}">
        <f:convertNumber currencySymbol="$" type="currency"/>
    </h:outputText>
</p:column>

Online Demo
Demo is available at PF5 Labs.

Posted in PrimeFaces | 1 Comment
Mar 17

PrimeFaces Extensions Book

PrimeFaces Extensions Project has come a long way as a community driven project. Recently a new dedicated book is released covering the extensions from Packt Publishing. Learning PrimeFaces Extensions Development is authored by Sudheer Jonna, a long time PrimeFaces power user and contributor.

Congrats to Sudheer for his work and hopefully PrimeFaces EXT users will enjoy reading this book.

Posted in PrimeFaces | Comments Off
Mar 12

PrimeFaces Elite 4.0.10 Released

PrimeFaces Elite 4.0.10 is now available for ELITE and PRO subscribers. This release brings important fixes, client side performance boost, IE11 support and a couple of new features sponsored by PRO users and more.

As of 4.0.10, there are close to 150 improvements over 4.0 via PrimeFaces Elite.

Highlights

  • DataTable sorting has been case sensitive and due to community voting at Facebook Group, it is case insensitive now with a new option to make it configurable.
  • SelectOneListbox and SelectManyMenu components are enhanced with built-in filtering.
  • Client side validation support is now supported by select components such as radio buttons, checkboxes and listboxes.
  • Dialog Framework issues with Internet Explorer has been fixed.
  • jQuery is updated to 1.11 to bring performance boost at client side. For big pages, speed upgrade is significant.
  • IE11 is now officially supported.

ChangeLog

Download
Binaries, Sources, API docs and VDL docs are available in PrimeFaces Elite Portal for Elite Subscribers as an official release bundle. PrimeFaces PRO Users can access the files from PRO Portal.

Posted in PrimeFaces | 3 Comments
Mar 05

PrimeFaces Push 2.0

PrimeFaces Push has been around since 3.4 and with 5.0 it has been greatly enhanced thanks to the official partnership between PrimeTek (PrimeFaces) and Async-IO (Atmosphere).

First a few words on Atmosphere; The Atmosphere Framework is the most popular asynchronous application development framework for enterprise Java. The Atmosphere Framework provides the enterprise features required to build massive scalable and real time asynchronous applications using transports like WebSocket, Server Side Events and traditional Ajax Techniques.

  • It’s been proven in production: ReverbWall Street JournalGameDuellVMWareAtlassian and many more
  • Easy to write portable and asynchronous applications with a really simple API for both client and server
  • Supports WebSockets and fallback transports transparently
  • Proven to scale
  • Cloud Enabled!

PrimeFaces Push 2.0 is based on Atmosphere as its predecessor and follows an annotation based approach this time. Old APIs are deprecated and still supported for backward compatibility.

The easiest way to create PrimeFaces Push application is by using the @PushEndPoint annotation. This annotation makes it easy to build application with PrimeFaces Push without the need to interact with Atmospheres more sophisticated API. If you are familiar with the PrimeFaces Push 1.0, this new implementation significantly reduce the number of code required to build a powerful real time application by transparently installing Atmospheres components like heartbeat, idle connections detections, disconnect state recovery etc. It also allows the use of external dependency injection framework like CDI, Spring or Guice.

For example, PrimePush ships with an extremely simple chat application, which support multi room, all transports supported transparently, message caching and more. All of this in less than 100 lines! It is strongly recommended to look at the demos after reading this introduction to see how simple it is to build an application with Atmosphere.

@PushEndpoint
The annotations attributes available are

“path”: The path to the resource.

The default is “/” so if your have mapped the PushServlet to “/*”, all request will be delivered to your annotated class. You can also customize the path. The path value will be used to map an incoming request uris path to an annotated PushEndpoint class.

Class Scope Annotations;

@Singleton
Singleton annotation can be used to force PrimeFaces Push to create a single, thread safe instance of a PushEndpoint annotated classes. For example, if your application set the @ PushEndpoint’s path attribute with using path templates “{something}”, by default a new instance of the annotated classes will be created. When annotated with Singleton, a single class will be created.

Method Scope Annotations
When using the @PushEndpoint annotation, it is recommended to use the following annotations.

@OnOpen
The OnOpen() will be invoked when the underlying connection is ready to be used, e.g for write operations.

Annotated method needs to take the form of

@OnOpen
public void onOpen();

@OnOpen
public void onOpen(RemoteEndpoint r);

@OnOpen
public void onOpen(RemoteEndpoint r, EventBus e);

The RemoteEndpoint represents the physical connection and can be used to write some data back to the browser. The EventBus can be used to fire messages to one or more RemoteEndpoint using regex expressions.

@OnMessage

The OnMessage() will be invoked when a message is ready to be deliver, e.g as a result of a EventBus publish operation or when a browser is POSTing some bytes. The annotation’s attributes available are:
“encoders”: A list of [Encoder]() that will be used to encode the annotated method return value. The returned value of an annotated OnMessage method will be broadcasted to all resource associated with the Broadcaster, associated with this annotated classes. For example, the following will transform an object of type `Response` into a “String” ready to be sent back to the Browser.

public final class JSONEncoder implements Encoder<Response, String> {
    ObjectMapper mapper = new ObjectMapper();

    public String encode(Response s) {
        return mapper.writeAsString(s);
     }
}

Encoders can be chained, e.g the returned value of an Encoder can be used as an input for the next defined Encoder.

“decoders”: A list of [Decoder]() used to decode a broadcasted messages into an object matching the methods signature. For example, a message coming from a Browser can be transformed into an object before it gets delivered to the annotated @OnMessage method:

public class JSONDecoder implements Decoder&lt;String, Message&gt; {

@Override
public Message decode(String s) {
    String[] userAndMessage = s.split(":");
    if (userAndMessage.length <= 2) {
        return new Message().setUser(userAndMessage[0]).setMessage(userAndMessage[1]);
    } else {
        return new Message(s);
    }
  }
}

Decoders can be chained, e.g the returned value of an Decoder can be used as an input for the next defined Decoder. You can annotate several methods with the Message annotation.

@OnClose
The @OnClose() will be invoked when the client disconnect, e.g close the connection, when a network outage happens or when a proxy close the connection. Annotated method needs to take the form of:

@OnClose
public void onClose();

@OnClose
public void onClose(RemoteEndpoint r);

@OnClose
public void onClose(RemoteEndpoint r, EventBus e);

You can only annotate a single method with this annotation.

RemoteEndpoint

The RemoteEndpoint() class represents the remote connection, e.g the Browser. An instance of RemoteEndpoint hold information about the headers, queryString, body, uri, path and path segments that can be used for manipulating the incoming request. If you are familiar with the Servlets “HttpServletRequest”, the RemoteEndpoint can be seen as an improved version. You can also use a RemoteEndpoint#write to write back messages that will be delivered uniquely to the browser.

EventBus
A distributed lightweight event bus which can encompass multiple PushEndpoint instances. The event bus implements publish / subscribe and point to point messaging.
Messages sent over the event bus can be of any type. For publish / subscribe, messages can be published to a Java class annotated with the [PushEndpoint#value]()
using one of the method annotated with [OnMessage](). The EventBus is the recommended way for delivering messages.

Chat Sample

Demo is available at Labs Showcase.

First we annotate the class with the “PushEndpoint” annotation, and define the path to “{room}/{user}”. That means this class can be invoked with URI taking the form of “/room_1/userA”, “/room_2/userB”, “/room_1/userC”. In this example, userA and userC will be part of the same room, being able to chat together, where userB will be in another room. That’s all we have to define to support a multi room application.
We want our class to be stateless, so we use the @Singleton so we are guarantee to have a single instance of this class

The OnOpen annotated method (line 12) will use the EventBus for publishing a message to all connected users. Since we only want users of the same room to
received the message, we retrieve the rooms name by looking up the proper path segment (line 16). Same for the user, we use the path segment to retrieve the value send
by the browser (line 17).

Then we create a simple Message bean. That bean will be delivered to all users of our room. The bean will be delivered via the annotated OnMessage
method. In this particular case, the defined decoder won’t be called as the delivery object is already an instance of Message. We could have called EventBus.publish with a JSON String instead of a Message and the same method (line 27) would have been called. For example, when the browser sent a request, the requests body will be decoded using the JSONDecoder and so the requests body delivered as a Message bean.

Message are delivered to the OnMessage annotated method (line 27). There could be one or more method annotated with the OnMessage annotation. Encoder and Decoder are used by PrimePush to match the appropriate method. For this simple application, we don’t need to manipulate the Message by adding, removing of transforming its content. So we just sent back the Message using our Response bean. That bean will be encoded by the JSONEncoder, e.g its the Response object translated into a JSON String representation, and sent back to the Browser.

Finally, the method annotated with the OnClose (line 21) will be called when the browser close the connection, or when the connection gets broken for any reason. The OnClose method can be used to clean up resources.

Et voila! That’s the only code we need to write the server side of our PrimePush application.

More Demos

  • Counter: Global Click Counter
  • Notify: Push FacesMessages to all connected clients instantly.
  • ViewParam: Push data with a GET request using JSF APIs.
  • Checkin: Created with PrimeFaces Mobile, Push your location to everyone to be displayed on a map.
  • Chart: Keep track of visitor browser stats and push stats data to a chart component real-time.

Posted in Uncategorized | 3 Comments
Mar 03

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.

Posted in Uncategorized | 4 Comments