JSF2.3 commandButton – Ejemplos
En JSF, la etiqueta <h: commandButton /> se utiliza para representar un elemento de entrada HTML del tipo «submit» (Botón de envio). Este componente se usa muchas veces para enviar formulários HTML o navegar dentro de un aplicación JSF.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <title>Ejemplo JSF2.3 CommandButton</title> </h:head> <h:body> <h:form> <h:commandButton value="Enviar"/> </h:form> </h:body> </html>
Resultado
Código HTML generado:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
<title>Ejemplo JSF2.3 Form</title>
</head>
<body>
<form id="j_idt5" name="j_idt5" method="post"
action="/ejemplo_web_jsf23/ejemploCommandButton.xhtml"
enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt5" value="j_idt5" />
<input type="submit" name="j_idt5:j_idt6" value="Enviar" />
<input type="hidden" name="javax.faces.ViewState"
id="j_id1:javax.faces.ViewState:0"
value="-724725028538684355:7822272632755761115" autocomplete="off" />
</form>
</body>
</html>
La etiqueta commandButton también puede representar un elemento de entrada HTML del tipo ‘reset’ ou ‘button’, colocando estos valores en el atributo ‘type’.
<h:commandButton value="reset" type="reset" /> <h:commandButton value="button" type="button" />
Código HTML generado:
<input type="reset" name="j_idt5:j_idt6" value="reset" /> <input type="button" name="j_idt5:j_idt8" value="button" />
Tambien puede ser adicionado un evento al botón a través de un llamado a javascript.
<h:commandButton value="Clicar" type="button" onclick="alert('Un saludo!');" />
Resultado al clicar en el botón:
HTML del botón:
<input type="button" name="j_idt5:j_idt6" value="Clicar" onclick="alert('Un saludo!');" />
Cuando se hace clic en el botón, se hace uso del método HTTP POST para enviar el formulario:
...
<form id="j_idt5" name="j_idt5" method="post"
action="/ejemplo_web_jsf23/ejemploCommandButton.xhtml"
enctype="application/x-www-form-urlencoded">
...
El atributo principal de la etiqueta <h: commandButton /> es un atributo de acción (action) que acepta una expresión que es invocado en un bean.
El método llamado en el bean por el atributo ‘action’ (en el ejemplo: action=»#{ejemploCommandButton.enviar()}») debe tener un modificador de acceso público.
Ejemplo:
Vamos a crear un formulario que va a pedir un mensaje, este debe ser mostrado en otro formulario que exiba el mensaje escrito. Si no hay mensaje debe exibir: ‘No envió ningún mensaje!’.
CDI Managed Bean EjemploCommandButton.java
package com.josehuaman.ejemplos;
import java.io.Serializable;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
@Named
@RequestScoped
public class EjemploOutputText implements Serializable {
private static final long serialVersionUID = 1L;
private String mensaje = "Hola a todos!";
private String mensajeHtml = "<h3>Hola a todos!</h3>";
public String getMensaje() {
return mensaje;
}
public void setMensaje(String mensaje) {
this.mensaje = mensaje;
}
public String getMensajeHtml() {
return mensajeHtml;
}
public void setMensajeHtml(String mensajeHtml) {
this.mensajeHtml = mensajeHtml;
}
}
Página JSF con el formulário: ejemploCommandButton.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Ejemplo JSF2.3 CommandButton</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for="idMensaje" value="Escriba un mensaje:"/>
<h:inputText id="idMensaje" value="#{ejemploCommandButton.mensaje}"/>
<h:commandButton value="Enviar" type="submit" action="#{ejemploCommandButton.enviar()}" />
</h:form>
</h:body>
</html>
Página JSF con la respuesta. respuesta.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Ejemplo JSF2.3 CommandButton - Respuesta</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="Mensaje recibido: "/>
<h:outputText value="#{ejemploCommandButton.mensaje}"/>
</h:form>
</h:body>
</html>
Resultado
http://localhost:8080/ejemplo_web_jsf23/ejemploCommandButton.xhtml
Si escribió algo:
Si no escribió nada:
Código HTML generado de ejemploCommandButton.xhml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
<title>Ejemplo JSF2.3 CommandButton</title>
</head>
<body>
<form id="j_idt5" name="j_idt5" method="post"
action="/ejemplo_web_jsf23/ejemploCommandButton.xhtml"
enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt5" value="j_idt5" />
<label for="j_idt5:idMensaje">Escriba un mensaje:</label>
<input id="j_idt5:idMensaje" type="text" name="j_idt5:idMensaje" />
<input type="submit" name="j_idt5:j_idt8" value="Enviar" />
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0"
value="3226617400068773973:-2719649194953011849" autocomplete="off" />
</form>
</body>
</html>
