JSF 1.x Sample Application -3 [ Handling of tables in JSF ]

                                                                                                                                  JSF HTML TAGS

Lets now create a JSF application for maintaining a Todo list. The main new thing we will cover is the handling of tables in JSF. These tables will be created based on a Java collection from the managed bean.

1. Create JSF Project

Create a new Dynamic Web Project "de.vogella.jsf.todo".

2. Domain model

Create a new package de.vogella.jsf.todo.model and the following class.

package de.vogella.jsf.todo.model;

import java.util.Calendar;

public class Todo {
  private String id;
  private String title;
  private String description;
  private int priority;
  private Calendar dueDate;
  
  public Todo(String title, String description, int priority) {
    this.title = title;
    this.description = description;
    this.priority = priority;
  }
  
  public String getId() {
    return id;
  }
  public void setId(String id) {
    this.id = id;
  }
  public String getTitle() {
    return title;
  }
  public void setTitle(String title) {
    this.title = title;
  }
  public String getDescription() {
    return description;
  }
  public void setDescription(String description) {
    this.description = description;
  }
  
  public int getPriority() {
    return priority;
  }

  public void setPriority(int priority) {
    this.priority = priority;
  } 
  
  public Calendar getDueDate() {
    return dueDate;
  }
  public void setDueDate(Calendar dueDate) {
    this.dueDate = dueDate;
  }

  
  
  
} 

3. Controller

Create the package de.vogella.jsf.todo.controller and the following class TodoController.

package de.vogella.jsf.todo.controller;

import java.util.ArrayList;
import java.util.List;

import javax.faces.component.UICommand;
import javax.faces.component.UIForm;
import javax.faces.event.ActionEvent;
import javax.faces.model.SelectItem;

import de.vogella.jsf.todo.model.Todo;

public class TodoController {
  // Domain model related variables
  private List<Todo> todos;
  private Todo todo;

  // JavaServerFaces related variables
  private UIForm form;
  private UIForm tableForm;
  private UICommand addCommand;

  public TodoController() {
    todos = new ArrayList<Todo>();
    todos.add(new Todo("Learn JFS", "Finish this article", 1));
    todos.add(new Todo("Stop drinking to much coffee", "Coffee is evil!", 3));
  }

  public String addNew() {
    todo = new Todo("", "", 3);
    form.setRendered(true);
    addCommand.setRendered(false);
    return null;
  }

  public String save() {
    todos.add(todo);
    form.setRendered(false);
    addCommand.setRendered(true);
    return null;
  }

  public String cancel() {
    todo = null;
    form.setRendered(false);
    addCommand.setRendered(true);
    return null;
  }

  public String delete() {
    todos.remove(todo);
    return null;
  }

  public void displayTable(ActionEvent event) {
    if (event.getComponent().getId().equalsIgnoreCase("hide")) {
      tableForm.setRendered(false);
    } else {
      tableForm.setRendered(true);
    }
  }

  public List<SelectItem> getPriorities() {
    List<SelectItem> list = new ArrayList<SelectItem>();
    list.add(new SelectItem(1, "High"));
    list.add(new SelectItem(2, "Medium"));
    list.add(new SelectItem(3, "Low"));
    return list;
  }

  public List<Todo> getTodos() {
    return todos;
  }

  public void setTodos(List<Todo> todos) {
    this.todos = todos;
  }

  public Todo getTodo() {
    return todo;
  }

  public void setTodo(Todo todo) {
    this.todo = todo;
  }

  public UIForm getForm() {
    return form;
  }

  public void setForm(UIForm form) {
    this.form = form;
  }

  public UICommand getAddCommand() {
    return addCommand;
  }

  public void setAddCommand(UICommand addCommand) {
    this.addCommand = addCommand;
  }

  public UIForm getTableForm() {
    return tableForm;
  }

  public void setTableForm(UIForm tableForm) {
    this.tableForm = tableForm;
  }

} 

4. Register your managed beans

Double-click on faces-config.xml and select the tab "ManagedBeans". Register the TodoController.

5. Create css

In your folder WebContent create a folder css. Create a file mystyle.css with the following content.

table.todo  {
  border: 1px solid #CCCCCC;
  }
  
table.todo th {
  background: #EFEFEF none repeat scroll 0 0;
  border-top: 1px solid #CCCCCC;
  font-size: small;
  padding-left: 5px;
  padding-right: 4px;
  padding-top: 4px;
  vertical-align: top;
}

table td:first-child {
  font-weight:bold;
  }

table .first {
  width: 120px;
  }
  
table .rest {
  width: 400px;
  }
  
table.todo {
  
  border-top: 1px solid #CCCCCC;
  font-size: small;
  padding-left: 5px;
  padding-right: 4px;
  padding-top: 4px;
  vertical-align: top;
} 

6. JavaServer Page with JSF components

Create a new JSP page "Todo.jsp" and change the code to the following:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<LINK href="<%=request.getContextPath()%>/css/mystyle.css"
  rel="stylesheet" type="text/css">
</head>
<body>
<h3>Todo list</h3>
<f:view>
  <h:messages layout="table"></h:messages>

  <%-- Possibility to start a new Todo --%>
  <h:form>
    <h:commandLink binding="#{todoController.addCommand}" accesskey="n"
      action="#{todoController.addNew}" value="Add new Todo">
    </h:commandLink>
  </h:form>


  <h:form binding="#{todoController.form}" rendered="false"
    styleClass="todo">
    <h:panelGrid columns="2">
      <h:outputText value="Title"></h:outputText>
      <h:inputText value="#{todoController.todo.title}" required="true"
        requiredMessage="Title is required">
      </h:inputText>
      <h:outputText value="Description"></h:outputText>
      <h:inputTextarea value="#{todoController.todo.description}" cols="40"
        rows="4"></h:inputTextarea>
      <h:outputText value="Prio"></h:outputText>
      <h:selectOneMenu validatorMessage="required"
        value="#{todoController.todo.priority}">
        <f:selectItems value="#{todoController.priorities}" />
      </h:selectOneMenu>
    </h:panelGrid>
    <h:panelGroup>
      <h:commandButton action="#{todoController.save}" value="Save"
        accesskey="s">
      </h:commandButton>
      <h:commandButton action="#{todoController.cancel}" value="Cancel"
        accesskey="c" immediate="true">
      </h:commandButton>
    </h:panelGroup>
  </h:form>

  <%-- These buttons allow to show and hide the table --%>
  <h:form>
    <h:panelGrid columns="2">
      <h:commandLink id="hide"
        actionListener="#{todoController.displayTable}" value="Hide Table">
      </h:commandLink>
      <h:commandLink id="show"
        actionListener="#{todoController.displayTable}" value="Show Table">
      </h:commandLink>
    </h:panelGrid>
  </h:form>

  <%-- Here we start the form for the data table --%>
  <h:form binding="#{todoController.tableForm}">
    <%-- Here we start the data table --%>

    <h:dataTable value="#{todoController.todos}" var="todo"
      styleClass="todo" headerClass="todoheader"
      columnClasses="first, rest">
      <h:column>
        <%-- Via this facet we define the table header (column 1) --%>
        <f:facet name="header">
          <h:column>
            <h:outputText value="Prio"></h:outputText>
          </h:column>
        </f:facet>
        <h:outputText value="#{todo.priority}"></h:outputText>
      </h:column>
      <h:column>
        <%-- Via this facet we define the table header (column 2) --%>
        <f:facet name="header">
          <h:column>
            <h:outputText value="Title"></h:outputText>
          </h:column>
        </f:facet>
        <h:outputText value="#{todo.title}"></h:outputText>

      </h:column>

      <h:column>
        <%-- Via this facet we define the table header (column 3) --%>
        <f:facet name="header">
          <h:column>
            <h:outputText value="Description"></h:outputText>
          </h:column>
        </f:facet>
        <h:outputText value="#{todo.description}"></h:outputText>
      </h:column>

      <h:column>
        <%-- Via this facet we define the table header (column 4) --%>
        <f:facet name="header">
          <h:column>
            <h:outputText value="Actions"></h:outputText>
          </h:column>
        </f:facet>
        <h:panelGrid columns="2">
          <h:commandLink value="delete" action="#{todoController.delete}">
            <f:setPropertyActionListener target="#{todoController.todo}"
              value="#{todo}" />
          </h:commandLink>
        </h:panelGrid>
      </h:column>
    </h:dataTable>

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

Tip

Using the Facet tag you can create a header for a dataTable component.

You have added a actionListener. This can call a method which can receive an object of type ActionEvent. actionListeners are nice if you want to use the same method with different parameters.
We also use selectOneMenu which allows to select a value from a pre-defined list.
The main new thing here is h:datatable tag. This tag defines a table. value can get a list as a parameter and var define the variable which will be used to create each row. This is very similar to the foreach loop.
The other new element is the setPropertyActionListener. This allow you to listener to changes for this link, e.g. a mouse click. This copies the current selected row into the field todo. The method delete from the controller will then remove this elements from the list.

7. Run your webapplication

If you run your webapplication you should be seeing the following: