Úvod do Vaadinu
1. Prehľad
Vaadin je serverový rámec Java pre vytváranie webových používateľských rozhraní. Pomocou neho môžeme vytvoriť naše klientske rozhranie pomocou funkcií Java.
2. Závislosti a nastavenie Maven
Začnime tým, že k našej pridáme nasledujúce závislosti pom.xml:
com.vaadin vaadin-server com.vaadin vaadin-klient zostavený com.vaadin vaadin-témy
Najnovšie verzie závislostí nájdete tu: vaadin-server, vaadin-client-compiled, vaadin-themes.
- vaadin-server balík - obsahuje triedy na spracovanie všetkých údajov o serveri, ako sú relácie, komunikácia s klientmi atď.
- zostavený vaadin-klient - je založený na GWT a obsahuje potrebné balíčky na zostavenie klienta
- vaadinove-temy - obsahuje niektoré vopred pripravené témy a všetky pomôcky na vytváranie našich tém
Na zostavenie našich widgetov Vaadin je potrebné nakonfigurovať doplnok maven-war, vaadin-maven-plugin a maven-clean-plugin. Ak chcete získať úplné Pom, nezabudnite skontrolovať súbor pom v zdrojovom kóde - na konci tutoriálu.
Tiež musíme pridať úložisko Vaadin a správu závislostí:
vaadin-addons //maven.vaadin.com/vaadin-addons com.vaadin vaadin-bom 13.0.9 pom import
The DependencyManagement značka riadi verzie všetkých Vaadin závislosti.
Na rýchle spustenie aplikácie použijeme doplnok Jetty:
org.eclipse.jetty jetty-maven-plugin 9.3.9.v20160517 2 pravda
Najnovšiu verziu pluginu nájdete tu: jetty-maven-plugin.
S týmto pluginom môžeme náš projekt spustiť pomocou príkazu:
mvn mólo: spustiť
3. Čo je Vaadin?
Jednoducho povedané, Vaadin je rámec Java pre vytváranie používateľských rozhranís témami a komponentmi a množstvom možností rozšíriteľnosti.
Rámec pokrýva stranu servera Rovnako to znamená, že každá zmena používateľského rozhrania sa okamžite odošle na server - takže backendová aplikácia v každej chvíli vie, čo sa deje v klientskom rozhraní.
Vaadin sa skladá zo strany klienta a servera - na strane klienta postavenej na dobre známom rámci Google Widget Toolkit a na strane servera je obsluhovaná VaadinServlet.
4. Servlet
Aplikácia Vaadin zvyčajne nepoužíva a web.xml pilník; namiesto toho definuje svoje servlet pomocou anotácií:
@WebServlet (urlPatterns = "/ VAADIN / *", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration (ui = VaadinUI.class, productionMode = false) verejná statická trieda MyUIServlet rozširuje VaadinServlet {}
V tomto prípade tento servlet slúži na poskytovanie obsahu z servera / VAADIN cesta.
5. Hlavná trieda
The VaadinUI trieda, na ktorú sa odkazuje v servlete, musí rozšíriť triedu UI z rámca a musí prepísať init metóda na dokončenie bootstrapovania aplikácie s povoleným Vaadinom.
Ďalším krokom je vytvorenie rozloženia a jeho pridanie do hlavného rozloženia aplikácie:
verejná trieda VaadinUI rozširuje používateľské rozhranie {@Override protected void init (VaadinRequest vaadinRequest) {VerticalLayout verticalLayout = nový VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (true); setContent (verticalLayout); }
6. Manažéri rozloženia Vaadin
Rámec je dodávaný s množstvom preddefinovaných správcov rozloženia.
6.1. VerticalLayout
Skladajte komponenty na stĺpec, kde prvý pridaný je na vrchu a najnovší na spodku:
VerticalLayout verticalLayout = nový VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (true); setContent (verticalLayout);
Všimnite si, ako sú tu vlastnosti voľne prevzaté z typickej terminológie CSS.
6.2. HorizontalLayout
Toto rozloženie umiestňuje jednotlivé komponenty vedľa seba zľava doprava, podobne ako vertikálne rozloženie:
HorizontalLayout horizontalLayout = nový HorizontalLayout ();
6.3. GridLayout
Toto rozloženie umiestňuje každú miniaplikáciu do mriežky. Musíte ako parameter odovzdať stĺpce a riadky mriežky:
GridLayout gridLayout = nový GridLayout (3, 2);
6.4. FormLayout
Rozloženie formulára umiestňuje titulok a komponent do dvoch rôznych stĺpcov a môže mať voliteľné indikátory pre povinné polia:
FormLayout formLayout = nový FormLayout ();
7. Vaadinove komponenty
Teraz, keď je s rozložením manipulované, poďme sa pozrieť na niektoré z bežnejších komponentov pre konštrukciu nášho používateľského rozhrania.
7.1. Štítok
Štítok je samozrejme tiež dobre známy - a jednoducho sa používa na zobrazenie textu:
Štítok štítku = nový štítok (); label.setId ("LabelID"); label.setValue ("Hodnota štítku"); label.setCaption ("Štítok"); gridLayout.addComponent (štítok);
Keď vytvoríme komponent, všimnite si kritický krok jeho pridania do rozloženia.
7.2. Odkaz
The odkaz widget je v podstate základný hypertextový odkaz:
Link link = nový odkaz ("Baeldung", nový ExternalResource ("// www.baeldung.com/")); link.setTargetName ("_ blank");
Všimnite si, ako sú typické hodnoty HTML znaku element sú tu.
7.3. Textové pole
Tento widget sa používa na zadávanie textu:
TextField textField = nový TextField (); textField.setIcon (VaadinIcons.USER);
Môžeme ďalej prispôsobiť prvky; napríklad môžeme rýchlo pridať obrázky do widgetov pomocou setIcon () API.
Pamätajte tiež na to Písmo Awesome je dodávané po vybalení z krabice s rámcom; je definovaný ako Enum a môžeme ho ľahko využiť.
7.4. TextArea
Ako by ste čakali, TextArea je k dispozícii vedľa zvyšku tradičných prvkov HTML:
TextArea textArea = nový TextArea ();
7.5. DateField a InlineDateField
Táto výkonná súčasť sa používa na výber dátumov; parameter date je aktuálny dátum, ktorý sa má vybrať v miniaplikácii:
DateField dateField = nový DateField ("DateField", LocalDate.ofEpochDay (0));
Môžeme ísť ďalej a vnoriť to do vnútra a rozbaľovacie pole ovládací prvok na šetrenie miesta:
InlineDateField inlineDateField = nový InlineDateField ();
7.6. PasswordField
Toto je štandardný maskovaný vstup hesla:
PasswordField passwordField = nový PasswordField ();
7.7. RichTextArea
Pomocou tohto komponentu môžeme zobraziť formátovaný text a poskytuje rozhranie na manipuláciu s týmto textom pomocou tlačidiel na ovládanie typov písma, veľkosti, zarovnania atď.:
RichTextArea richTextArea = new RichTextArea (); richTextArea.setCaption ("Oblasť RTF"); richTextArea.setValue (""); richTextArea.setSizeFull (); Panel richTextPanel = nový Panel (); richTextPanel.setContent (richTextArea);
7.8. Tlačidlo
Tlačidlá sa používajú na zachytenie vstupu používateľa a majú rôzne veľkosti a farby.
Na vytvorenie tlačidla vytvoríme inštanciu triedy widgetov ako obvykle:
Tlačidlo normalButton = nové tlačidlo ("Normálne tlačidlo");
Zmena štýlu môže mať niekoľko rôznych tlačidiel:
tinyButton.addStyleName ("maličký"); smallButton.addStyleName ("malý"); largeButton.addStyleName ("large"); hugeButton.addStyleName ("obrovské"); dangerButton.addStyleName ("danger"); friendlyButton.addStyleName ("friendly"); primaryButton.addStyleName ("primárne"); borderlessButton.addStyleName ("borderless"); linkButton.addStyleName ("odkaz"); quietButton.addStyleName ("tichý");
Môžeme vytvoriť zakázané tlačidlo:
Tlačidlo disabledButton = nové tlačidlo („Zakázané tlačidlo“); disabledButton.setDescription ("Na toto tlačidlo nemožno kliknúť"); disabledButton.setEnabled (false); buttonLayout.addComponent (disabledButton);
Natívne tlačidlo, ktoré využíva vzhľad prehliadača:
NativeButton nativeButton = nový NativeButton ("natívne tlačidlo"); buttonLayout.addComponent (nativeButton);
A tlačidlo s ikonou:
Ikona tlačidlaButton = nové tlačidlo („Ikonové tlačidlo“); ikonaButton.setIcon (VaadinIcons.ALIGN_LEFT); buttonLayout.addComponent (iconButton);
7.9. CheckBox
Začiarkavacie políčko je prvkom zmeny stavu, je začiarknuté alebo nie je začiarknuté:
CheckBox checkbox = nový CheckBox ("CheckBox"); checkbox.setValue (true); checkbox.addValueChangeListener (e -> checkbox.setValue (! checkbox.getValue ())); formLayout.addComponent (začiarkavacie políčko);
7.10. Zoznamy
Vaadin má niekoľko užitočných widgetov na prácu so zoznamami.
Najskôr vytvoríme zoznam našich položiek, ktoré sa majú umiestniť do miniaplikácie:
Zoznam čísel = new ArrayList (); numbers.add ("Jeden"); numbers.add ("Desať"); numbers.add ("Jedenásť");
The ComboBox je rozbaľovací zoznam:
ComboBox comboBox = nový ComboBox ("ComboBox"); comboBox.addItems (čísla); formLayout.addComponent (comboBox);
The ZoznamVybrať vertikálne umiestňuje položky a v prípade pretečenia použije posúvač:
ListSelect listSelect = nový ListSelect ("ListSelect"); listSelect.addItems (čísla); listSelect.setRows (2); formLayout.addComponent (listSelect);
The NativeSelect je ako ComboBox ale nechajte vzhľad a vzhľad prehliadača:
NativeSelect nativeSelect = nový NativeSelect ("NativeSelect"); nativeSelect.addItems (čísla); formLayout.addComponent (nativeSelect);
The TwinColSelect je duálny zoznam, kde môžeme meniť položky medzi týmito dvoma tabuľami; každá položka môže žiť iba v jednom z tabúľ naraz:
TwinColSelect twinColSelect = nový TwinColSelect ("TwinColSelect"); twinColSelect.addItems (čísla);
7.11. Mriežka
Mriežka slúži na zobrazenie údajov obdĺžnikovým spôsobom; ak máte riadky a stĺpce, môžete definovať hlavičku a úpätie údajov:
Mriežka mriežky = nová mriežka (Row.class); grid.setColumns ("stĺpec1", "stĺpec2", "stĺpec3"); Riadok riadok1 = nový riadok („Položka1“, „Položka2“, „Položka3“); Riadok riadok2 = nový riadok („položka4“, „položka5“, „položka6“); Zoznam riadkov = new ArrayList (); riadky.pridat (riadok1); riadky.pridat (riadok2); grid.setItems (riadky);
The Riadok trieda vyššie je jednoduchý POJO, ktorý sme pridali na predstavenie riadku:
public class Row {private String column1; súkromný reťazec String2; súkromný reťazec String3; // konštruktory, getre, setre}
8. Server Push
Ďalšou zaujímavou funkciou je schopnosť odosielať správy zo servera do používateľského rozhrania.
Ak chcete použiť serverový push, musíme do našej pridať nasledujúcu závislosť pom.xml:
com.vaadin vaadin-push 8.8.5
Najnovšiu verziu závislosti nájdete tu: vaadin-push.
Musíme tiež pridať @Tam anotácia k našej triede predstavujúcej používateľské rozhranie:
@Push @Theme ("mytheme") verejná trieda VaadinUI rozširuje používateľské rozhranie {...}
Vytvoríme štítok na zachytenie tlačenej správy servera:
private Label currentTime;
Potom vytvoríme a ScheduledExecutorService ktorý odosiela čas zo servera na server štítok:
ScheduledExecutorService scheduleExecutor = Executors.newScheduledThreadPool (1); Spustiteľná úloha = () -> {currentTime.setValue ("Aktuálny čas:" + Instant.now ()); }; scheduleExecutor.scheduleWithFixedDelay (task, 0, 1, TimeUnit.SECONDS);
The ScheduledExecutorService je spustený na strane servera aplikácie a pri každom spustení sa aktualizuje používateľské rozhranie.
9. Väzba údajov
Naše používateľské rozhranie môžeme viazať na naše obchodné triedy.
Najskôr vytvoríme triedu Java:
verejná trieda BindData {private String bindName; public BindData (reťazec bindName) {this.bindName = bindName; } // zakladač a nastavovač}
Potom spojíme našu triedu, ktorá má jediné pole, s a Textové pole v našom užívateľskom rozhraní:
Viazač spojiva = nový Binder (); BindData bindData = nové BindData ("BindData"); binder.readBean (bindData); TextField bindedTextField = nový TextField (); binder.forField (bindedTextField) .bind (BindData :: getBindName, BindData :: setBindName);
Najskôr vytvoríme a BindData objekt pomocou triedy, ktorú sme vytvorili predtým, potom Binder viaže pole na Textové pole.
10. Validátory
Môžeme vytvárať Validátory na overenie údajov v našich vstupných poliach. Za týmto účelom pripojíme validátor k poľu, ktoré chceme overiť:
BindData stringValidatorBindData = new BindData (""); TextField stringValidator = nový TextField (); Binder stringValidatorBinder = nový Binder (); stringValidatorBinder.setBean (stringValidatorBindData); stringValidatorBinder.forField (stringValidator) .withValidator (nový StringLengthValidator ("Reťazec musí mať dĺžku 2 - 5 znakov", 2, 5)) .bind (BindData :: getBindName, BindData :: setBindName);
Potom svoje údaje pred použitím overíme:
Button buttonStringValidator = nové tlačidlo ("Overiť reťazec"); buttonStringValidator.addClickListener (e -> stringValidatorBinder.validate ());
V tomto prípade používame StringLengthValidator ktorá potvrdzuje dĺžku a String ale Vaadin poskytuje ďalšie užitočné validátory a tiež nám umožňuje vytvárať naše vlastné validátory.
11. Zhrnutie
Samozrejme, tento rýchly zápis sotva poškriabal povrch; rámec je oveľa viac ako widgety používateľského rozhrania, Vaadin poskytuje všetko, čo potrebujete pre vytváranie moderných webových aplikácií pomocou Java.
A ako vždy, kód nájdete na Githube.