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.