Creando una vista básica de JSF: Hello World!!

Veíamos en un post anterior como crear un proyecto básico para Weblogic. A partir de este vamos a crear una vista muy básica con JSF.

JSF tiene varias ventajas:

Cross browsing limpio: nos permite abstraernos de javascript y los estilos, y las peculiaridades de cada navegador
Encapsula en componentes la vista
Es xml de forma que es editable siempre
Basado en estándares = XHTML + JavaScript + JSP + Java (JEE5+)
Algunas librerías (oracle-ADF, richfaces, icefaces) permiten el desarrollo de Rich Inernet Applications

Como se describía en la especificación técnica las vistas se van a realizar con JSF 1.2, implementación de Oracle. En las propiedades del proyecto añadimos este Facet:

Managed Bean

Este objeto es el que se va a mapear en nuestros JSPs y va a alojar los datos en el servidor en todo momento. Por eso yo lo voy a clasificar como objeto de vista:

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

Este Bean hay que mapearlo en el faces-config.xml:

Creando las JSPs

Creamos una nueva página JSP/JSF utilizando la plantilla “New JSF page (html)”:

Con ayuda de la paleta que provee Eclipse, creamos los JSPs:

Creamos el formulario del nombre, petición, 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>

La respuesta, 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>

Reglas de navegación

Creamos la regla de navegación en el faces-config.xml:

Seleccionamos la subpestaña Navigation Rules del fichero
Con ayuda de la paleta creamos el diagrama de navegación
En el Link ponemos el literal que va ha hacer cumplir la regla “saludar”, en el action de saludame.jsp.

Prueba

Lo desplegamos en nuestro Weblogic, y sobre la dirección http://localhost:7001/wsc/faces/saludame.jsp , obtenemos el resultado:

Creando una vista básica de JSF: Hello World!!

Managed Bean

Creando las JSPs

Reglas de navegación

Prueba

One thought on “Creando una vista básica de JSF: Hello World!!”

Leave a Reply