Siirry pääsisältöön

Validating and Binding Data

Avaa ChatGPT:ssä

Sovelluksesi Observers and Route Parameters voi käyttää FormView-komponenttia olemassa olevien asiakastietojen muokkaamiseen. Tämä vaihe hyödyntää Data binding -toimintoa, joka yhdistää käyttöliittymän komponentit suoraan tietomalliin automaattista arvon synkronointia varten. Tämä vähentää boilerplate-koodia sovelluksessasi ja mahdollistaa validointitarkistusten lisäämisen Spring-entiteettiin Customer, pakottaen käyttäjät antamaan täydellisiä ja tarkkoja tietoja lomakkeita täyttäessään. Tämä vaihe kattaa seuraavat käsitteet:

Tämän vaiheen suorittaminen luo version 5-validating-and-binding-data.

Sovelluksen ajaminen​

Sovelluksesi kehittämisen aikana voit käyttää 5-validating-and-binding-data -esimerkkiä vertailukohtana. Näet sovelluksen toiminnassa seuraavasti:

  1. Siirry ylimmän tason hakemistoon, joka sisältää pom.xml-tiedoston, tämä on 5-validating-and-binding-data, jos seuraat GitHub-version ohjeita.

  2. Käytä seuraavaa Maven-komentoa ajaaksesi Spring Boot -sovellusta paikallisesti:

    mvn

Sovelluksen ajaminen avaa automaattisesti uuden selaimen osoitteeseen http://localhost:8080.

Validointisääntöjen määrittäminen​

Muokattavaa dataa sisältävän sovelluksen kehittäminen tulisi sisältää validointia. Validointitarkistukset auttavat ylläpitämään merkityksellisiä ja tarkkoja käyttäjiltä lähetettyjä tietoja. Jos tarkistuksia ei tehdä, se voi johtaa ongelmiin, joten on tärkeää havaita, millaisia virheitä käyttäjät voivat tehdä lomaketta täyttäessään reaaliajassa.

Koska se, mikä on voimassa olevaa, voi vaihdella ominaisuuksien välillä, sinun on määritettävä, mikä tekee kustakin ominaisuudesta voimassa olevan, ja ilmoitettava käyttäjälle, jos jokin on virheellistä. Onneksi voit tehdä tämän helposti Jakarta Validation avulla. Jakarta validationin avulla voit lisätä rajoituksia ominaisuuksiin annotaatioina.

Tässä oppaassa käytetään kahta Jakarta-annotaatiota, @NotEmpty ja @Pattern. @NotEmpty tarkistaa null- ja tyhjät merkkijonot, kun taas @Pattern tarkistaa, vastaako ominaisuus asetettua säännöllistä lauseketta. Molemmat annotaatiot mahdollistavat viestin lisäämisen näytettäväksi, kun ominaisuudesta tulee virheellinen.

Edellyttää, että sekä etu- että sukunimet ovat pakollisia ja sisältävät vain kirjaimia, samalla kun yritysnimi on valinnainen ja sallii kirjaimet, numerot ja väliotsikot, lisää seuraavat annotaatiot Customer-entiteettiin:

Customer.java

  @NotEmpty(message = "Asiakkaan etunimi on pakollinen")
  @Pattern(regexp = "[a-zA-Z]*", message = "Virheelliset merkit")
  private String firstName = "";

  @NotEmpty(message = "Asiakkaan sukunimi on pakollinen")
  @Pattern(regexp = "[a-zA-Z]*", message = "Virheelliset merkit")
  private String lastName = "";

  @Pattern(regexp = "[a-zA-Z0-9 ]*", message = "Virheelliset merkit")
  private String company = "";

  private Country country = Country.UNKNOWN;

  public enum Country {
    UNKNOWN,

Katso Jakarta Bean Validation -rajoitusviitteestä täydellinen lista validoitavista rajoituksista tai opi lisää webforJ Jakarta Validation -artikkelista.

Kenttien sitominen​

Käyttääksesi Customer-validointitarkistuksia käyttöliittymässä FormView, sinun on luotava BindingContext datan sitomista varten. Ennen datan sitomista jokaiselle kentälle FormView:ssä tarvittiin tapahtumakuuntelija synkronoimaan se manuaalisesti Spring-entiteetin Customer kanssa. BindingContext-luokan luominen FormView:ssä sitoo ja synkronoi automaattisesti Customer-datan mallin käyttöliittymän komponentteihin.

BindingContextin luominen​

BindingContext-instanssi tarvitsee Spring-beanin, jonka kanssa sitoumukset synkronoidaan. FormView:ssä määrittele BindingContext käyttämällä Customer-entiteettiä:

FormView.java
public class FormView extends Composite<Div> implements WillEnterObserver {
  private final CustomerService customerService;

  private BindingContext<Customer> context;

  Customer customer = new Customer();

Käytä sitten automaattisesti sitomaan käyttöliittymäkomponentit ominaisuuksien nimiä käyttäen BindingContext.of() seuraavilla parametreilla:

  • this : Aikaisemmin määrittelit context-muuttujan BindingContext:ksi. Ensimmäinen parametri asettaa, mikä objekti sisältää sidottavat komponentit.
  • Customer.class : Toinen parametri on käytettävän beanin luokka sitomista varten.
  • true : Kolmas parametri ottaa käyttöön Jakarta-validoinnin, jolloin konteksti voi käyttää asettamiasi validoijia Customer-luokalle. Tämä muuttaa virheellisten komponenttien tyyliä ja näyttää asetetut viestit.

Yhteenvetona se näyttää seuraavalta koodiriviltä:

context = BindingContext.of(this, Customer.class, true);

Lomakkeen responsiiviseksi tekeminen​

Datan sitomisen avulla sovelluksesi suorittaa nyt automaattisesti validointitarkistuksia. Lisäämällä tapahtumakuuntelijan tarkistuksiin voit estää käyttäjiä lähettämästä virheellistä lomaketta. Lisää seuraavat kooditiedot, jotta lähetä-painike on aktiivinen vain, kun lomake on voimassa:

context = BindingContext.of(this, Customer.class, true);
context.onValidate(e -> submit.setEnabled(e.isValid()));

Tapahtumakuuntelijoiden poistaminen komponenteista​

Jokainen käyttöliittymän muutos on nyt automaattisesti synkronoitu BindingContextin kanssa. Tämä tarkoittaa, että voit nyt poistaa tapahtumakuuntelijat jokaiselta kentältä:

Ennen

FormView.java
// Ilman datan sitomista
TextField firstName = new TextField("Etunimi", e -> customer.setFirstName(e.getValue()));
TextField lastName = new TextField("Sukunimi", e -> customer.setLastName(e.getValue()));
TextField company = new TextField("Yritys", e -> customer.setCompany(e.getValue()));
ChoiceBox country = new ChoiceBox("Maa", e -> customer.setCountry(Country.valueOf(e.getSelectedItem().getText())));

Jälkeen

FormView.java
// Datansitomisen kanssa
TextField firstName = new TextField("Etunimi");
TextField lastName = new TextField("Sukunimi");
TextField company = new TextField("Yritys");
ChoiceBox country = new ChoiceBox("Maa");

Sitominen ominaisuuksien nimillä​

Koska jokaisen komponentin nimi vastasi datamallia, webforJ käytti Automattista sitomista. Jos nimet eivät vastanneet, voit käyttää @UseProperty-annotaatiota niiden kartoittamiseksi.

@UseProperty("firstName")
TextField firstNameField = new TextField("Etunimi");

Datan lukeminen fillForm()-metodissa​

Aiemmin fillForm()-metodissa aloitit jokaisen komponentin arvon asettamalla sen manuaalisesti Customer-kopiosta. Mutta nyt, kun käytät BindingContext-luokkaa, voit käyttää read()-metodia. Tämä metodi täyttää jokaisen sidotun komponentin datassa olevan Customer-kopion mukaisella ominaisuudella.

fillForm()-metodissa vaihda setValue()-metodit read()-metodiin:

FormView.java
public void fillForm(Long customerId) {
  customer = customerService.getCustomerByKey(customerId);
  
  // Poistettu jokainen setValue()-metodi käyttöliittymän komponenteille

    context.read(customer);
  }

Validoinnin lisääminen submitCustomer()-metodiin​

Viimeinen muutos FormView:ssä tämän vaiheen aikana on lisätä turvatoimi submitCustomer()-metodiin. Ennen kuin muutokset sitoutuvat H2-tietokantaan, sovellus suorittaa viimeisen validoinnin sidotulle kontekstille write()-metodia käyttäen.

write()-metodi päivittää beanin ominaisuudet BindingContext:ssä käytettävien sidottujen käyttöliittymän komponenttien avulla ja palauttaa ValidationResult-objektin.

Käytä write()-metodia kirjoittaaksesi Customer-kopioon käyttäen sidottuja komponentteja FormView:ssä. Sitten, jos palautettu ValidationResult on voimassa, päivitä H2-tietokanta kirjoitetuilla tiedoilla.

FormView.java
private void submitCustomer() {
  ValidationResult results = context.write(customer);
  if (results.isValid()) {
    if (customerService.doesCustomerExist(customerId)) {
      customerService.updateCustomer(customer);
    } else {
      customerService.createCustomer(customer);
    }
    navigateToMain();
  }
}

Valmis FormView​

Näiden muutosten myötä FormView näyttää tältä. Sovellus tukee nyt datan sitomista ja validointia käyttäen Spring Bootia ja webforJ:ta. Lomakkeen syötteet synkronoidaan automaattisesti mallin kanssa ja tarkistetaan validointisääntöjen mukaan.

FormView.java
@Route("customer/:id?<[0-9]+>")
@FrameTitle("Asiakaslomake")
public class FormView extends Composite<Div> implements WillEnterObserver {
  private final CustomerService customerService;
  private BindingContext<Customer> context;
  private Customer customer = new Customer();
  private Long customerId = 0L;
  private Div self = getBoundComponent();
  private TextField firstName = new TextField("Etunimi");
  private TextField lastName = new TextField("Sukunimi");
  private TextField company = new TextField("Yritys");
  private ChoiceBox country = new ChoiceBox("Maa");
  private Button submit = new Button("Lähetä", ButtonTheme.PRIMARY, e -> submitCustomer());
  private Button cancel = new Button("Peruuta", ButtonTheme.OUTLINED_PRIMARY, e -> navigateToMain());
  private ColumnsLayout layout = new ColumnsLayout(

Seuraava askel​

Seuraava vaihe, Integrating an App Layout, keskittyy AppLayout:n käyttöön, jolla lisätään sivuvalikko, joka on saatavilla asiakkaita käsittelevillä tauluilla ja asiakaslomakesivuilla. Opit myös lisää yhdestä asettelutyökalusta, FlexLayout-komponentista.