Siirry pääsisältöön

Validating and Binding Data

Avaa ChatGPT:ssä

Sovelluksesi Observers and Route Parameters voi käyttää FormView-komponenttia muokataksesi olemassa olevia asiakastietoja. Tämä vaihe hyödyntää Data binding -menetelmää, joka yhdistää käyttöliittymäkomponentit suoraan tietomalliin automaattista arvon synkronointia varten. Tämä vähentää boilerplate-koodia sovelluksessasi ja antaa sinun lisätä validointitarkistuksia Spring-entiteetille Customer, jolloin käyttäjät antavat täydellisiä ja tarkkoja tietoja täyttäessään lomakkeita. Tämä vaihe kattaa seuraavat käsitteet:

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

Sovelluksen suorittaminen​

Sovellustasi kehittäessäsi voit käyttää 5-validating-and-binding-data -versiona vertailukohtana. Näet sovelluksen toiminnassa:

  1. Siirry ykkösluokan hakemistoon, joka sisältää pom.xml-tiedoston, tämä on 5-validating-and-binding-data, jos seuraat GitHubin versiota.

  2. Käytä seuraavaa Maven-komentoa suorittaaksesi Spring Boot -sovelluksen paikallisesti:

    mvn

Sovelluksen suorittaminen avaa automaattisesti uuden selaimen osoitteessa http://localhost:8080.

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

Muokattavalla datalla olevan sovelluksen kehittämiseen tulisi sisältyä validointi. Validointitarkistukset auttavat ylläpitämään merkityksellisiä ja tarkkoja käyttäjien lähettämiä tietoja. Jos niitä ei tarkisteta, se voi johtaa ongelmiin, joten on tärkeää saada kiinni niiden virheiden tyypit, joita käyttäjät voivat tehdä täyttäessään lomaketta reaaliajassa.

Koska se, mikä katsotaan voimassa olevaksi, voi vaihdella ominaisuuksien välillä, sinun on määritettävä, mikä tekee jokaisesta ominaisuudesta voimassa olevan ja ilmoitettava käyttäjälle, jos jokin asia on virheellinen. Onneksi voit tehdä tämän helposti Jakarta Validation -työkalulla. Jakarta validointi mahdollistaa rajoitusten lisäämisen 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ä ilmausta. Molemmat annotaatiot antavat sinun lisätä viestin näytettäväksi, kun ominaisuus muuttuu virheelliseksi.

Vaatiaksesi, että sekä etu- että sukunimet ovat pakollisia ja sisältävät vain kirjaimia, kun taas yritysnimi on valinnainen ja sallii kirjaimet, numerot ja välilyönnit, lisää seuraavat annotaatiot Customer-entiteettiin:

@Entity
@Table(name = "customers")
public class Customer {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;

  @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,
    GERMANY,
    ENGLAND,
    ITALY,
    USA
  }

  public Customer(String firstName, String lastName, String company, Country country) {
    setFirstName(firstName);
    setLastName(lastName);
    setCompany(company);
    setCountry(country);
  }

  public Customer(String firstName, String lastName, String company) {
    this(firstName, lastName, company, Country.UNKNOWN);
  }

  public Customer(String firstName, String lastName) {
    this(firstName, lastName, "");
  }

  public Customer(String firstName) {
    this(firstName, "");
  }

  public Customer() {
  }

  public void setFirstName(String newName) {
    firstName = newName;
  }

  public String getFirstName() {
    return firstName;
  }

  public void setLastName(String newName) {
    lastName = newName;
  }

  public String getLastName() {
    return lastName;
  }

  public void setCompany(String newCompany) {
    company = newCompany;
  }

  public String getCompany() {
    return company;
  }

  public void setCountry(Country newCountry) {
    country = newCountry;
  }

  public Country getCountry() {
    return country;
  }

  public Long getId() {
    return id;
  }
}

Tutustu Jakarta Bean Validation -rajoitteiden viittaukseen saadaksesi täydellisen listan validoitavista, tai opi lisää webforJ Jakarta Validation -artikkelista.

Kenttien sitominen​

Käyttääksesi validointitarkistuksia Customer-luokassa käyttöliittymässä FormView-komponentissa, sinun täytyy luoda BindingContext tietojen sitomista varten. Ennen tietojen sitomista jokainen FormView-kenttä tarvitsi tapahtumakuuntelijan synkronoimaan manuaalisesti Spring-entiteetin Customer kanssa. BindingContext-luokan luominen FormView:ssä sitoo ja synkronoi automaattisesti Customer-tietomallin käyttöliittymäkomponenttien kanssa.

BindingContext-luokan luominen​

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

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

  private BindingContext<Customer> context;

  Customer customer = new Customer();

Sitten, jotta käyttöliittymän komponentit sitoutuvat automaattisesti bean-ominaisuuksiin nimien perusteella, käytä BindingContext.of() seuraavilla parametreilla:

  • this : Aiemmin määrittelit context-muuttujan BindingContext-luokkana. Ensimmäinen parametri määrittää, mikä objekti sisältää sidottavat komponentit.
  • Customer.class : Toinen parametri on sidottavan beanin luokka.
  • true : Kolmas parametri aktivoi Jakarta validoinnin, jolloin konteksti voi käyttää määrittämiäsi validointeja Customer-luokassa. Tämän tekeminen muuttaa virheellisten komponenttien tyyliä ja näyttää asetetut viestit.

Kaikki yhdessä näyttää seuraavalta koodiriviltä:

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

Lomakkeen responsiivisuuden lisääminen​

Tietojen sitomisen ansiosta sovelluksesi suorittaa nyt automaattisesti validointitarkistuksia. Lisäämällä tapahtumakuuntelijan tarkistuksiin voit estää käyttäjiä lähettämästä virheellistä lomaketta. Lisää seuraava koodi, jotta lähetä-nappi 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 synkronoidaan nyt automaattisesti BindingContext-luokan kanssa. Tämä tarkoittaa, että voit nyt poistaa tapahtumakuuntelijat jokaiselta kentältä:

Ennen

FormView.java
// Ilman tietojen 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
// Tietojen sitomisen kanssa
TextField firstName = new TextField("Etunimi");
TextField lastName = new TextField("Sukunimi");
TextField company = new TextField("Yritys");
ChoiceBox country = new ChoiceBox("Maa");

Sitominen ominaisuuden nimien mukaan​

Koska jokaisen komponentin nimi vastaa tietomallia, webforJ sovelsi Automatic Binding. Jos nimet eivät vastanneet, voit käyttää @UseProperty-annotaatiota kartuttaaksesi niitä.

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

Datan lukeminen fillForm()-metodissa​

Aiemmin fillForm()-metodissa alustit jokaisen komponentin arvon manuaalisesti hakemalla tietoja Customer-kopiosta. Mutta nyt, kun käytät BindingContext-luokkaa, voit käyttää read()-metodia. Tämä metodi täyttää jokaisen sidotun komponentin siihen liittyvällä ominaisuudella Customer-kopiosta.

fillForm()-metodissa voit korvata setValue()-metodit read()-metodilla:

FormView.java
public void fillForm(Long customerId) {
  customer = customerService.getCustomerByKey(customerId);

    context.read(customer);
  }

Validoinnin lisääminen submitCustomer()​

Viimeinen muutos FormView-komponentille tässä vaiheessa on lisätä suojaus submitCustomer()-metodiin. Ennen muutosten sitomista H2-tietokantaan, sovellus suorittaa lopullisen validoinnin sidotun kontekstiin palautettavien tulosten käyttämiseksi write()-metodilla.

write()-metodi päivittää beanin ominaisuuksia käyttäen sidottuja käyttöliittymäkomponentteja BindingContext-luokassa ja palauttaa ValidationResult-arvon.

Käytä write()-metodia kirjoittaaksesi Customer-kopioon käyttäen FormView:ssä sidottuja komponentteja. 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ä tässä on miltä FormView näyttää. Sovelluksesi tukee nyt tietojen sitomista ja validointia käyttäen Spring Bootia ja webforJ:tä. Lomakekentät on automaattisesti synkronoitu mallin kanssa ja tarkistettu validointisääntöjen mukaan.

Seuraava vaihe​

Seuraavassa vaiheessa, Integrating an App Layout, keskitytään käyttämään AppLayout-komponenttia, joka lisää sivuvalikon, joka on käytettävissä asiakas-taulukko- ja asiakas-lomakesivuilla. Opit myös toisesta asettelutyökalusta, FlexLayout-komponentista.