Mobile Twitter Client with JSF

I’ve added another sample to TouchFaces showcase applications, this one is called TwitFaces allowing to view someone’s tweets in your iphone. The app integrates with twitter rest api and created with TouchFaces mobile JSF kit of PrimeFaces.

Let’s begin with TwitterService

package org.primefaces.examples.service;

import java.util.List;

public interface TwitterService {

	public List<String> getTweets(String username);
}

And TwitterRSSService, the RSS based implementation using Rome.

package org.primefaces.examples.service;

import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import java.util.logging.Logger;

import com.sun.syndication.feed.synd.SyndEntry;
import com.sun.syndication.feed.synd.SyndFeed;
import com.sun.syndication.io.SyndFeedInput;
import com.sun.syndication.io.XmlReader;

public class TwitterRSSService implements TwitterService {

	private static final Logger logger = Logger.getLogger(TwitterRSSService.class.getName());

	public List<String> getTweets(String username) {
		List<String> tweets = new ArrayList<String>();

		try {
			URL feedSource = new URL("http://twitter.com/statuses/user_timeline.rss?screen_name=" + username);

			SyndFeedInput input = new SyndFeedInput();
			SyndFeed feed = input.build(new XmlReader(feedSource));
			for(Object f : feed.getEntries()) {
				SyndEntry entry = (SyndEntry) f;
				tweets.add(entry.getTitle().substring(username.length() + 2));
			}
		}catch(Exception e) {
			logger.severe(e.getMessage());
		}

		return tweets;
	}
}

And the JSF backing bean called TwitterController powered by PrimeFaces Optimus.

package org.primefaces.examples.touch;

import java.util.List;

import javax.faces.event.ActionEvent;

import org.primefaces.examples.service.TwitterService;
import org.primefaces.optimus.config.Scope;
import org.primefaces.optimus.config.annotations.Controller;

import com.google.inject.Inject;

@Controller(name="twitterController", scope=Scope.REQUEST)
public class TwitterController {

	@Inject private TwitterService twitterService;

	private String username;

	private List<String> tweets;

	public void loadTweets(ActionEvent actionEvent) {
		tweets = twitterService.getTweets(username);
	}

	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}

	public List<String> getTweets() {
		return tweets;
	}
	public void setTweets(List<String> tweets) {
		this.tweets = tweets;
	}
}

Finally create your app as a JSF page, twitfaces.xhtml;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:i="http://primefaces.prime.com.tr/touch"
	contentType="text/html">

	<i:application icon="/images/touch/twiticon.png">
		<i:view id="home" title="TwitFaces">
			<h:form prependId="false">
				<i:tableView>
					<i:rowGroup>
						<i:rowItem>
							<h:inputText value="#{twitterController.username}" />
						</i:rowItem>
					</i:rowGroup>

					<p:commandLink actionListener="#{twitterController.loadTweets}" style="margin:10px 10px;"
					styleClass="whiteButton" value="#" update="display">Get Tweets</p:commandLink>

					<i:rowGroup id="display">
						<ui:repeat value="#{twitterController.tweets}" var="tweet">
							<i:rowItem>
								#{tweet}
							</i:rowItem>
						</ui:repeat>
					</i:rowGroup>
				</i:tableView>
			</h:form>
		</i:view>
	</i:application>

</f:view>

That’s it running twitfaces.jsf displays;

twitfaces

TwitFaces is a very simple app, a full blown twitter client can be written on top of it easily using TouchFaces/PrimeFaces.

Online Demo

Check out TwitFaces app live on PrimeFaces Online Demos.

PrimeFaces Reorg

Two PrimeFaces modules, Optimus and FacesTrace are moved to the PrimeFaces Extensions as spin-off projects and PrimeFaces UI module is renamed as PrimeFaces

Main goal of PrimeFaces has always been to be the ultimate JSF component suite, by this change PrimeFaces became all about UI again.

Dynamic Images with JSF

Legacy way to display binary images is to create a servlet and send the byte content as a stream. This requires a dedicated servlet and probably different servlets dealing with handling cases.

PrimeFaces features a simple but powerful StreamedContent API and p:graphicImage component to display any binary image easily. This binary image could be images stored in a database or images created programmatically on-the-fly. Following are a couple examples for demonstrating how easy it is to display binary images with PrimeFaces.

Images Stored in Database
This example retrieves a blob from a jdbc resultset and provides it’s inputstream as a StreamedContent.

public class BackingBean {

	private StreamedContent dbImage;

	public BackingBean() {
		InputStream dbStream = //Get inputstream of a blob eg javax.sql.Blob.getInputStream() API
		dbImage = new DefaultStreamedContent(dbStream, "image/jpeg");
	}

	//getters and setters
}
 <p:graphicImage value="#{backingBean.dbImage}" />

dynamicImage.jsf

Generated Chart Images
JFreeChart is a popular open source charting library, PrimeFaces also have flash based cool charts but if you want
to use JFreeChart instead you don’t need a wrapper JSF component for this. Just create your chart and define it as
as a streamed content.

public class BackingBean {

	private StreamedContent chartImage;

	public BackingBean() {
		try {
			JFreeChart jfreechart = ChartFactory.createPieChart("Turkish Cities", createDataset(), true, true, false);
			File chartFile = new File("dynamichart");
			ChartUtilities.saveChartAsPNG(chartFile, jfreechart, 375, 300);
			chartImage = new DefaultStreamedContent(new FileInputStream(chartFile), "image/png");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	private PieDataset createDataset() {
		DefaultPieDataset dataset = new DefaultPieDataset();
		dataset.setValue("Istanbul", new Double(45.0));
		dataset.setValue("Ankara", new Double(15.0));
		dataset.setValue("Izmir", new Double(25.2));
		dataset.setValue("Antalya", new Double(14.8));

		return dataset;
	}

	//getters and setters
}
 <p:graphicImage value="#{backingBean.dbImage}" />

This chart example truly demonstrates the power of PrimeFaces StreamedContent, I’ve created a JSFChartCreator component long time ago which became quite popular in JSF community. The problem was when you wrap a huge API like JFreeChart, flexibility gets lost since it’s just too hard to support every different setting in JFreechart API with a wrapper component. StreamedContent and p:graphicImage simply makes any other JSF component wrapping JFreeChart obselete. Instead with this way you still have the full power of chart api and a very easy way to display it.

dynamicImage.jsf

Runtime Barcode Creator
Similar to the chart example, an on-the-fly generated barcode can easily be presented. This example uses barbecue project to create barcodes.

public class BackingBean {

	private StreamedContent barcode;

	public BackingBean() {
		try {
			File barcodeFile = new File("dynamicbarcode");
			BarcodeImageHandler.saveJPEG(BarcodeFactory.createCode128("PRIMEFACES"), barcodeFile);
			barcode = new DefaultStreamedContent(new FileInputStream(barcodeFile), "image/jpeg");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	//getters and setters
}
 <p:graphicImage value="#{backingBean. barcode}" />

dynamicImage-1.jsf

Online Demo
Examples I’ve given here are also available live at PrimeFaces Showcase.

Summary
One of the design principles behind PrimeFaces is to hide complexity and keep the flexibility, this is just one example of it in PrimeFaces.

Primus RC Trailer

Web Based Ajax Terminal

PrimeFaces brings desktop terminals to the web, p:terminal is an ajax powered JSF component to execute commands defined on server side. Usage is very simple, just place the terminal and provide a command handler.

Screen shot 2009-10-20 at 8.47.11 PMCode

    <p:terminal commandHandler="#{mybean.handleCommand}" />

CommandHandler is a simple java method taking two parameters, first one is the name of the command and second parameter is an array of command arguments.

    public String handleCommand(String command, String[] params) {
		if(command.equals("greet"))
			return "Hello" + params[0];
		else if(command.equals("date"))
			return new Date().toString();
		else
			return command + " " + not found;
	}

Terminal in Mock OS X
I’ve integrated terminal to famous PrimeFaces Mock OS X, there’s a terminal icon in the dock displaying the terminal in a dialog. Check out the terminal in Mock OS X demo. CommandHandler is the one I’ve posted above with greet and date commands.

More Demos
There’re two more terminal demos;
* Terminal in a dialog
* Full page Terminal

Aim of PrimeFaces is to create the Ultimate Component Suite to rule them all. What PrimeFaces has so far is just the beginning.

Benchmarking Ajax JSF Libraries

Mert Caliskan posted a simple ajax performance test comparing PrimeFaces, RichFaces and Trinidad.  He used simple partial page rendering examples in demo applications which reveals PrimeFaces is 2x/3x faster than RichFaces and Trinidad. Also Alex Smirnov tested the same demo apps and got a set of different results.

Well benchmark tests usually cause debates, I’ve also done similar tests but to improve the accuracy and cause less debates I’ve created three different applications rather than using showcases. All applications are deployed on tomcat6, use server side state management and facelets for view. The box used for testing is a mac book pro 2.4 ghz with 4gb ram running snow leopard.

Let’s start with PrimeFaces.

PrimeFaces

Page: primeppr.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui">
<head>
	<p:resources />
</head>
<body>
	<h:form prependId="false">
		<h:inputText value="#{testBean.text}" />
		<p:commandButton value="Submit" update="out" />
		<h:outputText id="out" value="#{testBean.text}" />
	</h:form>
</body>
</html>

Configuration: None (PrimeFaces is a lightweight library so basically there’s nothing to configure :)
primeppr

RichFaces

Page: primeppr.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
<head>
</head>
<body>
	<h:form>
		<h:inputText value="#{testBean.text}" />
		<a4j:commandButton value="Submit" reRender="out" />
		<h:outputText id="out" value="#{testBean.text}" />
	</h:form>
</body>
</html>

Configuration: As far as I know disabling forceparser improves RichFaces performance, so I set forceparser to false.

richppr

Trinidad

Page: trinidadppr.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:tr="http://myfaces.apache.org/trinidad">
<head>
</head>
<body>
	<tr:document>
		<h:form>
			<tr:inputText value="#{testBean.text}" />
			<tr:commandButton id="btn" text="Submit" partialSubmit="true"/>
			<tr:outputText id="out" value="#{testBean.text}" partialTriggers="btn"/>
		</h:form>
	</tr:document>
</body>
</html>

trinidadpprConfiguration: I’ve disabled debug setting of Trinidad in trinidad-config.xml.

Results

For 10 requests for the exact simple use case, average processing times are;

PrimeFaces: 8.4 ms

RichFaces: 16.7 ms

Trinidad: 9.7 ms (Note that Trinidad has more optimization features like view state caching which can improve the performance even further.)

I believe these results can be realized as more accurate compared to other two tests I’ve mentioned because for my tests rather than using the different showcase apps I’ve created the same application three times with each library.

I’m glad that PrimeFaces is performing well, the reason is as a result of aiming to keep things simple. PrimeFaces has no servlet filter, html parser, custom viewhandler, custom statemananger and etc. This helps PrimeFaces to keep things clean, do less computation, use less memory and be lightweight. Even acouple of PrimeFaces users were kind enough to provide testimonials which proves it. :)

Mobile Ajax Push for iPhone with PrimeFaces

PrimeFaces 1.0.0.RC aka PRIMUS will introduce the new Ajax Push aka Comet features powered by Atmosphere, after doing the initial integration I’ve created a sample chat application for a demo. It’s a simple app with login and message sending capabilities powered by http-streaming. I’ll also add support for long-polling approach soon.

After creating it, I took the integration one step further and using TouchFaces, created an iPhone app as a chat client. App will also work well with other mobile devices such as Android Phones, Palm Pre, Nokia S60 and more, any handheld device with a webkit browser is supported well.

Following is a short screencast, begins with demonstrating how easy it’s to use PrimeFaces Push and then adds more flavour with the TouchFaces client. Don’t forget to watch the video in HD. You can also play with this stuff via the online demo of PrimeFaces. Mobile chat client is also available at the TouchFaces section of PrimeFaces showcase.

PrimeFaces Talk Video and Slides

Last week, I gave my “Rapid RIA with PrimeFaces” talk at an event organized by London Java Web Users Group. The session is recorded
and available as a 90 minute podcast. Slides are also available at PrimeFaces project page.
My next stop is JSFSummit 2009 where I’ll be doing an updated version of this talk in Orlando, USA. See you there!

Last week, I gave my “Rapid RIA with PrimeFaces” talk at an event organized by London JUG. The session is recorded  and available as a 90 minute podcast. Slides are also available at PrimeFaces project page and you can watch the podcast at skills matter site.

My next stop is JSFSummit 2009 where I’ll be doing an updated version of this talk in Orlando, USA. See you there!

PrimeFaces UI 0.9.3 is released

I am pleased to announce that new version of PrimeFaces UI Components is released. Version 0.9.3 features the TouchFaces mobile UI kit, 5 new components, improved portlet support, enhanced datatable and various improvements.

  • TouchFaces – UI Development kit for mobile devices mainly iphone
  • New component : FileUpload (Reimplemented)
  • New component : Tooltip (Reimplemented)
  • New component : PickList
  • New component : HotKey
  • New component : Virtual Keyboard
  • Easy row selection, ajax pagination, data filtering and lazy loading enhancements to DataTable
  • Significantly improved portal support for JSR168 and JSR268 portlets.
  • Pojo and Converter support for AutoComplete

See the full changelog for detailed information. Reference Documentation is also updated with 37 pages more, making it a total of 277. Additionally prime-showcase application is updated with a better looking UI.

PRIMUS

Next milestone is PrimeFaces UI 1.0.0.RC codename “PRIMUS” which will feature Ajax Push based on Bayeux protocol. Watch the teaser trailer below for more information :)

Lazy Loading JSF DataTable

I’ve actually blogged about this topic three years ago and introduced the PagedListDataModel. That solution worked at that time with some flows in design but now after three years, I’ve a much better solution to the same problem. Using PrimeFaces DataTable it’s a piece of cake to load millions of data lazily, just set the lazy to true and provide a LazyDataModel. Here’s is how it works.

<p:dataTable var="car" value="#{tableBean.lazyModel}" paginator="true" rows="10"
			dynamic="true" lazy="true">

	<p:column>
		<f:facet name="header">
			<h:outputText value="Model" />
		</f:facet>
		<h:outputText value="#{car.model}" />
	</p:column>

	<p:column>
		<f:facet name="header">
			<h:outputText value="Year" />
		</f:facet>
		<h:outputText value="#{car.year}" />
	</p:column>

	<p:column>
		<f:facet name="header">
			<h:outputText value="Manufacturer" />
		</f:facet>
		<h:outputText value="#{car.manufacturer}" />
	</p:column>

	<p:column>
		<f:facet name="header">
			<h:outputText value="Color" />
		</f:facet>
		<h:outputText value="#{car.color}" />
	</p:column>
</p:dataTable>

And the lazyModel;

public class TableBean {

	private LazyDataModel<Car> lazyModel;

	public TableBean() {
		/**
		* Test with one hundred million records.
		* In a real application use an sql Count query to get the row count.
		*/
		lazyModel = new LazyDataModel<Car>(100000000) {

			/**
			 * Dummy implementation of loading a certain segment of data.
			 * In a real applicaiton, this method should access db and do a limit based query
			 */
			@Override
			public List<Car> fetchLazyData(int first, int pageSize) {
				logger.info("Loading the lazy car data between {} and {}", first, first+pageSize);

				List<Car> lazyCars = new ArrayList<Car>();
				populateLazyRandomCars(lazyCars, pageSize, first);

				return lazyCars;
			}
		};
	}

	public LazyDataModel<Car> getLazyModel() {
		return lazyModel;
	}

	private void populateLazyRandomCars(List<Car> list, int size, int first) {
		for(int i = 0 ; i < size ; i++) {
			int offset = i + first;
			list.add(new Car("Model_" + offset, getRandomYear(), "Brand_" + offset, "Color_" + offset));
		}
	}
}

That’s just it, whenever a paging event occurs with ajax, your fetchLazyData implementation will be called with the offset and pageSize. In a real application, you need to use your specific data access methods to load a chunk of data between a certain interval. For example in JPA api setMaxResults(pageSize) and setFirstResult(first) would do the trick. Also you need to define how many virtual records are there to be displayed so that PrimeFaces DataTable can create it’s paginator using that value, as an example a count/projection query could be used.

So to sum up, with PrimeFaces DataTable lazy loading capabilities even if you have billions of records, you can enable lazy loading very easily since number of all records are not relevant, only the records on the current datatable page is loaded.

There’s an online demo that demonstrates how to display one hundred million(100000000) records with this feature with paging happening less than a second.

PrimeFaces UI 0.9.3 Trailer

PrimeFaces UI 0.9.3 is coming soon with many new features and improvements, here’s the video of the trailer :)

“Rapid RIA with PrimeFaces” talk

On 6th of October, I’ll be doing my “Rapid RIA with PrimeFaces” talk at Skills Matter, London. This is a free event organized by London Java Web Users Group. See the announcement for more information and registration. Hopefully after the event, we’ll head over to the nearby pub for drinks and further discussion.

Posted in Developer, Java, PrimeFaces. Comments Off

Sample iPhone Apps with TouchFaces

For demonstration purposes I’ve created a couple of sample iPhone apps using TouchFaces. Here’s a short screencast explaining how these apps work and how easy it is to implement them with PrimeFaces.

These apps are deployed online so you can test them with your iphone or a webkit based mobile browser. Demo page also contains pointers to the source codes.

“Rapid RIA with PrimeFaces” slides

First of all thanks to EMC Conchango for inviting me to their communit day sessions, my talk was titled as “Rapid RIA Development with PrimeFaces”. You can find the slides of my presentation at PrimeFaces homepage documentation section. In october I’ll be doing an updated version of this talk at London Java Web Users Group.

Posted in Developer, Java, PrimeFaces. Comments Off

IPhone App Development with JSF

TouchFaces is a UI development kit to create IPhone web applications with JSF. TouchFaces is a member of PrimeFaces family and will be shipping with the UI module. Basically it allows developing applications using JSF with the native IPhone look and feel, plus it’s powered by PrimeFaces UI infrastructure and Ajax is built-in.

I’ll also publish detailed articles soon but recently I’ve created a screencast as a getting started tutorial. Enjoy!

Update: See sample iphone apps and mobile push for further information.

Growl meets JSF

Mac OS X’s growl is an intuitive way to display messages from the system and other apps. So how can you bring this way of notification to web with JSF. It’s as simple as;

<p:growl />

PrimeFaces Growl component simply replaces h:messages (lame) so growl is equipped with attributes such as showSummary, showDetail, globalOnly. Since growl displays FacesMessages severity information is provided with an icon that can be info, warn, error or fatal.

Picture 3Picture 2

You can even integrate growl with your ajax request, following is an example;

<p:growl id="messages"/>
<p:commandButton value="Save" update="messages" />

Online Demos
All sample applications of PrimeFaces use growl for notification here are some links;

ShowCase
BookStore
PhoneBook

Growl will also be integrated to PrimeFaces push support which is coming soon so all of a sudden clients can be notified of a message with Growl.

Easy Unit Testing JSF Backing Beans

It’s not secret that JSF is not the best testable web framework of all. When it comes to Unit Testing JSF backing(managed-bean) logic, the reason for this is quite obvious. At some point when programming the backend logic of your page, you need to use FacesContext to access FacesMessages, session or etc. So how this can be avoided?

PrimeFaces Optimus features an IOC container built on top of Google Guice that goes beyond the capabilities of JSF’s core IOC. Some of these are constructor&field injection, AOP support, easy testing.

To demonstrate how easy it’s easy to test JSF backing beans powered by Optimus, I’m going to implement a simple login scenario. There’re three classes involved in this example; LoginService, LoginServiceImpl and LoginController.

LoginService

public interface LoginService {

	public boolean login(String username, String password);

}

LoginServiceImpl

public class LoginServiceImpl implements LoginService {

	public boolean login(String username, String password) {
		//Connect to a datasource(ldap, db) and actually validate user
		//return outcome
	}

}

LoginService and it’s implementation are pretty straightforward. The important part is the LoginController, below is the untestable default way of implementing LoginController.

LoginController – Classic

public class LoginController {

	private String username;
	private String password;
	private LoginService loginService;

	//JSF can set through a managed-property
	public void setLoginService(LoginService loginService) {
		this.loginService = loginService;
	}

	public String loginClicked() {
		boolean isValidUser = loginService.login(username, password);

		if(isValidUser) {
			return "mainpage";
		} else {
			//Evil code that makes your backing bean untestable
			FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Invalid login", "Wrong username/password combination");
			FacesContext.getCurrentInstance().add(null, message);
			//End of evil code

			return "failed";
		}
	}

	public String getUsername() {return username;}
	public void setUsername(String username) {this.username = username;}

	public String getPassword() {return password;}
	public void setPassword(String password) {this.password = password;}
}

The problem above is by using FacesContext to add messages, you just made your code hard to test. At this point you can use shale test static mock library(the project is dead already) or change your code to remove FacesContext references. Here’s how to;

LoginController – Better


@Controller(name="loginController", scope=Scope.REQUEST)
public class LoginController {

	private String username;
	private String password;
	private LoginService loginService;
	private FacesMessages messages;

	@Inject
	public LoginController(LoginService loginService) {
		this.loginService = loginService;
	}

	@Inject
	public void setFacesMessages(FacesMessages messages) {
		this.messages = messages;
	}

	public String loginClicked() {
		boolean isValidUser = loginService.login(username, password);

		if(isValidUser) {
			return "mainpage";
		} else {
			messages.addError("Invalid login", "Wrong username/password combination");

			return "failed";
		}
	}

	public String getUsername() {return username;}
	public void setUsername(String username) {this.username = username;}

	public String getPassword() {return password;}
	public void setPassword(String password) {this.password = password;}
}

That’s it, now you don’t reference FacesContext any more, FacesMessages is a simple interface, you can inject it with @Inject. Although you can use Field injection to avoid a setter for simplicity but that’s just a bad practice regarding testing.

Finally here’s a simple test with JUnit and Mockito(My favorite mock library).

LoginControllerTest

import static org.junit.Assert.*;
import static org.mockito.Mockito.*;

import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.primefaces.examples.bookstore.service.LoginService;
import org.primefaces.examples.bookstore.view.LoginController;
import org.primefaces.optimus.application.FacesMessages;

public class LoginControllerTest {

	private LoginController controller;
	private LoginService loginService;
	private FacesMessages facesMessages;

	@Before
	public void setup() {
		loginService = mock(LoginService.class);
		facesMessages = mock(FacesMessages.class);

		controller = new LoginController(loginService);
		controller.setFacesMessages(facesMessages);
	}

	@After
	public void after() {
		controller = null;
	}

	@Test
	public void invalidCredentialsShouldStayOnLoginPageAndGiveMessage() {
		controller.setUsername("primo");
		controller.setPassword("1234");

		//stub
		when(loginService.login("primo", "1234")).thenReturn(false);

		//execute command action
		String result = controller.loginClicked();

		//outcome should be failed
		assertEquals("failed", result);

		//verify if message is added
		verify(facesMessages).addError("Invalid login", "Wrong username/password combination");
	}

	@Test
	public void correctCredentialsShouldLoginTheUser() {
		controller.setUsername("primo");
		controller.setPassword("4444");

		//stub
		when(loginService.login("primo", "4444")).thenReturn(true);

		//execute command action
		String result = controller.loginClicked();

		//outcome should be failed
		assertEquals("mainpage", result);
	}
}

In addition to FacesMessages, I’ve also added more solutions to commonly used stuff like Request Parameters or Session. Injection them is as easy as;


	@Inject
	private Params params;

	@Inject
	private Session session;

Whole idea is to abstract backing beans from any code(FacesContext) that makes testing harder and introduce more interfaces to code with.

PrimeFaces Dual Release

I’m pleased to announced that new versions of two PrimeFaces subprojects are released. UI Components 0.9.2 and Optimus 0.8.0 binaries are available at Prime Maven repository and project’s google code page.

UI Components 0.9.2

UI Components 0.9.2 includes important performance updates, new components and improvements on Partial Page Rendering infrastructure. Significant changes of this release are as following.

  • New component : Wizard
  • New component : Layout Framework
  • New component : Growl
  • New component : Stack
  • New component : Collector
  • Every resource that is included to the page is now compressed by YUI compressor, this leads to a significant improve in page load times.
  • Plain Html is now supported in partial response with Facelets.

Full changelog is availabe at here. Next version 0.9.3 will feature better portlet support, enhanced datatable and new components like dualList and keyboard.

Optimus 0.8.0

JPA and Persistence support is written to bridge JSF and Guice with warp-persist. Optimus simply orchestrates JSF-Guice-JPA stack. I’ve also added a bookstore sample application to demonstrate this lightweight but powerful stack in action.

JSF Workflows in a Single Page

Wizards, Conversations, Workflows in web development. Whatever you call it, it’s not trivial to deal with these properly. PrimeFaces wizard component features an AJAX powered UI and built-in partial validation to implement a conversation in a single JSF page. In the following example there’re 3 tabs corresponding to each steps of the flow and last tab is for confirmation.

wiz

This is the userWizard bean, which is simply at viewScope to span multiple requests. Session scope will work as well but optimal scope for this is the viewScope.

package org.primefaces.examples.view;

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

@Controller(name="userWizard", scope = Scope.VIEW)
public class UserWizard {

	private User user = new User();

	public User getUser() {
		return user;
	}
	public void setUser(User user) {
		this.user = user;
	}

	public void save(ActionEvent actionEvent) {
		//Persist user
		FacesMessage msg = new FacesMessage("Successful", "Welcome :" + user.getFirstname());
		FacesContext.getCurrentInstance().addMessage(null, msg);
	}
}

And the single page that contains all steps;

<p:wizard height="200" width="600">
<p:tab>
<p:panel header="Personal Details">

	<h:messages errorClass="error"/>

	<h:panelGrid columns="2">
		<h:outputText value="Firstname: *" />
		<h:inputText value="#{userWizard.user.firstname}" required="true"/>

		<h:outputText value="Lastname: *" />
		<h:inputText value="#{userWizard.user.lastname}" required="true"/>

		<h:outputText value="Age: " />
		<h:inputText value="#{userWizard.user.age}" />
	 </h:panelGrid>
	  	</p:panel>
    </p:tab>
<p:tab>
<p:panel header="Adress Details">

	  	<h:messages errorClass="error"/>

	   		<h:panelGrid columns="2" columnClasses="label, value">
				<h:outputText value="Street: " />
				<h:inputText value="#{userWizard.user.street}" />

				<h:outputText value="Postal Code: " />
				<h:inputText value="#{userWizard.user.postalCode}" />

				<h:outputText value="City: " />
				<h:inputText value="#{userWizard.user.city}" />
	   		</h:panelGrid>
	 	</p:panel>
    </p:tab>
<p:tab>
<p:panel header="Contact Information">

	   		<h:messages errorClass="error"/>

	   		<h:panelGrid columns="2">
				<h:outputText value="Email: *" />
				<h:inputText value="#{userWizard.user.email}" required="true"/>

				<h:outputText value="Phone: " />
				<h:inputText value="#{userWizard.user.phone}"/>

				<h:outputText value="Additional Info: " />
				<h:inputText value="#{userWizard.user.info}"/>
	   		</h:panelGrid>

		</p:panel>
    </p:tab>
<p:tab>
<p:panel header="Confirmation">

	    	<h:panelGrid id="confirmation" columns="6">
				<h:outputText value="Firstname: " />
				<h:outputText value="#{userWizard.user.firstname}"/>

				<h:outputText value="Lastname: " />
				<h:outputText value="#{userWizard.user.lastname}"/>

				<h:outputText value="Age: " />
				<h:outputText value="#{userWizard.user.age}" />

				<h:outputText value="Street: " />
				<h:outputText value="#{userWizard.user.street}" />

				<h:outputText value="Postal Code: " />
				<h:outputText value="#{userWizard.user.postalCode}"/>

				<h:outputText value="City: " />
				<h:outputText value="#{userWizard.user.city}"/>

				<h:outputText value="Email: " />
				<h:outputText value="#{userWizard.user.email}" />

				<h:outputText value="Phone " />
				<h:outputText value="#{userWizard.user.phone}"/>

				<h:outputText value="Info: " />
				<h:outputText value="#{userWizard.user.info}"/>

				<h:outputText />
				<h:outputText />
			</h:panelGrid>
<p:commandButton value="Submit" actionListener="#{userWizard.save}" />

		</p:panel>
   </p:tab>

</p:wizard>

Ajax and Partial Validation

When you click next or previous, first the current tab is validated and if it’s valid next tab contents are loaded and update with ajax. If step is not valid, current tab is redisplayed with validation errors. Validation is done partially meaning only the current tab will be validated although wizard is enclosed in a single form.

Online Demos

There’re two examples of wizard deployed online;

Wizard with slide effect
Wizard with toggle effect

Posted in Developer, Java, PrimeFaces. Comments Off

Follow PrimeFaces on Twitter

PrimeFaces recently joined twitter, follow us via http://twitter.com/primefaces

Posted in Developer, Java, PrimeFaces. Comments Off