Data Binding

Abrir en ChatGPT

webforJ incluye una característica de enlace de datos que integra componentes de UI con modelos de datos de backend en aplicaciones Java. Esta función cierra la brecha entre la interfaz de usuario y la capa de datos para que los cambios en la UI se reflejen en el modelo de datos y viceversa, reduciendo la complejidad del manejo 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 sencilla 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 en el nombre y el poder del héroe. Las entradas deben ser válidas y cumplir con criterios específicos, como longitud y patrón.

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

HeroRegistration.java

public class HeroRegistration extends App {

  private TextField name = new TextField("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ón Láser", "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 al bean
      ValidationResult results = context.write(bean);

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

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

Hero.java

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ón Láser|Velocidad|Teletransportación", message = "Poder inválido")
  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 puedes 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: Se puede extender 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 componentes de UI y modelos de datos sean declarativos y fáciles de gestionar.

Temas

📄️Bindings

Link Java Bean properties to webforJ UI components through BindingContext to synchronize reads and writes between model and view.

🗃Validación

5 artículos

📄️Transformation

Convert between UI and model data types in webforJ bindings by implementing the Transformer interface and wiring it via useTransformer.

📄️Automatic Binding

Bind UI fields to bean properties automatically with BindingContext.of using UseProperty, BindingExclude, and UseValidator annotations.