Andrej Koelewijn

3/21/2004

Getting started with JSF (on oc4j)

Filed under: — andrejk @ 2:54 pm

Step 1: Hello World!



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

  2. Download and unzip JSF 1.0.

  3. 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.

  4. Create <PROJECT_HOME>web/WEB-INF/web.xml

    <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>


  5. Add the project path to
    <OC4J_HOME>/config/application.xml (replace the value for path
    with something relevant)

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


  6. Define the web application in
    <OC4J_HOME>/config/http-web-site.xml

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


  7. Copy jsf libraries from <JSF_HOME>/lib into
    <PROJECT_HOME>/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


  8. Create <PROJECT_HOME>/web/WEB-INF/faces-config.xml


    9. <faces-config>

     <application>
     <message-bundle>jsftest1.Messages</message-bundle>
     <locale-config>
     <default-locale>en</default-locale>
     </locale-config>
     </application>
     
    </faces-config>

  9. Create <PROJECT_HOME>/src/jsftest1/Messages.properties

    helloWorld=Hello World!


  10. Create <PROJECT_HOME>/web/index.jsp

    11. <%@ 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>
     
     <h:outputText value="#{bundle.helloWorld}" />
     
     </f:view>
     </body>
    </html>


Step 2: a registration form



  1. Add a link to a registration page in
    <PROJECT_HOME>/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 <PROJECT_HOME>/web/WEB-INF/faces-config.xml
    <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 <PROJECT_HOME>/src/jsftest1/Messages.properties 

    helloWorld=Hello World!
    register=Register
    firstName=First Name
    lastName=Last Name
style="font-family: sans-serif;">


  4. Create
    <PROJECT_HOME>/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
     <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  <PROJECT_HOME>/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 <PROJECT_HOME>/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>






Powered by WordPress