Data Binding

Open in ChatGPT

webforJ includes a data binding feature that integrates UI components with backend data models in Java applications. This feature bridges the gap between the UI and the data layer so that changes in the UI reflect in the data model and vice versa, reducing the complexity of event handling and data synchronization.

Concept

The following demonstration showcases a simple webforJ app for registering superheroes using webforJ data binding. The app consists of two main parts: HeroRegistration.java and Hero.java.

In HeroRegistration.java, the code configures the user interface with a TextField for entering the hero's name, a ComboBox to select a superpower, and a Button to submit the registration.

The Hero class defines the data model with validation constraints on the hero's name and power. Entries must be valid and adhere to specified criteria such as length and pattern.

The app uses the BindingContext to bind UI components to the properties of the Hero object. When a user clicks the submit button, the app writes the data entered in the form back to the Hero bean if they're valid.

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

Key features

• Bidirectional Binding: Supports bidirectional data binding, allowing changes in the data model to update the UI, and user interactions in the UI to update the data model.

• Validation Support: Integrates comprehensive validation mechanisms that you can customize and extend. Developers can implement their own validation rules or use existing validation frameworks like Jakarta Validation to verify data integrity before updating the model.

• Extensibility: Can be easily extended to support different types of UI components, data transformations, and complex validation scenarios.

• Annotation-Driven Configuration: Uses annotations to minimize boilerplate code, making the bindings between UI components and data models declarative and easy to manage.

Topics

Open in ChatGPT

📄️ Bindings

A binding in webforJ links a specific property of a Java Bean to a UI component. This linkage enables automatic updates between the UI and the backend model. Each binding can handle data synchronization, validation, transformation, and event management.

🗃️ Validation

5 items

📄️ Transformation

Data transformations convert between the data types used in UI components and those in your data model. This keeps data types compatible and appropriately formatted when moving data between the frontend and backend of your applications.

📄️ Automatic Binding

webforJ offers several features that streamline the configuration and automatic binding process for developers. This section demonstrates how to use these features effectively.