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"%>




Insert title here



    
    Soy: 
        
    

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"%>




Insert title here

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.

Prueba

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

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"%>




Insert title here



    
    Soy: 
        
    

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"%>




Insert title here



    

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.

Test

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

Normalmente en todos los proyectos web, queremos que todas las páginas tengan una apariencia coherente en todo nuestro sitio, para mejorar la usabilidad. Lo más habitual en web es poner como parte fija la cabecera (con el login por ejemplo), un menú en la parte superior o lateral, y un pié:

• Y que estas partes (que forman la plantilla) se incluyan en todas las páginas que desarrollemos sin necesidad de volver a repetir todo.
• Que cualquier modificación sobre la plantilla se refleje automaticamente en todo nuestro sitio, sin tocar el resto.
• Y, si es posible, en mi editor WYSIWYG se vea todo (esto en Eclipse no es posible de momento).

En el proyecto ViewController New > Web Tier > JSF Page Template, creamos /WEB-INF/templates/template.jspx:

• Escogeremos una plantilla de cabecera y pié fijas
• Selecionaremos "Create ADFm Page Definition" para definir un objeto que maneje la plantilla después.
• Añadimos un facet llamado content donde introduciremos las páginas que desarrollemos después.
•  Añadimos un atributo pageTitle para pasarle desde nuestras páginas el título de las mismas.

Nos genera un fichero llamado trinidad-config.xml donde podremos cambiar la configuación del skin, de fusion a blafplus-rich por ejemplo. Con ADF podemos crear nuestras propias skins (apariencia an español), no es inmediato y siempre conviene contar con las habilidades de un diseñador web. No obstante trae una serie de skins por defecto que pueden ser suficientes para ti:

• simple: formato mínimo y muy ligero
• blafplus-medium: modestamente cargado.
• blafplus-rich: extiende el blafplus-medium, le da mejor apariencia con cosas como esquinas redondeadas.
• fusion: este es el actual por defecto, rico y moderno.
• fusion-projector: para mostrar demos a través de viejos proyectores.

Poner logos y títulos en la cabecera, y el copyright en el pié es muy intuitivo gracias a la paleta de componentes. Para poner el menú igual: primero añadir un Panel Menu Bar, luego un menu, y por ultimo los items de  menú.

Vamos a crear un menú Help > About con la ayuda del componente PopUp que se puede asociar a un item de menu. Dentro de él incluimos el componente Dialog, que nos crea una pequeña ventana ok/cancel, que debemos rellenar con un OutputText. Ahora en el menuItem About, desde la paleta Operations le añadimos un "Show Popup Behaviour" al que informamos con el identificador del popup que queremos abrir aboutPopup. Para probar la plantilla tenemos que crear una New > Web Tier >JSF Page (templateTest.jspx) eligiendo como plantilla la que hemos creado.

Y lo probamos con botón derecho > Run, arrancará Weblogic e iniciara tu navegador para ver el resultado: