Data Binding

Abrir en ChatGPT

webforJ incluye una función de enlace de datos que integra componentes de UI con modelos de datos de backend en aplicaciones Java. Esta característica cierra la brecha entre la UI y la capa de datos, de modo que los cambios en la UI se reflejan en el modelo de datos y viceversa, reduciendo la complejidad de la gestión de eventos y la sincronización de datos.

AI skill available

The webforj-building-forms skill can build forms with binding, validation, and input masks. After installing the webforJ AI plugin, ask your assistant:

"Build a registration form bound to my User bean."
"Add a phone number input with format-as-you-type."
"Format this Table column as currency."

Concepto

La siguiente demostración muestra una aplicación simple de webforJ para registrar superhéroes utilizando el enlace de datos de webforJ. La aplicación consta de dos partes principales: HeroRegistration.java y Hero.java.

En HeroRegistration.java, el código configura la interfaz de usuario con un TextField para ingresar el nombre del héroe, un ComboBox para seleccionar un superpoder y un Button para enviar el registro.

La clase Hero define el modelo de datos con restricciones de validación sobre el nombre y el poder del héroe. Las entradas deben ser válidas y cumplir criterios específicos como longitud y patrón.

La aplicación utiliza el BindingContext para enlazar los componentes de UI a las propiedades del objeto Hero. Cuando un usuario hace clic en el botón de enviar, la aplicación escribe los datos introducidos en el formulario nuevamente en el bean Hero si son válidos.

HeroRegistration.java
Hero.java

public class HeroRegistration extends App {
    
  private TextField name = new TextField("Campo de Texto");
  private ComboBox power = new ComboBox("Poder");
  private Button submit = new Button("Enviar Solicitud");
  private FlexLayout layout = FlexLayout.create(name, power, submit).vertical().build()
      .setStyle("margin", "20px auto").setMaxWidth("400px");

  @Override
  public void run() throws WebforjException {
    power.insert("Volador", "Invisible", "VisiónLaser", "Velocidad", "Teletransportación");

    BindingContext<Hero> context = BindingContext.of(this, Hero.class, true);
    Hero bean = new Hero("Superman", "Volador");

    // reflejar los datos del bean en el formulario
    context.read(bean);

    submit.onClick(e -> {
      // escribir los datos del formulario de vuelta en el bean
      ValidationResult results = context.write(bean);

      if (results.isValid()) {
        // hacer algo con el bean
        // repository.persist(bean)
      }
    });

    Frame frame = new Frame();
    frame.add(layout);
  }
}

public class Hero {

  @NotEmpty(message = "El nombre no puede estar vacío")
  @Length(min = 3, max = 20)
  private String name;

  @NotEmpty(message = "Poder no especificado")
  @Pattern(regexp = "Volador|Invisible|VisiónLaser|Velocidad|Teletransportación", message = "Poder invalido")
  private String power;

  public Hero(String name, String power) {
    this.name = name;
    this.power = power;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public String getPower() {
    return power;
  }

  public void setPower(String power) {
    this.power = power;
  }

  public String toString() {
    return "Nombre: " + name + ", Poder: " + power;
  }
}

Características clave

Enlace Bidireccional: Soporta enlace de datos bidireccional, permitiendo que los cambios en el modelo de datos actualicen la UI, y las interacciones del usuario en la UI actualicen el modelo de datos.
Soporte de Validación: Integra mecanismos de validación completos que se pueden personalizar y extender. Los desarrolladores pueden implementar sus propias reglas de validación o usar marcos de validación existentes como Jakarta Validation para verificar la integridad de los datos antes de actualizar el modelo.
Extensibilidad: Puede extenderse fácilmente para soportar diferentes tipos de componentes de UI, transformaciones de datos y escenarios de validación complejos.
Configuración Basada en Anotaciones: Utiliza anotaciones para minimizar el código repetitivo, haciendo que los enlaces entre los componentes de UI y los modelos de datos sean declarativos y fáciles de gestionar.

Temas

📄️ Bindings

Un enlace en webforJ conecta una propiedad específica de un Java Bean a un componente de la interfaz de usuario (UI). Esta vinculación permite actualizaciones automáticas entre la UI y el modelo del backend. Cada enlace puede manejar la sincronización de datos, validación, transformación y gestión de eventos.

🗃️ Validación

5 artículos

📄️ Transformation

Las transformaciones de datos convierten entre los tipos de datos utilizados en componentes de la interfaz de usuario y aquellos en su modelo de datos. Esto mantiene los tipos de datos compatibles y correctamente formateados al mover datos entre el frontend y el backend de sus aplicaciones.

📄️ Automatic Binding

webforJ ofrece varias características que simplifican el proceso de configuración y enlace automático para los desarrolladores. Esta sección demuestra cómo usar estas características de manera efectiva.

Concepto​

Características clave​

Temas​