After yesterday’s announcement about NetBeans 6.10 support in PrimeFaces, I’ve started thinking about what we can do for PrimeFaces users who have Eclipse Helios to develop their applications. So I’ve downloaded helios and created a sample JSF 2.0 project, after playing with xhtml editor I could only get completion support for tags not the attributes for a tag. Then I’ve figured out that Helios is scanning facelet taglib and so added the attribute metadata to facelet taglib by changing our PrimeFaces code generator plugin and that was it. Now Helios users can get tag and attribute completion with description support as well. Here are some screenshots;

Almost every Eclipse Helios user in PrimeFaces community asked for this support, we even have an issue ticket about this. So I’m glad that we can deliver this functionality to our users with PrimeFaces 2.2.M1.

NetBeans 6.10 has a surprise for PrimeFaces Community, beginning with 6.10 NetBeans provides PrimeFaces integration. NetBeans team contacted me some time ago before they’ve started working on this and we’ve agreed on NetBeans bundling PrimeFaces. Now NetBeans 6.10.M1 is released so we can try the early access version of this support.

Most important thing is as I’ve mentioned, PrimeFaces is now bundled with NetBeans so you don’t need to download PrimeFaces manually. When creating a new JSF project, there is a new components tab where you can select the optional JSF component suite for your project. As PrimeFaces is the only production ready library for JSF 2.0, NetBeans team have decided to start their improved JSF 2.0 integration with PrimeFaces so there are no other choices at the moment. Here are some screenshots which are also available on NetBeans What’s New and Noteworth WIKI for 6.10.

Component Wizard

Code Completion

I hope by the time NetBeans 6.10 goes final, we’ll be able to finalize 2.2 so current version in NetBeans(2.1) can be updated.

Enjoy!

I’ve created a screencast to demonstrate how easy it is to create your own themes with themeroller for your PrimeFaces applications.

We were running showcase examples on port 8080 before, this was making showcase unavailable to access behind company proxy servers that block 8080.

Now we’ve updated the showcase urls and start running them on port 80 to avoid these issues. New URLs are;

Showcase: http://www.primefaces.org/showcase
Labs: http://www.primefaces.org/labs

PrimeFaces partial page rendering feature is powered by JSF 2.0′s standard Ajax APIs with some of our own extensions. One of these extensions is the client side callbacks for ajax request, standard f:ajax has onerror and onevent whereas PrimeFaces provides onerror, onsuccess, onstart and oncomplete so when do these callbacks are executed?

onstart(xhr)
Before the ajax request is sent, xhr object is passed as a parameter and if you return false you can cancel the request. Also if the component that fires the ajax request supports onclick, that would be an alternative.

onerror(xhr, status, exception)
Fired when something goes wrong on server side, it gets three parameters xhr is the request object, status is the status response as string and exception is the object containing detailed information about the error.

onsuccess(xml)
Executed when server returns the partial output in xml format but before it is processed for dom update, this is handy if you’d like to parse the xml in your own. If you return false, you can cancel default dom update process.

oncomplete(xhr, status, args)
This is the most popular callback that is used, fired when response is received and dom is updated, it gets three parameters, xhr is the request object, status is the response status as string and args is the optional callback parameters that are passed from server as JSON using PrimeFaces RequestContext API. I’ll create a detailed post about how to use the handy args feature soon.

So how are these callbacks used, for example;

<p:commandButton update="component" value="Submit" oncomplete="alert('Completed')" />

An advanced demo of using these callbacks and RequestContext callback parameters is at;

http://www.primefaces.org:8080/prime-showcase/ui/dialogLogin.jsf

Many PrimeFaces community members have requested for an example about deploying JSF 2.0 and PrimeFaces 2 to Google App Engine. As a lightweight components suite, PrimeFaces does not contain any mumbo jumbo to make things complicated so since GAE supports JSF 2.0, it is quite easy to add PrimeFaces for fancy UIs.

I’ve first installed Google plugin for eclipse and then followed the instructions at this nice tutorial.

That was it, PrimeFaces Labs Showcase based on 2.2.RC1-SNAPSHOT and Mojarra-2.0.3 is now deployed at;

http://primefaces-rocks.appspot.com

Except image processing components like imageCropper, most of the features of PrimeFaces are working.

We as PrimeFaces Team, have been working with Spring WebFlow team for quite some time for enhanced SpringWebFlow-PrimeFaces-JSF 2.0 integration. And last week outcome of this work is revealed for the first time with Spring WebFlow 2.2.M1 release featuring support for JSF 2.0 ajax, partial state saving and more. Official announcement is at SpringSource Team Blog.

After the release, I got together with SWF 2 lead Rossen Stoyanchev once again(we both live in London) to sync things up, our plan is to sync SWF 2.2 and PrimeFaces 2.2 release dates to provide production ready SWF-JSF2-PrimeFaces Integration.

I’ll be giving a talk titled as “Exploring JSF 2.0 and PrimeFaces” in London on 23rd of August. This is event organized by SkillsMatter and free registration is required;

http://skillsmatter.com/event/java-jee/exploring-javaserver-faces-2-0-and-primefaces/rl-311

PrimeFaces p:media component is a generic multimedia player supporting various formats like flash, windows media, quicktime and real player. Suppose you have a mov file located at your application’s webroot. This file can be displayed as;

Basic Usage

<p:media value="/multimedia/dramatic_praire_dog.mov" />

By default player is calculated based on the file extension, still you can also choose a specific player;

<p:media value="http://www.youtube.com/watch?v=jHjFxJVeCQs" player="flash"/>

Binary Content
This is where things get interesting, suppose you keep your multimedia files in a database with binary format. Using PrimeFaces StreamedContent API, it’s easy to display them as well.

public class Bean {

    private StreamedContent media;

    public Bean() {
        InputStream stream = //get inputstream from datatabase record
        media = new DefaultStreamedContent(stream, "video/quicktime");
    }

    public StreamedContent getMedia() { return media; }
}

<p:media value="#{bean.media}" />

That’s it, by providing a streamedcontent instance, p:media can display the binary file easily. This is actually the same process for displaying binary images, see my Dynamic Images with JSF tutorial for more information.

Live Demo
Live demo of p:media is at PrimeFaces Online Showcase.

I’ve introduced the new Theme Gallery with PrimeFaces 2.1, before that PrimeFaces had only one skin called yui-skin-sam which wasn’t flexible and easy to use. Now in 2.1, PrimeFaces provides the new skinning architecture based on ThemeRoller, introduces 28 new themes and an online tool to create your own themes without knowing CSS.

With the new skinning, structure and skinning styles are seperated so you don’t need to know about .ui-panel-header to style it but know about ui-widget-header global style. .ui-panel-header only defines structural CSS like margins and paddings, on the other hand skinning styles include color schemes and fonts. This clean seperation brings great flexibility, we even ported Apache Trinidad’s Casablanca skin and RichFaces’s BlueSky skins as a PrimeFaces theme in a 10 minute simple process.

Here are the 28 themes from PrimeFaces Theme Gallery, more themes are on the way as we’ll create more and share the community submitted themes.

Installing a Theme

Applying a theme to your PrimeFaces project is very easy, once you download the zipped theme file, extract the contents to a folder in your application. A theme consists of a css file called skin.css and images which are located in images folder.

1) Add the skin.css file to your JSF page using link tag

    <link type="text/css" rel="stylesheet" href="%PATH_TO_THEME_FOLDER%/skin.css">

2) And configure PrimeFaces not to add it’s bundled default skin (sam).

<context-param>
	<param-name>primefaces.skin</param-name>
	<param-value>none</param-value>
</context-param>

That’s it, as an example assume you want to use redmond theme which you’ve copied the theme contents to a css folder of your application.

<link type="text/css" rel="stylesheet" href="{CONTEXT_PATH}/css/redmond/skin.css">

Creating a Theme

If you’d like to create your own theme instead of using the pre-defined ones, that is easy as well because ThemeRoller provides a powerful and easy to use online tool for this. Once you have created your own theme the way you like follow the steps in installing themes section to start using it.

Sharing Themes

If you think your custom theme looks cool and would like to share it with PrimeFaces community, feel free to contact us and we’ll add it to the theme gallery.

Online Demo

If you’d like to test these 28 built-in themes, you can try them at Online PrimeFaces Showcase.

Managing focus on input components with JSF can require quite some work since you need to write your own javascript that set focus on fields, know about clientIds and handle cases where validation fails. Also you need to do this for every page that has different set of component. In order to make focus management easier, I’ve added p:focus component to PrimeFaces which is a handy component that manages focus for you in various cases.

Default Focus

When focus is placed on a page, it finds the first visible editable input component and sets focus on it. This is simple as;

<p:focus />
<h:inputText disabled="true"/>
<h:inputText />

In this case second inputText will receive focus as first one is disabled.

Explicit Focus

You can also define a particular component to apply focus.

<p:focus for="text" />

<h:inputText id="text" />

Failed validations

This is where things get interesting, when validations fail focus knows about the first invalid field in component tree and sets focus on it. You just need to update focus component as well.

<p:focus id="focus" />

<p:panel header="New User" id="pnl">
    <h:panelGrid columns="2">
        <h:outputLabel for="firstname" value="Firstname: *" />
        <h:inputText id="firstname" required="true" />

        <h:outputLabel for="surname" value="Surname: *" />
        <h:inputText id="surname" required="true" />
    </h:panelGrid>
</p:panel>

<p:commandButton value="Submit" update="pnl focus" />

If required validations on firstname or surname fail, focus will applied on the first invalid component. So if firstname is valid and surname is invalid, surname will get focus. By default FacesMessages with Error severity are considered, this can be tuned with severity attribute of focus, so as an example you can choose to apply focus if message level is at least warning by setting severity to warn.

Focus Context
By default focus considers the all input fields in JSF page, if you like focus to work on a specific part of your page, use the context option. This is very handy in cases where you have a dialog open and want p:focus to consider the input fields in dialog only.

<p:focus id="focus" context="dialog"/>

<p:dialog header="New User" id="dialog">
    <h:panelGrid id="grid" columns="2">
        <h:outputLabel for="firstname" value="Firstname: *" />
        <h:inputText id="firstname" required="true" />

        <h:outputLabel for="surname" value="Surname: *" />
        <h:inputText id="surname" required="true" />
    </h:panelGrid>
</p:dialog>

<p:commandButton value="Submit" update="grid focus" />

In this case, input fields outside of the dialog are not considered.

Live Example
That’s it, in summary using p:focus, you can come up with a generic solution and save user from one extra click. If you’d like to see focus in action, check out the online showcase of PrimeFaces.

I’m glad to announce that PrimeFaces 1.1 and 2.1 are released.

The versions include maintenance on the previous released release candidates;

• 20 issues targeting RCs are fixed and closed.
• Enhancements to wizard component.

See the full changelog of 1.1 and 2.1 for detailed information.

This is the last release of PrimeFaces 1.x branch targeting JSF 1.2, from now on we will focus on JSF 2.0 to make PrimeFaces even more lightweight and compatible. See the roadmap for more information.

I’m glad to announce that highly anticipated release candidates for PrimeFaces 1.1 and 2.1 are released. These versions feature major changes including 6 new components, rewritten components and the new skinning framework based on ThemeRoller featuring 28 pre-designed themes. Here are the notable changes;

• New Skinning Framework based on ThemeRoller
• 28 pre-designed themes and support to create new themes with online theme creator.
• New component: DataGrid
• New component: DataList
• New component: Google Maps
• New component: Spreadsheet
• New component: TreeTable
• New component: ThemeSwitcher
• Various components are rewritten
• Improvements for Internet Explorer 7-8
• Over 80 issue tickets are resolved and closed
• User’s Guide is revised and updated to 412 pages

See the full changelog of 1.1.RC1 and 2.1.RC1 for detailed information. For backward compatibility documentation see the migration guide. You can grab the release at downloads page, also PrimeFaces User’s Guide has been revised and reached 412 pages now.

Finally if you are wondering about what’s coming up in PrimeFaces, take a look at the short term roadmap.

Here is the short term roadmap for PrimeFaces.

19th July: Release of 1.1.RC1 and 2.1.RC1
26th July: Release of 1.1 and 2.1

1.1 is the last release for JSF 1.2, PrimeFaces 1.x branch will be phased out and we’ll focus on JSF 2.0.

26th August: Release of 2.2
- Migration to JSF2′s standard server side ajax apis to make PrimeFaces even more compatible and lightweight.
- Rewritten datatable with many new features which will be backward compatible.
- Implementation of at least 5 most voted features requests.
- Reported bug fixes