JSF - h: commandButton
La etiqueta h: commandButton representa un elemento de entrada HTML del tipo "submit".
Etiqueta JSF
<h:commandButton value = "Click Me!" onclick = "alert('Hello World!');" />
Salida renderizada
<input type = "submit" name = "j_idt10:j_idt13" value = "Click Me!"
onclick = "alert('Hello World!');" />
Atributos de etiqueta
S. No | Atributo y descripción |
---|---|
1 | id Identificador de un componente |
2 | rendered Un booleano; falso suprime la representación |
3 | value El valor de un componente, normalmente un valor vinculante |
4 | valueChangeListener Un método que se vincula a un método que responde a cambios de valor. |
5 | coords Coordenadas de un elemento cuya forma es un rectángulo, círculo o polígono |
6 | dir Dirección del texto. Los valores válidos sonltr (de izquierda a derecha) y rtl (De derecha a izquierda) |
7 | disabled Estado desactivado de un elemento de entrada o botón |
8 | tabindex Valor numérico que especifica un índice de tabulación |
9 | target El nombre de un marco en el que se abre un documento |
10 | title Un título, usado para accesibilidad, que describe un elemento. Los navegadores visuales suelen crear información sobre herramientas para el valor del título |
11 | width Ancho de un elemento |
12 | onblur El elemento pierde el foco |
13 | onchange Cambios en el valor del elemento |
14 | onclick Se hace clic en el botón del mouse sobre el elemento |
15 | ondblclick El botón del mouse se hace doble clic sobre el elemento |
dieciséis | onfocus El elemento recibe atención |
17 | onkeydown Se presiona la tecla |
18 | onkeypress Se presiona la tecla y luego se suelta |
19 | onkeyup Se suelta la llave |
20 | onmousedown Se presiona el botón del mouse sobre el elemento |
21 | onmousemove El mouse se mueve sobre el elemento |
22 | onmouseout El mouse sale del área del elemento |
23 | onmouseover El mouse se mueve sobre un elemento |
24 | onmouseup Se suelta el botón del mouse |
25 | onreset El formulario se restablece |
26 | onselect El texto está seleccionado en un campo de entrada |
Aplicación de ejemplo
Creemos una aplicación JSF de prueba para probar la etiqueta anterior.
Paso | Descripción |
---|---|
1 | Cree un proyecto con un nombre helloworld en un paquete com.tutorialspoint.test como se explica en el capítulo JSF - Primera aplicación . |
2 | Modifique home.xhtml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
4 | Finalmente, compile la aplicación en forma de archivo war e impleméntela en Apache Tomcat Webserver. |
5 | Inicie su aplicación web utilizando la URL adecuada como se explica a continuación en el último paso. |
home.xhtml
<!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">
<head>
<title>JSF Tutorial!</title>
</head>
<body>
<h2>h:commandButton example</h2>
<hr />
<h:form>
<h:commandButton value = "Click Me!" onclick = "alert('Hello World!');" />
</h:form>
</body>
</html>
Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación como lo hicimos en JSF - Capítulo Primera aplicación. Si todo está bien con su aplicación, esto producirá el siguiente resultado.