JSF – Hello World, Auto Complete

Hello, how are you?

Let us talk about a framework that is a precious helper as a web “front-end”: “JSF – Java Server Faces”.
We will see here a “Hello World” of JSF and in the end of this post, how to activate the Eclipse auto complete option. Notice that, except by the auto complete option, this tutorial can be done using just a notepad.
In case you have doubts about how to create a basic webserver you can check here: Creating a WebServer. There are others subjects here in this blog talking about webserver: Handling Exceptions on a WebApp, User Authentication (Filter/Servlet).

We need to start with some downloads:

Let us create a new Dynamic Web Project, adding Tomcat 6 as our server. If you have any doubts about how to install and configure the Tomcat, you can see a tutorial here: Creating a WebServer.

New Dynamic Project

We need to copy the “*.jar” files that we have downloaded from the internet to the folder “WebContent/WEB-INF/lib”. You will find the JSF Mojarra “*.jar” files at the path: “mojarra-2.0.3-FCS/lib”, inside the file you downloaded. After copy all the files, the folder must have these three files in lib folder: “jsf-api.jar”, “jsf-impl.jar” and “jstl-1.2.jar”.

Let us change the web.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    version="2.5">
    <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>*.jsf</url-pattern>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

We have to create the faces-config.xml, but we will not use it.

<?xml version="1.0"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
      http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
   version="2.0">
  <!--
      Let's keep it empty. In JSF 2.0 we use annotations.
  -->
</faces-config>

It is time to create a class that will work as our controller. In this class we will put a welcome message. In a complete company system this message could be the user name, some message from a database, etc. Our class should be created in a package named “com” and will have the word “Hello” as its name.

package com;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class Hello {

    private final String youAreWelcome = "You finished a simple hello world. Let's navigate?";

    public String getYouAreWelcome() {
        return youAreWelcome;
    }
}

As our last action before the first test, we need to create our welcome page named “index.xhtml”:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Hellow World JSF 2.0</title>
    </h:head>

    <h:body>
            <h:form>
                    <h:outputText value="#{hello.youAreWelcome}"/>
            </h:form>
    </h:body>
</html>

Pay attention to this: “Our page must be created inside WebContent folder”.

After adding our system to Tomcat, start it. To access our system we will use the link: http://localhost:8080/ProjectJSF/index.jsf. If you have any doubts about how to work with Tomcat Application, take a look at this link: Creating a WebServer. I’m doing this step by step while I am writing this tutorial, so if you did not see our first page without an error, go back and review your code.

Let us create some navigation in our system by doing a simple addition. To start with this change our Hello class will have three more fields to do the addition, another field will keep the user name.

package com;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class Hello {
    private String userName;
    private int valueA;
    private int valueB;
    private int total;

    private final String youAreWelcome = "You finished a simple hello world. Let's navigate?";

    public String getYouAreWelcome() {
        return youAreWelcome;
    }
    
    public String mathIt(){
        total = valueA + valueB;
        
        return "result.xhtml";
    }
    
    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public int getValueA() {
        return valueA;
    }

    public void setValueA(int valueA) {
        this.valueA = valueA;
    }

    public int getValueB() {
        return valueB;
    }

    public void setValueB(int valueB) {
        this.valueB = valueB;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public int getTotal() {
        return total;
    }    
}

We will need to change our “index.xhtml” file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Hellow World JSF 2.0</title>
    </h:head>

    <h:body>
            <h:form>
                <h:outputText value="#{hello.youAreWelcome}"/><br/>
                Your Name: <h:inputText id="userName" value="#{hello.userName}"/><br/>
                First Value: <h:inputText id="valueA" value="#{hello.valueA}"/><br/>
                Second Value: <h:inputText id="valueB" value="#{hello.valueB}"/><br/>
                  <h:commandButton value="Math It" title="Math It" action="#{hello.mathIt}"/>
            </h:form>
    </h:body>
</html>

The “result.xhtml” will be our last page to be created (it must be created in “WebContent” folder):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Hellow World JSF 2.0</title>
    </h:head>

    <h:body>
        <h:form>
            Thanks for passing by: <h:outputText value="#{hello.userName}"/><br/>
            Total: <h:outputText value="#{hello.total}"/>
        </h:form>
    </h:body>
</html>

Accessing again our system using the link http://localhost:8080/ProjectJSF/index.jsf we will see that our work is complete.

An Eclipse resource that helps us a lot is the text auto complete. When I was creating this post, I noticed that JSF uses the file type “*.xhtml” and the text auto complete did not work with this file type. I found tons of solutions on the internet that work for some people and did not to others. I found a very simple solution that worked on each different computer that I tested. Right button click on the project and go to: “Properties > Project Facets”:Project properties Project Facetes Check the option “JavaServer Faces”, and it is done. Go to the “index” or “result” file and you will see the auto complete working. Project Facetes Autocompletar
In some future posts about JSF we will be talking about Ajax, validations, PrimeFaces, etc. This subject is huge.

I hope this post might help you.

If you want to comment or to ask about anything just post it.

See you later.

2 thoughts on “JSF – Hello World, Auto Complete

  1. Hi,
    I am using JSF 1.2 and Eclipse HELIOS. I am trying to get auto completion for bean in xhtml. I implemented your suggestion mentioned in the post, still it’s not working. Can you please help?

Leave a Comment