JSF Basics | First JSF Application

JSF Basics – Your First JSF Application

What if you wanted to start the creation of an application by creating a simple login page? A login page takes the
user to a welcome page if authorized, or returns them to the login page when providing an incorrect correct login.
How would that work in JSF (assuming a typical HTML rendered Web application)?

Standard JSP pages are used to display a login form, gather the username and password, and display appropriate
responses. The JSP pages use the two JSF tag libraries: core and HTML. There are 43 tags in these 2 tag libraries.

login.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<f:view>
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>Login Page</title>
     </head>
     <body>
         <h1>Please Login</h1><br>
         <h:form>
             <h:panelGrid columns="2">
                 <h:outputText value="Name:"/>
                 <h:inputText id="name" value="#{user.name}"
                required="true"/>
                 <h:outputText value="Password:"/>
                 <h:inputSecret id="password" value="#{user.password}"
                      required="true"/>
             </h:panelGrid>
             <h:commandButton value="Login"
                      action="#{user.authenticate}"/>
             <h:outputText value="#{user.error}"/>
         </h:form>
     </body>
</f:view>
</html>

welcome.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<f:view>
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>Welcome</title>
     </head>
     <body>
         Welcome to our world <h:outputText value="#{user.name}"/>!<br>
         There will soon be more here to come...
     </body>
</f:view>
</html>

By convention, use h and f as prefixes for the HTML and core (f for Faces) tags as shown here. The HTML tags
provide components to use in your pages. For example, h:inputText, h:inputSecret, h:commandButton create an
input text field, password text field and submit button user interface components. The core tags generally provide
objects to add to the components. Listeners, data converters and validators are examples of things that can be added
to components.

The #{} references, like #{user.name}, are JSF expression language (EL). Except for the delimiters (#{} vs. ${}) JSF
EL is syntactically the same as JSP 2.0 EL. In this example, the expression #{user.name} is a JSF value binding
expression. It evaluates to a bean property. In this example, the expression maps to the LoginBean’s name
property (below). How is the expression bound to a property of an instance of LoginBean? It is in the
configuration, which you examine in a bit. Unlike JSP tags, JSF EL can be evaluated and processed both when the
form is submitted and when the response is displayed (again, more on this later).

A simple JavaBean is used to manage the user data and react to user input. They are called managed beans in JSF.

LoginBean.java

package com.intertech.domain.beans;

public class LoginBean {
  private String name;
  private String password;
  private String error=null;

  public LoginBean() {}

  public LoginBean(String name, String password){
      this.setName(name);
      this.setPassword(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 getError() {
      return error;
  }
  public void setError(String error) {
      this.error = error;
  }

  public String authenticate() {
      if (getName().startsWith("Jim")) {
          setError("Sorry, no Jims are allowed");
          return null;
      } else {
          setError(null);
          return "authenticated";
      }
  }
}

And you are done!  Well, almost. The real power of JSF applications lies in the JSF provided framework
components and the configuration files that rule them. Before examining the configuration and how the view is
hooked up to the backend beans, take note…neither references the other directly!! LoginBean contains no
information about the view elements and the JSPs contain no reference to LoginBean. The separation of view and
model is absolute!

Ok, so you are not quite done.  You need to understand:
      -        How to set up JSF’s controlling servlet?
      -        What the controller servlet does with the JSP requests?
      -        How is data given to the model and how are actions in the model invoked?
      -        How to give the controller navigation rules among pages?

Table of Contents

Copyright (c) 2008. Intertech, Inc. All Rights Reserved. This information is to be used exclusively as an
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.