Ú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.


$config[zx-auto] not found$config[zx-overlay] not found