Data Binding

Openen in ChatGPT

webforJ bevat een functie voor databinding die UI-componenten integreert met backend datamodellen in Java-toepassingen. Deze functie overbrugt de kloof tussen de UI en de datalaag, zodat wijzigingen in de UI worden weerspiegeld in het datamodel en vice versa, waardoor de complexiteit van gebeurtenisafhandeling en datasynchronisatie wordt verminderd.

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

De volgende demonstratie toont een eenvoudige webforJ-app voor het registreren van superhelden met behulp van webforJ databinding. De app bestaat uit twee hoofdonderdelen: HeroRegistration.java en Hero.java.

In HeroRegistration.java configureert de code de gebruikersinterface met een TextField voor het invoeren van de naam van de held, een ComboBox om een superkracht te selecteren, en een Button om de registratie in te dienen.

De Hero klasse definieert het datamodel met validatiebeperkingen voor de naam en kracht van de held. Invoeren moeten geldig zijn en voldoen aan gespecificeerde criteria zoals lengte en patroon.

De app maakt gebruik van de BindingContext om UI-componenten te binden aan de eigenschappen van het Hero object. Wanneer een gebruiker op de verzendknop klikt, schrijft de app de gegevens die in het formulier zijn ingevoerd terug naar de Hero bean als ze geldig zijn.

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

Sleutelkenmerken

• Bidirectionele Binding: Ondersteunt bidirectionele databinding, waardoor wijzigingen in het datamodel de UI kunnen bijwerken, en gebruikersinteracties in de UI het datamodel kunnen bijwerken.

• Validatieondersteuning: Integreert uitgebreide validatiemechanismen die je kunt aanpassen en uitbreiden. Ontwikkelaars kunnen hun eigen validatieregels implementeren of bestaande validatiekaders zoals Jakarta Validation gebruiken om de gegevensintegriteit te verifiëren voordat het model wordt bijgewerkt.

• Uitbreidbaarheid: Kan gemakkelijk worden uitgebreid om verschillende soorten UI-componenten, datatransformaties en complexe validatiescenario's te ondersteunen.

• Annotatie-gedreven Configuratie: Maakt gebruik van annotaties om de boilerplate-code te minimaliseren, waardoor de bindingen tussen UI-componenten en datamodellen declaratief en gemakkelijk te beheren zijn.

Onderwerpen

📄️Bindings

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

🗃Validatie

5 items

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