Data Binding

Open in ChatGPT

webforJ bevat een data binding functie die UI-componenten naadloos integreert met backend datamodellen in Java-applicaties. Deze functie overbrugt de kloof tussen de UI en de datalaag, waardoor veranderingen in de UI worden weerspiegeld in het datamodel en vice versa. Dit verbetert de gebruikerservaring en vermindert de complexiteit van event handling en datasynchronisatie.

Concept

De volgende demonstratie toont een eenvoudige webforJ-app voor het registreren van superhelden met behulp van webforJ data binding. 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 validatie constraints op de naam en de kracht van de held, wat ervoor zorgt dat invoer geldig is en voldoet 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 indienen-knop 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;
  }
}

Key features

Bidirectionele Binding: Ondersteunt bidirectionele data binding, waardoor wijzigingen in het datamodel de UI bijwerken, en gebruikersinteracties in de UI het datamodel bijwerken.
Validatie Support: Integreert uitgebreide validatiemechanismen die je kunt aanpassen en uitbreiden. Ontwikkelaars kunnen hun eigen validatieregels implementeren of bestaande validatiekaders zoals Jakarta Validation gebruiken om dataintegriteit te waarborgen voordat ze het model bijwerken.
Uitbreidbaarheid: Kan eenvoudig worden uitgebreid om verschillende soorten UI-componenten, datatransformaties en complexe validatiescenario's te ondersteunen.
Annotatie-gedreven Configuratie: Maakt gebruik van annotaties om boilerplate-code te minimaliseren, waardoor de bindingen tussen UI-componenten en datamodellen declaratief en eenvoudig te beheren zijn.

Topics

Open 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 artikelen

📄️ Transformation

Data-transformaties zijn een cruciaal kenmerk dat naadloze conversie tussen de datatypes die in UI-componenten worden gebruikt en die in uw datamodel mogelijk maakt. Deze mogelijkheid zorgt ervoor dat datatypes compatibel en op de juiste manier opgemaakt zijn bij het verplaatsen van gegevens tussen de frontend en backend van uw 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​

Key features​