Data Binding

In ChatGPT öffnen

webforJ umfasst eine Datenbindung, die UI-Komponenten mit Backend-Datenmodellen in Java-Anwendungen integriert. Diese Funktion überbrückt die Kluft zwischen der Benutzeroberfläche und der Datenschicht, sodass Änderungen in der UI sich im Datenmodell und umgekehrt widerspiegeln. Dadurch wird die Komplexität des Event-Handling und der Daten-Synchronisierung reduziert.

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."

Konzept

Die folgende Demonstration zeigt eine einfache webforJ-App zur Registrierung von Superhelden mithilfe der Datenbindung von webforJ. Die App besteht aus zwei Hauptteilen: HeroRegistration.java und Hero.java.

In HeroRegistration.java konfiguriert der Code die Benutzeroberfläche mit einem TextField zur Eingabe des Namens des Helden, einem ComboBox zur Auswahl einer Superkraft und einem Button zur Einreichung der Registrierung.

Die Klasse Hero definiert das Datenmodell mit Validierungsanforderungen für den Namen und die Kraft des Helden. Die Einträge müssen gültig sein und spezifischen Kriterien wie Länge und Muster entsprechen.

Die App verwendet den BindingContext, um UI-Komponenten an die Eigenschaften des Hero-Objekts zu binden. Wenn ein Benutzer auf die Schaltfläche "Absenden" klickt, schreibt die App die im Formular eingegebenen Daten zurück in das Hero-Bean, sofern sie gültig sind.

HeroRegistration.java

public class HeroRegistration extends App {

  private TextField name = new TextField("Text Field");
  private ComboBox power = new ComboBox("Power");
  private Button submit = new Button("Submit Application");
  private FlexLayout layout = FlexLayout.create(name, power, submit).vertical().build()
      .setStyle("margin", "20px auto").setMaxWidth("400px");

  @Override
  public void run() throws WebforjException {
    power.insert("Fly", "Invisible", "LaserVision", "Speed", "Teleportation");

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

    // reflect the bean data in the form
    context.read(bean);

    submit.onClick(e -> {
      // write the form data back to the bean
      ValidationResult results = context.write(bean);

      if (results.isValid()) {
        // do something with the bean
        // repository.persist(bean)
      }
    });

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

Hero.java

public class Hero {

  @NotEmpty(message = "Name cannot be empty")
  @Length(min = 3, max = 20)
  private String name;

  @NotEmpty(message = "Unspecified power")
  @Pattern(regexp = "Fly|Invisible|LaserVision|Speed|Teleportation", message = "Invalid power")
  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 "Name: " + name + ", Power: " + power;
  }
}

Hauptmerkmale

• Bidirektionale Bindung: Unterstützt bidirektionale Datenbindung, wodurch Änderungen im Datenmodell die UI aktualisieren und Benutzereingaben in der UI das Datenmodell aktualisieren.

• Validierungsunterstützung: Integriert umfassende Validierungsmechanismen, die Sie anpassen und erweitern können. Entwickler können eigene Validierungsregeln implementieren oder vorhandene Validierungsframeworks wie Jakarta Validation verwenden, um die Datenintegrität vor der Aktualisierung des Modells zu überprüfen.

• Erweiterbarkeit: Kann leicht erweitert werden, um verschiedene Arten von UI-Komponenten, Datenumwandlungen und komplexe Validierungsszenarien zu unterstützen.

• Annotierungsbasierte Konfiguration: Verwendet Annotationen, um Boilerplate-Code zu minimieren und die Bindungen zwischen UI-Komponenten und Datenmodellen deklarativ und einfach zu verwalten.

Themen

📄️Bindings

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

🗃Validierung

5 Elemente

📄️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.