Triggers

Openen in ChatGPT

Bij standaardinstellingen valideren bindings automatisch componenten opnieuw wanneer gebruikers hun gegevens wijzigen, zoals het invoeren van nieuwe tekst, het aanvinken van een selectievakje of het selecteren van een nieuwe optie in een radioknop. Als je de automatische validaties wilt uitschakelen en deze alleen wilt rapporteren wanneer je naar het datamodel schrijft, kun je de binding zo configureren dat deze zijn uitgeschakeld. Dit geeft je controle over wanneer en hoe validaties plaatsvinden, zodat je validaties kunt beheren op basis van specifieke app-behoeften of gebruikersinteracties.

BindingContext<User> context = new BindingContext<>(User.class);
context.bind(emailField, "email")
  .useValidator(
    Validator.from(new EmailValidator(), "Aangepaste melding voor ongeldig e-mailadres"))
  .autoValidate(false)
  .add();

Het is ook mogelijk om de automatische validaties voor de hele context uit te schakelen.

BindingContext<User> context = new BindingContext<>(User.class);
context.setAutoValidate(false);

Waarde Wijzigingsmodus

Sommige componenten, zoals de veldcomponenten, implementeren de ValueChangeModeAware interface, waarmee je kunt controleren wanneer het systeem een ValueChangeEvent rapporteert. Je kunt bijvoorbeeld veldcomponenten instellen om waarde wijzigingen alleen bij verlies van focus te rapporteren. Deze configuratie vermindert de frequentie van validaties, optimaliseert de prestaties en verbetert de gebruikerservaring door de validaties te richten op momenten waarop de gebruiker een invoersessie voltooit, in plaats van tijdens het actieve typen.

 emailField.setValueChangeMode(ValueChangeMode.ON_BLUR);

Hervalidatie

Hoewel validaties doorgaans automatisch worden geactiveerd tijdens het schrijven van gegevens, kun je ze ook handmatig aanroepen om de status van de gegevens te verifiëren zonder te proberen deze naar het model te schrijven. Deze handmatige benadering is bijzonder nuttig in scenario's waarin je functies wilt in- of uitschakelen op basis van de geldigheid van de formuliergegevens zonder een update uit te voeren.

Overweeg een klassiek voorbeeld van een Reisdatumkiezer, waarbij een gebruiker twee data moet selecteren: de startdatum en de einddatum van een reis. Het is niet geldig om een einddatum te kiezen die vóór de startdatum ligt, of een startdatum die na de einddatum ligt. Je kunt deze afhankelijkheden oplossen door handmatig validaties te activeren:

TripBooking.java

public class TripBooking extends App {
  DateTimeField startDateField = new DateTimeField("Startdatum");
  DateTimeField endDateField = new DateTimeField("Einddatum");
  FlexLayout layout = FlexLayout.create(startDateField, endDateField).vertical().build().setStyle("margin", "20px auto")
      .setMaxWidth("400px");

  LocalDateTime startDate;
  LocalDateTime endDate;

  @Override
  public void run() throws WebforjException {
    BindingContext<Trip> context = new BindingContext<>(Trip.class);
    context.bind(startDateField, "startDate")
        .useValidator(Objects::nonNull, "Startdatum is vereist")
        .useValidator(value -> endDate != null && value.isBefore(endDate),
            "Startdatum moet vóór einddatum liggen")
        .add();

    context.bind(endDateField, "endDate")
        .useValidator(Objects::nonNull, "Einddatum is vereist")
        .useValidator(value -> startDate != null && value.isAfter(startDate),
            "Einddatum moet na startdatum liggen")
        .add();

    startDateField.setValueChangeMode(ValueChangeMode.ON_BLUR);
    startDateField.addValueChangeListener(event -> {
      startDate = event.getValue();
      context.getBinding("endDate").validate();
    });

    endDateField.setValueChangeMode(ValueChangeMode.ON_BLUR);
    endDateField.addValueChangeListener(event -> {
      endDate = event.getValue();
      context.getBinding("startDate").validate();
    });

    Frame frame = new Frame();
    frame.add(layout);
  }
}

Trip.java

public class Trip {
  private LocalDateTime startDate;
  private LocalDateTime endDate;

  public LocalDateTime getStartDate() {
    return startDate;
  }

  public void setStartDate(LocalDateTime startDate) {
    this.startDate = startDate;
  }

  public LocalDateTime getEndDate() {
    return endDate;
  }

  public void setEndDate(LocalDateTime endDate) {
    this.endDate = endDate;
  }
}