Creating a basic JSF View: Hello World!!

In a previous project we saw how to create a Weblogic basic web project. Based on this we will create a very basic view with JSF.

JSF has some advantages:

Clean Cross browsing: we can forget styles and javascript, and navigator sigularities.
Encapsulates the view components
It is XML, then is text, then is always editable.
Standards based = XHTML + JavaScript + JSP + Java (JEE5+)
Some libraries (oracle-ADF, richfaces, icefaces) allow Rich Inernet Applications development.

How described technical espec we will make the views with JSF 1.2, Oracle implementation. We can add this facet in the project properties:

Managed Bean

This object will map our JSPs and will store the server data in the session. Then I will put as view object:

package view;
 
public class HelloBean {
    private String nombre = null;
 
    public String getSaludo() {
        return "Hola, "+nombre;
    }
 
    public String getNombre() {
        return nombre;
    }
 
    public void setNombre(String nombre) {
        this.nombre = nombre;
    }
}

We must map this bean in faces-config.xml:

Creating JSPs

We will create a JSP/JSF page using “New JSF page (html)” template:

The palette helps us to create the JSPs:

We will create a name request form, saludame.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<f:view>
    <h:form id="formSaludame">
    Soy: <h:inputText id="nombre" value="#{helloBean.nombre}"></h:inputText>
        <h:commandButton id="saludame" action="saludar" value="Saludame"></h:commandButton>
    </h:form>
</f:view>
</body>
</html>

The response, saludo.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<f:view>
    <h:outputText value="#{helloBean.saludo}"></h:outputText>
</f:view>
</body>
</html>

Navigation rules

We will create the navigation rule in faces-config.xml:

Select Navigation Rules tab in the file
The palete helps us to create the navigation diagram
In the link write the literal that fulfil the rule, in the action of saludame.jsp.

Test

Deploy your Weblogic, and in the address http://localhost:7001/wsc/faces/saludame.jsp , we take the following result:

Managed Bean

Creating JSPs

Navigation rules

Test

Leave a Reply