Do you need to get started quickly with a light, easy to integrate, rich JSF library ? then PrimeFaces might be what you are looking for!
Today there are several JSF libraries available for your Java EE applications (Richfaces, IceFaces). There is no clear winner as every library excel on some points while it can be improved on other points. Leaving to a next article a comparison between these JSF libraries, here I’d like to introduce PrimeFaces.
Here’s why PrimeFaces really impressed me:
PrimeFaces is very easy to integrate with your application. Just add primefaces-X.jar and go.
Zero configuration needed in your descriptors.
100+ rich set of JSF components.
Additional PrimeFaces Mobile module features a UI kit for developing mobile web applications.
Full integration with JQuery which allows to leverage lots of jQuery libraries.
Large, vibrant and active user community.
So as you can see there are several good reason to consider seriously using PrimeFaces. Let’s see how to add it to a Web application.
At first download Primefaces latest stable library.
Now create a new Web Project and add primefaces-X.jar to your WEB-INF/lib
Now add a Web page to your application let’s say home.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:form id="jsfexample">
<p:panelGrid columns="2">
<f:facet name="header">
Basic PanelGrid
</f:facet>
<h:outputLabel for="key" value="Enter key" />
<p:inputText id="key" value="#{manager.key}" />
<h:outputLabel for="value" value="Enter value" />
<p:inputText id="value" value="#{manager.value}" />
<p:commandButton action="#{manager.save}" update="mydata"
value="Save" icon="ui-icon-check" style="margin:0" />
<p:commandButton action="#{manager.clear}" update="mydata"
value="Delete" icon="ui-icon-cancel" style="margin:0" />
<h:messages />
</p:panelGrid>
<p:dataTable value="#{manager.cacheList}" var="item" id="mydata"
selectionMode="single" selection="#{manager.selectedProp}"
rowKey="#{item.key}">
<p:column>
<f:facet name="header">Key</f:facet>
<h:outputText value="#{item.key}" />
</p:column>
<p:column>
<f:facet name="header">Value</f:facet>
<h:outputText value="#{item.value}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
As you can see, all you need to inject PrimeFaces in your web pages is adding the namespace at the top of your page:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui">
What this simple application does, is storing a set of properties.
Two things to notice:
1) The dataTable object uses the selectionMode and selection attributes to store the elements which are selected from the dataTable. There is a corresponding field in the manager bean which contains our selection.
2) Notice the update attribute in the commandButton. The commandButton is builti-in with AJAX capabilities and the update attribute let you choose which components need update after the AJAX Response.
And here’s the Backing bean:
package com.sample.bean;
import java.util.ArrayList;
import java.util.List;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import com.sample.ejb.SingletonBean;
import com.sample.model.Property;
@ManagedBean(name="manager")
public class PropertyManager {
@EJB
SingletonBean ejb;
ArrayList<Property> cacheList = new ArrayList ();
private Property selectedProp;
private String key;
private String value;
public void save() {
ejb.put(key, value);
}
public void clear() {
ejb.delete(selectedProp);
}
public List getCacheList() {
return ejb.getCache();
}
// Getters and Setters
public Property getSelectedProp() {
return selectedProp;
}
public void setSelectedProp(Property selectedProp) {
this.selectedProp = selectedProp;
}
public String getKey() {
return key;
}
public void setKey(String key) {
this.key = key;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}
The EJB implementation just stores in memory the Property objects.
package com.sample.ejb;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.ejb.Singleton;
import com.sample.model.Property;
@Singleton
public class SingletonBean {
private List<Property> cache;
@PostConstruct
public void initCache(){
cache = new ArrayList<Property>();
}
public void delete(Property prop){
this.cache.remove(prop);
}
public void put(String key,String value){
Property p = new Property();
p.setKey(key);
p.setValue(value);
this.cache.add(p);
}
public List<Property> getCache() {
return cache;
}
}
For the Sake of brevity, we have not included the Property class which is a simple POJO. (Download the code at the bottom of this article).
I have tested this application with JBoss AS 7 which happily runs with Primefaces!
Pretty cool isn’t it ??
In the next article about PrimeFaces, I’d like to try the integration with jQuery libraries. Stay tuned!
Download code here
