Posts Tagged RichFaces

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

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

Onclick event is not fired on IE

I am pretty sure everybody knows that Internet Explorer has “a few” bugs… ๐Ÿ™„
You didn’t? ๐Ÿ˜ฏ Alright, better to stay on your little cloud and leave this blog right away!

For the others, I will talk about the JavaScript event onclick which is not fired when the following requirements are matched:

  • In a form;
  • There is only ONE input text element;
  • There is one button which has an onclick event assigned;
  • You press the ‘Enter’ button inside the input text element.

For a better understanding, let’s now take the following example:

<html>
    <head><title>Test</title><head>
    <body>
        <form>
            <input type="text" id="t1"/>
            <input type="submit" onclick="alert('onclick fired!'); return true;"/>
        </form>
    </body>
</html>

As you can see, there is nothing difficult in this code.
Well, that doesn’t mean Internet Explorer can handle it… ๐Ÿ˜†

The bug occurs if you press the ‘Enter’ button inside the input text element using Internet Explorer. Indeed, the onclick event is not fired and the text ‘onclick fired!’ is not display to the user! However, it works perfectly fine on Firefox and Safari.

The funny thing is this code works on Internet Explorer if you add another input text, even if it is hidden!
Why? Don’t ask me! ๐Ÿ˜

Anyway, the following example works on IE:

<html>
    <head><title>Test</title><head>
    <body>
        <form>
            <input type="text" id="t1"/>
            <input type="text" style="display:none"/>
            <input type="submit" onclick="alert('onclick fired!'); return true;"/>
        </form>
    </body>
</html>

Why are we assigning an onclick event to the submit button?
It could be for a lot of reasons, but the main one is probably to validate the form before submitting the data.

By the way, RichFaces is very often using this event on the submit buttons.
So remember to add a hidden input text to your form if you want to allow users to use the ‘Return’ key. ๐Ÿ™‚

, , , , , ,

3 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