Java Tips and Tricks

Friday, 15 February 2013

Write your Queries in Comment box...

Thursday, 14 February 2013

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

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:

JSF1.x Sample application -2 [ Controller ]

NEXT EXAMPLE

We will now extend the example from the previous chapter to a math trainer. The system will propose two number and the user must multiply both values and input the result.
This JSF application will use a controller which handles the JSF logic. This will allow you to create a domain model without application logic.

Tip

In general it is considered as a good design practice to keep the model independently from the application logic.

This example will also demonstrate the usage of dependency injection in JSF.

1. Create JSF Project

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

2. Domain model

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

package de.vogella.jsf.card.model;

import java.util.Random;

public class Card {
  private int left;
  private int right;
  

  public Card() {
    Random random = new Random();
    int i = 0;
    int j = 0;
    do {
      i = random.nextInt(10);
    } while (i <= 4);

    do {
      j = random.nextInt(100);
    } while (j <= 20);

    left = i;
    right = j;
  }
  
  public int getLeft() {
    return left;
  }
  public void setLeft(int left) {
    this.left = left;
  }
  public int getRight() {
    return right;
  }
  public void setRight(int right) {
    this.right = right;
  }
  
}

3. Controller

Create the following class CardController.

package de.vogella.jsf.card.controller;

import javax.faces.application.FacesMessage;
import javax.faces.component.UIPanel;
import javax.faces.context.FacesContext;

import de.vogella.jsf.card.model.Card;

public class CardController {
  private Card card;
  private UIPanel resultPanel;
  private int result;

  public CardController() {
  }

  public String checkResult() {
    FacesContext context = FacesContext.getCurrentInstance();
    resultPanel.setRendered(true);

    if (checkOperation()) {
      context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Correct", null));
    } else {
      context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Incorrect", null));
    }
    return null;
  }

  private boolean checkOperation() {
    return (card.getLeft() * card.getRight() == result);
  }

  public UIPanel getResultPanel() {
    return resultPanel;
  }

  public void setResultPanel(UIPanel resultPanel) {
    this.resultPanel = resultPanel;
  }

  public int getResult() {
    return result;
  }

  public void setResult(int result) {
    this.result = result;
  }

  public String next() {
    FacesContext context = FacesContext.getCurrentInstance();
    if (checkOperation()){
      resultPanel.setRendered(false);
      card = new Card();
      return null;
    } else {
      context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Incorrect", null));
    }
    return null;
    
  }

  public Card getCard() {
    return card;
  }

  public void setCard(Card card) {
    this.card = card;
  }

}

This class has a field resultPanel. This field will later get connected to a UIComponent (panel) from the JSP.

4. Register your managed beans- Dependency injection

Double-click on faces-config.xml and select the tab "ManagedBeans". Register the classes "CardController" and "Card" as managed beans. The scope of card will be set to none as it will be inserted into the ControllerCard via dependency injection. In the initialization tab maintain the data as displayed in the screenshot. The value #{card} refers to the managed bean "card".

The generated XML code should look like the following (you see this if you select the tab "Source".

<managed-bean>
    <managed-bean-name>cardController</managed-bean-name>
    <managed-bean-class>de.vogella.jsf.card.controller.CardController</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
    <managed-property>
      <property-name>card</property-name>
      <property-class>de.vogella.jsf.card.model.Card</property-class>
      <value>#{card}</value>
    </managed-property>
  </managed-bean>
  <managed-bean>
    <managed-bean-name>card</managed-bean-name>
    <managed-bean-class>de.vogella.jsf.card.model.Card</managed-bean-class>
    <managed-bean-scope>none</managed-bean-scope>
  </managed-bean>

5. Resource bundle for messages

Create the following file "messages.properties" in your source folder under the package "de.vogella.jsf.card".

left=Left Side
right=Right Side
result=Result
show= Check
next= Next

6. JavaServer Page with JSF components

Create a new JSP page "Trainer.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>
</head>
<body>
<h1> Train your Brain</h1>

<h3>Please calculate the result </h3>
<f:view>
  <f:loadBundle basename="de.vogella.jsf.card.messages" var="msg" />
  <h:form>
    <h:panelGrid columns="3">
      <h:panelGrid columns="2">
        <h:outputLabel value="#{msg.left}"></h:outputLabel>
        <h:outputLabel id="left" value="#{cardController.card.left}"></h:outputLabel>

        <h:outputLabel value="#{msg.right}"></h:outputLabel>
        <h:outputLabel id="right" value="#{cardController.card.right}">
        </h:outputLabel>

        <h:outputLabel value="#{msg.result}"></h:outputLabel>
        <h:inputText id="result" value="#{cardController.result}"></h:inputText>
      </h:panelGrid>

    </h:panelGrid>
    <h:commandButton action="#{cardController.checkResult}"
      value="#{msg.show}"></h:commandButton>
    <h:commandButton action="#{cardController.next}" value="#{msg.next}" type="submit"></h:commandButton>
    <h:messages layout="table"></h:messages>

    <h:panelGroup binding="#{cardController.resultPanel}" rendered="false">
      <h:message for="result"></h:message>
    </h:panelGroup>

  </h:form>




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

From the previously examples you should be able to read most of the fields. What is new is that is use now the binding. Binding allows to bind certain UIControls to a managed bean. This way be bind the panel for the result to the controller. The controller can then set the rendered attribute of this UIControl depending on the user settings.

7. Run your webapplication

To run your webapplication, select Trainer.jsp, right mouse-click- >run as -> run on server.

NEXT EXAMPLE

JSF 1.x Sample Application -1 [Validation, Resource bundles and Navigation ]

NEXT EXAMPLE

1. Create JSF Project

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

2. Domain model

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

package de.vogella.jsf.starter.model;

public class User {
  private String name;
  private String password;
  
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }
  public String getPassword() {
    return password;
  }
  public void setPassword(String password) {
    this.password = password;
  }
  
  public String login(){
    // Image here a database access to validate the users
    if (name.equalsIgnoreCase("tester") && password.equalsIgnoreCase("tester")){
      return "success";
    } else {
      return "failed";
    }
    
  }
  
}

Tip

Please note that we are hard-coding that only user tester with password tester can login.

Create the following class.

package de.vogella.jsf.starter.model;

import java.util.Random;

public class Card {
  private int left;
  private int right;
  private int result = 0; 

  public Card() {
    Random random = new Random();
    int i = 0;
    int j = 0;
    do {
      i = random.nextInt(10);
    } while (i <= 4);

    do {
      j = random.nextInt(100);
    } while (j <= 20);

    left = i;
    right = j;
  }

  public int getLeft() {
    return left;
  }

  public void setLeft(int left) {
    this.left = left;
  }

  public int getRight() {
    return right;
  }

  public void setRight(int right) {
    this.right = right;
  }

  // Controller

  public String show() {
    result = left * right; 
    return "success";
  }
  
  public String clear() {
    result = 0; 
    return "clear";
  }

  public int getResult() {
    return result;
  }

  public void setResult(int result) {
    this.result = result;
  }

}

Tip

The class Card contains currently some controller code. The next chapter will demonstrate how to keep your model code clean and how to use controllers directly.

3. Register your managed beans

Double-click on faces-config.xml and select the tab "ManagedBeans". Register your User.java and Card.java as managed beans.

4. Validators

JSP allows to define validators which allows to check certain values which are placed in the UI. Create therefore the following class.

package de.vogella.jsf.starter.validator;

import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.validator.Validator;
import javax.faces.validator.ValidatorException;

public class LoginValidator implements Validator {
  public void validate(FacesContext context, UIComponent component,
      Object value) throws ValidatorException {
    String user = (String) value;
    if (!user.equalsIgnoreCase("tester")) {
      FacesMessage message = new FacesMessage();
      message.setDetail("User " + user + " does not exists");
      message.setSummary("Login Incorrect");
      message.setSeverity(FacesMessage.SEVERITY_ERROR);
      throw new ValidatorException(message);
    }
  }
}

Select your faces-config.xml and select the tab Component. Select Validators and press Add.

5. Resource bundle for messages

With JSP it is easy to use resource bundles for the static text in your JSP application. Create the following file "messages.properties" in your source folder under the package "de.vogella.jsf.starter".

user=User
password=Password
login=Login
hello=Moin
left=Left Side
right=Right Side
result=  Result
show= Show Result
next= New Test
reset= Reset

6. JavaServer Page with JSF components

Create a new JSP page "LoginView.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>Login</title>
</head>
<body>
<f:view>
  <f:loadBundle basename="de.vogella.jsf.starter.messages" var="msg" />
  <h:form>
    <h:panelGrid columns="2">
      <h:outputLabel value="#{msg.user}"></h:outputLabel>
      <h:inputText value="#{user.name}">
      <f:validator
          validatorId="de.vogella.jsf.starter.validator.LoginValidator" />
      </h:inputText>
      <h:outputLabel value="#{msg.password}"></h:outputLabel>
      <h:inputSecret value="#{user.password}">
      </h:inputSecret>
    </h:panelGrid>
    <h:commandButton action="#{user.login}" value="#{msg.login}"></h:commandButton>
    <h:messages layout="table"></h:messages>
  </h:form>
</f:view>
</body>
</html>

Lets explain a few fields.

Table 1.

Element	Description
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>	Makes the core and html tags available in the page
<f:view>	Indicates that the following will use JSF components.
<f:loadBundle basename="de.vogella.jsf.starter.messages" var="msg"/>	load the resource / message bundle which is then available in the application under the name msg
<h:form>	Starts a form
<h:outputLabel value="#{msg.user}"></h:outputLabel>	Define a label which used the text user define in the resource bundle
<h:inputText tabindex="1" value="#{user.name}"></h:inputText>	Define a input field which used the managed bean user and maps to field name
<h:inputSecret tabindex="2" value="#{user.password}">	Masked input files, mapped to the managed bean user and field password
<h:commandButton action="#{user.login}" value="#{msg.login}"></h:commandButton>	The button is mapped to the method user.login

Create another JSP "Trainer.jsp" with the following code.

<%@ 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>
</head>
<body>
<f:view>
  <f:loadBundle basename="de.vogella.jsf.starter.messages" var="msg" />
  <h:form>
    <h:panelGrid columns="3">
      <h:outputLabel value="#{msg.left}"></h:outputLabel>
      <h:inputText id="left" value="#{card.left}"></h:inputText>
      <h:message for="left"></h:message>

      <h:outputLabel value="#{msg.right}"></h:outputLabel>
      <h:inputText id="right" value="#{card.right}">
      </h:inputText>
      <h:message for="right"></h:message>

    </h:panelGrid>
    <h:commandButton action="#{card.show}" value="#{msg.show}"></h:commandButton>
    <h:commandButton action="#{card.clear}" value="#{msg.reset}"
      immediate="true"></h:commandButton>
    <h:messages layout="table"></h:messages>
  </h:form>

  <h:panelGrid rendered="#{card.result!=0}" columns="3">
    <h:outputLabel value="#{msg.result}"></h:outputLabel>
    <h:inputText id="result" value="#{card.result}">
    </h:inputText>
    <h:message for="result"></h:message>
  </h:panelGrid>


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

Create another JSP FailedLogin.jsp with the following code.

<%@ 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>
</head>
<body>
<f:view>
  <h1>Failed Login.</h1>
</f:view>
</body>
</html>

7. Navigation Rule

Select your faces-config.xml and select the tab "Navigation Rule". Make the palette available if necessary.

Select Page and click in the workarea. Add LoginView and Trainer to the workspace.

Click on Link, then on LoginView and then on Trainer. You should have now an arrow which indicates a navigation rule.

Click in the Palette on Select. Select then the arrow and the properities view. Input "success" in the From – Outcome

Tip

The user bean return the String success. In the navigation rule you now defined that if we receive "success" then we should be going to the next page.

Add a navigation rule so that in the case the user does not use the right user / password you send him to the failure page.

8. Run your webapplication

To run your webapplication, select LoginView.jsp, right mouse-click- >run as -> run on server.

Tip

Remember that we are hard-coding that only user "tester" with password "tester" can login. Try another user this should not work.

You should be able to login with the right user and move to the next page.

NEXT EXAMPLE

JSF Installation in Eclispe

1. Eclipse

For JSP development you need the Eclipse WTP and an installed Tomcat.
See Installation of Eclipse WTP and Tomcat.

2. JSF library

A JSF library is required. We will later use Eclipse to download and install the Apache MyFaces JSF implementation during project creation.

3. JSLT library

Download the JSLT library from https://jstl.dev.java.net/.

Your first JSF project

Our first JSF example will be a celsius to fahrenheit convertor.

1.1. Create JSF Project

Create a new Dynamic Web Project "de.vogella.jsf.first". Under "Configuration" select "JavaServer Faces v1.2".

Press next until you see the following screen.

The first time you create a JSF project you need to install / download a JSF implementation. Press the "Download library..." button and select the Apache Library and install it.

Press Manage libraries and create a library for JSTL.

Click "Finish". Your project has been created

1.2. Review the generated project

Review the web.xml file. It has an entry for the Faces Servlet and for the servlet mapping. Also the file "faces-config.xml" has been created.

Tip

To add the JSF settings to an existing dynamic web project, right-click on your project, select Project Properties -> Project Facets and add then JSF facet to your project.

1.3. Domain Model

Create a package "de.vogella.jsf.first.model" and the class "TemperatureConvertor".

package de.vogella.jsf.first.model;

public class TemperatureConvertor {
  private double celsius; 
  private double fahrenheit;
  private boolean initial= true; 
  
  public double getCelsius() {
    return celsius;
  }
  public void setCelsius(double celsius) {
    this.celsius = celsius;
  }
  public double getFahrenheit() {
    return fahrenheit;
  }
  
  public boolean getInitial(){
    return initial;
  }
  
  public String reset (){
    initial = true;
    fahrenheit =0;
    celsius = 0; 
    return "reset";
  }
  public String celsiusToFahrenheit(){
    initial = false; 
    fahrenheit = (celsius *9 / 5) +32;
    return "calculated";
  }
  
}

1.4. Define managed bean

Double-click on faces-config.xml in the WEB-INF directory and select the tab "ManagedBeans".

Press add and maintain your class.

The result should look like the following:

1.5. Create JSP

Select your project, right click on it, select New -> JSP. Create the JSP page "Convertor.jsp". Use the "New JavaServer Faces (JSF) Page (html)" template.

Change the coding 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>Celsius to Fahrenheit Convertor</title>
</head>
<body>
<f:view>
  <h:form>
    <h:panelGrid columns="2">
      <h:outputLabel value="Celsius"></h:outputLabel>
      <h:inputText  value="#{temperatureConvertor.celsius}"></h:inputText>
    </h:panelGrid>
    <h:commandButton action="#{temperatureConvertor.celsiusToFahrenheit}" value="Calculate"></h:commandButton>
    <h:commandButton action="#{temperatureConvertor.reset}" value="Reset"></h:commandButton>
    <h:messages layout="table"></h:messages>
  </h:form>
  
  
  <h:panelGroup rendered="#{temperatureConvertor.initial!=true}">
  <h3> Result </h3>
  <h:outputLabel value="Fahrenheit "></h:outputLabel>
  <h:outputLabel value="#{temperatureConvertor.fahrenheit}"></h:outputLabel>
  </h:panelGroup>
</f:view>
</body>
</html>

Tip

All JSF tag must be always be enclosed in a <f:view> tag.

1.6. Run your webapplication

Select Convertor.jsp, right mouse-click- >run as -> run on server.

Congratulations. You should be able to use your JSF application.

1.7. Layout via css

JFP application can get styles via css files. To load a style sheet include the following in your JSP page in the header section. This then related to a mystyle.css file under your folder WebContent/css..

<LINK href="<%=request.getContextPath()%>/css/mystyle.css" rel="stylesheet" type="text/css">

Introduction to Java Server Faces

Author : Mohammed Sajadh N.A
Version : 1.0
Date : 14 Feb 2013

Introduction

· In Fact, JSF is nothing but an abstraction over the existing Web Framework. JSF is implemented as a Servlet which is called the Faces Servlet

· Java Server Faces which provides a Component-Based Architecture for developing reusable User Interface Components hides most of the complex stuffs that are happening in the View portion of the MVC-2 Architecture.

[MVC-2 Architecture: A client who is normally a HTML Browser sends a request to the server. The Web Server receives the request, encapsulates the request and then populates this request object with the various parameter values from the client and will send it to the Servlet. The Servlet which acts as a Controller, analyses the request, then will interact with the Model (Java Beans) that executes the various application business logic and then chooses which View to be shown to the User.]

· Feature:-

· developing customized User Interface

· Event handling Mechanism

· Validating User Inputs that are sent by the clients

· Easy Page Navigation Mechanism etc

· Pros:-

· degree of coupling between the UI Components that represent the various behaviour/properties and its Rendering is very low.

(So, HTML browsers are not the only target client applications. JSF Applications works even well with WML Browsers.)

Basic Elements of JSF

1. User Interface Components
2. Managed Beans
3. Validators
4. Convertors
5. Events and Listeners
6. Page Navigation
7. Renderers

All the above-mentioned components can be found in separated packages in the API.

Eg:- User Interface Components == javax.faces.component

Validation == javax.faces.validator

1. User Interface Components [ `javax.faces.component`]

· If Java Swings represent the UI components for a Desktop Java Application, then JSF UI Components are meant for the Web Applications.

· The JSF User Interface Components are developed with Java Beans Specifications. It means that JSF Components have properties, methods and events as they are normally found for a traditional Java Bean

· The most commonly used ones are Label, Text-Field, Form, Check-Box, Drop-Down Box etc. JSF also provides a framework for creating Customized UI Components.

2. Managed Beans

· Managed Beans are standard Java classes that follow the Java Beans Specification.Generally, Managed Beans are used to represent the user inputs

· They may even act as Listeners and can handle the appropriate Actions

The following code snippet shows how to represent the Text-Field and the command button,

<html:inputText

id = "strToBeEncryptedTextField"

value = "#{EncryptionBean.strToBeEncrypted}">

</html:inputText>

<html:commandButton

id = "encryptButton"

actionListener = "#{EncryptionBean.doEncryption}">

</html:commandButton>

The Text-Field has two attributes namely id and value. The id attribute uniquely identifies the Text-Field component from other Components in the View.

The value for the attribute value is #{EncryptionBean.strToBeEncrypted}. This expression is a JSF EL Expression. The EL expression can be interpreted as follows, Take the value of the string to be encrypted from the UI Component and map it to the property called strToBeEncrypted which is inside the class called EncryptionBean.

It means that the declaration of the Managed Java Bean class may look something like the following,

class EncryptionBean{

private String strToBeEncrypted;

public String getStrToBeEncrypted(){

return strToBeencrypted;

}

public void setStrToBeEncrypted(String strToBeEncrypted){

this.strToBeEncrypted = strToBeEncrypted;

}

// Other things goes here

}

‘encryptButton’ is uniquely used to identify the command button object, the attribute actionListener is used to provide the listener method that will get invoked as a result of someone clicking the button.

So,

actionListener
= "#{EncryptionBean.doEncryption}"

essentially says that there is a method called doEncryption() within the EncryptionBean class. Following code snippet may prove this,

class EncryptionBean{

…

public void doEncryption(javax.faces.event.ActionEvent event){

}

…

}

3. Validator [`javax.faces.validator`]

· JSF already have the Common Validation API being implemented for almost all controls in the javax.faces.validator package

· it also allows the developers to provide their own Custom Validation Classes through the help of Configuration Files.

EX:- <html:inputText identifier = "employeeAgeTextField">

<f:validateLongRange minimum = "25" maximum = "35">

</f:validateLongRange>

</html:inputText>

4. Convertors [`javax.faces.convert`]

· Every piece of request that is passed from the client to the server is interpreted as a String value only. But when it on saving into database we need to convert it to particular data type that on table structure.

· In JSF , this becomes easy. By API javax.faces.convert.

<html:inputText identifier = "numberTextField">

<f:convertNumber pattern = "###,###">

</f:convertNumber>

</html:inputText>

In the above, we have a Number Converter which converts the number given by the user to the specified format. For example, if the original value entered by the user is 123456, then the after the conversion process the value becomes ’123,456′.

5. Events and Listeners

· JSF UI Event Mechanism is very similar to the one found in Swing UI Components

· In JSF, all the UI Components can emit any number of events.

EX:- <html:inputText

identifier = "submitButton"

value = "Click Me"

actionListener = "#{SomeBean.submitButtonClicked}"

</html:inputText>

In the above code, we can see that how a UI Component can be associated with an Event-Handler with the help of actionListener attribute. The code essentially says that whenever an ActionEvent is emitted by the button (which will happen usually when the user clicks the button or presses the Enter key over the button) call the Event Listener’s method submitButtonClicked inside the SomeBean class.

6. Navigation

· The Navigation Handler provides a simple yet a powerful framework for controlling the navigation.

EX:- For any single request page, there may be a number of response pages. Assuming that in a data-entry application, if the request page, say ‘enterdata.jsp’, is a view showing all the input controls to get data from the user, then the following responses may be available.

The user has entered all the data and the result is a ‘success’ so that a page called

‘success.jsp’ page is displayed
The user has entered a mix of correct and incorrect data in which case, the result or theresponse is a ‘partialsuccess’ and some jsp page called ‘partialsuccess.jsp’ is displayed.
The user hasn’t entered any correct values which means that result is a ‘failure’ whichresults in the display of a page called ‘failure.jsp’.

<navigation-rule>

<from-view-id>/dataentry/enterdata.jsp</from-view-id>

<navigation-case>

<from-outcome>success</from-outcome>

<to-view-id>/dataentry/success.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>partialsuccess</from-outcome>

<to-view-id>/dataentry/partialsuccess.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>failure</from-outcome>

<to-view-id>/dataentry/failure.jsp</to-view-id>

</navigation-case>

</navigation-rule>

About Me

Pages

Friday, 15 February 2013

Write your Queries in Comment box...

Thursday, 14 February 2013

1. Create JSF Project

2. Domain model

3. Controller

4. Register your managed beans

5. Create css

6. JavaServer Page with JSF components

Tip

7. Run your webapplication

Tip

1. Create JSF Project

2. Domain model

3. Controller

4. Register your managed beans- Dependency injection

5. Resource bundle for messages

6. JavaServer Page with JSF components

7. Run your webapplication

1. Create JSF Project

2. Domain model

Tip

Tip

3. Register your managed beans

4. Validators

5. Resource bundle for messages

6. JavaServer Page with JSF components

7. Navigation Rule

Tip

8. Run your webapplication

Tip

1. Eclipse

2. JSF library

3. JSLT library

Your first JSF project

1.1. Create JSF Project

1.2. Review the generated project

Tip

1.3. Domain Model

1.4. Define managed bean

1.5. Create JSP

Tip

1.6. Run your webapplication

1.7. Layout via css

1. User Interface Components [ javax.faces.component]

2. Managed Beans

3. Validator [javax.faces.validator]

4. Convertors [javax.faces.convert]

5. Events and Listeners

6. Navigation

Chat with us.

1. User Interface Components [ `javax.faces.component`]

3. Validator [`javax.faces.validator`]

4. Convertors [`javax.faces.convert`]