Saltar al contenido principal

Listas

Abrir en ChatGPT
info

Esta sección describe características comunes de todos los componentes de lista, y no es una clase que se pueda instanciar o usar directamente.

Hay tres tipos de listas disponibles para usar en tus aplicaciones: ListBox, ChoiceBox y ComboBox. Estos componentes muestran una lista de elementos clave-valor y proporcionan métodos para agregar, eliminar, seleccionar y gestionar los elementos dentro de la lista.

Esta página describe las características y el comportamiento compartido de todos los componentes de lista, mientras que los detalles específicos de cada uno se cubren en sus respectivas páginas.

Usando ListItem​

Los componentes de lista están compuestos por objetos ListItem, que representan elementos individuales dentro de una lista. Cada ListItem está asociado con una clave única y un texto de visualización. Las características importantes de la clase ListItem incluyen:

  • Un ListItem encapsula una clave única Object y un texto String para mostrar dentro del componente de lista.
  • Puedes construir un ListItem proporcionando una clave y un texto, o especificando solo el texto para que se genere una clave aleatoria.

Gestionando objetos ListItem con la API​

Los diversos componentes de lista ofrecen varios métodos para gestionar la lista de elementos y mantener un estado coherente entre la lista y el cliente. Al usar estos métodos, puedes gestionar eficazmente los elementos dentro de la lista. La API te permite interactuar y manipular la lista para satisfacer los requisitos de tu aplicación.

Agregando elementos​

sugerencia

Para optimizar el rendimiento, en lugar de activar un mensaje de servidor a cliente cada vez que uses el método add(), es más eficiente crear primero una lista de objetos ListItem. Una vez que tengas esta lista, puedes agregarlos todos de una vez utilizando el método insert(int index, List<ListItem> items). Este enfoque reduce la comunicación servidor-cliente, mejorando la eficiencia general. Para pautas detalladas sobre esto y otras mejores prácticas en la arquitectura de webforJ, consulta Interacción Cliente/Servidor.

Eliminando elementos​

Seleccionando elementos​

Todos los tipos de lista implementan la interfaz SelectableList. Esta interfaz permite múltiples formas diferentes de seleccionar el ListItem actual.

Con un ListItem dado​

select(ListItem item) toma un ListItem como parámetro para seleccionar.

List demoList = new List();
ListItem demoItem = new ListItem("demo","Elemento Demo");
demoList.add(demoItem);
demoList.select(demoItem);

Con una clave dada de un ListItem​

selectKey(Object key) toma una clave de un ListItem como parámetro para seleccionar.

List demoList = new List();
demoList.add("demo","Elemento Demo");
demoList.selectKey("demo");

Con un índice dado de un ListItem​

selectIndex(int index) toma un índice de un ListItem como un parámetro para seleccionar.

List demoList = new List();
demoList.add("demo","Elemento Demo");
demoList.selectKey(0);

Otras operaciones de lista​

Iterando sobre listas​

Todos los componentes de lista implementan la interfaz Java Iteratable, proporcionando una forma eficiente e intuitiva de iterar a través del contenido de una lista. Con esta interfaz, puedes recorrer fácilmente cada ListItem, haciendo simple acceder, modificar o realizar acciones sobre cada elemento con un esfuerzo mínimo. La interfaz Iterable es un patrón estándar del lenguaje Java, asegurando que tu código sea familiar y mantenible para cualquier desarrollador de Java.

El siguiente fragmento de código demuestra dos formas sencillas de iterar a través de una lista:

list.forEach(item -> {
   item.setText("Modificado: " + item.getText());
});

for (ListItem item : list) {
   item.setText("Modificado2: " + item.getText());
}

Buscando 26.02​

Todos los componentes de lista tienen un campo de búsqueda integrado que filtra los elementos por su texto. El campo está desactivado por defecto. Usa getSearch() para alcanzar la configuración de búsqueda, luego setFieldVisible(true) para mostrar el campo en la parte superior de la lista del componente.

ComboBox comboBox = new ComboBox("Fruta");
comboBox.insert("Manzana", "Banana", "Cereza", "Albaricoque", "Piña");

comboBox.getSearch()
  .setFieldVisible(true)
  .setPlaceholder("Buscar frutas")
  .setEmptyMessage("No se encontraron frutas");
Mostrar Código

Filtrar solo oculta los elementos que no coinciden. Los índices de los elementos y la selección actual permanecen intactos, por lo que getSelectedIndex() continúa refiriéndose a la lista completa en lugar de a los elementos actualmente visibles.

El campo de búsqueda se puede ocultar nuevamente con setFieldVisible(false).

Configurando el campo​

  • setPlaceholder() establece el texto del marcador de posición del campo de búsqueda. El valor predeterminado es Buscar.

  • setEmptyMessage() establece el mensaje que se muestra cuando una búsqueda no devuelve resultados. El valor predeterminado es No hay datos para mostrar.

Cada configuración tiene un getter correspondiente: isFieldVisible(), getPlaceholder(), getEmptyMessage(), y getTerm().

Filtrando desde el código​

setTerm() establece el término de búsqueda y filtra la lista. Funciona ya sea que el campo esté visible o no, por lo que se puede filtrar una lista sin mostrar ninguna interfaz de búsqueda.

listBox.getSearch().setTerm("manzana");
getTerm() y el campo de búsqueda

Escribir en el campo de búsqueda no escribe el término de nuevo en la configuración. getTerm() devuelve el último valor pasado a setTerm(), no lo que el usuario ha escrito.

Propiedades de lista compartidas​

Etiqueta​

Todos los componentes de lista pueden asignarse una etiqueta, que es un texto descriptivo o título asociado con el componente. Las etiquetas proporcionan una breve explicación o aviso para ayudar a los usuarios a entender el propósito o la selección esperada para esa lista en particular. Además de su importancia para la usabilidad, las etiquetas de lista también desempeñan un papel crucial en la accesibilidad, permitiendo que los lectores de pantalla y las tecnologías asistivas proporcionen información precisa y faciliten la navegación por teclado.

Texto de ayuda​

Cada componente de lista puede mostrar texto de ayuda debajo de la lista usando el método setHelperText(). Este texto de ayuda ofrece contexto adicional o explicaciones sobre las opciones disponibles, asegurando que los usuarios tengan la información necesaria para hacer selecciones informadas.

Alineación horizontal​

Todos los componentes de lista implementan la interfaz HasHorizontalAlignment, brindándote control sobre cómo se alinean el texto y el contenido dentro del componente.

Usa el método setHorizontalAlignment() para configurar la alineación:

  • HorizontalAlignment.LEFT (predeterminado)
  • HorizontalAlignment.MIDDLE
  • HorizontalAlignment.RIGHT
ListBox<String> listBox = new ListBox<>();
listBox.setHorizontalAlignment(HorizontalAlignment.LEFT);

Para obtener la alineación actual:

HorizontalAlignment alignment = listBox.getHorizontalAlignment();

Expansiones​

Todos los componentes de lista en webforJ también implementan la interfaz HasExpanse, permitiéndote ajustar el tamaño general y el peso visual del componente. Esto es útil para adaptar el componente a varios contextos de interfaz de usuario, como formularios, diálogos, barras laterales, etc.

Usa el método setExpanse() para establecer el nivel de expansión. Las opciones incluyen:

  • Expanse.NONE
  • Expanse.XSMALL
  • Expanse.SMALL
  • Expanse.MEDIUM (predeterminado)
  • Expanse.LARGE
  • Expanse.XLARGE
ListBox<String> listBox = new ListBox<>();
listBox.setExpanse(Expanse.LARGE);

Puedes recuperar la configuración actual usando:

Expanse current = listBox.getExpanse();

Temas​