Data Binding

Ouvrir dans ChatGPT

webforJ inclut une fonctionnalité de liaison de données qui intègre les composants de l'interface utilisateur avec les modèles de données backend dans les applications Java. Cette fonctionnalité comble le fossé entre l'interface utilisateur et la couche de données afin que les modifications dans l'interface utilisateur se reflètent dans le modèle de données et vice versa, réduisant ainsi la complexité du traitement des événements et de la synchronisation des données.

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

Concept

La démonstration suivante présente une simple application webforJ pour l'enregistrement de super-héros en utilisant la liaison de données webforJ. L'application se compose de deux parties principales : HeroRegistration.java et Hero.java.

Dans HeroRegistration.java, le code configure l'interface utilisateur avec un TextField pour entrer le nom du héros, un ComboBox pour sélectionner un superpouvoir, et un Button pour soumettre l'enregistrement.

La classe Hero définit le modèle de données avec des contraintes de validation sur le nom et le pouvoir du héros. Les entrées doivent être valides et respecter des critères spécifiés tels que la longueur et le schéma.

L'application utilise le BindingContext pour lier les composants de l'interface utilisateur aux propriétés de l'objet Hero. Lorsque l'utilisateur clique sur le bouton de soumission, l'application écrit les données saisies dans le formulaire dans le bean Hero si elles sont valides.

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;
  }
}

Caractéristiques clés

• Liaison bidirectionnelle : Prend en charge la liaison de données bidirectionnelle, permettant aux modifications du modèle de données de mettre à jour l'interface utilisateur, et les interactions des utilisateurs dans l'interface utilisateur de mettre à jour le modèle de données.

• Support de validation : Intègre des mécanismes de validation complets que vous pouvez personnaliser et étendre. Les développeurs peuvent mettre en œuvre leurs propres règles de validation ou utiliser des frameworks de validation existants comme Jakarta Validation pour vérifier l'intégrité des données avant de mettre à jour le modèle.

• Extensibilité : Peut être facilement étendue pour prendre en charge différents types de composants d'interface utilisateur, de transformations de données et de scénarios de validation complexes.

• Configuration par annotation : Utilise des annotations pour minimiser le code standard, rendant les liaisons entre les composants d'interface utilisateur et les modèles de données déclaratives et faciles à gérer.

Sujets

📄️Bindings

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

🗃Validation

5 articles

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