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:

Add 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:

Mapping managed bean

Creando las JSPs

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

Creating jsp from template

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

Eclipse elements palette

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:

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

Navigation rules

Prueba

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

Testing application

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>