Data Binding

In ChatGPT öffnen

webforJ bietet eine Datenbindungsfunktion, 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 Benutzeroberfläche im Datenmodell und umgekehrt widergespiegelt werden, wodurch die Komplexität der Ereignisbehandlung und der Datensynchronisation verringert wird.

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 unter Verwendung 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, um den Namen des Helden einzugeben, einer ComboBox, um eine Superkraft auszuwählen, und einem Button, um die Registrierung abzuschicken.

Die Klasse Hero definiert das Datenmodell mit Validierungsbeschränkungen für den Namen und die Kraft des Helden. Die Eingaben müssen gültig sein und bestimmten 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 'Abschicken' klickt, schreibt die App die im Formular eingegebenen Daten zurück in das Hero-Bean, sofern sie gültig sind.

HeroRegistration.java
Hero.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);
  }
}

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, sodass Änderungen im Datenmodell die Benutzeroberfläche aktualisieren und Benutzerinteraktionen in der Benutzeroberfläche das Datenmodell aktualisieren.
Validierungsunterstützung: Integriert umfassende Validierungsmechanismen, die angepasst und erweitert werden 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 unterschiedliche Arten von UI-Komponenten, Datenumwandlungen und komplexe Validierungsszenarien zu unterstützen.
Annotierungsgetriebene Konfiguration: Verwendet Annotations, um Boilerplate-Code zu minimieren, wodurch die Bindungen zwischen UI-Komponenten und Datenmodellen deklarativ und einfach zu verwalten sind.

Themen

📄️ Bindings

Eine Bindung in webforJ verknüpft eine bestimmte Eigenschaft eines Java Beans mit einer UI-Komponente. Diese Verknüpfung ermöglicht automatische Aktualisierungen zwischen der Benutzeroberfläche und dem Backend-Modell. Jede Bindung kann die Daten-Synchronisation, Validierung, Transformation und Ereignisverwaltung übernehmen.

🗃️ Validierung

5 Elemente

📄️ Transformation

Datenumwandlungen konvertieren zwischen den Datentypen, die in UI-Komponenten verwendet werden, und denen in Ihrem Datenmodell. Dies hält die Datentypen kompatibel und entsprechend formatiert, wenn Daten zwischen dem Frontend und Backend Ihrer Anwendungen verschoben werden.

📄️ Automatic Binding

webforJ bietet mehrere Funktionen, die den Konfigurations- und automatischen Bindungsprozess für Entwickler optimieren. In diesem Abschnitt wird gezeigt, wie diese Funktionen effektiv genutzt werden können.

Konzept​

Hauptmerkmale​

Themen​