Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Programming
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Databases
Mail Systems
openSolaris
Eclipse Documentation
Techotopia.com
Virtuatopia.com
Answertopia.com

How To Guides
Virtualization
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Windows
Problem Solutions
Privacy Policy

  




 

 

5.2. JSF Web Pages

In this section we will show you how the web interface is defined using JSF pages. We will also see how the data model is mapped to the web form using JSF EL. Using the #{...} notation to reference Java objects is called JSF EL (JSF Expression Language). Lets take a look at the pages used in our application:
  • index.xhtml : This page displays two options: 1. Create New Todo 2. Show all Todos. When you click on the Submit button the corresponding action is invoked.
    <h:form>
    <ul>
      <li><h:commandLink type="submit" value="Create New Todo" action="create"/></li>
      <li><h:commandLink type="submit" value="Show All Todos" action="todos"/></li>
    </ul>
    </h:form>
    
  • create.xhtml : When you try to create a new task, this JSF page captures the input data. We use the todoBean to back the form input text fields. The #{todoBean.todo.title} symbol refers to the "title" property of the "todo" object in the "TodoBean" class. The #{todoBean.todo.description} symbol refers to the "description" property of the "todo" object in the "TodoBean" class. The #{todoBean.persist} symbol refers to the "persist" method in the "TodoBean" class. This method creates the "Todo" instance with the input data (title and description) and persists the data.
    <h:form id="create">
    <table>
      <tr>
        <td>Title:</td>
        <td>
          <h:inputText id="title" value="#{todoBean.todo.title}" size="15">
            <f:validateLength minimum="2"/>
          </h:inputText>
        </td>
      </tr>
      <tr>
        <td>Description:</td>
        <td>
          <h:inputTextarea id="description" value="#{todoBean.todo.description}">
            <f:validateLength minimum="2" maximum="250"/>
          </h:inputTextarea>
        </td>
      </tr>
    </table>
    <h:commandButton type="submit" id="create" value="Create"
                     action="#{todoBean.persist}"/>
    </h:form>
    
    Figure 5.1, “The "Create Todo" web page ” shows the "Create Todo" web page with the input fields mapped to the data model.
    The "Create Todo" web page
    Figure 5.1. The "Create Todo" web page

  • todos.xhtml : This page displays the list of all "todos" created. There is also an option to choose a "todo" item for 'edit' or 'delete'.
    The list of all 'todos' is fetched by #{todoBean.todos} symbol referring to the 'getTodos()' property in the 'TodoBean' class. The JSF dataTable iterates through the list and displays each Todo object in a row. The 'Edit' option is available across each row. The #{todo.id} symbol represents the "id" property of the "todo" object.
    <h:form>
    <h:dataTable value="#{todoBean.todos}" var="todo">
      <h:column>
        <f:facet name="header">Title</f:facet>
        #{todo.title}
      </h:column>
      <h:column>
        <f:facet name="header">Description</f:facet>
        #{todo.description}
      </h:column>
      <h:column>
        <a href="jboss_application_server_edit.faces?tid=#{todo.id}">Edit</a>
      </h:column>
    </h:dataTable>
    <center>
      <h:commandButton action="create"
                value="Create New Todo" type="submit"/>
    </center>
    </h:form>
    
    Figure 5.2, “The "Show All Todos" web page ” shows the "Show All Todos" web page with the data fields mapped to the data model.
    The "Show All Todos" web page
    Figure 5.2. The "Show All Todos" web page

  • edit.xhtml : This page allows you to edit the "todo" item's 'title' and 'description' properties. The #{todoBean.update} and #{todoBean.delete} symbols represent the "update" and "delete" methods in the "TodoBean" class.
    <h2>Edit #{todoBean.todo.title}</h2>
    <h:form id="edit">
    <input type="hidden" name="tid" value="#{todoBean.todo.id}"/>
    <table>
      <tr>
        <td>Title:</td>
        <td>
          <h:inputText id="title" value="#{todoBean.todo.title}" size="15">
            <f:validateLength minimum="2"/>
          </h:inputText>
        </td>
      </tr>
      <tr>
        <td>Description:</td>
        <td>
          <h:inputTextarea id="description" value="#{todoBean.todo.description}">
            <f:validateLength minimum="2" maximum="250"/>
          </h:inputTextarea>
        </td>
      </tr>
    </table>
    <h:commandButton type="submit" id="update" value="Update"
                     action="#{todoBean.update}"/>
    <h:commandButton type="submit" id="delete" value="Delete"
                     action="#{todoBean.delete}"/>
    </h:form>
    
    Figure 5.3, “The "Edit Todo" web page ” shows the "Edit Todo" web page with the mapping to the data model.
    The "Edit Todo" web page
    Figure 5.3. The "Edit Todo" web page

Note

We have used XHTML pages in the sample applications because we recommend using Facelets instead of JSP to render JSF view pages.

 
 
  Published under the terms of the Open Publication License Design by Interspire