Reporters

Openen in ChatGPT

Validatierapporteurs worden gebruikt om feedback te geven over het validatieproces aan de gebruikersinterface. Deze functie is essentieel om gebruikers te informeren over de resultaten van hun invoervalidatie, vooral in complexe formulieren of gegevensintensive applicaties.

Wat is een validatierapporteur?

Een validatierapporteur is een component die de resultaten van validaties verwerkt en aan gebruikers weergeeft. Het fungeert als een brug tussen de validatielogica en de gebruikersinterface, waardoor de validatie-uitkomsten effectief en duidelijk worden gecommuniceerd.

Core Components Standaard Rapporteur

webforJ omvat de DefaultBindingReporter, een standaard bindingsrapporteur die naadloos werkt met alle kernwebforJ-componenten. Dit ingebouwde rapport maakt automatisch validatiefouten zichtbaar, waardoor de behoefte aan aangepaste implementatie in veel gevallen wordt geëlimineerd. Afhankelijk van de configuratie van de component toont de DefaultBindingReporter validatiefouten direct als een popover of inline, direct onder de component. Deze functie vereenvoudigt het foutrapportageproces aanzienlijk, zorgt voor duidelijke en directe communicatie van validatiefouten, en verbetert de gebruikerservaring door onmiddellijke, contextgevoelige feedback te geven over invoervalidatie.

Validatierapporteurs configureren

Je kunt validatierapporteurs binnen de bindingcontext configureren om aan te passen hoe berichten worden gepresenteerd. Typisch zou je een validatierapporteur implementeren om validatieresultaten te aggregeren en deze vervolgens op een gebruiksvriendelijke manier weer te geven, zoals het markeren van onjuiste velden, het weergeven van foutmeldingen of het bijwerken van statusindicatoren.

Hier is een voorbeeld van hoe je een validatierapporteur voor een veld kunt instellen

UserRegistration.java

@StyleSheet("ws://css/styles.css")
public class UserRegistration extends App {
  Div errors = new Div();
  TextField emailField = new TextField("E-mailadres");

  FlexLayout layout = FlexLayout.create(emailField, errors).vertical().build();

  @Override
  public void run() throws WebforjException {
    errors.addClassName("error");
    errors.setVisible(false);

    layout.addClassName("form");

    BindingContext<User> context = new BindingContext<>(User.class);
    context.bind(emailField, "email")
        .useValidator(
            Validator.from(new EmailValidator(), "Aangepaste boodschap voor ongeldige e-mailadres"))
        .useReporter((validationResult, binding) -> {
          errors.setVisible(!validationResult.isValid());

          if (!validationResult.isValid()) {
            errors.setText(validationResult.getMessages().stream().findFirst().orElse(""));
          }
        })
        .add();

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

User.java

public class User {
  private String name;
  private String email;
  private String password;

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public String getEmail() {
    return email;
  }

  public void setEmail(String email) {
    this.email = email;
  }

  public String getPassword() {
    return password;
  }

  public void setPassword(String password) {
    this.password = password;
  }
}

styles.css

.error {
  border: 1px solid #f1aeb5;
  border-radius: 5px;
  background-color: #f8d7da;
  color: #58151c;
  padding: 5px;
}

.form {
  margin: 20px auto;
  max-width: 400px;
}

In de bovenstaande code omvat de e-mailbinding een aangepaste rapporteur die direct validatieberichten onder het invoerveld weergeeft. Deze opzet maakt gebruik van de useReporter-methode, die configureert hoe de binding omgaat met en validatieresultaten presenteert. Deze methode koppelt effectief de validatielogica aan de gebruikersinterface, waardoor eventuele validatieproblemen onmiddellijk zichtbaar zijn voor de gebruiker, en de interactiviteit en gebruikerservaring van het formulier verbetert.