PrimeFaces 0.8.1 is released

I’ve released the new versions of two PrimeFaces modules, UI and Optimus. Following is the changelog information.

UI Components – 0.8.1

0.8.1 comes with new components and bug fixes, list below contains the significant changes. See the full changelog in csv format.

* New component : captcha
* New component : effect
* New component : resizable
* Live chart data display based on ajax polling
* Interactive charts with itemSelectEvent
* Ajax enabled tab loading for tabView components

Optimus – 0.7.1

0.7.1 comes with more aop support, pdf rendering and flexible dependency mechanism, list below contains the significant changes. See the full changelog in csv format.

* AOP based method level security with @Authorize
* Optional Guice integration
* PDF rendering of JSF pages (Experimental)

Posted in Developer, Java, PrimeFaces. Comments Off

Lightweight JSF with Guice

One of the shortcomings of JSF 1.2.x is it’s xml based simple IOC container. stuff repeats and repeats once application gets larger and it only allows setter injection with no AOP support. So it’s almost the basic IOC container you can think of. Usually JSF IOC is totally left out because of it’s incapabilities and more complete containers like spring or seam injection is used to create the JSF backing beans leaving managed beans alone. JSF 2.0 comes with the @ManagedBean annotation which actually should be in JSF 1.2 instead. @ManagedBean sounds fine but still the ioc part have shortcomings I’ve mentioned above.Also I don’t like the fact that for a simple managed bean we need to add another annoation for scope like @SessionScoped. It may become annotation hell as well.

PrimeFaces Optimus module provides non-rendering JSF solutions like xml-less navigation handler and guice integration. With Guice integration you can use Guice powered lightweight pojos as JSF backing beans and take the advantage of field, constructor, setter injection, aop support and more guice features. Following is a simple optimus backing bean annotated with @Controller.

import org.primefaces.optimus.config.Scope;
import org.primefaces.optimus.config.annotations.Controller;

@Controller(name="greetingController", scope=Scope.REQUEST)
public class GreetingController {

	private String message = "Merhaba";

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}
}

This can be used on a page as;

	<h: outputText value="#{greetingController.message}" />

Example above is the simplest form. The nice part is that @Controller annotated beans are actually Guice powered meaning they realize the @Inject annotation and have aop capabilities. Suppose you have a guice managed service called MovieService and a MovieController for JSF backing.

public interface MovieService {
    public void saveMovie(Movie movie);
}

And the implementation

public class MovieServiceImpl implements MovieService{

    public void saveMovie(Movie movie) {
        //save movie here
    }
}

Next thing is to add MovieService to your Guice Module and configure it for Optimus,

public class MovieStoreMainModule implements Module{

    public void configure(Binder binder) {
        binder.bind(MovieService.class).to(MovieServiceImpl.class).in(Scopes.SINGLETON);
    }
}

And let optimus know about your modules;

<context-param>
<param-name>optimus.CONFIG_MODULES</param-name>
<param-value>org.primefaces.examples.config.MovieStoreMainModule</param-value>
</context-param>

That’s it now you can inject the movie store to a JSF backing bean;

Simple Injection

import org.primefaces.optimus.config.Scope;
import org.primefaces.optimus.config.annotations.Controller;

import com.google.inject.Inject;

@Controller(name="movieController", scope=Scope.REQUEST)
public class MovieController {

    @Inject
    private MovieService movieService;

    public String save() {
        movieService.save();
    }
}

Constructor Injection

import org.primefaces.optimus.config.Scope;
import org.primefaces.optimus.config.annotations.Controller;

import com.google.inject.Inject;

@Controller(name="movieController", scope=Scope.REQUEST)
public class MovieController {

    private MovieService movieService;

    @Inject
    public MovieController(MovieService movieService) {
        this.movieService = movieService;
    }

    public String save() {
        movieService.save();
    }
}

Setter Injection

import org.primefaces.optimus.config.Scope;
import org.primefaces.optimus.config.annotations.Controller;

import com.google.inject.Inject;

@Controller(name="movieController", scope=Scope.REQUEST)
public class MovieController {

    private MovieService movieService;

    @Inject
    public void setMovieService(MovieService movieService) {
        this.movieService = movieService;
    }

    public String save() {
        movieService.save();
    }
}

AOP Support

Since guice powered jsf backing beans are AOP aware, I’ve added some utilities to make use of this, I’ll discuss this more in later when posting about Optimus Security Extensions but as an example Method Level Security is implemented with Guice AOP support. If users do not have the suitable role a security exception is thrown.

import org.primefaces.optimus.config.Scope;
import org.primefaces.optimus.config.annotations.Controller;
import org.primefaces.optimus.auth.Authorize;
import com.google.inject.Inject;

@Controller(name="movieController", scope=Scope.REQUEST)
public class MovieController {

    @Inject
    private MovieService movieService;

    @Authorize("admin,webmaster")
    public String save() {
        movieService.save();
    }
}

Optimus

Combined with the XML-Less Navigation Handler in optimus then you don’t need any repetitive <navigations /> in faces-config.xml. To sum up, Guice powered JSF gives more lightweight, low footprint and flexible solutions without the burden of xml or other huge ioc containers bloated with features you don’t need. More information about PrimeFaces Optimus is at the homepage of PrimeFaces.

Interactive JSF Charts

So far I’ve posted two entries about PrimeFaces chart components, one is introductory and secone one is about chart polling to display live data. This entry is about interactivity. When a series item is clicked, chart components do an ajax call and queues an ItemSelectEvent and by using a itemSelectListener you can listen chart events. Here’s an example;

<p:pieChart value="#{chartBean.sales}" var="sale" categoryField="#{sale.brand}" dataField="#{sale.amount}"
            itemSelectListener="# {chartBean.itemSelect}" update="info"
            styleClass="pie" style="chartStyle"/>

<h: outputText id="info" value="#{chartBean.message}" />

itemSelectListener is the important part, it’s a methodexpression that’s invoked when an item on chart is clicked. An org.primefaces.ui.event.chart.ItemSelectEvent is passed to the itemSelectListener, itemSelectEvent contains useful information about the selected item.

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import org.primefaces.examples.domain.Birth;
import org.primefaces.examples.domain.Vote;
import org.primefaces.optimus.config.Scope;
import org.primefaces.optimus.config.annotations.Controller;
import org.primefaces.ui.event.chart.ItemSelectEvent;

@Controller(name="chartBean", scope=Scope.VIEW)
public class ChartBean implements Serializable {

    private List<Sale> sales;

    private String message;

    public ChartBean() {
        sales = new ArrayList<Sale>();
        sales.add(new Sale("Brand 1", 540));
        sales.add(new Sale("Brand 2", 325));
        sales.add(new Sale("Brand 3", 702));
        sales.add(new Sale("Brand 4", 421));
    }

    public List<Sale> getSales() {
        return sales;
    }

    public void itemSelect(ItemSelectEvent event) {
        message = "Item Index: " + event.getItemIndex() + ", Series Index:" + event.getSeriesIndex();
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

Finally, chart uses PrimeFaces Partial Page Rendering, the components provided with the update
attribute is partially updated after the ajax response, in this case, the outputText.

Online Demo
The example I’ve given given here, can be seen in action at online demo of PrimeFaces.

Posted in Developer, Java, PrimeFaces. Comments Off

Resizable JSF Components

PrimeFaces features a resizable component that has the ability to make a JSF component resizable.
Resizable can be used on various components like resize an input fields, panels, menus, images and more.

To make a component resizable, just add p:resizable as a child;

<h:graphicImage id="img" value="/ui/barca/campnou.jpg">
<p:resizable  />
</h:graphicImage>

That’s it now an image can be resized by the user if he/she wants to see more detail:) Another common use case is the input fields,
if users need more space for a textarea, make it resizable by;

<h:inputTextarea id="area" value="Resize me if you need more space">
<p:resizable />
</h:inputTextarea>

Animations;

Other than plain resize handling, animations and effects are also supported.

<h:inputTextarea id="area" value="Resize me!!!">
<p:resizable proxy="true" animate="true" effect="bounceOut"/> 
</h:inputTextarea>

Online Demo

The examples I’ve given here can be reached live at the online demo.

Basic resizable example

Animated resizing

Dump Javascript Confirmation

confirm

There are traditional ways to display confirmation dialogs both in web and desktop applications. For example with swing JOptionPane showConfirmDialog can display a confirmation box to the user. On the other side, the legacy solution is to use javascript confirm function by attaching it an an event like onclick=”return confirm(‘You sure?’)”; Problem is confirm boxes are ugly, lacks customization support and may be blocked by browsers. A much better way to display confirmation dialogs is to use overlay dialogs, preferably modal ones. In PrimeFaces, confirmDialog component provides an easy and  customizable way for the requirement. Since the most common use case is use a button and displaying confirmation box, primefaces button has a built-in conformation support.

Old way;

	<h:commandButton value="Delete" action="#{bean.delete}" onclick="return confirm('Are you sure you want to delete')" />

PrimeFaces way;

<p:button value="Delete" action="#{bean.delete}">
<p:confirmDialog message="Are you sure you want to delete" />
</p:button>

Compared to javascript confirmation, confirmDialog is highly customizable, yes and no button labels, message, severity icon, the dialog look and feel itself and more.

Online Demo

Check out the online demo to see confirmDialog in action.

Posted in Developer, Java, PrimeFaces, Uncategorized. Comments Off

Live Data on Charts

Last week, I’ve written about the flash based chart components of PrimeFaces. Another nice feature I didn’t mention yet is that, charts are capable of displaying live data based on polling. As an example, suppose there’s an ongoing vote between two candidates and a pie chart displays the current status of the vote.

livechart2

Check out the Online Demo of Live Data on Charts

If you’re wondering about how it works, check out the link above to see the online demo.

The implementation is simple, just like a regular chart, you need to model the chart data, since there’s a vote going on, you can use a Vote class to represent this.

public class Vote {

	private String candidate;

	private int count;

	public Vote() {
		//NoOp
	}

	public Vote(String candidate, int count) {
		this.candidate = candidate;
		this.count = count;
	}

	public String getCandidate() {
		return candidate;
	}

	public void setCandidate(String candidate) {
		this.candidate = candidate;
	}

	public int getCount() {
		return count;
	}

	public void setCount(int count) {
		this.count = count;
	}

	public void add(int count) {
		this.count = this.count + count;
	}
}

And the ChartBean to provide the vote data;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import org.primefaces.examples.domain.Birth;
import org.primefaces.examples.domain.Vote;
import org.primefaces.optimus.config.Scope;
import org.primefaces.optimus.config.annotations.Controller;

@Controller(name="chartBean", scope=Scope.VIEW)
public class ChartBean implements Serializable {

	private List<Vote> votes;

	public ChartBean() {
		votes = new ArrayList<Vote>();
		votes.add(new Vote("Candidate 1", 100));
		votes.add(new Vote("Candidate 2", 100));
	}

	public List<Vote> getVotes() {
		int random1 = (int)(Math.random() * 1000);
		int random2 = (int)(Math.random() * 1000);

		votes.get(0).add(random1);
		votes.get(1).add(random2);

		return votes;
	}
}

Note that for dummy data, int getVotes() random number of votes are added to the candidate votes, probably in a real application you may use a webservice or a similar stuff to fetch the live data.(like stock market)

Finally, the pie chart on the page;

<p:pieChart id="votes" value="#{chartBean.votes}" var="vote"
					live="true" refreshInterval="5000"
					categoryField="#{vote.candidate}" dataField="#{vote.count}" />

To make chart live, only one attribute is needed, live=”true”. With this setting chart calls getVotes() in a 3 seconds polling interval and then returns the new data in json format, finally chart updates itself with the json data. Polling interval is tuned using the refreshInterval attribute.

All chart components bar, column, line, etc of PrimeFaces supports live data display. Also note that this feature is added after 0.8.0 release.