Last week, I gave a talk titled “RIA with PrimeFaces” in openmic night of javawug London. Although it was a short talk and booed by the Chelsea fans in the attendees:), I really enjoyed it overall. You can find the slides at;
http://primefaces.prime.com.tr/docs/ria_with_primefaces.pdf
P.S. Thanks for the great hospitality(room and pizzas:) of EMC Conchango.
For the upcoming 0.9.0 PrimeFaces release I’ve migrated PrimeFaces to use jQuery for Dom manipulation and Ajax purposes. Along the way I’ve faced an issue where jQuery doesn’t play well with the JSF clientIds containing the colon “:” so special characters like this need to be escaped.
Following does not work with jQuery and form is effected as well.
jQuery("form:id").something();
After spending sometime in jQuery docs and finding a solution, I’ve added an utility to PrimeFaces core utilities to escape JSF client ids.
PrimeFaces.core.Utils = {
//Utility method to help jQuery work with JSF clientIds
escapeClientId : function(id) {
return "#" + id.replace(/:/g,"\\:");
}
//more stuff
};
And used it like;
jQuery(PrimeFaces.core.Utils.escapeClientId(jsfid)).something();
As far as I know there’re other ways to make ids containing funny characters work with jQuery, so feel free comment if you know other alternatives.
In general, standard JSF components and third party component libraries do not follow the unobstrusive javascript pattern and embed dom events within the event attributes. So for a simple component like;
<h:commandbutton id="btn" value=”Submit” onclick=”alert(‘Barca’)” />
The rendered html would be something like this;
<input type=”submit” name=”btn” id="btn" onclick=”alert(‘Barca’)” value=”Submit”/>
I’m really a fan unobstrusive javascript way which enables clean seperation of markup from the behavior.
If you check out PrimeFaces, you’ll see that most of the components have seperate markup and seperate script, so it leads to a clean design since output is not bloated.
Similary for a PrimeFaces button;
<p:button id="btn" value=”Submit” onclick=”alert(‘Barca’)” />
PrimeFaces generates;
<button type=”submit” value=”Submit” id=”btn” name=”btn”/>
<script type="text/javascript">
PrimeFaces.util.addListener(“btn”,”click”, function(e) { alert(‘Barca’); });
</script>
Unobstrusive javascript rendering is one of the design principles of PrimeFaces to keep things clean. Actually being simple and clean is the main idea of PrimeFaces, that’s why PrimeFaces has no extended filter, viewhandler, statemanager, viewroot and other extended JSF artifacts. Just one simple phaselistener.
Every JSF component library provides some sort of a date picker component and PrimeFaces is no exception. In fact, PrimeFaces calendar component is based on the well known YUI calendar widget which is equipped with some unique features. Calendar is purely javascript and does not do unnecessary ajax callbacks so it’s fast and furious.
Calendar has the mode attribute to specify how the datepicker is presented, current modes as of 0.8.3 are “inline” and “popup”.
Inline Calendar
<p:calendar value="#{bean.date}" mode="inline" />
Popup Calendar
<p:calendar value="#{bean.date}" mode="popup" />
Multiple Date Selection
By default, calendar allows you to select one date only, if you want to select multiple dates,
set multiple to true. Selected dates will be passed to the JSF backing beans as a Date array.
<p:calendar value="#{bean.dateArray}" mode="inline" selection="multiple"/>
Multiple Pages
If you want to display calendar in multiple pages, specify the number of pages(months).
<p:calendar value="#{bean.date}" mode="inline" pages="3"/>
Localization
Pattern attribute is used to specify which date pattern calendar will use.
<p:calendar value="#{bean.date}" pattern="dd.MM.yyyy"/>
Multi Language
Currently 9 languages are supported out of the box, English, Turkish, Catalan (BARCA), Portuguese, Italian, French, Spanish, German and Japanese. Please provide a patch and help us add more languages. (See PrimeFaces.widget.CalendarUtils.applyLocale javascript object to get more info.)
<p:calendar value="#{bean.date}" language="ja"/>
Navigator
In order to jump to a month or year easily, use the navigator option.
<p:calendar value="#{bean.date}" navigator="true"/>
Skinning
Using well defined CSS selectors, calendar is easy to skin as well.
Online Demo
Head over to the online demo of PrimeFaces to see calendar in action.
First of all thanks to APRESS for sending me a copy of “Practical RichFaces” book free to review. They’ve sent it along with the 10 copies of “The Definitive Guide to Apache MyFaces and Facelets” which I’ve co-authored.
Practical RichFaces is written by Max Katz, I met Max several times in conferences such as JSFDays, JSFOne. He’s a great guy as a person and an expert in the field. About the book, “Practical RichFaces”, as it’s title promises contains practical examples of developing rich JSF applications with RichFaces component library. RichFaces is a mature, stable component library with a huge community. (I hope I can say the same for PrimeFaces in the future as well ) RichFaces also has a detailed reference guide so you may ask do I need this book to work with RichFaces? of course not, but it’s a great resource to keep close since it contains “How to’s” to common requirements in apps and real life examples not available in RichFaces docs.
I highly recommend “Practical RichFaces” to anyone who’s developing with JSF and RichFaces. Thanks to Max for sharing his expertise with this book. Who knows maybe I’ll come up with a “Practical PrimeFaces” in the future 
