Uvod u Vaadin

1. Pregled

Vaadin je Java-ov okvir na poslužitelju za stvaranje web korisničkih sučelja. Pomoću nje možemo stvoriti svoj front-end koristeći Java značajke.

2. Ovisnosti i postavke Mavena

Počnimo dodavanjem sljedećih ovisnosti u našu pom.xml:

 com.vaadin vaadin-server com.vaadin vaadin-klijent-kompilirani com.vaadin vaadin-themes 

Najnovije verzije ovisnosti možete pronaći ovdje: vaadin-server, vaadin-client-compiled, vaadin-themes.

  • vaadin-poslužitelj paket - uključuje klase za rukovanje svim detaljima poslužitelja kao što su sesije, komunikacija s klijentom itd.
  • vaadin-klijent-sastavio - temelji se na GWT-u i uključuje potrebne pakete za kompajliranje klijenta
  • vaadin-teme - uključuje neke unaprijed izrađene teme i sve uslužne programe za izradu naših tema

Da bismo kompajlirali naše Vaadin widgete, moramo konfigurirati dodatak maven-war, vaadin-maven-plugin i dodatak maven-clean-plug. Za puni pom, provjerite datoteku pom u izvornom kodu - na kraju vodiča.

Također, također moramo dodati spremište Vaadin i upravljanje ovisnostima:

  vaadin-addons //maven.vaadin.com/vaadin-addons com.vaadin vaadin-bom 13.0.9 pom import 

The Upravljanje ovisnostima oznaka kontrolira verzije svih Vaadina ovisnosti.

Za brzo pokretanje aplikacije upotrijebit ćemo dodatak Jetty:

 org.eclipse.jetty jetty-maven-plugin 9.3.9.v20160517 2 true 

Najnoviju verziju dodatka možete pronaći ovdje: jetty-maven-plugin.

Pomoću ovog dodatka možemo pokrenuti naš projekt pomoću naredbe:

mvn jetty: trči

3. Što je Vaadin?

Jednostavno rečeno, Vaadin je Java okvir za stvaranje korisničkih sučelja, s temama i komponentama, te puno mogućnosti proširivosti.

Okvir pokriva poslužiteljsku stranu također, što znači da se svaka promjena na korisničkom sučelju odmah šalje poslužitelju - tako da u svakom trenutku pozadinska aplikacija zna što se događa na prednjem dijelu.

Vaadin se sastoji od strane klijenta i poslužitelja - s klijentskom stranom izgrađenom na vrhu dobro poznatog okvira Google Widget Toolkit, a s poslužiteljske strane VaadinServlet.

4. Servlet

Obično aplikacija Vaadin ne koristi web.xml datoteka; umjesto toga, definira svoje servlet pomoću bilješki:

@WebServlet (urlPatterns = "/ VAADIN / *", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration (ui = VaadinUI.class, productionMode = false) javna statička klasa MyUIServlet proširuje VaadinServlet {}

U ovom slučaju, ovaj servlet poslužuje sadržaj s / VAADIN staza.

5. Glavna klasa

The VaadinUI klasa na koju se upućuje u servletu mora proširiti UI klasu iz okvira i mora nadjačati u tome metoda za dovršetak pokretanja aplikacije s omogućenim Vaadinom.

Sljedeći korak je stvaranje izgleda i dodavanje glavnom izgledu aplikacije:

javna klasa VaadinUI proširuje korisničko sučelje {@Override zaštićena void init (VaadinRequest vaadinRequest) {VerticalLayout verticalLayout = new VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (true); setContent (verticalLayout); }

6. Menadžeri rasporeda Vaadin

Okvir dolazi s nizom unaprijed definiranih upravitelja izgleda.

6.1. VerticalLayout

Sastavite komponente u stupac gdje je prvo dodano na vrhu, a najnovije na dnu:

VerticalLayout verticalLayout = novi VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (true); setContent (verticalLayout);

Imajte na umu kako su svojstva ovdje labavo posuđena iz tipične CSS terminologije.

6.2. HorizontalLayout

Ovaj raspored postavlja svaku komponentu jednu do druge slijeva udesno, slično je vertikalnom rasporedu:

HorizontalLayout horizontalLayout = novi HorizontalLayout ();

6.3. GridLayout

Ovaj raspored postavlja svaki widget u mrežu, kao parametar morate proslijediti stupce i retke mreže:

GridLayout gridLayout = novi GridLayout (3, 2);

6.4. FormLayout

Izgled obrasca stavlja naslov i komponentu u dva različita stupca i mogu imati neobavezne indikatore za obavezna polja:

FormLayout formLayout = novi FormLayout ();

7. Vaadin komponente

Sada kada se obrađuje izgled, pogledajmo neke od najčešćih komponenata za izgradnju našeg korisničkog sučelja.

7.1. Označiti

Oznaka je, naravno, također dobro poznata - i jednostavno se koristi za prikaz teksta:

Oznaka oznake = nova oznaka (); label.setId ("LabelID"); label.setValue ("Vrijednost oznake"); label.setCaption ("Oznaka"); gridLayout.addComponent (label);

Nakon što stvorimo komponentu, primijetite kritični korak dodavanja u izgled.

7.2. Veza

The veza widget je u osnovi osnovna hiperveza:

Link veze = novi link ("Baeldung", novi ExternalResource ("// www.baeldung.com/")); link.setTargetName ("_ prazno");

Primijetite kako tipične HTML vrijednosti an elementi su svi ovdje.

7.3. Polje za tekst

Ovaj se widget koristi za unos teksta:

TextField textField = novo TextField (); textField.setIcon (VaadinIcons.USER);

Elemente možemo dodatno prilagoditi; na primjer, možemo brzo dodati slike u widgete putem setIcon () API.

Također, imajte na umu da Font Awesome isporučuje se iz okvira s okvirom; definiran je kao Enum i lako ga možemo iskoristiti.

7.4. TextArea

Kao što biste očekivali, TextArea dostupan je uz ostale tradicionalne HTML elemente:

TextArea textArea = novo TextArea ();

7.5. Polje datuma i InlineDateField

Ova moćna komponenta koristi se za odabir datuma; parametar datum je trenutni datum koji će se odabrati u widgetu:

DateField dateField = novi DateField ("DateField", LocalDate.ofEpochDay (0));

Možemo ići dalje i ugnijezditi ga unutar a kombinirani okvir kontrola za uštedu prostora:

InlineDateField inlineDateField = novo InlineDateField ();

7.6. Polje lozinke

Ovo je standardni maskirani unos lozinke:

PasswordField passwordField = novo PasswordField ();

7.7. RichTextArea

Pomoću ove komponente možemo prikazati formatirani tekst i pruža sučelje za manipulaciju takvim tekstom pomoću gumba za kontrolu fontova, veličine, poravnanja itd.:

RichTextArea richTextArea = novo RichTextArea (); richTextArea.setCaption ("Područje obogaćenog teksta"); richTextArea.setValue (""); richTextArea.setSizeFull (); Panel richTextPanel = novi Panel (); richTextPanel.setContent (richTextArea);

7.8. Dugme

Gumbi se koriste za hvatanje korisničkog unosa i dolaze u raznim veličinama i bojama.

Da bismo stvorili gumb, instanciramo klasu widgeta kao i obično:

Gumb normalButton = novi gumb ("Uobičajeni gumb");

Promjenom stila možemo imati nekoliko različitih gumba:

tinyButton.addStyleName ("sićušan"); smallButton.addStyleName ("mali"); largeButton.addStyleName ("veliko"); hugeButton.addStyleName ("ogroman"); dangerButton.addStyleName ("opasnost"); friendlyButton.addStyleName ("prijateljski"); primaryButton.addStyleName ("primarni"); borderlessButton.addStyleName ("bez obruba"); linkButton.addStyleName ("veza"); quietButton.addStyleName ("tiho");

Možemo stvoriti onemogućeni gumb:

Gumb disabledButton = novi gumb ("Onemogućeni gumb"); disabledButton.setDescription ("Na ovaj se gumb ne može kliknuti"); disabledButton.setEnabled (lažno); buttonLayout.addComponent (disabledButton);

Izvorni gumb koji koristi izgled preglednika:

NativeButton nativeButton = novi NativeButton ("Nativni gumb"); buttonLayout.addComponent (nativeButton);

I gumb s ikonom:

Button iconButton = novi gumb ("Gumb ikone"); iconButton.setIcon (VaadinIcons.ALIGN_LEFT); buttonLayout.addComponent (iconButton);

7.9. CheckBox

Potvrdni okvir je element stanja promjene, potvrđen je ili nije potvrđen:

Potvrdni okvir CheckBox = novi CheckBox ("CheckBox"); checkbox.setValue (true); checkbox.addValueChangeListener (e -> checkbox.setValue (! checkbox.getValue ())); formLayout.addComponent (potvrdni okvir);

7.10. Popisi

Vaadin ima nekoliko korisnih dodataka za obradu popisa.

Prvo kreiramo popis naših predmeta koje ćemo smjestiti u widget:

Brojevi popisa = novi ArrayList (); numbers.add ("Jedan"); numbers.add ("Deset"); brojevi.add ("Jedanaest");

The ComboBox je padajući popis:

ComboBox comboBox = novi ComboBox ("ComboBox"); comboBox.addItems (brojevi); formLayout.addComponent (comboBox);

The ListSelect okomito postavlja stavke i koristi traku za pomicanje u slučaju prelijevanja:

ListSelect listSelect = novi ListSelect ("ListSelect"); listSelect.addItems (brojevi); listSelect.setRows (2); formLayout.addComponent (listSelect);

The NativeSelect je poput ComboBox ali neka preglednik izgleda i izgleda:

NativeSelect nativeSelect = novi NativeSelect ("NativeSelect"); nativeSelect.addItems (brojevi); formLayout.addComponent (nativeSelect);

The TwinColSelect dvostruki je popis na kojem možemo mijenjati stavke između ova dva okna; svaka stavka može istovremeno živjeti samo u jednom od okna:

TwinColSelect twinColSelect = novi TwinColSelect ("TwinColSelect"); twinColSelect.addItems (brojevi);

7.11. Mreža

Mreža služi za prikaz podataka na pravokutni način; imate retke i stupce, možete definirati zaglavlje i stopalo za podatke:

Mreža rešetke = nova rešetka (razred klase); grid.setColumns ("stupac1", "stupac2", "stupac3"); Red reda1 = novi red ("Stavka1", "Stavka2", "Stavka3"); Red reda2 = novi redak ("Stavka4", "Stavka5", "Stavka6"); Redovi popisa = novi ArrayList (); redovi.dodaj (red1); redovi.dodaj (red2); grid.setItems (redovi);

The Red klasa gore je jednostavan POJO koji smo dodali da predstavlja red:

redak javne klase {private String column1; privatni niz column2; private String column3; // konstruktori, getteri, postavljači}

8. Potiskivanje poslužitelja

Još jedna zanimljiva značajka je mogućnost slanja poruka s poslužitelja na korisničko sučelje.

Da bismo koristili push poslužitelj, trebamo dodati sljedeću ovisnost u našu pom.xml:

 com.vaadin vaadin-push 8.8.5 

Najnoviju verziju ovisnosti možete pronaći ovdje: vaadin-push.

Također, moramo dodati @Gurnuti napomena za naš razred koji predstavlja UI:

@Push @Theme ("mytheme") javna klasa VaadinUI proširuje korisničko sučelje {...}

Izrađujemo oznaku za hvatanje push poruke poslužitelja:

private Label currentTime;

Zatim stvaramo a ScheduledExecutorService koji šalje vrijeme s poslužitelja na označiti:

ScheduledExecutorService rasporedExecutor = Izvršitelji.newScheduledThreadPool (1); Izvršni zadatak = () -> {currentTime.setValue ("Trenutno vrijeme:" + Instant.now ()); }; scheduleExecutor.scheduleWithFixedDelay (zadatak, 0, 1, TimeUnit.SECONDS);

The ScheduledExecutorService se izvodi na poslužiteljskoj strani aplikacije i svaki put kad se pokrene, korisničko se sučelje ažurira.

9. Vezanje podataka

Naše korisničko sučelje možemo povezati s našim poslovnim klasama.

Prvo kreiramo Java klasu:

javna klasa BindData {private String bindName; javni BindData (niz ime vezanja) {this.bindName = ime vezanja; } // dobivač i postavljač}

Tada svoju klasu koja ima jedno polje vežemo za a Polje za tekst u našem korisničkom sučelju:

Vezivo veziva = novo Vezivo (); BindData bindData = novi BindData ("BindData"); binder.readBean (bindData); TextField bindedTextField = novo TextField (); binder.forField (bindedTextField) .bind (BindData :: getBindName, BindData :: setBindName);

Prvo stvorimo a BindData objekt koristeći klasu koju smo stvorili prije, a zatim Vezivo veže polje za Polje za tekst.

10. Provjerivači

Možemo stvarati Provjerivači za provjeru podataka u našim poljima za unos. Da bismo to učinili, priložimo validator na polje koje želimo provjeriti:

BindData stringValidatorBindData = novi BindData (""); TextField stringValidator = novo TextField (); Binder stringValidatorBinder = novo Binder (); stringValidatorBinder.setBean (stringValidatorBindData); stringValidatorBinder.forField (stringValidator) .withValidator (novi StringLengthValidator ("Niz mora imati dužinu od 2 do 5 znakova", 2, 5)) .bind (BindData :: getBindName, BindData :: setBindName);

Zatim provjeravamo svoje podatke prije nego što ih upotrijebimo:

Button buttonStringValidator = novi gumb ("Provjeri niz"); buttonStringValidator.addClickListener (e -> stringValidatorBinder.validate ());

U ovom slučaju koristimo StringLengthValidator koja potvrđuje duljinu a Niz ali Vaadin nudi i druge korisne validatore, a također nam omogućuje stvaranje naših prilagođenih validatora.

11. Sažetak

Naravno, ovaj brzi zapis jedva je ogrebao površinu; okvir je mnogo više od widgeta korisničkog sučelja, Vaadin pruža sve što je potrebno za stvaranje modernih web aplikacija pomoću Jave.

I kao i uvijek, kod se može pronaći na Githubu.