Archive for March, 2010

How to personalise the URLs with Faces Navigation?

This is an important question if you want to have search engine friendly URLs on your website!
But unfortunately, the solution is not straightforward with JavaServer Faces (JSF). 🙁

First of all, for security reason JSF doesn’t allow you to use the GET method for your forms. I didn’t really understand why but this is very (too) restrictive!
Can you imagine Google doing the same thing? We would have the same URL for every search terms http://www.google.co.uk/search instead of something like http://www.google.co.uk/search?hl=en&safe=off&esrch=FT1&q=test&meta=&aq=f&aqi=g10&aql=&oq=&gs_rfai=.
It wouldn’t be very easy to share a search page with a friend if Google was using the POST method. 😉

So the question is how to get around this JSF limitation?

Let’s take a look at how would look our faces-navigation.xml file for a search page:

<navigation-case>
    <from-action>#{searchBean.searchAction}</from-action>
    <from-outcome>success</from-outcome>
    <to-view-id>/search.xhtml</to-view-id>
    <redirect />
</navigation-case>

In this example, all the JSF elements calling the action searchBean.searchAction will be redirected to the search.xhtml page.
But, how are we going to get the search parameters into the URL?

Ideally, it would be great to be able to do something like the following:

<navigation-case>
    <from-action>#{searchBean.searchAction}</from-action>
    <from-outcome>success</from-outcome>
    <to-view-id>/search.xhtml?q=#{param.q}</to-view-id>
    <redirect />
</navigation-case>

This solution would allow us to inject EL expressions into the URL before the page is redirected to the destination page.
In order to do this, we need to create our own view handler and register it to our application. 😎

The code below is the view handler class which also includes some comments:

package com.logikdev.gui.handler;

import javax.el.ExpressionFactory;
import javax.el.ValueExpression;
import javax.faces.application.ViewHandler;
import javax.faces.context.FacesContext;

import com.sun.facelets.FaceletViewHandler;

/**
 * Overrides the Facelet view handler to support EL expressions in URLs.
 * @author Stéphane Moreau
 */
public class DynamicViewHandler extends FaceletViewHandler {

	public DynamicViewHandler(ViewHandler parent) {
		super(parent);
	}
	
	/* (non-Javadoc)
	 * @see com.sun.facelets.FaceletViewHandler#getActionURL(javax.faces.context.FacesContext, java.lang.String)
	 */
	@Override
	public String getActionURL(FacesContext context, String viewId) {
		String queryString = null;

		// Replace the EL expressions in the URL
		ExpressionFactory expressionFactory = context.getApplication().getExpressionFactory();
		ValueExpression valueExpression = expressionFactory.createValueExpression(context.getELContext(), viewId, String.class);
		String result = (String) valueExpression.getValue(context.getELContext());
		
		// Separate the query string from the URL
		int dotIndex = result.lastIndexOf('.');
		int questionMarkIndex = result.indexOf('?');
		if (questionMarkIndex != -1) {
			queryString = result.substring(questionMarkIndex, dotIndex);
			viewId = result.substring(0, questionMarkIndex) + result.substring(dotIndex);
		}
		
		// Call the parent without the query string
		result = super.getActionURL(context, viewId);
		
		// Put back the query string at the end of the URL
		if (queryString != null) {
			result += queryString;
		}
	        
		return result;
	}

}

And the following is the code to put in the faces-config.xml file in order to register the newly created view handler to the application:

<application>
	<variable-resolver>org.springframework.web.jsf.DelegatingVariableResolver</variable-resolver>
	<view-handler>com.logikdev.gui.handler.DynamicViewHandler</view-handler>
</application>

One last thing!
This view handler also has a limitation which I wasn’t able to fix. 🙁 The file extension has to ALWAYS be placed at the end of the to-view-id URL! The view handler will then put it back before the question mark.
For example:

<navigation-case>
	<from-action>#{searchBean.searchAction}</from-action>
	<from-outcome>success</from-outcome>
	<!-- The extension has to be at the end -->
	<to-view-id>/search?q=#{param.q}.xhtml</to-view-id>
	<redirect />
</navigation-case>

If you perform a search on ‘jsf’ with the above navigation rule, the user will be redirected to the page /search.xhtml?q=jsf.

, , , , ,

2 Comments

limitToList attribute prevents flashing

If you have some elements (or even the whole page) that flash/twinkle using RichFaces, it probably means that these elements are AJAX-rendering. The question is by whom and how to fix it?

A lot of tags in RichFaces can AJAX-render elements such as:

<a4j:form>
    <a4j:jsFunction name="updateName" reRender="showname">
        <a4j:actionparam name="param1" assignTo="#{userBean.name}"  />                  
    </a4j:jsFunction>
</a4j:form>

On the above example, the JavaScript function updateName will AJAX-render the element which has the ID showname.

In some cases, you would have some elements that would AJAX-render without asking them to do so!
I still didn’t figure it out why. 🙁 (if anybody has an idea, please don’t hesitate to tell me!)

But, I found a way to prevent this!
You simply can add the following attribute to your tag:

limitToList="true"

You even can add it to the tags that don’t have a reRender attribute.
For example:

<a4j:form>
    <a4j:poll id="poll" interval="1000" limitToList="true" />
</a4j:form>

, , , ,

No Comments