MyFaces – Introduction to JSF

JSF Implementations

UI-Component Sets

Add-ons and Extensions

Project Documentation

Foundation

Introduction to JSF

NOTE: See the updated documentation in our Confluence Wiki

JavaServer™ Faces is the well-established standard for web-development frameworks in Java. The standard is based on the MVC paradigm, but is additionally to most web-frameworks also component-based and event-oriented.

In the following, we'll take you through a short guided tour of a JSF example and we will discuss what code you need to build a first JSF application.

In JSF, the first step to build web-applications is to create a page-structure by arranging JSF components in a tree. For defining this page-structure, different templating languages can be used. In the standard, JSP is used, other options include XML based templating languages like Shale Clay or Facelets.

A very short example for a typical JSF-view would be the following:

<html>
    <head>
    </head>
    <body>
        <f:view>
            <h:form id="mainForm">
                <h:outputLabel for="enterName" value="Enter Name"/>
                <h:inputText id="enterName" value="#{sayHelloPage.name}"/>
                <h:commandButton value="Say Hello" action="#{sayHelloPage.sayHello}"/>
            </h:form>
        </f:view>
    </body>
</html>

This example shows the basic setup of a typical JSF-page: an <f:view/>-tag is the root-component of the JSF page. Next, you will want to put a form-component into the tree right after this root-component (in JSF, all input and command-components need a form wrapped around them, also the commandLink-component, so the form should be opened very early).

The important part of the page starts then: the page structure consists of a label-component, a data-entry component and a button to submit the changes caused by the user.

The next step in building a JSF-application is to wire up these components with the backing-beans. This wiring is done using the expression-language of JSF, the Unified EL (this EL is also used in the JSP templating technology). EL-expressions usually refer to Java-bean instances defined in a JSF configuration file, the faces-config.xml.

The EL-expression #sayHelloPage.name would refer to the property "name" of the managed-bean "sayHelloPage". To be able to refer to this managed bean, you would need to add the following section to your configuration-file (found under /WEB-INF/) faces-config.xml:

<managed-bean>
    <managed-bean-name>sayHelloPage</managed-bean-name>
    <managed-bean-class>demo.SayHelloPage</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

Finally, for completing the first page of your JSF-application, you would need to write a Java-class like the following:

public class SayHelloPage {
    private String name;

    public void setName(String name) { this.name = name; }
    public String getName() { return name }

    public String sayHello() {
        return "success";
    }

}

JSF managed-beans are POJOs - you do not have to inherit from any special base-classes, just provide a public no-argument constructor, add your properties and you are ready to go. The method sayHello in the above class is (in the page template) bound to the command-button "Say Hello" via the action attribute of this button. On every click on the command-button, this method will be executed (it is the event-listener for the click on the button), it is an action method. From this method, you can return a string - the string returned from an action-method will then be used by the JSF navigation system to determine to what page the JSF-engine needs to move on.

<navigation-rule>
    <from-view-id>/page1.jsp</from-view-id>
    <navigation-case>
        <from-outcome>success</from-outcome>
        <to-view-id>/page2.jsp</to-view-id>
    </navigation-case>
</navigation-rule>

In the configuration snippet above, the navigation-system of JSF is configured to jump from page1 to page2, if the outcome success is returned from the action-method.

Look at Sun's JSF Page to learn more about the Java Specification Request 314 (JSF 2.0) and to download the specification. You can also find a useful Tutorial there.