JSF - h: selectOneMenu
La etiqueta h: selectOneMenu representa un elemento de entrada HTML del tipo "seleccionar" con un tamaño no especificado.
Etiqueta JSF
<h:selectOneMenu value = "#{userData.data}">
<f:selectItem itemValue = "1" itemLabel = "Item 1" />
<f:selectItem itemValue = "2" itemLabel = "Item 2" />
</h:selectOneMenu>
Salida renderizada
<select name = "j_idt6:j_idt8">
<option value = "1">Item 1</option>
<option value = "2">Item 2</option>
</select>
Atributos de etiqueta
S. No | Atributo y descripción |
---|---|
1 | id Identificador de un componente |
2 | binding Referencia al componente que se puede utilizar en un bean de respaldo |
3 | rendered Un booleano; falso suprime la representación |
4 | styleClass Nombre de clase de hoja de estilo en cascada (CSS) |
5 | value El valor de un componente, normalmente un valor vinculante |
6 | valueChangeListener Un método que se vincula a un método que responde a cambios de valor. |
7 | converter Nombre de la clase del convertidor |
8 | validator Nombre de clase de un validador que se crea y se adjunta a un componente |
9 | required Un booleano; si es verdadero, requiere que se ingrese un valor en el campo asociado |
10 | accesskey Una clave, normalmente combinada con una metaclave definida por el sistema, que le da foco a un elemento |
11 | accept Lista de tipos de contenido separados por comas para un formulario |
12 | accept-charset Lista de codificaciones de caracteres separadas por comas o espacios para un formulario. losaccept-charset El atributo se especifica con el atributo HTML JSF denominado acceptcharset. |
13 | alt Texto alternativo para elementos no textuales como imágenes o subprogramas |
14 | charset Codificación de caracteres para un recurso vinculado |
15 | coords Coordenadas de un elemento cuya forma es un rectángulo, círculo o polígono |
dieciséis | dir Dirección del texto. Los valores válidos sonltr (de izquierda a derecha) y rtl (De derecha a izquierda) |
17 | disabled Estado desactivado de un elemento de entrada o botón |
18 | hreflang Idioma base de un recurso especificado con el href atributo; hreflang solo se puede usar con href. |
19 | lang Idioma base de los atributos y el texto de un elemento |
20 | maxlength Número máximo de caracteres para campos de texto |
21 | readonly Estado de solo lectura de un campo de entrada; el texto se puede seleccionar en un campo de solo lectura pero no se puede editar |
22 | rel Relación entre el documento actual y un enlace especificado con el href atributo |
23 | rev Vínculo inverso del ancla especificado con hrefal documento actual. El valor del atributo es una lista de tipos de enlaces separados por espacios |
24 | rows Número de filas visibles en un área de texto. h:dataTable tiene un rows atributo, pero no es un atributo de paso a través de HTML. |
25 | shape Forma de una región. Valores válidos:default, rect, circle, poly. (por defecto significa toda la región) |
26 | style Información de estilo en línea |
27 | tabindex Valor numérico que especifica un índice de tabulación |
28 | target El nombre de un marco en el que se abre un documento |
29 | 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 |
30 | type Tipo de enlace; por ejemplo,stylesheet |
31 | width Ancho de un elemento |
32 | onblur El elemento pierde el foco |
33 | onchange Cambios en el valor del elemento |
34 | onclick Se hace clic en el botón del mouse sobre el elemento |
35 | ondblclick El botón del mouse se hace doble clic sobre el elemento |
36 | onfocus El elemento recibe atención |
37 | onkeydown Se presiona la tecla |
38 | onkeypress Se presiona la tecla y luego se suelta |
39 | onkeyup Se suelta la llave |
40 | onmousedown Se presiona el botón del mouse sobre el elemento |
41 | onmousemove El mouse se mueve sobre el elemento |
42 | onmouseout El mouse sale del área del elemento |
43 | onmouseover El mouse se mueve sobre un elemento |
44 | onmouseup Se suelta el botón del mouse |
45 | onreset El formulario se restablece |
46 | 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 | Cree result.xhtml en el directorio webapps como se explica a continuación. |
4 | Cree UserData.java como un bean administrado en el paquete com.tutorialspoint.test como se explica a continuación. |
5 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
6 | Finalmente, compile la aplicación en forma de archivo war e impleméntela en Apache Tomcat Webserver. |
7 | Inicie su aplicación web utilizando la URL adecuada como se explica a continuación en el último paso. |
UserData.java
package com.tutorialspoint.test;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
private static final long serialVersionUID = 1L;
public String data = "1";
public String getData() {
return data;
}
public void setData(String data) {
this.data = data;
}
}
home.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!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:f = "http://java.sun.com/jsf/core"
xmlns:h = "http://java.sun.com/jsf/html">
<head>
<title>JSF Tutorial!</title>
</head>
<h:body>
<h2>h::selectOneMenu example</h2>
<hr />
<h:form>
<h3>Combo Box</h3>
<h:selectOneMenu value = "#{userData.data}">
<f:selectItem itemValue = "1" itemLabel = "Item 1" />
<f:selectItem itemValue = "2" itemLabel = "Item 2" />
<f:selectItem itemValue = "3" itemLabel = "Item 3" />
<f:selectItem itemValue = "4" itemLabel = "Item 4" />
<f:selectItem itemValue = "5" itemLabel = "Item 5" />
</h:selectOneMenu>
<h:commandButton value = "Submit" action = "result" />
</h:form>
</h:body>
</html>
result.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!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:f = "http://java.sun.com/jsf/core"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<head>
<title>JSF Tutorial!</title>
</head>
<h:body>
<h2>Result</h2>
<hr />
#{userData.data}
</h: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.
Seleccione cualquier opción y presione Submitbotón. Hemos seleccionado el elemento 4. Verá los resultados seleccionados.