October 20, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

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

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

Listing 4

<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="youLoseForm">

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

<h2>

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

</h2>
<br/>

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

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

</body>
</HTML>

In Listings 3 and 4, you see another new tag, the <h:commandLink> tag. This tag is identical in function to the <h:commandButton> tag, but renders a link rather than a submit button on the form. This link is a bit different than the command buttons you saw before because the action attribute has a hard-coded value, "success", rather than linking directly to a business logic function. This is because the navigation from this page is handled automatically by the JSF framework. You'll see how this is done in the next section.

Determining Page Navigation

So, now that you have a user interface built, you can move on to the next development step: defining page navigation.

You should revisit the flow of your word game application. First, you begin by starting a new game on the newGame.jsp page. When the user clicks the Start Game button, you move on to the showPuzzle.jsp page, and remain there until you have either solved the puzzle or guessed too many times. From the showPuzzle.jsp page, you can 1) go back to the showPuzzle.jsp page for another guess, 2) solve the puzzle correctly and go to the youWin.jsp page, or 3) guess too many times and go to the youLose.jsp page. From both youWin.jsp and youLose.jsp, you can start a new game by going back to newGame.jsp, at which point the cycle begins again.

To define how navigation is performed in the application, you need to define some navigation rules in the faces-config.xml file. The rule for the newGame.jsp page is shown below:

<navigation-rule>
   <description>
      Send the user to the puzzle page after the new game
      is set up
   </description>
   <from-view-id>/newGame.jsp</from-view-id>
   <navigation-case>
      <description>
         Go to the puzzle page if everything on the new game
         page validated OK
      </description>
      <from-outcome>success</from-outcome>
      <to-view-id>/showPuzzle.jsp</to-view-id>
   </navigation-case>
</navigation-rule>

The <from-view-id> tag tells JSF which page you are defining possible page navigations for. Then, you define the possible outcomes for that page by using the <navigation-case> tags. For newGame.jsp, the only outcome is "success" from the user clicking the "Start Game" button on the form. When this happens, you want to go to showPuzzle.jsp, so you indicate this by setting the <from-outcome> tag to "success" and the <to-page-view> tag to showPuzzle.jsp. This tells JSF that, after page validation is performed on newGame.jsp, you want to go to showPuzzle.jsp.

Now, look at the more complicated case of showPuzzle.jsp. Remember that here you have three possible outcomes, not just one, as shown below:

<navigation-rule>
   <description>
      Defines behavior once the user is on the puzzle page
   </description>
   <from-view-id>/showPuzzle.jsp</from-view-id>
   <navigation-case>
      <description>
         If the user is on the puzzle page and hasn't solved
         the puzzle, have them guess again
      </description>
      <from-outcome>guess_again</from-outcome>
      <to-view-id>/showPuzzle.jsp</to-view-id>
   </navigation-case>
   <navigation-case>
      <description>
         If the user is on the puzzle page and solves
         the puzzle, go to the win page
      </description>
      <from-outcome>success</from-outcome>
      <to-view-id>/youWin.jsp</to-view-id>
   </navigation-case>
   <navigation-case>
      <description>
         If the user is on the puzzle page and guessed too
         many times, go to the you lose page
      </description>
      <from-outcome>game_over</from-outcome>
      <to-view-id>/youLose.jsp</to-view-id>
   </navigation-case>
</navigation-rule>




Page 4 of 8



Comment and Contribute

 


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

 

 


Sitemap | Contact Us

Rocket Fuel