miércoles, 10 de junio de 2020

Java Server Faces Page Navigation

Antes de la versión 2.0 de JSF se debía crear reglas de navegación en el archivo faces-config.xml y declarar el destino en el método, pero desde esta versión se puede reemplazar ambos simplemente declarando un valor de retorno String como se muestra en el siguiente "Bean"

  1. package proyectoJSF.view;
  3. import javax.enterprise.context.RequestScoped;
  4. import javax.inject.Named;
  6. @Named
  7. @RequestScoped
  8. public class NavigationView {
  10.    private String mensaje;
  12.    public String viaje1() {
  13.       mensaje = "Llego al destino #1";
  14.       return "destino1"; // return "destino.xhtml"
  15.    }
  16.  
  17.    public String viaje2() {
  18.       mensaje = "Llego al destino #2";
  19.       return "destino2?faces-redirect=true";
  20.    }
  21.  
  22.    public void viaje3() {
  23.       mensaje = "Llego al destino #3";
  24.       //retorno vacío o "null"
  25.    }
  27.    /* Métodos Setter y Getter*/
  28.    public String getMensaje() {
  29.       return mensaje;
  30.    }
  32.    public void setMensaje(String mensaje) {
  33.       this.mensaje = mensaje;
  34.    } 
  36. }

Y tendríamos la siguiente estructura de archivos html y xhtml

Donde los códigos son:
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Proyecto Demo de JSF</title>
  7. </head>
  8. <body>
  9.    <h1>Probando JSF</h1>
  10.    <hr />
  11.    <a href="prueba1.xhtml">Prueba #1</a>
  12.    <br/><br/>
  13.    <a href="prueba2.xhtml">Prueba #2</a>
  14. </body>
  15. </html>

prueba2.xhtml 
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
  3.  xmlns:f="http://xmlns.jcp.org/jsf/core"
  4.  xmlns:h="http://xmlns.jcp.org/jsf/html">
  5. <h:head>
  6.    <title>Prueba 02</title>
  7. </h:head>
  8. <h:body>
  9.    <h1>Navegación</h1>
  10.    <h:form>
  11.       <h:commandButton value="Viaje 1" action="#{navigationView.viaje1()}">
  12.       </h:commandButton>
  13.       <br/><br/>
  14.       <h:commandButton value="Viaje 2" action="#{navigationView.viaje2()}">   
  15.       </h:commandButton>
  16.       <br/><br/>
  17.       <h:commandButton value="Viaje 3" action="#{navigationView.viaje3()}">
  18.          <f:ajax execute="@form" render=":salida" />
  19.       </h:commandButton>
  20.    </h:form>
  21.    <h:outputText id="salida" value="#{navigationView.mensaje}" />
  22. </h:body>
  23. </html>

destino1.xhtml y destino2.xhtml tienen un código similar 
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
  3.  xmlns:h="http://xmlns.jcp.org/jsf/html">
  4. <h:head>
  5.    <title>Destino 01</title>
  6. </h:head>
  7. <h:body>
  8.    <h1>Bienvenido al destino 01</h1>
  9.    <h:outputText id="output" value="#{navigationView.mensaje}" />
  10. </h:body>
  11. </html>

Con el siguiente resultado visual en prueba2.xhtml:

Clic en la miniatura para ver la imagen completa


Y los resultados de cada uno de los botones, mostrando la navegación entre páginas.


Clic en la miniatura para ver la imagen completa
Publicado por en
Etiquetas: , , , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)