Componentes de interfaz de usuario
Cada parte de una pantalla empresarial, Listo en Java.
webforJ es el framework Java full-stack para aplicaciones web empresariales: creas toda la aplicación, incluidas las pantallas, en Java. Sus componentes abarcan diseño, entrada de datos, diálogos, visualización de datos y notificaciones; cada uno es una clase Java que creas, configuras y añades a un diseño.
- Componentes de la galería
- 57
- Elementos HTML tipados
- 29
- Temas integrados
- 3
- Grupos por propósito
- 5
Por finalidad
Elige un grupo y luego un componente. Cada tarjeta abre su propia página en la documentación.
Diseño
La estructura de una pantalla: estructuras de aplicaciones, barras de herramientas, diseños flexibles y en columnas, paneles divididos y superficies.
8 componentes
AppLayoutDiseño estructurado para la navegación principal y el contenido de la aplicación.
FlexLayoutOrganiza sus elementos secundarios con reglas de flexbox para una alineación adaptable.
ColumnsLayoutOrganiza los elementos secundarios en columnas, útil para formularios y estructuras tipo cuadrícula.
ToolbarUn contenedor horizontal para botones de acción, iconos y otros controles.
SplitterDivide el espacio entre dos componentes que se pueden redimensionar arrastrando.
AccordionConjunto de paneles apilados y plegables con encabezados interactivos.
CardUna superficie con áreas para medios, encabezados, contenido y pies de página.
DialogUna ventana modal que se superpone al contenido y solicita una acción al usuario.
Formularios y campos
Todo lo que un usuario escribe, selecciona o carga, desde texto y números hasta fechas, máscaras, listas y archivos.
20 componentes
TextFieldUn campo de una sola línea para escribir y editar texto.
MaskedTextFieldRestringe el texto a un patrón, como un número de teléfono.
NumberFieldUn campo numérico con controles para aumentar o disminuir el valor.
MaskedNumberFieldAplica un formato numérico, como moneda o porcentaje.
PasswordFieldCampo de una sola línea que oculta la contraseña.
DateFieldSelector de fecha basado en navegador en un campo de entrada.
MaskedDateFieldCampo de fecha que aplica un formato definido.
TimeFieldUn selector de hora basado en el navegador en un campo de entrada.
MaskedTimeFieldCampo de hora con un formato definido.
DateTimeFieldSelecciona una fecha y hora en un solo campo de entrada.
ColorFieldSelector de color basado en navegador en un campo de entrada.
TextAreaUn campo de texto multilínea para bloques de texto más largos.
CheckBoxUna opción binaria que alterna entre marcada y desmarcada.
RadioButtonSelecciona una opción de un grupo de opciones excluyentes.
SwitchAlterna entre dos estados, como activado y desactivado, deslizando.
ChoiceBoxUna lista desplegable de opciones predefinidas.
ComboBoxUna lista desplegable combinada con un campo de texto editable.
ListBoxUna lista desplazable para seleccionar uno o varios elementos.
SliderSelecciona un valor de un rango arrastrando un control por una pista.
UploadSelector de archivos en línea con arrastrar y soltar, filtros y eventos por archivo.
Datos y contenido
Muestra registros, jerarquías, gráficos y texto en streaming, y carga más contenido a medida que el usuario se desplaza.
8 componentes
GoogleChartsGráficos y representaciones visuales de datos con Google Charts.
TreeDatos jerárquicos interactivos que los usuarios pueden expandir y contraer.
InfiniteScrollCarga más elementos al desplazarse y detecta cuándo se ha cargado todo el contenido.
RefresherUna interacción de deslizar para actualizar dentro de contenedores desplazables.
MarkdownViewerRenderiza Markdown progresivamente, ideal para chats con IA y texto en streaming.
TerminalInterfaz de línea de comandos integrada en la aplicación para comandos de texto.
AvatarFotos de perfil o iniciales en distintos tamaños, formas y temas.
BadgeUna etiqueta pequeña para recuentos, estados o metadatos breves.
Navegación y acciones
Navega entre vistas y secciones, recorre los datos página a página y activa lo que sigue.
6 componentes
AppNavUn menú de navegación para cambiar entre secciones y vistas.
DrawerUn panel deslizante para la navegación lateral o el contenido adicional.
TabbedPaneOrganiza el contenido en pestañas que los usuarios pueden alternar.
NavigatorPaginación con botones de primera, última, siguiente y anterior, y salto rápido.
ButtonComponente que ejecuta una acción al pulsarlo.
IconUn símbolo gráfico para una acción, estado o categoría.
Comentarios y diálogos
Informa a los usuarios de lo que está ocurriendo, pídeles que confirmen y recopila un valor, un archivo o sus datos de acceso.
12 componentes
ToastUna notificación no bloqueante que desaparece por sí sola.
AlertMensajes o advertencias importantes en un formato destacado.
DesktopNotificationNotificaciones de escritorio personalizadas mediante la API de notificaciones del navegador.
ProgressBarUna barra que se llena a medida que avanza una tarea.
BusyIndicatorIndicador de que hay un proceso global en curso en toda la aplicación.
LoadingUn indicador de carga asociado a un único componente padre.
SpinnerUna animación giratoria que indica que una acción está en curso.
MessageDialogUn mensaje informativo que el usuario confirma con Aceptar.
ConfirmDialogPide al usuario que confirme o cancele una acción.
InputDialogSolicita al usuario un valor con los botones Aceptar y Cancelar.
FileUploadDialogCarga archivos del sistema de archivos local a la aplicación.
LoginInterfaz de inicio de sesión prediseñada con nombre de usuario, contraseña y botón de envío.
Composición
Tus propios componentes, Creado a partir del nuestro.
webforJ usa composición en lugar de herencia. No extiendes un Button. Escribes una clase que extiende Composite, combinas componentes dentro de ella y decides qué métodos puede ver el resto de tu aplicación.
public class SearchBar extends Composite<FlexLayout> {
private final FlexLayout self = getBoundComponent();
private TextField searchField;
private Button searchButton;
public SearchBar() {
searchField = new TextField("Search");
searchButton = new Button("Go");
self.setDirection(FlexDirection.ROW)
.add(searchField, searchButton);
}
}
Una clase, una unidad.
Un
Compositeenvuelve un único componente enlazado y contiene su estructura interna, de modo que una barra de búsqueda, un formulario de dirección o una tarjeta completa del panel se convierten en una sola clase reutilizable.Tú eliges la API.
Quienes invocan solo ven los métodos que expones, a diferencia de la herencia, donde todo queda expuesto.
Los componentes integrados permanecen intactos.
Los componentes integrados son finales, lo que mantiene coherente y predecible el componente web subyacente. Tu lógica se construye alrededor de ellos, no dentro de ellos.
Más allá del conjunto
¿No está en el conjunto? Usa cualquier componente de la web.
Los componentes de negocio son el punto de partida, no el destino. Cada elemento HTML es una clase Java, y cualquier componente web puede convertirse en una.
- 29 elementos HTML
La página en sí, escrita
webforJ ofrece componentes que se corresponden directamente con elementos HTML estándar, como Div, Paragraph, los encabezados, las listas, Img y Anchor, con una API de Java tipada.
Componentes HTML - Web components
Cualquier componente web, envuelto
ElementComposite encapsula un elemento HTML personalizado o un componente web de terceros y expone sus propiedades, atributos y eventos a través de la API de Java.
Elemento compuesto - paquetes de npm
El registro de npm, desde Java
El empaquetador del frontend convierte las anotaciones de una clase en recursos compilados del frontend, para que un componente pueda incluir el paquete npm del que depende.
Empaquetador de frontend
Tu sistema de diseño
¿Tienes tu propio sistema de diseño? Llévalo contigo.
Los componentes de webforJ son una opción, no un requisito. Si tu sistema de diseño se distribuye como componentes web, lo encapsulas una sola vez y creas toda la aplicación con él, en Java.
- 01
Envolver los componentes
ElementCompositeconvierte cada elemento personalizado en una clase Java y expone sus propiedades, atributos y eventos a través de la API de Java. - 02
Distribúyelos como un solo módulo.
El empaquetador del frontend permite que una clase declare los paquetes npm que necesita, para que los wrappers incluyan su sistema de diseño. La aplicación solo tiene que añadir la dependencia.
- 03
Compila la aplicación como de costumbre.
El enrutamiento, la seguridad y el enlace de datos funcionan igual. Un componente envuelto que implementa
ValueAwarese enlaza con tu modelo como cualquier campo integrado.
Tus pantallas mantienen el diseño que tu empresa ya creó. El framework subyacente sigue siendo webforJ.
Usado desde Java
Un componente es un objeto creas con new.
Configuras su estado mediante métodos tipados, escuchas sus eventos con lambdas y lo añades a un contenedor. La pantalla es código Java, sin ninguna plantilla que mantener sincronizada.
FlexLayout container = new FlexLayout();
container.add(new Button("Click Me"));
TextField nameField = new TextField("Name");
TextField emailField = new TextField("Email");
Button submitButton = new Button("Submit");
container.add(nameField, emailField, submitButton);
// Reveal an additional field when a checkbox is checked
TextField advancedField = new TextField("Advanced setting");
advancedField.setVisible(false);
CheckBox enableAdvanced = new CheckBox("Show advanced settings");
enableAdvanced.addValueChangeListener(e -> advancedField.setVisible(e.getValue()));
// Enable a button only when the required field has a value
Button submitButton = new Button("Submit");
submitButton.setEnabled(false);
TextField nameField = new TextField("Name");
nameField.addValueChangeListener(e -> submitButton.setEnabled(!e.getValue().isBlank()));
Tematización
Un único sistema de diseño detrás de cada componente.
webforJ incluye un sistema de diseño llamado DWC. Sus variables CSS, los tokens de diseño, abarcan colores, tipografía, bordes y espaciado, y todos los componentes las utilizan. Cambia un token y todos los componentes que lo usan reflejan el cambio.
El mismo campo, los botones, el interruptor, la insignia y la barra de progreso en el tema claro.
lightPredeterminado. Fondo claro con un sutil matiz del color primario.El mismo campo, los botones, el interruptor, la insignia y la barra de progreso en el tema oscuro.
darkFondo oscuro con un sutil matiz del color primario.Tres temas integrados
light, dark y dark-pure, que elimina el tinte principal para usar grises neutros puros. Cambia en tiempo de ejecución con App.setTheme(), sin recompilar.
Según el sistema operativo
Registra un tema claro y otro oscuro, y pasa "system". webforJ seleccionará el que coincida con las preferencias del usuario y cambiará de nuevo cuando estas cambien.
@AppTheme("system")
@AppLightTheme("light")
@AppDarkTheme("dark")
class MyApp extends App {
// app code
}
Renueva tu marca con unos pocos tokens.
Sobrescribe los tokens semilla de los temas integrados y todos los componentes adoptan el nuevo aspecto. Las shadow parts permiten acceder al interior de un componente cuando un token no basta.
:root {
--dwc-color-primary-seed: #6366f1;
--dwc-font-size: var(--dwc-font-size-l);
}
La galería
Abrir la galería y ver los 57
La galería de la documentación enumera cada componente con su vista previa y una breve descripción, en las mismas cuatro secciones que utiliza la documentación.