Programmatically adding a jenia4faces Popup component to a Netbeans 6.0 VWP project

This post describes how you can programmatically add a jenia4faces PopupFrame component to a Netbeans 6.0 Visual Web project.

There are various reasons why you would need to do that. In my case the requirement was that we needed a link in each row of a dynamically-created table that brings up a popup frame that is used for editing the database entry for this table row. Since the table is created dynamically, the same must be done with the PopupFrame component.

First you need to add the Jenia servlet in your web.xml file. This is a required step for using any Jenia component, no matter whether you add it to your page through JSP or from within Java code.

<servlet>
   <servlet-name>Jenia servlet</servlet-name>
   <servlet-class>org.jenia.faces.util.Servlet</servlet-class>
   <load-on-startup>
   </load-on-startup>
</servlet>
<servlet-mapping>
   <servlet-name>Jenia servlet</servlet-name>
   <url-pattern>/jenia4faces/*</url-pattern>
</servlet-mapping>

You also need the component jars in your project classpath.

Next you need to import the appropriate Java class in your Page bean. In the case of the PopupFrame this is

import org.jenia.faces.popup.component.html.HtmlPopupFrame;

If you want to dynamically add a different Jenia component, you can easily find the fully qualified name of the appropriate class by either browsing the Jenia jar files, or simply by using the Netbeans auto-completion function.

Now you can initialize the component and set its basic properties.

// Create the popup component
  HtmlPopupFrame popup = new HtmlPopupFrame();
// Set its properties
  popup.setId("editPopup");
  popup.setCenter("true");
  popup.setWidth("550px");
  popup.setHeight("400px");
  popup.setTitle("Edit Task");
  popup.setResizable("false");
  popup.setImmediate(true);

Again, you can use the auto-completion function in order to browse the supported properties and set any of those as required for your project.

Now it's the most tricky part: setting the method bindings for the actionOpen and actionClose properties. First we get a reference to the EL Expression Factory and create a MethodExpression.

  FacesContext fc = FacesContext.getCurrentInstance();
  ELContext elctx = fc.getELContext();
  ExpressionFactory elFactory = fc.getApplication().getExpressionFactory();
  MethodExpression openExpression = elFactory.createMethodExpression(elctx,
          "#{Staff.fireEditPopup}", String.class, new Class[]{});

Then we create a method binding using this expression and bind the actionOpen property.

   MethodBindingMethodExpressionAdapter bind1 = new MethodBindingMethodExpressionAdapter(openExpression);
   popup.setActionOpen(bind1);

Repeat the steps above for the actionClose attribute.

The PopupFrame component renders as a <a>. It can accept either plain text or an image as a child, so that it displays as a simple (text) hyperlink or an image hyperlink. This leaves us with an option to use either a StaticText or am ImageComponent in Netbeans. If you are not using Netbeans, you can add the respective standard JSF components (eg. <h:outputText>).

 // Create an image component
   ImageComponent edit = new ImageComponent();
   edit.setId("editLink");
   edit.setUrl("resources/edit.png");
   edit.setHeight(16);
   edit.setWidth(16);

   // Add the image to the popup (as a child)
   popup.getChildren().add(edit);

The Popup component is now ready. We can add it to the component tree. (In my case, I am adding it to the tablecolumn.)

column8.getChildren().add(popup);

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'.
  

Popup windows in JSF

Is is possible to raise a popup window in Java Server Faces (JSF) using Javascript, more or less the same way as in HTML.

This example shows how this can be done with a commandButton.

<h:commandButton value="Press me to bring up a popup window" onclick="window.open('popup.jsp', 'popup_window')" />

This exact method won't work with a commandLink, because this does not offer an onclick option. However the mouseup event can be used instead:

<h:commandLink onclick="window.open('popup.jsp', 'popup_window')">
    Press me to bring up a popup window
</h:commanndLink>

Of course, both commandButton and commandLink items need to be enclosed in a form element. This means that the form will be submitted when the commandButton or commandLink is pressed/clicked. In order to avoid it, we have to return false from within the onclick or mouseup attribute.

<h:commandButton value="Press me to bring up a popup window" onclick="window.open('popup.jsp', 'popup_window'); return false;" />