Lunes, 14 Julio 2014 20:04

Navegacion con JSF - ejemplo

Escrito por 
Valora este artículo
(0 votos)

Para comprender mejor JSF, ahora hare otro ejemplo, para tratar de entender la navegacion con este framework para aplicaciones web java,  lo que hare esta vez es que al presionar el botón nos redireccione a otra pagina mostrando un mensaje y  validando la entrada en la pagina index.xhtml.

Para una mejor compresión del ejemplo podemos revisar  los dos post anteriores

Antes de codificar veremos cómo se realiza la navegación con JSF
El desarrollador de la aplicación define la navegación por la aplicación mediante el fichero de configuración, faces-config.xml, el mismo fichero en el que se declararon los managed beans .
Cada regla de navegación define cómo ir de una página (especificada en el elemento from-view-id) a otras páginas de la aplicación. El elemento navigation-rule puede contener cualquier número de elemento navigation-case, cada uno de los cuales define la página que se abrirá luego (definida por to-view-id) basándose en una salida lógica (definida mediante from-outcome).
La salida se puede definir mediante el atributo action del componente UICommand que envía el formulario.

Ahora vamos con las reglas de navegación, de esta manera, indicamos a que página ir tras otra página. En este caso la navegación es simple, tras pulsar el botón Aceptar, navegamos desde index.xhtml hasta hola.xhtml. Estas reglas de navegación se especifican en el fichero faces-config.xml, como se muestra a continuación:

  1.  
  2. <?xml version='1.0' encoding='UTF-8'?>
  3. <!-- =========== FULL CONFIGURATION FILE ================================== -->
  4. <faces-config version="2.0"
  5.    xmlns="http://java.sun.com/xml/ns/javaee"
  6.    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  7.    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
  8.  
  9. <managed-bean>
  10.   <managed-bean-class>Beans</managed-bean-class>
  11.   <managed-bean-name>clase</managed-bean-name>
  12.   <managed-bean-scope>session</managed-bean-scope>
  13. </managed-bean>
  14. <navigation-rule>
  15.     <from-view-id>/index.xhtml</from-view-id>
  16.         <navigation-case>
  17.             <from-outcome>login</from-outcome>
  18.             <to-view-id>/hola.xhtml</to-view-id>
  19.         </navigation-case>
  20. </navigation-rule>
  21. </faces-config>



El valor de from-outcome (login), indica la acción que se debe producir en la página
from-view-id (index.xhtml) para navegar al destino representado por to-view-id (hola.xhtml). La acción es un mero nombre que se da a los botones de un formulario; en nuestro caso, la página index.xhtml incluía la etiqueta:
 

<h:commandButton value="Aceptar" action="login"/>


Entonces nuestro facesconfig.xml nos queda asi
Modificaremos nuestra clase “Beans” queda de la siguiente manera

  1. public class Beans {
  2.  
  3.   private String mensaje;
  4.  
  5.     /** Creates a new instance of Beans */
  6.     public Beans() {
  7.           }
  8.  
  9.   public String getMensaje() {
  10.     return mensaje;
  11.   }
  12.  
  13.   public void setMensaje(String mensaje) {
  14.     this.mensaje = mensaje;
  15.   }
  16.  public String redireccionar(){
  17.     if (this.mensaje.trim().equals("compujuy")){
  18.       this.mensaje="hola compujuy";
  19.       return "login";
  20.     }
  21.     else{
  22.       return null;
  23.     }
  24.      }
  25. }
  26.  


En esta clase tenemos el método redireccionar, que analiza la propiedad mensaje que esta asociada al inputtext que se encuentra en el index.xhtml.Si this.mensaje es igual a “compujuy” entonces returna “login”, lo cual según nuestro fecesconfig.xml, si en una acción de produce un login desde index.xhtml,  se redirecciona al hola.xhtml, como lo describen las líneas

 

<navigation-rule>
<from-view-id>/index.xhtml</from-view-id>
<navigation-case>
<from-outcome>login</from-outcome>
<to-view-id>/hola.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
 


C aso contrario de no ser this.mensaje (asociada al inputtext de index.xhtml) igual a “compujuy”, retornara null.
Ahora modificamos nuestro index.xhtml, con las siguientes líneas

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.      xmlns:h="http://java.sun.com/jsf/html">
  4.     <h:head>
  5.         <title>Facelet Title</title>
  6.     </h:head>
  7.     <h:body>
  8.       <h:form>
  9.         <h:inputText value="#{clase.mensaje}"></h:inputText>
  10.         <h:commandButton action="#{clase.redireccionar}" value="Aceptar"></h:commandButton>
  11.       </h:form>
  12.     </h:body>
  13. </html>
  14.  

Como dijimos anteriormente el inpuText, su propiedad value se encuentra asociada a la propiedad  mensaje de la clase Beans, que en este caso esta referenciada por “clase”, como lo especificamos en el facesconfig.xml., luego tenemos un commandButton, en donde la propiedad action, se encuentra asociada al  método redireccionar, y cuando este devuelve “login” se produce el redireccionamiento.

Ahora nuestro archivo hola.xhtml queda de la sigueinte manera

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.     xmlns:h="http://java.sun.com/jsf/html">
  4.     <h:head>
  5.         <title>Facelet Title</title>
  6.     </h:head>
  7.     <h:body>
  8.       <h:form>
  9.         <h:outputText value="#{clase.mensaje}"></h:outputText>
  10.         </h:form>
  11.     </h:body>
  12. </html>
  13.  


Nuestro árbol de proyecto tiene que quedar de la siguiente manera



Ahora ya estamos en condiciones de ejecutar el proyecto, ejecutamos nuestro proyecto y tendremos la siguiente pagina con el inputtext y el commandbutton


Ingresamos cualquier texto que no sea “compujuy” y veremos que no nos direcciona hacia ningún lado, pero de lo contrarios si ingresamos “compujuy” nos redirecciona a hola.xhtml,

 


Bueno esto  es solo un sencillo ejemplo para siguir entendiendo esta tecnología, hasta pronto smiley

Visto 1015 veces

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.