Componentes de interfaz

Abrir en ChatGPT

En webforJ, las aplicaciones se crean utilizando unidades modulares conocidas como Componentes, que facilitan un desarrollo de UI rápido y eficiente. El marco ofrece una variedad de componentes esenciales como botones, elementos de entrada y contenedores de diseño. Después de dominar los fundamentos, puedes consultar la JavaDocs para obtener una visión detallada de todos los componentes y sus funcionalidades.

Diseños

Los componentes de diseño proporcionan la base para estructurar interfaces de usuario, permitiendo a los desarrolladores organizar el contenido de manera eficiente. Estos componentes ofrecen diversas formas de controlar el arreglo de los componentes secundarios, ya sea para diseños simples o complejos.

Los siguientes componentes de diseño están diseñados para manejar una amplia gama de casos de uso, desde diseño responsivo hasta gestión avanzada de contenido.

AppLayout

Un componente contenedor que proporciona un diseño estructurado para la navegación y organización de contenido a nivel de aplicación.

Toolbar

Un componente contenedor horizontal que alberga un conjunto de botones de acción, íconos u otros controles, utilizado típicamente para realizar tareas relacionadas con el contexto actual.

FlexLayout

Un componente de diseño que organiza a sus hijos utilizando reglas de caja flexible (flexbox) para un diseño responsivo y alineación.

ColumnsLayout

Un componente de diseño que organiza a sus hijos en múltiples columnas verticales, útil para crear formularios y estructuras similares a una cuadrícula.

Splitter

Un componente de diseño que divide el espacio disponible entre dos componentes secundarios, permitiendo a los usuarios redimensionarlos arrastrando la barra separadora.

Drawer

Un componente de panel deslizante utilizado típicamente para navegación lateral o para albergar contenido adicional que puede ser mostrado u oculto.

Dialog

Un componente de ventana modal que superpone contenido para mostrar información importante o solicitar la interacción del usuario, a menudo requiriendo una acción del usuario para cerrarse.

Login

Un componente que proporciona una interfaz de usuario preconstruida para la autenticación de usuarios, incluyendo típicamente campos para nombre de usuario y contraseña junto con un botón de enviar.

Accordion

Un conjunto apilado verticalmente de paneles colapsables, cada uno con un encabezado clickeable que alterna la visibilidad de su contenido.

TabbedPane

Un componente contenedor que organiza el contenido en múltiples pestañas, permitiendo a los usuarios cambiar entre diferentes vistas o secciones.

Card

Una superficie que agrupa contenido y acciones relacionadas, con regiones para medios, encabezados, contenido del cuerpo y pies de página.

Entrada de datos

Los componentes de entrada de datos proporcionan herramientas esenciales para capturar la entrada del usuario y gestionar interacciones dentro de tu aplicación. Estos componentes son versátiles, facilitando la construcción de formularios interactivos y la recolección de varios tipos de datos.

TextField

Un componente de entrada de una sola línea para ingresar y editar datos de texto.

MaskedTextField

Un componente de entrada de texto que restringe la entrada del usuario a un formato o patrón específico, utilizado típicamente para campos como números de teléfono, fechas o números de tarjetas de crédito.

NumberField

Un componente que proporciona un campo de entrada basado en el navegador para ingresar valores numéricos, con controles incorporados para incrementar o decrementar el valor.

MaskedNumberField

Un componente de entrada numérica que restringe la entrada del usuario a un formato o patrón numérico específico, asegurando una entrada de número válida, como para moneda, porcentajes u otros números formateados.

PasswordField

Un componente de entrada de una sola línea para ingresar de manera segura y enmascarar datos de contraseña.

DateField

Un componente que proporciona un selector de fecha basado en el navegador para seleccionar una fecha a través de un campo de entrada.

MaskedDateField

Un componente de entrada de fecha que impone un formato o patrón de fecha específico, asegurando que el usuario ingrese una fecha válida de acuerdo con la máscara definida.

TimeField

Un componente que proporciona un selector de tiempo basado en el navegador para seleccionar un valor de tiempo a través de un campo de entrada.

MaskedTimeField

Un componente de entrada de tiempo que impone un formato o patrón de tiempo específico, asegurando que el usuario ingrese un tiempo válido de acuerdo con la máscara definida.

DateTimeField

Un componente que proporciona un selector de fecha y hora basado en el navegador para seleccionar tanto la fecha como la hora a través de un único campo de entrada.

ColorField

Un componente que proporciona un selector de color basado en el navegador, permitiendo a los usuarios seleccionar un color desde un campo de entrada.

TextArea

Un componente de entrada de texto multi-línea que permite a los usuarios ingresar o editar bloques más grandes de texto.

CheckBox

Un componente que representa una opción binaria, permitiendo a los usuarios alternar entre un estado marcado (verdadero) o desmarcado (falso).

RadioButton

Un componente que permite a los usuarios seleccionar una única opción de un grupo de elecciones mutuamente excluyentes.

Switch

Un componente de alternancia que permite a los usuarios cambiar entre dos estados, como encendido/apagado o verdadero/falso, con una acción deslizable.

ChoiceBox

Un componente que proporciona una lista desplegable de opciones predefinidas, permitiendo a los usuarios seleccionar una opción de la lista.

ComboBox

Un componente que combina una lista desplegable con un campo de entrada de texto editable, permitiendo a los usuarios seleccionar una opción de la lista o ingresar un valor personalizado.

ListBox

Un componente que muestra una lista desplazable de opciones, permitiendo a los usuarios seleccionar uno o más elementos de la lista.

Upload

Un selector de archivos en línea que permite a los usuarios seleccionar uno o más archivos de su máquina local y subirlos al servidor, con soporte para arrastrar y soltar, filtros y seguimiento de eventos por archivo.

Diálogos de opciones

Los diálogos de opciones proporcionan una forma de presentar a los usuarios elecciones o solicitar su confirmación antes de proceder con una acción. Estos componentes son esenciales para crear flujos de trabajo interactivos y basados en decisiones, permitiendo a los usuarios confirmar, cancelar o elegir entre varias opciones de manera clara y estructurada.

MessageDialog

Un componente de diálogo utilizado para mostrar mensajes informativos o alertas al usuario, típicamente con un único botón OK para reconocer el mensaje.

ConfirmDialog

Un componente de diálogo que pregunta al usuario si confirma o cancela una acción, proporcionando típicamente botones de Sí y No o OK y Cancelar.

InputDialog

Un componente de diálogo que solicita al usuario que ingrese texto o datos, proporcionando típicamente un campo de entrada junto con botones de acción como OK y Cancelar.

FileChooserDialog

Un componente de diálogo que permite a los usuarios explorar y seleccionar archivos del sistema de archivos del servidor.

FileUploadDialog

Un componente de diálogo que permite a los usuarios subir archivos desde su sistema de archivos local a la aplicación.

FileSaveDialog

Un componente de diálogo que permite a los usuarios guardar un archivo en una ubicación especificada en el sistema de archivos del servidor.

Interacción y visualización

Esta categoría incluye componentes que facilitan interacciones del usuario y representan visualmente datos o estados de la aplicación. Estos componentes ayudan a los usuarios a navegar por la aplicación, activar acciones y comprender el progreso o los resultados a través de elementos visuales dinámicos.

Table

Un componente utilizado para mostrar datos en un formato tabular estructurado con filas y columnas, soportando características como ordenamiento y paginación.

GoogleCharts

Un componente que se integra con Google Charts para mostrar varios tipos de gráficos y representaciones visuales de datos en la aplicación.

Button

Un componente clickeable que activa una acción o evento cuando se presiona.

Toast

Un componente de notificación ligera y no bloqueante que muestra brevemente un mensaje al usuario antes de desaparecer automáticamente.

Alert

Un componente que muestra mensajes o advertencias importantes en un formato notable para capturar la atención del usuario.

Badge

Un pequeño componente etiquetado para mostrar conteos, estados o metadatos breves, con soporte para temas, tamaños e íconos.

DesktopNotification

Un componente que aprovecha la API de Notificaciones nativa del navegador para alertar a los usuarios con notificaciones personalizadas de escritorio.

Navigator

Un componente de paginación personalizable para navegar a través de conjuntos de datos, soportando diseños con botones de primero, último, siguiente, anterior y campos de salto rápido.

ProgressBar

Un componente que representa visualmente el progreso de una tarea o proceso, típicamente mostrado como una barra horizontal que se llena a medida que se avanza.

Slider

Un componente que permite a los usuarios seleccionar un valor de un rango definido arrastrando un controlador a lo largo de una pista.

BusyIndicator

Un indicador visual de la aplicación, típicamente un spinner, que señala que un proceso global está en curso.

Loading

Un indicador de carga restringido que se muestra dentro de un componente padre específico, indicando que el contenido o los datos están siendo cargados en esa sección.

Spinner

Un componente que muestra una animación giratoria, típicamente utilizada para indicar que un proceso o acción está en curso.

AppNav

Un componente que proporciona un menú de navegación para la aplicación, utilizado típicamente para listar enlaces o elementos de navegación para cambiar entre diferentes secciones o vistas.

Icon

Un componente que muestra un símbolo gráfico o imagen, a menudo utilizado para representar una acción, estado o categoría en la interfaz de usuario.

Terminal

Un componente que simula una interfaz de línea de comandos (CLI) dentro de la aplicación, permitiendo a los usuarios ingresar y ejecutar comandos basados en texto.

InfiniteScroll

Un componente que carga más elementos al desplazarse, muestra un cargador y rastrea cuándo se ha recuperado todo el contenido.

Refresher

Un componente que permite una interacción de tirón para refrescar dentro de contenedores desplazables—ideal para la carga dinámica de datos.

Tree

Un componente para mostrar datos jerárquicos, permitiendo a los usuarios expandir, colapsar e interactuar con elementos anidados.

Avatar

Un componente para mostrar imágenes de perfil de usuario o iniciales, con soporte para diferentes tamaños, formas y temas.

MarkdownViewer

Un componente para mostrar contenido markdown con renderizado progresivo carácter por carácter, ideal para interfaces de chat de IA y streaming de texto.