July 30, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Is Java Server Faces a Bona Fide Panacea for the Web UI?

  • May 11, 2006
  • By Vlad Kofman
  • Send Email »
  • More Articles »

First, I included the tag libraries "f" and "h" and then used the outputLabel, outputText, selectOneListbox, selectItem, panelGrid, and commandButton tags to render HTML text, selection list box, table, and buttons. Note that all of the JSF tags need to be in enclosed into the <f:view> tag. I also could have included a resource bundle (property file) with all the text messages for the page and set them to be used instead of the hardcoded ones. If the user would request the page with a different locale, the JSF would automatically internationalize (change) all messages, assuming I had them in different languages.

The form tag encases the HTML form, the label is linked to the selectOneListbox by its ID, and selectOneListbox values references the bean's String zipCode properly.

When the selects' box value is submitted to the server, JSF can optionally validate or convert it and then assign it to the bean's field automatically. Note that the value is actually synchronized between the view and the model because I initially set zipCode property in the bean to "90210"; when the page is shown for the first time, the location is already pre-selected to "LA" (see screen shots at the end).

The "message" tag is for validation errors, but because I'm not using any validation tags, nothing will be checked. Automatic error notification is another great feature of JSF.

The panelGrid tag represents an HTML table and it is bound to the UI object HtmlPanelGrid that is the weatherGrid field of the bean. Binding will sync not only the component's value, but also its representation, but more on this later.

I also have two buttons that are represented by the commandButton tags: one with an actionListener, and another with the action and immediate="true" attribute.

The actionListener will fire an event when the form is submitted; this triggers the registered method of the bean. This is similar to the Swing action event/listener technology except the listener is the bean itself and JSF registered it for me. If the form is submitted from the other button, JSF will not fire an event, but directly call the bounded method. Also, because of the immediate attribute, no validation or conversions will be done or events will be fired. The immediate attribute tells JSF to just execute the assigned method and ignore everything else. As its "action" property, the second button can simply have a string "success", that tells JSF to do the navigation case from the faces-config.xml file, but instead I'm calling the "exit" method of the bean that returns "success" to show that some more logic can be done on the exit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
   <html>
   <head>
      <title>Weather JSF Application</title>
   </head>
   <body>
   <h:form id="weatherForm">
      <h:outputText value="Weather JSF application!"/>
      <br/>
      <p>
         <h:outputLabel for="zipCode">
            <h:outputText id="zipLabel"
                          value="Select your location:"/>
         </h:outputLabel>
      <br/>
      <h:message id="errors" for="zipCode" style="color: red"/>
      <br/>
      <h:selectOneListbox id="zipCode"
                          size="3"
                          value="#{weatherBean.zipCode}">
         <f:selectItem itemValue="10041" itemLabel="NY"/>
         <f:selectItem itemValue="90210" itemLabel="LA"/>
      </h:selectOneListbox>
      </p>
      <p>
         <h:panelGrid id="weatherInfoPanel"
                      binding="#{weatherBean.weatherGrid}"
                      columns="1"
                      border="2"
                      cellspacing="2"/>
      </p>
      <h:commandButton id="getWeatherCommand"
                       type="submit"
                       value="Get Weather"
                       actionListener="#{weatherBean.addControls}"/>
      <h:commandButton id="exitCommand"
                       type="submit"
                       value="Exit"
                       action="#{weatherBean.exit}"immediate="true"/>
   </body>
   </html>
</f:view>

The exit JSP is not only simpler then the weather.jsp, it also uses the model and even explicitly indicates the scope to look for the bean in. If the scope is not indicated, the JSF will look in all scopes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<f:view>
   <html>
   <head>
      <title>Exit page</title>
   </head>
   <body>
   <h:form id="exitForm">
      <p>
         <h:outputText id="exit"
                       value="Thanks for using Weather JSF App"/>
         <br>
         <h:outputText id="mgs"
                       value="You have checked weather in: "/>
         <h:outputText id="location"
                       value="#{sessionScope.weatherBean.zipCode}"/>
      </p>
   </h:form>
   </body>
   </html>
</f:view>

Look at the bean's listener method (bind to the grid tag) and see what will happen when the first button is pressed.

Here is the source for the action Listener method.

public void addControls(ActionEvent actionEvent) {
   UIViewRoot view = FacesContext.getCurrentInstance().getViewRoot();
   Application application =
      FacesContext.getCurrentInstance().getApplication();
   List children = weatherGrid.getChildren();
   children.clear();

   HtmlOutputText output =
      (HtmlOutputText)
      application.createComponent(HtmlOutputText.COMPONENT_TYPE);

   if (zipCode.equals("10041")) {
      output.setValue(" Sunny in NY ");
   }
   else if (zipCode.equals("90210")) {
      output.setValue(" Raining in LA ");
   }

   children.add(output);
}

After the form is submitted, JSF will form a presentation UI tree of objects on the server, validate and convert values, sync bean fields (such as zipCode), and then fire any pending events. An interesting point here is, assuming that and an app has 100 components on one page and 1000 users hit it at one time, does the server generate and keep 100000 objects in memory? What if you have more users/components?

When the method addControls is called, the zipCode is already set to the right value. Because I directly bound it in the tag, I can get access to it and change it in on the server. In this case, I clear the table and then set one data cell with hardcoded value. Of course, in the real application the method can get the value from any data source.

After the JSF framework changes the state of the bean, it traverses through the UI tree, calling the render toolkit to generate HTML and output it to the user.

Here are the screen shots of a running application. Download the WAR file for the complete source of the project here.

Conclusion

In this article, I have covered a lot of ground talking about Java Server Faces. This is a relatively new technology for the RAD development of Java Web applications. JSF also dubs as a MVC framework and allows you to develop an enterprise-scale Web applications with the navigation flow control, drag-and-drop of pre-build components (tags) for UI widgets, validators, converters, and internalization resource bundles, as well as creation of new custom UI widgets, validators, and converters. The specification is very robust with event model on the server side, render toolkits for different client outputs, and fast adoption among the industry leaders and IDE vendors. I will leave it up to the readers to decide the usefulness of this technology, as well as which tool to use to help with the JSF RAD Web development. I would appreciate your comments on this article, so please feel free to drop me a note to the address provided in the "About the Author" section.

References

About the Author

Vlad Kofman is a Senior System Architect. He has implemented enterprise-scale projects for the major Wall Street firms, defense contracts, and the U.S. government. His main interests are object-oriented programming methodologies and design patterns.





Page 3 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel