Andrej Koelewijn

March 21, 2004

Getting started with JSF (on oc4j)

Step 1: Hello World!

Download and unzip oc4j 10.0.3 release 2. Install oc4j as described in the readme.

Download and unzip JSF 1.0.

Create new java project called jsf-test-1. I used eclipse. In the project properties i specified that i wanted the java sources under src and the compiled classes in web/WEB-INF/classes.

Create web/WEB-INF/web.xml

<?xml version="1.0"?>
<web-app>
  <display-name>JSF test 1</display-name>
  <servlet>
	<servlet-name>Faces Servlet</servlet-name>
	<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
	<load-on-startup> 1 </load-on-startup>
  </servlet>
  <servlet-mapping>
	<servlet-name>Faces Servlet</servlet-name>
	<url-pattern>*.faces</url-pattern>
  </servlet-mapping>
</web-app>

Add the project path to /config/application.xml (replace the value for path with something relevant)\

<web-module id="jsf-test-1" path="../../../../../projects/jsf-test-1/web"/>

Define the web application in /config/http-web-site.xml

<web-app application="default" name="jsf-test-1" root="/jsf-test-1" development="true"/>

Copy jsf libraries from /lib into /web/WEB-INF/lib

  1. jsf-api.jar
  2. jsf-impl.jar
  3. commons-beanutils.jar
  4. commons-collections.jar
  5. commons-digester.jar
  6. commons-logging.jar

Create /web/WEB-INF/faces-config.xml

<?xml version="1.0"?>
<faces-config>
  <application>
	<message-bundle>jsftest1.Messages</message-bundle>
	<locale-config>
	  <default-locale>en</default-locale>
	</locale-config>
  </application>
</faces-config>

Create /src/jsftest1/Messages.properties

helloWorld=Hello World!

Create /web/index.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<?xml version="1.0"?>
<html>
  <body>
    <f:loadBundle basename="jsftest1.Messages" var="bundle"/>
    <f:view>
      <h:outputText value="#{bundle.helloWorld}"/>
    </f:view>
  </body>
</html>
Step 2: a registration form

  1. Add a link to a registration page in /web/index.jsp

    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
  <body>
    <f:loadBundle basename="jsftest1.Messages" var="bundle"/>
    <f:view>
      <h1><h:outputText value="#{bundle.helloWorld}"/></h1>
      Welcome: <h:outputText value="#{registerBean.firstName}"/>
      <h:outputText value="#{registerBean.lastName}"/> <br/>
      <h:form id="indexForm">
        <h:commandLink id="link1" action="register"><h:outputText value="#{bundle.register}"/></h:commandLink>
      </h:form>
    </f:view>
  </body>
</html>

  2. Modify /web/WEB-INF/faces-config.xml

    <?xml version="1.0"?>
<faces-config>
  <application>
    <message-bundle>jsftest1.Messages</message-bundle>
    <locale-config>
      <default-locale>en</default-locale>
    </locale-config>
  </application>
  <managed-bean>
    <managed-bean-name>registerBean</managed-bean-name>
    <managed-bean-class>jsftest1.RegisterBean</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
  </managed-bean>
  <navigation-rule>
    <from-view-id>/register.jsp</from-view-id>
    <navigation-case>
      <from-outcome>success</from-outcome>
      <to-view-id>/index.jsp</to-view-id>
    </navigation-case>
    <navigation-case>
      <from-outcome>failure</from-outcome>
      <to-view-id>/register.jsp</to-view-id>
    </navigation-case>
  </navigation-rule>
  <navigation-rule>
    <from-view-id>/index.jsp</from-view-id>
    <navigation-case>
      <from-outcome>register</from-outcome>
      <to-view-id>/register.jsp</to-view-id>
    </navigation-case>
  </navigation-rule>
</faces-config>

  3. Modify /src/jsftest1/Messages.properties

    helloWorld=Hello World!register=RegisterfirstName=First NamelastName=Last Name

  4. Create /web/register.jsp

    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
  <body>
    <f:loadBundle basename="jsftest1.Messages" var="bundle"/>
    <f:view>
      <h1>
        <h:outputText value="#{bundle.register}"/>
      </h1>
      <h:form id="registrationForm">
        <h:panelGrid columns="2">
          <h:outputLabel for="firstName">
            <h:outputText value="#{bundle.firstName}"/>
          </h:outputLabel>
          <h:inputText id="firstName" value="#{registerBean.firstName}"/>
          <h:outputLabel for="lastName">
            <h:outputText value="#{bundle.lastName}"/>
          </h:outputLabel>
          <h:inputText id="lastName" value="#{registerBean.lastName}"/>
          <h:commandButton action="#{registerBean.registerAction}" value="#{bundle.register}"/>
        </h:panelGrid>
      </h:form>
    </f:view>
  </body>
</html>

    Note: due to a bug in JSF, we need to add the panelGrid tag, otherwise the outputLabel tag does not work.\

  5. Create class RegisterBean:

    package jsftest1;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

/**
 * @author akoelewijn
 */
public class RegisterBean {
    protected static final Log log = LogFactory.getLog(RegisterBean.class);
    String firstName = null;
    String lastName = null;

    /**
     * @return Returns the firstName.
     */
    public String getFirstName() {
        return firstName;
    }

    /**
     * @param firstName * The firstName to set.
     */
    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    /**
     * @return Returns the lastName.
     */
    public String getLastName() {
        return lastName;
    }

    /**
     * @param lastName * The lastName to set.
     */
    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String registerAction() {
        log.info("registerAction");
        if (firstName != null && !firstName.equals("") && lastName != null && !lastName.equals("")) {
            return "success";
        } else {
            return "failure";
        }
    }
}
Step 3: simple validation

  1. JSF has some predefined tags to do simple validations. Modify register.jsp

    <?xml version="1.0"?>
<h:form id="registrationForm">
  <h:panelGrid columns="3">
    <h:outputLabel for="firstName">
      <h:outputText value="#{bundle.firstName}"/>
    </h:outputLabel>
    <h:inputText id="firstName" value="#{registerBean.firstName}">
      <f:validateLength minimum="1"/>
    </h:inputText>
    <h:message for="firstName"/>
    <h:outputLabel for="lastName">
      <h:outputText value="#{bundle.lastName}"/>
    </h:outputLabel>
    <h:inputText id="lastName" value="#{registerBean.lastName}">
      <f:validateLength minimum="1"/>
    </h:inputText>
    <h:message for="lastName"/>
    <h:commandButton action="#{registerBean.registerAction}" value="#{bundle.register}"/>
  </h:panelGrid>
</h:form>
Step 4:  custom validation

  1. Modify  /web/WEB-INF/faces-config.xml 

    ...
</application>
<validator>
  <validator-id>registerValidator</validator-id>
  <validator-class>jsftest1.RegisterValidator</validator-class>
</validator>
<managed-bean>
...

  2. Add class RegisterValidation 

    package jsftest1;

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;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

/**
 * @author akoelewijn
 */
public class RegisterValidator implements Validator {
    protected static final Log log = LogFactory.getLog(RegisterValidator.class);

    public void validate(FacesContext _context, UIComponent _component, Object _value) throws ValidatorException {
        log.info("validate: " + _component.getId() + ", " + _value);
        if (_component.getId().equals("firstName")) {
            if (!_value.equals("andrej")) {
                throw new ValidatorException(new FacesMessage("Incorrect value for first name"));
            }
        } else if (_component.getId().equals("lastName")) {
            if (!_value.equals("koelewijn")) {
                throw new ValidatorException(new FacesMessage("Incorrect value for last name"));
            }
        }
    }
}

  3. Modify /web/register.jsp 

    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
  <body>
    <f:loadBundle basename="jsftest1.Messages" var="bundle"/>
    <f:view>
      <h1>
        <h:outputText value="#{bundle.register}"/>
      </h1>
      <h:form id="registrationForm">
        <h:panelGrid columns="3">
          <h:outputLabel for="firstName">
            <h:outputText value="#{bundle.firstName}"/>
          </h:outputLabel>
          <h:inputText id="firstName" value="#{registerBean.firstName}">
            <f:validateLength minimum="1"/>
            <f:validator validatorId="registerValidator"/>
          </h:inputText>
          <h:message for="firstName"/>
          <h:outputLabel for="lastName">
            <h:outputText value="#{bundle.lastName}"/>
          </h:outputLabel>
          <h:inputText id="lastName" value="#{registerBean.lastName}">
            <f:validateLength minimum="1"/>
            <f:validator validatorId="registerValidator"/>
          </h:inputText>
          <h:message for="lastName"/>
          <h:commandButton action="#{registerBean.registerAction}" value="#{bundle.register}"/>
        </h:panelGrid>
      </h:form>
    </f:view>
  </body>
</html>

Related

blog comments powered by Disqus