September 2, 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 »

First, look at the newGame.jsp page, shown in Listing 1 below.

Listing 1

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

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

<h2>

<h:outputText id="welcome" value="#{bundle.welcomeMessage}"/>

</h2>

<br/>
<h:message style="color: red;
           font-family: 'New Century Schoolbook', serif;
           font-style: oblique;
           text-decoration: overline"
              id="errors1" for="playerName"/>
<br/>

   <h:panelGrid columns="1">
   <h:panelGrid columns="2">

<h:outputText id="namePrompt" value="#{bundle.nameLabel}"/>

<h:inputText id="playerName"
             value="#{GameBean.playerName}"
             size="25" required="true"/>

   </h:panelGrid>

   <h:panelGrid columns="2">

<h:outputText id="difficultyPrompt"
              value="#{bundle.difficultyLevelLabel}"/>

<h:selectOneMenu value="#{GameBean.difficultyLevel}" >
<f:selectItem itemValue="E"
              itemLabel="#{bundle.difficultyLevelEasy}" />
<f:selectItem itemValue="I"
              itemLabel="#{bundle.difficultyLevelIntermediate}"/>
<f:selectItem itemValue="D"
              itemLabel="#{bundle.difficultyLevelDifficult}"/>
</h:selectOneMenu>

</h:panelGrid>
</h:panelGrid>

<br/>

<h:commandButton id="submit"
                 action="#{GameBean.startGame}"
                 value="#{bundle.startGameLabel}" />

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

</body>
</HTML>

Most of the JSF components you see in this listing give you a pretty good idea of what they do by their names, but you should look at each in detail.

The first thing you will notice is the tag library declarations for the JSF components and core library at the top. The JSF UI components all have a prefix of h:, whereas the core library tags have a prefix of f:.

Next, you have the declaration for loading the application's resource bundle. This is where all internationalized strings for the application reside. This declaration loads the resource bundle, and makes it available to the rest of the page in the variable "bundle." Next comes the <f:view> tag. The view tag is extremely important. This is what tells the server that what is contained inside should be accessible by the FacesContext object. This object is the main conduit through which the various pieces of JSF work together. Without the view tag, it would be impossible to create the hooks between the JSP front-end and the business logic on the back-end.

Next comes the form tag. This tag is similar to the normal HTML form tag, but with some important differences. First, there's no method for determining get or post operations. Second, there's no action attribute that tells the form what to do when it is submitted. This is because both of these details are handled by the JSF framework. The get/post operations are abstracted away by this tag, so that the proper operations can be determined at the time the server serves up the request; if the request is an HTTP request, the operation will be a get or post, but a WAP request, for example, would require different operations. The action attribute is missing because the action will be determined at run-time by the JSF configuration that you set up for page navigation later on, as you'll see in the next section.

Now, we get into the nitty-gritty of rendering the UI. First, you'll see a graphic tag. This is similar in function to the HTML <img> tag, and renders a small .gif image with alternate text for non-visual browsers. Next, you have the <h:outputText> tag. This tag renders an internationalized piece of text, the welcome message, to the screen using the bundle you saw above. It also can be used to render non-static text from the application, as you'll see later. This same tag also is used for the "Name" and "Difficulty Level" prompts.

The next interesting bit of code is the first user input component for entering in a player's name, the <h:inputText> tag. This is similar in function to the <input type="text"> tag in HTML. The id attribute specifies a name by which this component is known within the application. The value attribute specifies the text that will be displayed as the predetermined value of the field. You'll notice a reference that looks suspiciously like a Java bean property, and it is. This expression links the value of this field to the player name property on the GameBean object. I'll explain this further later on, because you haven't yet created your business logic, but the expression shown links this field value to your backing Java bean, both at the time the page is rendered and after the form is submitted. The size attribute specifies how large the text field should be. Finally, you come to the required attribute. There is no analog to this attribute in HTML because it specifies a JSF-specific bit of functionality. It instructs the JSF implementation that the user must fill in a value for this field before allowing the user to leave the page. I'll demonstrate this further in the section on forms validation.





Page 2 of 8



Comment and Contribute

 


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

 

 


Sitemap | Contact Us

Rocket Fuel