Posts Tagged JSF

The message tags of MyFaces and RichFaces

Working on an application using MyFaces and RichFaces, I had no choice but understand what is the difference between the message tag provided by Myfaces (h:message) and the message tag overridden by RichFaces (rich:message).

These tags allow to display information about the first FacesMessage that is assigned to the component referenced by the “for” attribute. The difference is that the RichFaces tag has some extra functionalities such as Ajax rendering, error markers and predefined css class names.
Have a look at the following page for more details: http://livedemo.exadel.com/richfaces-demo/richfaces/message.jsf

This is all nice and well but it is not the only difference. Indeed, the HTML code generated by both these frameworks will also be different!

First of all, let’s see how the tag <h:message styleClass="errormsg" for="element"/> will be transformed. If there is no message to display, nothing will be generated (which is a good behaviour). However, if a message is present, the tag will be replaced by the following HTML code:

<span class="errormsg">Required.</span>

So far, so good!

But now let’s check what code RichFaces is generating for the tag <rich:message styleClass="errormsg" for="element"/>.
The following is the code created if there is NO message to render:

<span class="rich-message errormsg" id="form:j_id255">
    <span class="rich-message-label"></span>
</span>

And here is the code which will replace the RichFaces tag if there is a message to display:

<span class="rich-message errormsg" id="form:j_id255">
    <span class="rich-message-label">Required.</span>
</span>

As you can see, the main difference is that RichFaces is wrapping the original span tag into another span tag. But, it is also generating some code even if there is no message to display! You would ask why is it doing that? The response is simple. The wrapper span element is necessary for RichFaces to Ajax-render the message tag if an error message has to be displayed for the targeting element.

So make sure you don’t put any padding or margin style in your custom CSS class which I called ‘errormsg’ in my example. Otherwise, you might have a gap when you were expecting nothing… (this happened to me) ๐Ÿ˜‰

, , , , , ,

1 Comment

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

No saved view state

How many of you did already get the following error when working with JSF?
I would be surprised if none of you got it at least once! ๐Ÿ˜‰

HTTP ERROR: 500

/web/home.htmlNo saved view state could be found for the view identifier: /web/home.html

RequestURI=/web/home.html

Caused by:

javax.faces.application.ViewExpiredException: /web/home.htmlNo saved view state could be found for the view identifier: /web/home.html
	at org.apache.myfaces.lifecycle.RestoreViewExecutor.execute(RestoreViewExecutor.java:88)
	at org.apache.myfaces.lifecycle.LifecycleImpl.executePhase(LifecycleImpl.java:103)
	at org.apache.myfaces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:76)
	at javax.faces.webapp.FacesServlet.service(FacesServlet.java:151)
	at org.mortbay.jetty.servlet.ServletHolder.handle(ServletHolder.java:487)
	at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1093)
	at org.apache.myfaces.webapp.filter.ExtensionsFilter.doFilter(ExtensionsFilter.java:341)
	at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1084)
	at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:83)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:76)
	at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1084)
	at org.ajax4jsf.webapp.BaseXMLFilter.doXmlFilter(BaseXMLFilter.java:178)
	at org.ajax4jsf.webapp.BaseFilter.handleRequest(BaseFilter.java:290)
	at org.ajax4jsf.webapp.BaseFilter.processUploadsAndHandleRequest(BaseFilter.java:368)
	at org.ajax4jsf.webapp.BaseFilter.doFilter(BaseFilter.java:495)
	at org.mortbay.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1084)
	...

This very common error happens because your session has timed out. As you probably already know, JSF is storing the view state of your page in session. Obviously, when the session has timed out, it can’t restore the view state and so throws a ViewExpiredException.

The solution for this problem is to add the following lines in your web.xml file:

<context-param>
    <param-name>facelets.BUILD_BEFORE_RESTORE</param-name>
    <param-value>true</param-value>
</context-param>

When this initialization parameter is turned on, it changes ViewHandler.restoreView() to build the view before asking the StateManager for help.

However, if you are using RichFaces, for some reason this is breaking a few Ajax components! ๐Ÿ™
To be honest with you, I didn’t investigate in depth why these components don’t work with this parameter set to true.

What I did instead is to make sure the session actually never times out! ๐Ÿ˜‰
To do that, I am polling the server every 29 minutes (as my session time out is set to 30 minutes). Obviously, you can poll the server only every 59 minutes if you set your session time out to 60 minutes.

Here is the code I used to poll the server every 29 minutes:

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

Note that the interval attribute is in milliseconds (29 minutes x 60 x 1000 = 1,740,000 milliseconds).

This solution is far from being perfect! Indeed, if, for example, a user doesn’t close his browser during the night, it means that we will have to keep the session opened during hours! ๐Ÿ˜
But, as far as I am concerned, it is still better than to throw an exception at the user face. ๐Ÿ˜‰

, , , , , , ,

2 Comments

RichFaces is too greedy

For my first post, let’s talk a little bit about RichFaces.

RichFaces is a very powerful JSF library which allows you to easily integrate Ajax capabilities into your website. To see all the components RichFaces has to offer, please click on the following link: http://livedemo.exadel.com/richfaces-demo/richfaces/actionparam.jsf

I am now using this framework for about two years and I quite like how easy it is to use! ๐Ÿ™‚ However, at the start, I was only using it in small projects with less than two hundred of unique visitors a day.

That is why I didn’t discover earlier that RichFaces was using so much memory! Indeed, I am now working on a project that has nearly 50,000 unique visitors a day. When we decided to rebuild it using JSF and RichFaces, I didn’t think that 6Gb of RAM wouldn’t be enough to keep it running! ๐Ÿ˜ฎ

People who knows JSF would say: “Why don’t you use ‘client’ as state saving method?”. Well, because of the complexity of my pages, the size of these pages increases so much that it can easily reach 2Mb (which is not acceptable). So, I need to keep the view state on server side.

Still in JSF, there is a way of compressing the view state before saving it in session (part of the web.xml file):

<context-param>
    <param-name>org.apache.myfaces.SERIALIZE_STATE_IN_SESSION</param-name>
    <param-value>true</param-value>
</context-param>

<context-param>
    <param-name>org.apache.myfaces.COMPRESS_STATE_IN_SESSION</param-name>
    <param-value>true</param-value>
</context-param>

Strangely enough, the second parameter (COMPRESS_STATE_IN_SESSION) doesn’t work with RichFaces. After investigating the code, it seems that the RichFaces state manager (org.ajax4jsf.application.AjaxStateManager) doesn’t support compression at all! ๐Ÿ™

Why not? Well, I didn’t find a good reason so I decided to compress it myself. ๐Ÿ˜‰ The solution is to extend the AjaxStateManager and compress the view state before saving it in session and uncompress it when retrieving it from the session. Pretty easy!!! ๐Ÿ™‚

Enough talking, here is the code of this custom state manager:

package org.ajax4jsf.application;

import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.ObjectInputStream;
import java.io.ObjectOutputStream;
import java.io.ObjectStreamClass;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;
import java.util.zip.GZIPInputStream;
import java.util.zip.GZIPOutputStream;

import javax.faces.FacesException;
import javax.faces.application.StateManager;
import javax.faces.component.UIViewRoot;
import javax.faces.context.FacesContext;
import javax.faces.render.ResponseStateManager;

import org.ajax4jsf.context.ContextInitParameters;

/**
 * Overrides the Ajax state manager to enable the state compression.
 * @author Stรฉphane Moreau
 */
public class MyAjaxStateManager extends AjaxStateManager {
	/**
	 * Only applicable if state saving method is "server" (= default) and if
	 * <code>org.apache.myfaces.SERIALIZE_STATE_IN_SESSION</code> is
	 * <code>true</code> (= default).
	 * If <code>true</code> (default) the serialized state will be compressed before
	 * it is written to the session.
	 * If <code>false</code> the state will not be compressed.
	 */
	private static final String COMPRESS_SERVER_STATE_PARAM = "org.apache.myfaces.COMPRESS_STATE_IN_SESSION";

	/**
	 * Default value for <code>org.apache.myfaces.COMPRESS_STATE_IN_SESSION</code>
	 * context parameter.
	 */
	private static final boolean DEFAULT_COMPRESS_SERVER_STATE_PARAM = true;

	private static final int UNCOMPRESSED_FLAG = 0;
	private static final int COMPRESSED_FLAG = 1;

	private final ComponentsLoader componentLoader;

	public MyAjaxStateManager(StateManager stateManager) {
		super(stateManager);
		componentLoader = new ComponentsLoaderImpl();
	}

	/**
	 * Reads the value of the <code>org.apache.myfaces.COMPRESS_STATE_IN_SESSION</code>
	 * context parameter.
	 * @see COMPRESS_SERVER_STATE_PARAM
	 * @param context <code>FacesContext</code> for the request we are processing.
	 * @return boolean true, if the server state steam should be compressed
	 */
	protected static boolean isCompressStateInSession(FacesContext context) {
		String value = context.getExternalContext().getInitParameter(
				COMPRESS_SERVER_STATE_PARAM);
		boolean compress = DEFAULT_COMPRESS_SERVER_STATE_PARAM;
		if (value != null) {
			compress = Boolean.valueOf(value);
		}
		return compress;
	}

	@Override
	protected Object[] buildViewState(FacesContext context) {
		Object[] viewStateArray = null;
		UIViewRoot viewRoot = context.getViewRoot();
		if (null != viewRoot && !viewRoot.isTransient()) {
			TreeStructureNode treeStructure = (TreeStructureNode) getTreeStructureToSave(context);
			Object state = getComponentStateToSave(context);
			if (isSavingStateInClient(context)) {
				viewStateArray = new Object[]{treeStructure, state};
			} else {
				viewStateArray = saveStateInSession(context, treeStructure,
						handleSaveState(context, state));
			}

		}
		return viewStateArray;
	}

	@Override
	public UIViewRoot restoreView(FacesContext context, String viewId,
			String renderKitId) {
		UIViewRoot viewRoot = null;
		ResponseStateManager responseStateManager = getRenderKit(context,
				renderKitId).getResponseStateManager();
		TreeStructureNode treeStructure = null;
		Object[] state = null;
		Object[] serializedView = null;
		if (isSavingStateInClient(context)) {
			serializedView = (Object[]) responseStateManager.getState(context,
					viewId);

			if (null != serializedView) {
				treeStructure = (TreeStructureNode) serializedView[0];
				state = (Object[]) serializedView[1];
			}
		} else {
			serializedView = restoreStateFromSession(context, viewId,
					renderKitId);

			if (null != serializedView) {
				treeStructure = (TreeStructureNode) serializedView[0];
				state = (Object[]) handleRestoreState(context, serializedView[1]);
			}
		}

		if (null != treeStructure) {
			viewRoot = (UIViewRoot) treeStructure.restore(componentLoader);
			if (null != viewRoot && null != state) {
				viewRoot.processRestoreState(context, state[0]);
				restoreAdditionalState(context, state[1]);
			}
		}
		return viewRoot;

	}

	private static final Object handleSaveState(FacesContext context, Object state) {
		if (ContextInitParameters.isSerializeServerState(context)) {
			ByteArrayOutputStream baos = new ByteArrayOutputStream(1024);
			ObjectOutputStream oas = null;
			try {
				OutputStream os = baos;
				if(isCompressStateInSession(context))
				{
					os.write(COMPRESSED_FLAG);
					os = new GZIPOutputStream(os, 1024);
				}
				else
				{
					os.write(UNCOMPRESSED_FLAG);
				}

				oas = new ObjectOutputStream(os);
				oas.writeObject(state);
				oas.flush();
			} catch (Exception e) {
				throw new FacesException(e);
			} finally {
				if (oas != null) {
					try {
						oas.close();
					} catch (IOException ignored) { }
				}
			}
			return baos.toByteArray();
		} else {
			return state;
		}
	}

	private static final Map<String,Class<?>> PRIMITIVE_CLASSES =
		new HashMap<String,Class<?>>(9, 1.0F);

	static {
		PRIMITIVE_CLASSES.put("boolean", boolean.class);
		PRIMITIVE_CLASSES.put("byte", byte.class);
		PRIMITIVE_CLASSES.put("char", char.class);
		PRIMITIVE_CLASSES.put("short", short.class);
		PRIMITIVE_CLASSES.put("int", int.class);
		PRIMITIVE_CLASSES.put("long", long.class);
		PRIMITIVE_CLASSES.put("float", float.class);
		PRIMITIVE_CLASSES.put("double", double.class);
		PRIMITIVE_CLASSES.put("void", void.class);
	}

	private static final Object handleRestoreState(FacesContext context, Object state) {
		if (ContextInitParameters.isSerializeServerState(context)) {
			ObjectInputStream ois = null;
			try {
				ByteArrayInputStream bais = new ByteArrayInputStream((byte[]) state);
                InputStream is = bais;
                if(is.read() == COMPRESSED_FLAG) {
                	is = new GZIPInputStream(is);
                }
				ois = new ObjectInputStream(is) {
					@Override
					protected Class<?> resolveClass(ObjectStreamClass desc)
					throws IOException, ClassNotFoundException {
						String name = desc.getName();
						try {
							return Class.forName(name, true,
									Thread.currentThread().getContextClassLoader());
						} catch (ClassNotFoundException cnfe) {
							Class<?> clazz = PRIMITIVE_CLASSES.get(name);
							if (clazz != null) {
								return clazz;
							} else {
								throw cnfe;
							}
						}
					}
				};
				return ois.readObject();
			} catch (Exception e) {
				throw new FacesException(e);
			} finally {
				if (ois != null) {
					try {
						ois.close();
					} catch (IOException ignored) { }
				}
			}
		} else {
			return state;
		}
	}

}

To enable it, just add the following lines in your faces config file:

<application>
    <state-manager>org.ajax4jsf.application.SearchMedicaStateManager</state-manager>
</application>

With this state manager, my web application is now using less than 1Gb of memory and is working perfectly fine! ๐Ÿ˜€

, , , , , , ,

4 Comments