JavaServer Faces: ejemplos básicos

JavaServer Faces

Es una framework (ya tiene varios años que apareció) que nos permite crear aplicaciones web muy parecidas a las de escritorio. JSF trabaja en base a eventos (algo parecido a Swing), mientras que JSP en base a petición(es)/respuesta(s).
Existen otras variantes como:

1. RichFaces
2. PrimeFaces
3. OpenFaces
4. IceFaces
5. MyFaces

Enlaces

OpenFaces
http://openfaces.org/documentation/developersGuide/index.html
http://openfaces.org/demo/overview/homepage.jsf
RichFaces
http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html_single/
http://livedemo.exadel.com/richfaces-demo/index.jsp
PrimeFaces
http://www.primefaces.org/documentation.html
http://www.primefaces.org/showcase/ui/home.jsf
IceFaces
http://www.icefaces.org/main/resources/
http://www.icefaces.org/main/demos/
MyFaces
http://myfaces.apache.org/docindex.html
Cada una de ellas con diversos componentes muy útiles. Hace algunos meses decidi dejar de usar JSP y probar JSF. No me arrepiento. Creo que ahora escribo código más limpio y legible.

EL: Expression Language

Es un lenguaje especial que nos permite acceder directamente a las propiedades o métodos de los beans desde el código de las páginas (jsp y/o xhtml).
Ejemplo

<h3>
#{"Este es un ejemplo"}</h3>

La salida seria:

Este es un ejemplo

Otro ejemplo

23+64= #{23+65}

La salida seria: 23+64=87
En fin, se pueden realizar todas las operaciones aritméticas y lógicas al igual que en JSP.

ManagedBean

Algo parecido a los Servlets, es una clase java que recibe peticiones y procesa resultados de las páginas web.

Faces config

Es un documento xml en el cual defines los beans de tu aplicación. También defines las "reglas de navegación"entre tus páginas . Es importante tenerlo para saber que página debe mostrarse de acuerdo al suceso/evento que la invoca.
Bueno, ahora un ejemplo sencillo.
1. Crear una aplicación que genere un número aleatorio, y que el usuario trate de adivinarlo.
Primero creo el Bean

 /*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package org.primefaces.ejemplos; import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.util.Random;
/**
 *
 *  */
@ManagedBean
@RequestScoped
public class RandomBean {
    private int numero;
 
 
     /** Creates a new instance of RandomBean */
    public RandomBean() {
    }
    /**
     * @return the numero
     */
    public int getNumero() {
        return numero;
    }
    /**
     * @param numero the numero to set
     */
    public void setNumero(int numero) {
        this.numero = numero;
    }
 
     public String ir_calculo(){
      return "calculo02";
    }
 
     public int obtenerNumero(){
      return (int)(Math.random()*100);
     }
 
 
 
}

Ahora el formulario entrada.xhtml

 <h2>Generar número aleatorio</h2>
<h:form>
    <h:panelGrid>
 
        <h:outputLabel value="#{msgs.titulo4}"></h:outputLabel>
        <h:inputText value="#{randomBean.numero}"></h:inputText>
       <h:commandButton action="#{randomBean.ir_calculo()}" value="adivinar" />
    </h:panelGrid>
 
 
</h:form>    

Aqui se muestran los valores datos.xhtml

 <h2>Datos obtenidos</h2>
<h:form>
    <h:panelGrid>
        <h:outputLabel value="#{msgs.titulo5}"></h:outputLabel>
        <h:outputLabel value="#{randomBean.numero}"></h:outputLabel>
        <h:outputLabel value="#{msgs.titulo6}"></h:outputLabel>
        <h:outputText value="#{randomBean.obtenerNumero()}"></h:outputText>
     
        <!-- aqui hago la comparación-->
   
      <h:outputLabel value="#{msgs.titulo7}"></h:outputLabel>
         <h:outputLabel value="#{randomBean.numero==randomBean.obtenerNumero() ?'Correcto':'Incorrecto'}">
              </h:outputLabel>
     
   
   
    </h:panelGrid>
</h:form>
     
     
    <h:outputLink value="http://localhost:8080/pruebaPrimeFaces/faces/index.xhtml"><h:outputText value="Regreso"/></h:outputLink>

El faces-config.xml

<?xml version='1.0' encoding='UTF-8'?> <!-- =========== FULL CONFIGURATION FILE ================================== -->
<faces-config version="2.0"
   xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee <a href="http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
<navigation-rule>
" title="http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
<navigation-rule>
">http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
<navigatio...</a>        <from-view-id>*</from-view-id>
        <navigation-case>
            <from-outcome>calculo02</from-outcome>
            <to-view-id>/datos.xhtml</to-view-id>
        </navigation-case>
        </navigation-rule>
<managed-bean>
        <managed-bean-name>RandomBean</managed-bean-name>
        <managed-bean-class>org.primefaces.ejemplos.RandomBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
</faces-config>