Displaying a spinning wheel image during a Dynamic Faces Ajax transaction.

I am currently building a JSF application using Netbeans 6.0. For this project I use a wide range of Woodstock components and also the Dynamic Faces extension to ajaxify some of these . As some Ajax transactions may take some time to complete, I wanted to provide the user with some visual feedback that something is happening in the background.

So these are the steps you need to follow in order to display a spinning wheel gif while the client is waiting for the server response.

• Visit the Ajax loading gif generator and create a gif. There are plenty of similar sites in the web.
• And an image component to the web page. This must be initially hidden, so specify visibility: hidden in the style attribute of the image. I suggest this property over the display: [none/block], because the visibility property reserves the space occupied by a hidden component.
• Create a Javascript function that toggles the image visibility and makes it visible.

  var showLoading=function(element) {
      var loadingImage = $(element);
      loadingImage.style.visibility = 'visible';
  }
  

  This function receives one string argument (the id of the image) and uses the prototype dollar function.
• Now we need to call this method when the ajax transaction is initiated. This happens in the onClick event action method of a button or hyperlink component, by calling the DynaFaces.Tx.fire(...) function. So we just need to add a call to the showLoading function right before this.
• The final step is to hide the image when the transaction completes. This can be done by adding the image component to the "re-render" list of components of the AjaxTransaction component. This is enough, because when the image component is re-rendered when the response is received, it uses the initial value of the visibility property, which is set to 'hidden'.
  

Internationalizing Woodstock components

Project Woodstock offers a set of very useful JSF components, some of which are included by default in NetBeans 6.0. The labels, messages etc used by these components can be internationalized by following these steps:

1. Create a new resource bundle properties file woodstock.properties. An existing one can be used, but it's better to keep things clean.
2. Declare the bundle in web.xml.
   <context-param>
           <param-name>com.sun.webui.theme.THEME_RESOURCES</param-name>
           <param-value>my.package.woodstock</param-value>
   </context-param>
   Note that you must use the fully qualified name of the properties file (if it is placed in a package).
3. The Woodstock Theme Doc pages include a list with all the key-value pairs for woodstock messages. You can override these in the new properties file.