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, joka yhdistää käyttöliittymäkomponentit suoraan datamalliin automaattista arvon synkronointia varten. Tämä vähentää boilerplate-koodia sovelluksessasi ja antaa sinun lisätä validoimisvaatimuksia Spring-entiteetille Customer, mikä saa käyttäjäsi antamaan täydellisiä ja tarkkoja tietoja lomakkeita täyttäessään. Tämä vaihe kattaa seuraavat käsitteet:

Jakarta validation
BindingContext -luokan käyttäminen

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

Sovelluksen ajaminen

Sovelluksesi kehittämisen aikana voit käyttää 5-validating-and-binding-data -versiota vertailua varten. Näet sovelluksen toiminnassa:

Siirry ylimmän tason hakemistoon, joka sisältää pom.xml-tiedoston; tämä on 5-validating-and-binding-data, jos seuraat GitHubissa olevaa versiota.
Käytä seuraavaa Maven-komentoa ajaaksesi Spring Boot -sovellusta paikallisesti:
```
mvn
```

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

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

Muokattavilla tiedoilla varustetun sovelluksen kehittämisen tulisi sisältää validointia. Validointitarkastukset auttavat ylläpitämään merkityksellisiä ja tarkkoja käyttäjän syöttämiä tietoja. Jos niitä ei tarkisteta, se voi johtaa ongelmiin, joten on tärkeää saada kiinni virheistä, joita käyttäjät voivat tehdä lomaketta täyttäessään reaaliajassa.

Koska se, mikä lasketaan voimassa olevaksi, voi vaihdella ominaisuuksien välillä, sinun täytyy määritellä, mitä kunkin ominaisuuden tekeminen voimassa olevaksi tarkoittaa ja tiedottaa käyttäjää, jos jokin ei ole voimassa. Onneksi voit tehdä tämän helposti Jakarta Validation -kirjaston avulla. Jakarta-validointi sallii sinun lisätä rajoituksia ominaisuuksiin annotaatioiden avulla.

Tämä opas käyttää kahta Jakarta-annotaatiota, @NotEmpty ja @Pattern. @NotEmpty tarkistaa, onko arvo null tai tyhjää merkkijonoa, kun taas @Pattern tarkistaa, vastaako ominaisuus asettamaasi säännöllistä lauseketta. Molemmat annotaatiot sallivat sinun lisätä viestin, joka näytetään, kun ominaisuus muuttuu virheelliseksi.

Vaatimuksena on, että sekä etunimeä että sukunimeä on pakollinen ja niiden on sisällettävä vain kirjaimia, kun taas yrityksen nimi on valinnainen ja sallii kirjaimet, numerot ja välilyönnit. Käytä seuraavia annotaatioita Customer-entiteetillä:

Customer.java

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

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

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

  private Country country = Country.UNKNOWN;

  public enum Country {
    UNKNOWN,

Katso Jakarta Bean Validation rajoitusten täyttämiseksi tai lue lisää webforJ Jakarta Validation -artikkelista.

Kenttien sitominen

Käytä Customer-luokan validoimisvaatimuksia käyttöliittymässä FormView-komponentissa luomalla BindingContext datan sitomista varten. Ennen datan sitomista jokainen kenttä FormView-komponentissa vaati tapahtumakuuntelijan synkronoimaan sen Spring-entiteettiin Customer manuaalisesti. BindingContext-luokan luominen FormView-komponentissa sitoo ja synkronoi Customer-datan automaattisesti käyttöliittymäkomponenttien kanssa.

`BindingContext`-instanssin luominen

BindingContext-instanssi tarvitsee Spring-beanin, jonka kanssa sitomiset synkronoidaan. FormView-komponentissa julista 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, sitoaaksesi käyttöliittymäkomponentit automaattisesti bean-ominaisuuksiin niiden nimien perusteella, käytä BindingContext.of() seuraavilla parametreilla:

this : Aiemmin julistit context-muuttujan BindingContext:ksi. Ensimmäinen parametri määrittää, mikä objekti sisältää sidottavat komponentit.
Customer.class : Toinen parametri on luokan bean, jota käytetään sitomiseen.
true : Kolmas parametri mahdollistaa Jakarta-validoinnin, mikä sallii kontekstin käyttää Customer:lle asettamiasi validoimisvaatimuksia. 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 responsiivisuuden tekeminen

Datan sitomisen avulla sovelluksesi suorittaa nyt automaattisesti validoimisvaatimuksia. Lisäämällä tapahtumakuuntelijan tarkastuksiin voit estää käyttäjiä lähettämästä virheellistä lomaketta. Lisää seuraava koodi, jotta lähetyspainike on aktiivinen vain, kun lomake on voimassa:

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

Tapahtumakuuntelijoiden poistaminen komponenteilta

Jokainen käyttöliittymän muutos synkronoituu nyt automaattisesti BindingContext:in 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
// Datan 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 datamallia, webforJ sovelsi Automaattista sitomista. Jos nimet eivät vastanneet, voit käyttää @UseProperty -annotaatiota karttaaksesi ne.

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

Datan lukeminen `fillForm()`-metodissa

Aiemmin fillForm()-metodissa aloitit jokaisen komponentin arvon asettamisen manuaalisesti noutamalla tiedot Customer-kopiosta. Nyt, koska käytät BindingContext:ia, voit käyttää read()-metodia. Tämä metodi täyttää jokaisen sidotun komponentin tietyn ominaisuuden avulla datasta Customer-kopiosta.

fillForm()-metodissa korvaa setValue()-metodit read()-metodilla:

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

Validoinnin lisääminen `submitCustomer()`-metodiin

Viimeinen muutos FormView:ssa tälle vaiheelle on lisätä turvatoimi submitCustomer()-metodiin. Ennen muutosten sitomista H2-tietokantaan sovellus suorittaa lopullisen validoinnin sidotun kontekstin tulosten perusteella write()-metodilla.

write()-metodi päivittää beanin ominaisuudet käyttäen BindingContext:issa sidottuja käyttöliittymäkomponentteja ja palauttaa ValidationResult-olion.

Käytä write()-metodia kirjoittaaksesi Customer:in kopioon sidottujen komponenttien avulla FormView:ssa. 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ä. Sovelluksesi tukee nyt datan sitomista ja validoimista käyttämällä Spring Bootia ja webforJ:ta. Lomakkeen syötteet synkronoidaan automaattisesti mallin kanssa ja tarkastetaan validointisääntöjä vastaan.

FormView.java
@Route("customer/:id?<[0-9]+>")
@FrameTitle("Asiakastietolomake")
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(

Seuraavat askeleet

Etsitkö lisää tapoja parantaa sovellustasi tästä oppaasta? Voit kokeilla käyttää AppLayout -komponenttia kehikkona asiakastietotaulukkosi lisäämiseksi ja uusien ominaisuuksien lisäämiseksi.

Sovelluksen ajaminen​

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

Kenttien sitominen​

BindingContext-instanssin luominen​

Lomakkeen responsiivisuuden tekeminen​

Tapahtumakuuntelijoiden poistaminen komponenteilta​

Sitominen ominaisuuden nimien mukaan​

Datan lukeminen fillForm()-metodissa​

Validoinnin lisääminen submitCustomer()-metodiin​

Valmis FormView​