Data Binding

Openen in ChatGPT

webforJ omvat een gegevensbinding-functie die UI-componenten integreert met backend-gegevensmodellen in Java-toepassingen. Deze functie overbrugt de kloof tussen de UI en de gegevenslaag, zodat wijzigingen in de UI worden weerspiegeld in het gegevensmodel en vice versa, wat de complexiteit van gebeurtenisafhandeling en gegevensynchronisatie vermindert.

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 onderstaande demonstratie toont een eenvoudige webforJ-app voor het registreren van superhelden met behulp van webforJ-gegevensbinding. 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 gegevensmodel met validatiebeperkingen voor de naam en kracht van de held. Invoer moet geldig zijn en voldoen aan gespecificeerde criteria zoals lengte en patroon.

De app gebruikt 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;
  }
}

Belangrijkste kenmerken

• Bidirectionele Binding: Ondersteunt bidirectionele gegevensbinding, waarmee wijzigingen in het gegevensmodel de UI bijwerken, en gebruikersinteracties in de UI het gegevensmodel bijwerken.

• Validatieondersteuning: Integreert uitgebreide valid механisten 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 ze het model bijwerken.

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

• Annotatie-Aangedreven Configuratie: Maakt gebruik van annotaties om de boilerplatecode te minimaliseren, waardoor de bindingen tussen UI-componenten en gegevensmodellen declaratief en gemakkelijk te beheren zijn.

Onderwerpen

📄️ Bindings

Een binding in webforJ koppelt een specifieke eigenschap van een Java Bean aan een UI-component. Deze koppeling maakt automatische updates tussen de UI en het backendmodel mogelijk. Elke binding kan gegevenssynchronisatie, validatie, transformatie en gebeurtenisbeheer afhandelen.

🗃️ Validatie

5 items

📄️ Transformation

Data-transformaties zetten de datatypes die in UI-componenten worden gebruikt om naar die in uw datamodel. Dit houdt de datatypes compatibel en goed geformatteerd wanneer data tussen de frontend en backend van uw applicaties wordt verplaatst.

📄️ Automatic Binding

webforJ biedt verschillende functies die het configuratie- en automatische bindproces voor ontwikkelaars stroomlijnen. Deze sectie toont aan hoe je deze functies effectief kunt gebruiken.