Data Binding

Openen in ChatGPT

webforJ bevat een functie voor gegevensbinding 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 gegevenssynchronisatie wordt verminderd.

Concept

De volgende 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 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 gebruikt de BindingContext om UI-componenten te koppelen aan de eigenschappen van het Hero-object. Wanneer een gebruiker op de verzendknop klikt, schrijft de app de ingevoerde gegevens in het formulier terug naar de Hero-bean als ze geldig zijn.

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

Belangrijkste functies

Bidirectionele Binding: Ondersteunt bidirectionele gegevensbinding, waardoor wijzigingen in het datamodel de UI kunnen bijwerken, en gebruikersinteracties in de UI het datamodel kunnen bijwerken.
Ondersteuning voor Validatie: Integreert uitgebreide validatiemechanismen die u kunt aanpassen en uitbreiden. Ontwikkelaars kunnen hun eigen validatieregels implementeren of bestaande validatiekaders zoals Jakarta Validation gebruiken om de gegevensintegriteit te verifiëren vóór het bijwerken van het model.
Uitbreidbaarheid: Kan eenvoudig worden uitgebreid om verschillende soorten UI-componenten, gegevens-transformaties 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 eenvoudig te beheren zijn.

Onderwerpen

Openen in ChatGPT

📄️ 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 backend-model mogelijk. Elke binding kan gegevenssynchronisatie, validatie, transformatie en evenementenbeheer afhandelen.

🗃️ Validatie

5 items

📄️ Transformation

Data-transformaties converteren tussen de datatypes die in UI-componenten worden gebruikt en die in jouw datamodel. Dit houdt de datatypes compatibel en op de juiste manier geformatteerd bij het verplaatsen van gegevens tussen de frontend en backend van jouw applicaties.

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

Concept​

Belangrijkste functies​