Came Third in Fifa11 PS3 Tournament

Last weekend, I joined a Fifa11 tournament on PS3 in a mall along with other 60+ people. Beaten 6 of my opponents and lost my game in semi-finals as a result of missing a penalty. Then won the third place game, I won a kodak camera which is not heavy duty stuff but does the work. Not too bad for my first and probably last tournament. 🙂

Advertisements

New PrimeFaces PickList

As with any PrimeFaces development iteration, we try to add new features, fix reported bugs and enhance/maintain current features. Design principle of a PrimeFaces component is “It must be cool and look cool”. One component that was against this was PickList, here is an old screenshot of old picklist;

Pretty lame right? So when a PrimeFaces component is not cool, we usually reimplement it to match PrimeFaces standards preserving the backward compatibility as much as we can, here is how new PickList looks;

The look and feel satisfies the “look cool” part but what about the “be cool” part. New PickList features DragDrop based Reordering, various transition effects (e.g. fade, bounce, puff, clip …), theme support(all 28 themes and your custom PrimeFaces themes are supported) and more.

Live Demo to try the new PickList Beta is at http://www.primefaces.org/showcase/ui/picklist.jsf .

PrimeFaces Sample on GAE

Some time ago, I’ve blogged about my proof-of-concept work about deploying PrimeFaces Showcase to Google AppEngine and how it worked. Due to high demand from PrimeFaces Community, with some late night coding I’ve created a sample called appengine under PrimeFaces subversion examples repository.

For a quick start here is the live example;

http://primefaces-gae-kickstart.appspot.com

And the complete project with jars included;

http://code.google.com/p/primefaces/source/browse/examples/trunk/appengine/

And old showcase is also still running at;

http://primefaces-rocks.appspot.com

Upcoming PrimeFaces Book will also have a dedicated section for GAE, for now I think this app would be very helpful if you need an sample with configuration and jars.

Screencast : How to Create Your Own PrimeFaces Theme

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

PrimeFaces and JSF 2.0 on Google App Engine

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.

PrimeFaces and Spring WebFlow

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.

Focus Management with PrimeFaces

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.