Posts Tagged Ajax
Detect if JavaScript is enabled
Because of the emergence of Ajax, people don’t disable JavaScript much nowadays.
I don’t know the percentage of people having disabled JavaScript. It is likely under 5%. But if you have a website visited by millions of visitors every month, even 1% is matter!
This is why I wrote the following code:
<noscript>JavaScript is DISABLED.</noscript>
<span id="displayIfJavaScript" style="display:none">JavaScript is ENABLED.</span>
<script>
document.getElementById('displayIfJavaScript').style.display = "block";
</script>
The text under the noscript tag will be displayed if JavaScript is disabled or not supported. The text under the span tag is not displayed by default and will be showed using JavaScript, this is why we can be sure JavaScript is enabled in that case.
You can obviously change the content of the noscript and span tags. You could, for example, hide a form which uses JavaScript validation to non-JavaScript users by putting the HTML code of the form under the span tag.
Please see below the above script in action:
The selfRendered attribute
This is an interesting problem related to the RichFaces rich:suggestionbox tag.
Let’s take the following code:
<rich:suggestionbox for="q" minChars="1"
suggestionAction="#{myBean.mySuggestionAction}" var="result"
limitToList="true">
<h:column>
<h:outputText value="#{result}" />
</h:column>
</rich:suggestionbox>
If you use the code above as it is, the whole page is going to be processed each time the suggestionAction is called. And because the minChars attribute is set to 1, the action is going to be called each time the user enters a character! ![]()
For obvious reason, such as performance issue, this is not ideal.
To avoid this behaviour, you simply need to set the attribute selfRendered to true as shown below:
<rich:suggestionbox for="q" minChars="1"
suggestionAction="#{myBean.mySuggestionAction}" var="result"
limitToList="true" selfRendered="true">
<h:column>
<h:outputText value="#{result}" />
</h:column>
</rich:suggestionbox>
Here is the description of the selfRendered attribute from RichFaces documentation:
If “true”, forces active Ajax region render response directly from stored components tree, bypasses page processing. Can be used for increase performance. Also, must be set to ‘true’ inside iteration components, such as dataTable.
Don’t hesitate to add this attribute to increase the performance of your website.
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 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.
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!