Adiós JSP ... bienvenido JavaServer Faces

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>

Comentarios

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.

Tipo wicket

Se me hizo muy similar a Wicket, yo había visto otra versión de JSF al parecer, porqué el ejemplo tiene algunas cosas que cambiaron respecto a lo que comento. Pues que bueno que te resulto útil y te gustó, en mi caso de necesitar usar componentes me pasaría a Wicket; pero si quisiera algo más vistozo me iría a Vaadin.

JSF, tiene una ventaja, podemos decir que es el framework por defecto, por tanto por retrocompatibilidad no hay que preocuparnos (si en este framework Sun/Oracle se toma tan enserio lo de retrocompatibilidad cómo con Java, es un punto a favor). Algo que no me gusta en parte de estos frameworks es que usan la filosofía o técnica stateful, y pues, si está chido; pero, la web no tiene esa filosofía. La web es stateless, tu envías una petición y se te responde; y ninguna petición está ligada con otra.

En fin, esto del mundo Java tiene cosas interesantes, aunque también algo raras y que a veces te hacen cambiar la manera de pensar y de cómo funcionan las cosas (en este ejemplo, la web).

Imagen de Sr. Negativo

Wicket y Vaadin

wishmaster77
Se ven interesantes (sobre todo Vaadin).

Espero continuar con este tema (y no como con JAXB que ya me aburrio).

Imagen de Sr. Negativo

Vaadin

Hay un post de @ezamudio sobre Vaadin

Plugin para nuestro ide favorito Eclipse: https://vaadin.com/eclipse

Además de un demo http://demo.vaadin.com/visualdesigner-nightly muy bueno

Imagen de cerimice

Pues......

He usado Wicket un poco y usado Vaadin otro poco 8( y la verdad me quedo con Vaadin es mas sencillo y la forma de manejar eventos es genial, lo recomiendo cuando ya sabes un poco de buenas practicas, de lo contrario puedes caer en los errores clásicos.

Imagen de javamx

bien (Y) sr negativo

por cierto Vaadin parece que su cabeza lo utlizaron de adorno navideño jxD jaja bueno em a esto esta basado para que el desarrollador pueda realizar mas rapido las cosas y aproveche las herramientas proporcionadas por el framework (Y) saludos a todoos :-).

Re: Wicket y Vaadin

Espero continuar con este tema (y no como con JAXB que ya me aburrio).

Este ha sido uno de mis grandes problemas en Java, veo cosas que me parecen ser lo mejor de lo mejor, veo demos, hago algunos ejemplos y al usarlas ya de manera más pro, no son lo que uno espera (principalmente porqué, en Java por muy mínima, cuando quieres ir al siguiente nivel, configuración si o si. Un ejemplo es Ant, cuando empiezas es cool y simple, pero entre más avanzas más configuración requieres; lo mismo aplica para Maven, me faltaría probar algo de Gradle).

Con lo de continuar con un tema, mi recomendación (muy personal, subjetiva e inclusive capaz de ser errónea) es no continuar hasta que ya veas que te gusta...o hasta que te obliguen a usarlo en la chamba xD. Porqué si no hay motivación ya sea personal o monetaria, desde mi punto de vista no tiene caso aprender, a no ser que sean bases para algo, ej. Yo quiero aprender a desarrollar videojuegos, por tanto, si en verdad lo que quiero es aprender a desarrollar videojuegos, pues, necesito saber algo de física; porque aunque existen motores (físicos, precisamente) que nos ahorran un montón de cosas, si no sabes lo que estás a punto de hacer, por mucho que sepas usar el motor, no te va a quedar como desearías.

Así que, en conclusión, si la herramienta a aprender no te motiva y en el trabajo no te obligan a usar algo; pues nada, a buscar otra cosa que si te llame, será más fácil y satisfactorio aprenderlo.

Re: Vaadin

Si, de hecho por ese post de @ezamudio supe de la existencia de Vaadin, parece que olvidé mencionarlo. Lo único que si, es que para entender ese post hay que haber visto cuando menos la documentación del framework de lo contrario te quedas de a "?". Y eso es lo que me gusta de los posts de @ezamudio, te obliga a tener que dar un vistazo al menos para que tengas una idea.

Imagen de Sr. Negativo

Re:Re:Vaadin


... en conclusión, si la herramienta a aprender no te motiva y en el trabajo no te obligan a usar algo; pues nada, a buscar otra cosa que si te llame, será más fácil y satisfactorio aprenderlo.

Tienes razón wishmaster77

JSF iniciando con problemas

Saludos. esto va dirigido a quien pueda dar una orientación.

Me intereso la programación web con JSF, he seguido 3 tutos distintos y siempre llego al mismo hueco, estoy usando Netbeans 7, he hecho un ejemplo muy básico de java server faces don de recopilo un nombre lo mando a otra pagina y muestro una bienvenida. al compilar no hay ningún error pero al visualizar la pagina en el browser muestra las variables facelets no el valor en si

Muestra:
#{msj.cabezal}
#{msj.dar_nombre}

Cuando debiera Mostrar:
Tutorial JSF
Por favor introduce tu nombre:

Igual y no estoy colocando suficiente información pero no tengo idea de que mas poner para facilitar un diagnostico pero si alguien puede espero su ayuda.

Gracias de antemano.

Imagen de Sr. Negativo

JSF: ayuda

Tal vez un ejemplo te pueda servir:

1. Crear el bean
UsuarioBean.java

package mis_faces;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class UsuarioBean {
   
    private String nombre;

    /** Creates a new instance of UsuarioBean */
    public UsuarioBean() {
    }

    /**
     * @return the nombre
     */

    public String getNombre() {
        return nombre;
    }

    /**
     * @param nombre the nombre to set
     */

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }
   
   
}

2. Página para enviar datos
index.xhtml

<h1><h:outputText value="Introduce tus datos"/></h1>
           
            <h:form id="helloForm">
      <h:outputText value="Introduce tu nombre"/>
      <h:inputText value="#{UsuarioBean.nombre}"/>
     

      <h:commandButton action="saludo" value="Enviar" />
     </h:form>

3. Página que recibe los datos
saludos.xhtml

<h1><h:outputText value="Datos recibidos"/></h1>
            <h3>
         <h:outputText value="Bienvenido" />,
         <h:outputText value="#{UsuarioBean.nombre}" />
         <h:outputText value="!" />

4. 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">

<navigation...</a>   <from-view-id>/welcomeJSF.jsp</from-view-id>
    <navigation-case>
     <from-outcome>saludo</from-outcome>
     <to-view-id>/saludos.xhtml</to-view-id>
   </navigation-case>
  </navigation-rule>
  <managed-bean>
    <managed-bean-name>UsuarioBean</managed-bean-name>
    <managed-bean-class>mis_faces.UsuarioBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>
</faces-config>

5. El web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.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-app_3_0.xsd">
" title="http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
">http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
</a>    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

Excelente Sr. Negativo seguiré este ejemplo

Gracias voy a realizar el ejemplo que propones, solo una duda, al elegir el framework de JavaServer Faces se debe usar ¿ JSF 1.2 ó 2.1 ? yo en el ejemplo que seguí en un principio use 1.2 y veo algunas diferencias con el código que colocas.

Me autoconteste probando

Bueno hice el ejemplo propuesto pero ahora eligiendo el Framework JavaServer Face versión 2.1 y veo que ya hay comunicación entre las paginas y si muestra el valor de las facelets muchas gracias por la propuesta Sr. Negativo ahora podre seguir investigando el tema de JSF, por aquí seguiré dando lata en otras ocasiones.