New PrimeFaces Menus Unleashed

For the last couple of days, we were busy with improving the menu components (menubar, menu, menubutton and contextmenu) of PrimeFaces. Process of shifting away from YUI towards jQuery has started in PrimeFaces 2.1 and menu components were some of the remaining YUI based components we have ported to themeroller skins in 2.0.x->2.1. As like any other port, some issues came up also we’ve figured out ways to improve the ease of use. PrimeFaces is now integrated with wijmo project which consists of extensions of jQuery UI including menu widget.

Long story short, menus are rewritten, improved and simplified. As a side bonus, ipod style menu is added to menu family.

Quite some time is spent on backwards compatibility, other than dynamic positioned menus, it is backwards compatible.

Live beta demos are available at;

http://www.primefaces.org/showcase/ui/menubar.jsf

http://www.primefaces.org/showcase/ui/menu.jsf

http://www.primefaces.org/showcase/ui/menubutton.jsf

http://www.primefaces.org/showcase/ui/contextMenuHome.jsf

Advertisements

User IdleMonitor

PrimeFaces 0.9.0 introduced a new component idleMonitor to watch user actions and execute callbacks in case they go idle or active again. Simplest use would be as follows; suppose you want to display a modal dialog when the user goes idle.

<p:idleMonitor onidle="idleDialog.show();" onactive="idleDialog.hide();"/> 
	 	 	 
<p:dialog header="What's happening?" widgetVar="idleDialog" modal="true" 
	 fixedCenter="true" close="false" width="400px" visible="true"> 
	 <h:outputText value="Dude, are you there?" /> 
</p:dialog>

By default idleMonitor waits for 5 minutes so after this period in case user doesn’t do
anything, dialog will popup.

Ajax IdleEvent
Most likely, you would want to execute a callback on a JSF bean to do something useful like
invalidating the session. For this use case idleMonitor is equipped with idleListener. With a
simple methodexpression your idleListeners will be notified by passing an IdleEvent.

<p:idleMonitor idleListener="#{idleMonitorController.handleIdle}"/> 
public void handleIdle(IdleEvent event) { 
	 //Invalidate user
} 

Ajax Update
IdleMonitor is also powered by PrimeFaces Partial Page Rendering infrastructure so it can update
the page after an idleListener is invoked, this is useful to notify the user what happened while they
were away.

<p:idleMonitor idleListener="#{idleMonitorController.handleIdle}" 
	 	 update="message"/> 
	 	 	 	 	 
<h:outputText id="message" value="#{idleMonitorController.msg}" /> 
public void idleListener(IdleEvent event) { 	
	//invalidate session 
	msg = "Message from server: Your session is closed"; 
} 

Online Demo
To see idleMonitor in action check out the online demo.

Book Review: Practical RichFaces

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 🙂

JSF Html Editor

PrimeFaces ships with a rich text editor allowing users to provide HTML text. Editor component is based on YUI editor with PrimeFaces extensions and the underlying javascript widget is of type PrimeFaces.widget.Editor.

The simplest example would be;

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

editor1

In addition for Turkish users, Turkish is built-in.

<p:editor value="#{bean.text}" language="tr" />

editor2

Editor is also skinnable using CSS, following is just an example.

editor3

For the live examples, checkout the online demo.

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.

Acegi-JSF 1.1.3 components are out

Well, all the credit of this release goes to my friend Acegi guru Kenan Sevindik. For those who don’t know much about this library; it is the JSF implementation of the ACEGI’s jsp tags as JSF components. They’re referenced in Acegi’s homepage and as far as I know used in appfuse. The long story is at Kenan’s blog. For the next release hopefully we’ll add the acl tags to provide domain object level security on jsf pages.

I’m in Core JavaServer Faces 2nd Ed.

A friend of mine just sent me an email mentioning that my work made it to the 2nd Edition of Core JavaServer Faces Book. It’s my charting component; JSF Chart Creator.

chart.gif
Page 628 – Core JavaServer Faces 2nd Ed.

Also my initial work on client side validation at jsf-comp project made it too:)

validation.jpg

This made my day!