JSF Central - MyFaces Tomahawk in Action - Part 1
JSF Central

 
 Home 
 
 Products 
 
 Articles & Books 
 
 Resources 
MyFaces Tomahawk in Action - Part 1
 
MyFaces Tomahawk in Action - Part 1
by Hazem Ahmed Saleh
22 Dec 2009 00:15 EST

In the first part of this series, Hazem Saleh introduces MyFaces Tomahawk, a set of components that go well beyond the JSF specification, including converters, validators, and a set of attributes added to the standard JSF components. He also discusses some of its unique features, as well as the new CAPTCHA component.


MyFaces Tomahawk is a set of JSF components that go well beyond the JSF specification, as well as other features. These components are compatible with Mojarra (the reference implementation), MyFaces, or any other JSF 1.1 or 1.2 compliant implementation. The Tomahawk family of components includes converters, validators, and a set of attributes added to the JSF components.

There’s also a MyFaces Tomahawk sandbox subproject, which includes experimental components and features that may or may not be included in future Tomahawk releases. You can use these components in your projects, but there is no guarantee that the component code will be stable.

This article is an introduction to Tomahawk. We will see how to setup it, and then we will look at an example that uses one of the new featured Tomahawk components: CAPTCHA.

An Introduction to Tomahawk

MyFaces Tomahawk offers extended versions of the core JSF components (inputText, outputText, commandLink, and so on) and a set of components for rapidly creating advanced user interfaces (captcha, calendar, data scroller, jscookmenu, newspaperTable, tabbedPane, validateRegExpr, dataList, tree2, and so on).

The extended core core components keep the standard behavior while supporting the following additional attributes:

  • forceId
  • displayValueOnly

Let’s take a closer look at each of these attributes.

The forceId Attribute

The forceId attribute forces the JSF framework to generate an ID equal to the one specified in the attribute. Let’s illustrate this with an example. <h:form id="myForm"> <t:commandLink id="myButton" value="Home" action="home"/> </h:form>

This link would be rendered as follows:

<a id="myForm:myButton">Home</a>

Whereas using the (forceId) attribute:

<h:form id="myForm"> <t:commandLink forceId="true" id="myButton" value="Home" action="home"/> </h:form>

The link would be rendered as follows:

<a id="myButton">Home</a>

This feature can be useful if you want to use (or reuse preexisting) JavaScript libraries or CSS styles for the component.

The displayValueOnly Attribute

The displayValueOnly attribute switches a Tomahawk component from input to output and vice versa. The following example illustrates this:

<h:form id="myForm"> <t:inputHtml id="myText" value="Hello World" /> </h:form>

The example would be rendered as shown in Figure 1.

  Figure 1. The inputHtml tag output.
Figure 1. The inputHtml tag output.

Now look at the following snippet:

<h:form id="myForm"> <t:inputHtml id="myText" value="Hello World" displayValueOnly="true" /> </h:form>

It would be rendered as shown in Figure 2.

  Figure 2. The inputHtml tag output with displayValueOnly set to true.
Figure 2. The inputHtml tag output with displayValueOnly set to true.

Tomahawk Setup inside your Facelets application

Use the following steps to set up the Tomahawk tag library inside your Facelets application:

  • Download the latest MyFaces Tomahawk binary distribution from http://myfaces.apache.org/download.html.
  • Unzip the downloaded file.
  • Copy lib/tomahawk.jar from the unzipped file to the WEB-INF/lib folder of your Facelets application.
  • Install the MyFaces extensions filter by declaring it in the web.xml file of the web application. Make sure that the servlet-name value of the extension filter matches the name of the Faces servlet. Please see Listing 1.
<web-app> <filter> <filter-name>extensionsFilter</filter-name> <filter-class>org.apache.myfaces.webapp.filter.ExtensionsFilter</filter-class> </filter> <!-- extension mapping for adding <script/>, <link/>, and other resource tags to JSF-pages --> <filter-mapping> <filter-name>extensionsFilter</filter-name> <servlet-name>Faces Servlet</servlet-name> </filter-mapping> <!-- extension mapping for serving page-independent resources (javascript, stylesheets, images, etc.) --> <filter-mapping> <filter-name>extensionsFilter</filter-name> <url-pattern>/faces/myFacesExtensionResource/*</url-pattern> </filter-mapping> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> </web-app> Listing 1. The MyFaces Extensions Filter in web.xml

To use Tomahawk components, add the following declaration to your XHTML page:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:t="http://myfaces.apache.org/tomahawk">

We will look at an example for JSP in the next article.

Tomahawk CAPTCHA

I have the honor to be the creator of this component in Tomahawk. From wikipedia CAPTCHA is “a type of challenge-response test used in computing to ensure that the response is not generated by a computer.” It can be useful to protect specific application functionality (like registration, comment submission) from intruders. In this section, we will create a simple Tomahawk application that uses the component.

CAPTCHA example

In this example, a CAPTCHA appears to the user. After the user enters a value, the application will validate the user input versus the value shown in CAPTCHA. Figure 3 shows the example screenshot.

  Figure 3. The CAPTCHA example screenshot
Figure 3. The CAPTCHA example screenshot

It’s very easy to use the CAPTCHA component inside your Tomahawk application. All you need to do is specify a value for the captchaSessionKeyName attribute in the tag. The captchaSessionKeyName attribute value allows you to get the CAPTCHA value. Listing 2 shows the captcha.xhtml code. The #{captchaBean.sessionKeyName} is the session key name of the CAPTCHA value. When the user clicks the command button, the #{captchaBean.check} is called, and the value of the CAPTCHA is retrieved from the session using the #{captchaBean.sessionKeyName} value.

<ui:composition> <h:form> <h:panelGrid id="panel" columns="2"> <h:outputText value="Type the code shown "/> <h:inputText value="#{captchaBean.value}"/> <h:commandLink value="Try a different image" /> <t:captcha captchaSessionKeyName="#{captchaBean.sessionKeyName}" /> <h:commandButton value="Submit" action="#{captchaBean.check}"/> <h:outputText value="#{captchaBean.status}"/> </h:panelGrid> </h:form> </ui:composition> Listing 2. The captcha.xhtml code

Listing 3 shows the CAPTCHA example managed bean code.

public class CaptchaBean { public final static String SESSION_KEY_NAME = "mySessionKeyName"; public final static String CORRECT = "Correct!"; public final static String WRONG = "Wrong"; String status; String value; public String check() { // Compare the CAPTCHA value with the user entered value. String captchaValue = (String) ((HttpSession) FacesContext.getCurrentInstance(). getExternalContext().getSession(true)).getAttribute(SESSION_KEY_NAME); if (captchaValue.equalsIgnoreCase(value)) { status = CORRECT; } else { status = WRONG; } return null; } public String getStatus() { return status; } public void setStatus(String status) { this.status = status; } public String getValue() { return value; } public void setValue(String value) { this.value = value; } public String getSessionKeyName() { return SESSION_KEY_NAME;) } Listing 3. The CAPTCHA example managed bean code

As we see in Listing 3, In the check() method, the CAPTCHA value is retrieved from the session using the SESSION_KEY_NAME, and the application checks its value versus the user input.

You can download the complete example code from here.

Conclusion

MyFaces Tomahawk is a mature component library, but it still provides a stable set of interesting components that can be used for building powerful web applications. Thanks to the MyFaces community, new features are always being added to this powerful component library. In the next part, I will talk about the <t:xmlTransform> component, so stay tuned!

Resources



RSS feed(all feeds)

The Editor's Desk
Podcasts
Inside Facelets
In the Trenches

Site version 1.83  Report web site problems

Copyright (C) 2003-2014 Virtua, Inc. All Rights Reserved. Java, JavaServer Faces, and all Java-based marks are trademarks or registered trademarks of Oracle Corporation. in the United States and other countries. Virtua, Inc. is independent of Oracle Corporation. All other trademarks are the sole property of their respective owners.