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:

Add facet

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:

Mapping managed bean

Creating JSPs

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

Creating jsp from template

The palette helps us to create the JSPs:

Eclipse elements palette

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:

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

Navigation rules

Test

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

Testing application

One thought on “Creating a basic JSF View: Hello World!!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>