domingo, 18 de diciembre de 2011

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>

No hay comentarios:

Publicar un comentario

Vibe Coding (la programación vía IA): ¿el futuro de la programación?

Vibe Coding es un nuevo paradigma de programación, una nueva forma de crear código. Es un enfoque emergente en el desarrollo de sof...

Etiquetas

Archivo del blog