JSF commandButton es un componente JSF que permite a los usuarios enviar formularios o ejecutar acciones con un solo clic del botón. Esto se puede usar para enviar datos en formularios o activar ciertos eventos cuando se hace clic, como abrir una ventana emergente o establecer valores en otros componentes dentro de la página.
Las opciones de configuración le permiten personalizar cómo se ven y se comportan sus botones cambiando su etiqueta de texto, la ruta de origen de la imagen del icono y el enlace del método de acción, entre otras cosas, como deshabilitarlos/habilitarlos según la entrada del usuario, etc.
Cómo usar el componente JSF commandButton
Para usarlo correctamente en su aplicación, debe definir sus atributos como value (texto que se muestra dentro del botón), action (método que se ejecutará cuando se presione), immediate (verdadero/falso dependiendo de si la validación debe ocurrir antes de ejecutar el método asociado).
El tag commandButton de JSF renderiza un elemento <input> de tipo submit.
El siguiente código corresponde a una página xhtml:
inicio.xhtml
<h:form id="example-form">
<h:commandButton id="example-button" value="Enviar" type="submit" action="#{exampleBean.doSomething}" />
</h:form>
Al ser procesado se convertirá a código html como sigue:
<form id="example-form" name="example-form" method="post" action="/jsf-command-button/inicio.jsf" enctype="application/x-www-form-urlencoded">
<input id="example-form:example-button" type="submit" name="example-form:example-button" value="Enviar">
</form>
Notar que el id del input queda conformado por el id del formulario y el id del componente, separados por «:«. En caso de no especificar algúno de los id se genera un texto aleatorio.
Cómo usar JSF commandButton con AJAX
AJAX (Asynchronous JavaScript and XML) es un conjunto de técnicas de desarrollo web que permite que las páginas web se actualicen de forma asíncrona, sin necesidad de actualizar la página completa desde el servidor. AJAX utiliza una combinación de objeto XMLHttpRequest integrado en el navegador y JavaScript para solicitar y procesar datos de un servidor web. Esto permite aplicaciones web más rápidas e interactivas, ya que solo las partes relevantes de una página deben actualizarse en lugar de la página completa.
Para utilizar AJAX con h:commandButton se debe anidar la etiqueta f:ajax dentro de h:commandButton.
El siguiente es un ejemplo en el cual, al hacer click en el botón, se mostrará un texto en pantalla desde el Managed Bean y sin necesidad de recargar la página.
En este ejemplo, la etiqueta h:commandButton define un botón que, al hacer click, enviará el formulario al que pertenece. La etiqueta f:ajax está anidada dentro de la etiqueta h:commandButton y especifica que el formulario completo debe enviarse y, al terminar el método de acción se debe renderizar solo el componente h:outputText para visualizar el valor asignando en el Managed Bean. También puede especificar que se renderice el formulario completo con render = «@form». Además, puede usar el atributo event para especificar qué evento debe desencadenar la solicitud de AJAX, como «click» o «change«.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>h:commandButton example</title>
</h:head>
<h:body>
<h:form id="example-form">
<h:panelGrid columns="1">
<h:outputText id="ot" value="#{exampleBean.message}" />
<h:commandButton id="example-button" value="Enviar" action="#{exampleBean.doSomething}">
<f:ajax execute="@form" render="ot" />
</h:commandButton>
</h:panelGrid>
</h:form>
</h:body>
</html>
El Managed Bean simplemente contiene el atributo message al que asignaremos el valor a visualizar en la vista, y el método doSomething() encargado de asignar el mensaje cuando el usuario hace click en el botón de la vista.
import javax.faces.bean.ManagedBean;
@ManagedBean(name = "exampleBean", eager = true)
public class ExampleBean {
private String message;
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public String doSomething() {
this.message = "Hola, mundo!";
return "";
}
}
Atributos relevantes de JSF commandButton
Los siguientes son los atributos más relevantes de JSF commandButton:
| Nombre | Requerido | Descripción |
| action | No | Expresión que debe evaluar a un método público que no recibe parámetros y que será ejecutado cuando el componente sea activado por el usuario. En caso de utilizar navegación implícita puede contener el nombre de la vista hacia la que se navegará luego de ejecutada la acción. |
| value | No | El valor actual del componente. |
| label | No | Nombre internacionalizado para este componente. |
| type | No | Tipo de html input a ser generado. Los valores aceptados son «submit«, «button» y «reset«. En caso de no especificarse se asume «submit» como valor por defecto. |
| binding | No | Expresión que vincula este componente a una propiedad del backing bean. |
| onclick | No | Código Javascript a ser ejecutado al hacer click en el componente. |
Conclusión
El componente JSF commandButton es una herramienta importante para los desarrolladores que utilizan el framework JSF. Les permite ejecutar acciones en el servidor en respuesta a la entrada del usuario, dando a las aplicaciones web el comportamiento dinámico necesario para proporcionar una gran experiencia de usuario. Al comprender el uso básico y las propiedades más importantes del componente, los desarrolladores pueden utilizarlo mejor en sus aplicaciones. Con su flexibilidad y facilidad de uso, el componente CommandButton es solo una de las muchas razones por las que JSF es una opción popular para crear interfaces web en Java.
Te puede interesar:
JSF Area de Texto
InputTextarea es un componente que permite el ingreso de texto largo y multilinea. Este articulo explica como utilizar area de texto en JSF.
JSF inputText
El componente JSF inputText permite crear un elemento de HTML. En este artículo se explica su utilización y ejemplos.
