package proyectoJSF.view;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
@Named
@RequestScoped
public class NavigationView {
private String mensaje;
public String viaje1() {
mensaje = "Llego al destino #1";
return "destino1"; // return "destino.xhtml"
}
public String viaje2() {
mensaje = "Llego al destino #2";
return "destino2?faces-redirect=true";
}
public void viaje3() {
mensaje = "Llego al destino #3";
//retorno vacío o "null"
}
/* Métodos Setter y Getter*/
public String getMensaje() {
return mensaje;
}
public void setMensaje(String mensaje) {
this.mensaje = mensaje;
}
}Y tendríamos la siguiente estructura de archivos html y xhtml
Donde los códigos son:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proyecto Demo de JSF</title>
</head>
<body>
<h1>Probando JSF</h1>
<hr />
<a href="prueba1.xhtml">Prueba #1</a>
<br/><br/>
<a href="prueba2.xhtml">Prueba #2</a>
</body>
</html>prueba2.xhtml
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Prueba 02</title>
</h:head>
<h:body>
<h1>Navegación</h1>
<h:form>
<h:commandButton value="Viaje 1" action="#{navigationView.viaje1()}">
</h:commandButton>
<br/><br/>
<h:commandButton value="Viaje 2" action="#{navigationView.viaje2()}">
</h:commandButton>
<br/><br/>
<h:commandButton value="Viaje 3" action="#{navigationView.viaje3()}">
<f:ajax execute="@form" render=":salida" />
</h:commandButton>
</h:form>
<h:outputText id="salida" value="#{navigationView.mensaje}" />
</h:body>
</html>destino1.xhtml y destino2.xhtml tienen un código similar
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Destino 01</title>
</h:head>
<h:body>
<h1>Bienvenido al destino 01</h1>
<h:outputText id="output" value="#{navigationView.mensaje}" />
</h:body>
</html>Con el siguiente resultado visual en prueba2.xhtml:
Clic en la miniatura para ver la imagen completaY los resultados de cada uno de los botones, mostrando la navegación entre páginas.
Clic en la miniatura para ver la imagen completa
No hay comentarios:
Publicar un comentario