Jul 18

MultiSelectListbox

I’ve seen the following UI on various e-commerce websites to select a certain item from a hierarchical group of categories like movies, books, travel, outdoor, sports, electronic and more where each category has nested categories. This has been the inspiration for the new MultiSelectListbox Component for PrimeFaces 4.0 codename Sentinel.

The component receives a collection of SelectItemGroup instances where each instances has children SelectItemGroups and/or SelectItems. Component only allows SelectItems to be selected not groups as SelectItemGroup has no value in JSF API.

Online demo is available PrimeFaces Showcase.

Posted in JSF | 8 Comments
Jul 17

Brand New HTML5 FileUpload

FileUpload component has been rewritten from scratch to fix the problems of old one and provide new features. It is powered by HTML5 (File API) and has graceful degradation for legacy browsers (e.g. IE8, IE9).

  • Two modes (Simple and Advanced)
  • Multiple file selection from file dialog
  • Progress Tracking
  • DragDrop support from filesystem
  • Graceful Degradation (e.g. IFrame uploads instead of XHR2)
  • Merge mode to send all files in one request
  • Commons FileUpload for JSF 2.1 and Servlet 3.0 Multipart for JSF 2.2
  • Customizable Image Preview
  • File count limit, size limit and type limit.
  • Auto Uploads
  • Callbacks like start, error and complete
  • Customizable validation error messages

New FileUpload will be available in PrimeFaces ELITE 3.5.9 and 4.0 (codename SENTINEL).

Posted in JSF | 16 Comments
Jul 15

Reset Values for JSF 2.2

Prior to 2.2, JSF had a problem with keeping component values in case validation fails, the problem has been described in detail at;

During JSF 2.2 Specification process, I brought this up the EG hoping for a standard solution and with the help of Ed Burns, Kito Mann and other members, we came up with a new attribute called resetValues for f:ajax and f:resetValues for non-ajax requests.

Thanks to Thomas Andraschko, PrimeFaces 4.0 also has the PrimeFaces implementation of these JSF 2.2 changes, p:ajax has resetValues option and f:resetInput is likely to be renamed to f:resetValues. Note that f:resetInput also exists in PrimeFaces 3.4.+ in addition to programmatic RequestContext.reset utility. As 4.0 is planned to support JSF 2.1 as well, 2.1 users who can’t migrate to 2.2 in near future can also use these reset enhancements since PrimeFaces 4.0 provides a compatible implementation for both.

Posted in JSF | 5 Comments
Jul 10

Search Expression Framework

In JSF API, UIComponent#findComponent only accepts id expressions.
In the render/execute attribute of f:ajax, you can also reference components by some special keywords:

  • @this
  • @form
  • @parent
  • @all
  • @none

In PrimeFaces 3.x, we already improved the findComponent logic by adding some new features like @namingcontainer and PrimeFaces Selectors. PrimeFaces Selectors aka provides the ability to reference components by JQuery selectors e.g. (@(:input:disabled), @(.ui-datatable .ui-panel)).

For PrimeFaces 4.x, we have taken this to the next level. Thomas Andraschko completely over-worked our search expression logic and created a modular framework with new features and enhancements to resolve some problems.

New Keywords

  • @composite resolves the closest CompositeComponent parent
  • @widgetVar(name) resolves a component by its widgetVar
  • @child(index) resolves the nth child

Combinable keywords are also supported;

  • @form:@parent
  • @composite:myButton
  • @this:@parent:@parent
  • @form:@child(2)

Demo

Sample expressions demo is available at PrimeFaces Showcase.

Roadmap

This expressions can be used for all component in PrimeFaces, not only in the process and update attributes! Ajax, CommandButton, Watermark, Printer and many more!

Some components requires to resolve the UIComponent instance on the server side, so PFS and @widgetVar are not available for all attributes. These are considered as client side expressions only.

NOTE:

  • Client side expressions are also NOT safe as server side expressions.
  • If a server side expression can’t be resolved, we throw an exception.
  • If your selector is wrong, the component will just not be found.
Posted in JSF | 7 Comments
Jul 05

Global ConfirmDialog

ConfirmDialog is handy when you want to provide a fancy confirmation instead of javascript confirm box, however there is one to one relationship between the confirmation source and the dialog itself meaning page author needs to create a separate confirmDialog for each action that requires confirmation. As the page grows, it becomes quite to maintain and page is bloated with confirmDialogs.

To improve this in PrimeFaces 4.0, we are introducing a Global ConfirmDialog that is a singleton on page shared amongst different components that require confirmation. Usage is quite simple, global option needs to be set true on confirmDialog and source of the action needs to have confirm enabled.

Here is the old way;

<h:form>

	<p:growl id="messages" />

	<p:commandButton value="Delete" onclick="confirmation.show()" type="button"/>

	<p:confirmDialog  message="Are you sure?" header="Confirmation" severity="alert" widgetVar="confirmation">
		<p:commandButton value="Yes" update="messages" oncomplete="confirmation.hide()"
					actionListener="#{buttonBean.destroyWorld}" />
		<p:commandButton value="Not" onclick="confirmation.hide()" type="button" />
	</p:confirmDialog>

</h:form>

And the Sentinel (4.0) way;

<h:form>

	<p:growl id="messages" />

	<p:commandButton value="Destroy the World" actionListener="#{buttonBean.destroyWorld}" update="messages">
		<p:confirm header="Confirmation" message="Are you sure?" icon="ui-icon-alert"/>
	</p:commandButton>

	<p:confirmDialog global="true">
		<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
		<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
	</p:confirmDialog>

</h:form>

There are various advantages;

  • Reduced page size and memory on client side plus improved page load speed.
  • Improved productivity.
  • Flexible to customize the global-shared confirmDialog via p:confirm attributes.
  • ConfirmDialog can be defined in a facelets template once and used many times.
  • Avoid appendToBody side effects.
Posted in JSF | 5 Comments
Jul 04

PrimeFaces at JavaOne 2013

As in 2012, PrimeFaces will be at JavaOne 2013 again. This time PrimeFaces Cookbook Co-Author Mert Çalışkan and Martin Fousek from NetBeans Team will be doing a session titled “10 Tips for Java EE 7 with PrimeFaces“.

This session takes you on a JSF tour with the help of Java EE 7, together with PrimeFaces and the NetBeans IDE. The tour begins with an introduction of PrimeFaces and its features, such as UI components and themes. Focusing on Java EE 7, it examines HTML5-friendly templates, resource libraries contracts, Faces Flow, EL operators, and lambda magic. Throughout, you will be shown how to apply the principles and concepts learned, via working examples in the NetBeans IDE. The presentation is brought to you “from the horse’s mouth”—that is, by PrimeFaces and NetBeans IDE engineers.

Posted in JSF | 1 Comment
Jul 02

PrimeUI 0.9.5 Released Featuring DataTable

PrimeUI 0.9.5 is now available featuring the mighty DataTable widget. This widget is designed to consume JSON and for the initial implementation we have decided to provide the most common use cases;

  • Local and Remote Data
  • Pagination
  • Sorting
  • Single and Multiple Selection

Online example is available at PrimeUI showcase demonstrating both a local json array and remote json data via a JAX-RS (Jersey) Service. In future versions we plan to add various new features ported from PrimeFaces DataTable like lazy loading, expandable rows, editing, scrolling and many more.

Download

PrimeUI 0.9.5 is available at PrimeFaces Downloads Page under Apache License as usual.

Roadmap

Two tasks are remaining for the upcoming 1.0 Final release, one is the Tree widget (again will be ported from PrimeFaces Tree) and the PrimeFaces Themes for PrimeUI. Our estimate is mid august for 1.0 Final.

Posted in PrimeUI | 6 Comments
Jul 01

PrimeFaces Elite 3.5.8 Released

3.5.8 is a new PrimeFaces Elite version that brings 30 improvements to 3.5.x series making over 150 improvements to 3.5 in total with previous Elite Releases.

New Features

Defect Fixes

Enhancements

Download

Binaries, Sources, Javadocs and Tag docs are available in PrimeFaces Elite Portal for Elite Subscribers (20$ per month) as an official release bundle. PrimeFaces PRO Users can access the files from PRO Portal. Community users need to build/maintain their own PrimeFaces Builds by referencing the changes from public trunk aka 4.0-SNAPSHOT or use 4.0-SNAPSHOT builds directly to receive the improvements.

Posted in JSF | 3 Comments
Jun 28

JSF 2.2 Pass Through Attributes

JSF 2.2 has a great feature to add dynamic attributes to a component on runtime, these attributes are called pass through attributes. PrimeFaces 4.0 is aimed to support JSF 2.0,  2.1 and 2.2 at the same time using runtime detection and lately pass through attributes support is added to 4.0;

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:p="http://primefaces.org/ui">

	<h:head>
	</h:head>

	<h:body>

		<p:inputText value="#{bean.value}" pt:placeholder="Watermark here"/>

	</h:body>
</html>

Special thanks to PrimeFaces Friend Rudy De Busscher for his contribution regarding the implementation.

Posted in JSF | 4 Comments
Jun 27

PrimeFaces Starter Book

A brand new PrimeFaces Book is now available from Packt Publlishing authored by PrimeFaces and JSF expert Ian Hlavats.

Instant PrimeFaces Starter is great for developers looking to get started quickly with PrimeFaces. It’s assumed that you have some JSF experience already, as well as familiarity with other Java technologies such as CDI and JPA and an understanding of MVC principles, object-relational mapping (ORM), and dependency injection (DI). The sample application included with the book is fully functional and demonstrates how to use these technologies together with PrimeFaces.

Posted in JSF, Uncategorized | 1 Comment