April 21, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

The First Time Ever I Saw Your Face: Getting Started with JavaServer Faces, Page 3

  • March 31, 2008
  • By David Thurmond
  • Send Email »
  • More Articles »

Next, you see the UI component for letting the player select a difficulty level. This is similar to the HTML <select> tag. As before, you can see that the value attribute for this tag is linked to a Java bean property on the GameBean object. Also, note the various items specified in the <f:selectItem itemValue="" itemLabel="" /> tags. Each one enumerates a menu selection for the selector. JSF provides several different options for rendering a number of choices, including menus, radio buttons, and checkbox groups.

You may have also noticed several <h:panelGrid columns="2"> tags in the code listing. This tag is used to format the output on the page in the same manner that a <table> does in HTML, or a LayoutManager does for Swing applications. However, the various table attributes are abstracted within this component. There's no need to specify individual table rows or cells; JSF takes care of the rendering for you.

Finally, you see the most important component on the page, a command button. Without this component, our word game could never get underway! The <h:commandButton> tag renders an HTML submit button on the form. When the form button is clicked, all form validation will be performed, and, if no errors are detected, the startGame() method on your GameBean object will be invoked. You'll see what happens after that in a bit in the section on page navigation.

Now, look at the showPuzzle.jsp page. It is shown in Listing 2.

Listing 2

<HTML>
<HEAD> <title>Hangman</title> </HEAD>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="/WEB-INF/tlds/hangman.tld" prefix="hm" %>
<f:loadBundle basename="com.dlt.developer.hangman.Messages"
              var="bundle"/>

<body bgcolor="white">

<f:view>
<h:form id="guessForm" >

<h:graphicImage id="hangmanThumbnail"
                url="/images/hangman-thumbnail.gif"
                alt="Small image of hangman"/>

<h2>

<h:outputFormat id="guessMessage"
                value="#{bundle.guessMessage}">
<f:param value="#{GameBean.playerName}"/>
<f:param value="#{GameBean.numberOfGuesses}"/>
</h:outputFormat>

</h2>
<br/>

<h:message for="guessForm" />
<h:message for="guessLetter" />
<br/>

<h:panelGrid columns="1">

<h1>
<h:outputText id="puzzle" value="#{GameBean.puzzle}"/>
</h1>

</h:panelGrid>

<h:panelGrid columns="3">

<h:outputText id="guess1" value="#{bundle.guessLabel}"/>

<h:inputText id="guessLetter"
             value="#{GameBean.guessedLetter}"
             validator="#{GameBean.validate}"/>

<h:commandButton id="guess"
                 value="#{bundle.guessLabel}"
                 action="#{GameBean.guessLetter}"/>

</h:panelGrid>

</h:form>
</f:view>
</body>
</HTML>

This page has many of the same components and declarations as the newGame.jsp page you learned about earlier. You have a JSF view, a form, <h:outputText> tags for rendering text, a <h:inputText> tag for getting user input, and a <h:commandButton> tag for submitting the form, and panel grid tags for controlling the layout of the screen.

One new tag on this page is the <h:outputFormat> tag. It is similar in function to the <h:outputText> tag, but allows internationalization of messages that require parameters. Here, you want to display a message like: "David, please guess a letter or solve the puzzle. You have guessed 1 times so far." However, to do this, you need to be able to render the player's name and the number of guesses thus far as part of the internationalized string. To specify these values, you use the <f:param value=""/> tags for each of these parameters. The <h:outputFormat> tag must be used here, because the <h:outputText> tag cannot accept any parameters for internationalization.

Finally, wrap up this step of the JSF development process by looking at the youWin.jsp and youLose.jsp pages shown in Listing 3 and listing 4.

Listing 3

<HTML>
<HEAD> <title>Hangman</title> </HEAD>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="com.dlt.developer.hangman.Messages"
              var="bundle"/>
<body bgcolor="white">

<f:view>
<h:form id="youWinForm" >

<h:graphicImage id="hangmanThumbnail"
                url="/images/hangman-thumbnail.gif"
                alt="Small image of hangman"/>

<h2>

<h:outputFormat id="youWinMessage"
                value="#{bundle.youWinMessage}">
<f:param value="#{GameBean.playerName}"/>
</h:outputFormat>

</h2>
<br/>

<h:commandLink id="newGame"
               value="#{bundle.playAgainMessage}"
               action="success"/>

</h:form>
</f:view>

</body>
</HTML>




Page 3 of 8



Comment and Contribute

 


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

 

 


Sitemap | Contact Us

Rocket Fuel