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.

Worst Java Hosting Ever

Lately I had the worst java hosting experience with EATJ hosting. Very very very rude customer service, tricky hosting plans that require you pay more after purchasing an account(eg they warn you to buy more memory otherwise they close your account in 5 days even if you paid in advance for the whole month) and again very rude customer service.

So what I’ve done, even I have still some time on eatj, I decided to cancel it and go for a ubuntu VPS from another company, it turned out the be a great decision since I can install anything I want.

Anyway this entry is to warn any java developer to stay away from EatJ. Still frustrated.

Download PrimeFaces ShowCase

It’s been frequently asked on PrimeFaces Forum to make prime-showcase demo available for download. Well, it is now

http://repository.prime.com.tr/org/primefaces/prime-showcase/1.0.0-SNAPSHOT/

We’ll never release it so the version will always be 1.0.0-SNAPSHOT however the war file will be deployed periodically to include updates. Also java sources are added to war package.

JSF Spinner

0.9.0 version of PrimeFaces introduces a new spinner component. Spinner uses increment and decrement buttons to provide a numerical input.

Integers

In it’s simplest form spinner steps by 1 so it’s suitable for integer values.

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

Decimals

Floating numbers are also supported using the stepFactor attribute. Following spinner will increment or decrement by 0.25.

<p:spinner value="#{bean.number}" stepFactor="0.25"/>

Online Demo

See the online demo for the examples I’ve given here in action.

PrimeFaces 0.9.0 is released

After two months of hard work I finally managed to release the 0.9.0 version of PrimeFaces UI. UI 0.9.0 is a major release containing many new features, improvements and bug fixes. Significant changes of this release are;

• Major improvements to the Ajax Framework
• New component : FileUpload (Single-Multiple uploads, progress racking, customizable ui)
• New component : DynamicImage (Display binary images)
• New component : FileDownload (Present binary content as downloadable)
• New component : Spinner (Numeric input)
• New component : Rating (Star based rating)
• New component : IdleMonitor (Monitor user activity)
• New component : LightBox (A JSF LightBox)
• New component : ImageSwitcher (A gallery of image effects)
• New component : DataExport (Export datatable as Excel, PDF, CSV and XML)

See the full changelog of UI 0.9.0 here. Also updated the reference documentation which has reached 200 pages now. So what’s next? Current plans are adding layout and drag&drop components for 0.9.1.  Let’s see how it goes.

Faces of Faces

This is the second time I made JavaOne with a picture on a slide, previous one was Faces of MyFaces. This one is from Ed Burns’s presentation at JavaOne on JSF 2.

jQuery effects in JSF

PrimeFaces effect component encapsulates jquery effects using the effect component. Basically effect component is nested as a child inside a parent component;

For example;

<p:panel header="Explode">
    <h:outputText value="click" />
<p:effect type="explode" event="click" >
</p:panel>

Parent component above is the primefaces panel, when the panel is clicked it explodes, Boooooom!

Animation Configuration

Effect parameters are supplied via the f:param tags, any number of parameters can be supplied with this way.

<p:panel header="Scale">
	<h:outputText value="click" />
<p:effect type="scale" event="click">
	        <f:param name="percent" value="90" />
       </p:effect>
</p:panel>

Effect Target

By default, effects are applied to the parent component, there may be cases where parents are used to trigger animations on another component, suppose you click a link and image comes up with an animation. This can be implemented as;

<h:outputLink id="lnk" value="#">
    <h:outputText value="Show the Barca Temple" />
<p:effect type="puff" event="click" for="img" />
</h:outputLink>

<h:graphicImage id="img" value="/ui/barca/campnou.jpg" style="display:none"/>

When the “lnk” link is clicked, image is displayed with the appear effect.

Online Demo for examples

Examples I gave here can be seen in action at online demo of PrimeFaces.

RIA with PrimeFaces talk

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.

jQuery and JSF ids

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.

Unobstrusive JSF

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.

PrimeFaces Calendar Component

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.

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

Twitter got me

Title says it all, twitter finally got me.

http://twitter.com/cagataycivici

JSF-Spring-JPA-Security

I’ve written various articles about how to integrate JSF-Spring-JPA-SpringSecurity before which is based on JSF centric annotation based approach, the latest example I’ve created introduces PrimeFaces to provide rich client features to the stack. Application’s name is moviecollector and deployed online at here live for a test run.

MovieCollector demonstrates several uses cases of PrimeFaces components like Partial Page Rendering, Excel-PDF data exporter, datatable, autoComplete, dialog and more. Code is also available on subversion repository of PrimeFaces so it’d be a good reference if you need an example application for this stack.

I’ll be adding more use cases to the project in time probably after getting PrimeFaces 0.9.0 ready which will include flash based file upload, drag&drop, file download and more stuff.

PrimeFaces 0.8.3 is ready

PrimeFaces team is proud to announce that UI Components 0.8.3 is released, this release is mainly for maintenance. See the change log at http://primefaces.prime.com.tr/en/changelog. We’ve upgraded the YUI version 2.7.0 and added various bug fixes.

This is the last release of the 0.8.x line, next version would be 0.9.0 and many new features such as flash based fileupload and drag&drop are planned to be shipped with 0.9.0. PrimeFaces UI is marching towards 1.0 which would probably come out around autumn 2009.

Thanks to all members of PrimeFaces community for their contributions and support.

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}" />

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

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

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

For the live examples, checkout the online demo.

RichFaces and PrimeFaces Integration

It is usually pain to merge two or more component suites in one project. If you’ve ran into some issues then you know what I’m talking about. One of the design goals of PrimeFaces is the compatibility with other JSF component libraries.

For example, RichFaces and PrimeFaces can work together well. Even the ajax integration would work. Both libraries has partial page rendering features, the cool thing is that no known conflict occurs even when using ajax stuff together.

Following a4j:commandButton reRender’s primefaces panel;

<a4j:commandButton value="Rich Update" reRender="primePanel" />
<p:panel id="primePanel" header="Visca el Barca">
	<h:outputText value="I hope Barca will kick Bayern's ass" />
</p:panel>

And the vice versa, primefaces button reRender’s rich:panel.

<p:button value="Prime Ajax Update" update="richPanel" async="true"/>

<rich:panel id="richPanel" header="Visca el Barca">
	<h:outputText value="I hope Barca will kick Bayern's ass" />
</rich:panel>

JSF 2.0 standardizes many things like ajax and resource loading but it’s still component library’s responsibility to follow the standard. Even before JSF 2.0, as of JSF 1.2 PrimeFaces is friendly to other component libraries, the idea is not to mess with JSF extension points a lot and use them as minimal as possible. That’s why PrimeFaces has no filter:)

Export JSF Datatable as Excel, PDF, CSV, XML

PrimeFaces ships with an exporter feature that can export any data presented with a JSF datatable to various formats such as Excel, PDF, CSV and XML.
Exporter is implemented as an actionListener so it can be attached to any command component like a button or a command link.
Here is a regular JSF datatable;

<h:dataTable id="tbl" var="car" value="#{bean.cars}">
    <h:column>
        <f:facet name="header">
            <h:outputText value="Model" />
        </facet>
        <h:outputText value="#{car.model}" />
    </h:column>

   //more columns

</h:dataTable>

Export as Excel

    <h:commandButton value="Excel Export">
        <opt:exportActionListener type="xls" target="tbl" fileName="cars"/>
    </h:commandButton>

Export as PDF

    <h:commandButton value="PDF Export">
        <opt:exportActionListener type="pdf" target="tbl" fileName="cars"/>
    </h:commandButton>

Export as CSV

    <h:commandLink value="CSV Export">
        <opt:exportActionListener type="csv" target="tbl" fileName="cars"/>
    </h:commandLink>

Export as XML

    <h:commandLink value="XML Export">
        <opt:exportActionListener type="xml" target="tbl" fileName="cars"/>
    </h:commandLink>

Exclude Columns

Sometime a column may contain delete, detail buttons, checkboxes and other stuff. In such cases these columns need to be ignored
in export process. excludeColumns attribute takes the column indexes to exlude.

    <h:commandButton value="Excel Export">
        <opt:exportActionListener type="xls" target="tbl" fileName="cars" excludeColumns="0,1"/>
    </h:commandButton>

Online Demo

To see exporter in action, checkout the online demo of PrimeFaces.

Update: exportActionListener joined to PrimeFaces UI from Optimus and will be available as a p:dataExporter component in 0.9.0. Note that exportActionListener will not be available in optimus-0.7.3.

PrimeFaces 0.8.2 is released

Currently PrimeFaces has a monthly release lifecycle, I’ve just made the march release that contains several improvements, new component and more. This release marks carousel a stable component, adds commandLink, changes the way tooltip and more.

In addition optimus 0.7.2 is released which adds CSV and XML export features to any jsf datatable in addition to the Excel and PDF export.

See the full changelog here.

PrimeFaces Session Slides

During my visit to Turkey, I was invited to do a talk in “Java EE Day” organized by University of Bahcesehir (Istanbul) and CETURK(Computer Engineering Turkiye) Community. My talk was “Introducing PrimeFaces”, you can find the slides of my session in PDF format here.

And some pictures;