Bevezetés a Vaadinbe

1. Áttekintés

A Vaadin egy szerveroldali Java-keretrendszer webes felhasználói felületek létrehozására. Használatával Java-szolgáltatások segítségével létrehozhatjuk a kezelőfelületünket.

2. Maven-függőségek és beállítás

Kezdjük azzal, hogy a következő függőségeket adjuk hozzá pom.xml:

 com.vaadin vaadin-server com.vaadin vaadin-kliens által összeállított com.vaadin vaadin-themes 

A függőségek legújabb verziói itt találhatók: vaadin-server, vaadin-client-compiled, vaadin-themes.

  • vaadin-server csomag - osztályokat tartalmaz az összes szerver adat kezelésére, például munkamenetek, kliens kommunikáció stb.
  • megtekintin-kliens-összeállítva - a GWT-n alapul, és tartalmazza az ügyfél fordításához szükséges csomagokat
  • vaadin-témák - tartalmaz néhány előre elkészített témát és minden segédprogramot a témáink elkészítéséhez

A Vaadin kütyüink összeállításához konfigurálnunk kell a maven-war-plugint, a vaadin-maven-plugint és a maven-clean-plugint. A teljes pom esetében ellenőrizze a pom fájlt a forráskódban - az oktatóanyag végén.

Ezenkívül hozzá kell adnunk a Vaadin adattárat és a függőségkezelést:

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

A DependencyManagement tag ellenőrzi az összes Vaadin verzióját függőségek.

Az alkalmazás gyors futtatásához a Jetty plugint használjuk:

 org.eclipse.jetty móló-maven-plugin 9.3.9.v20160517 2 igaz 

A bővítmény legújabb verziója itt található: jetty-maven-plugin.

Ezzel a pluginnal futtathatjuk projektünket a következő paranccsal:

mvn móló: futás

3. Mi a Vaadin?

Egyszerűen fogalmazva, a Vaadin egy Java keretrendszer felhasználói felületek létrehozására, témákkal és összetevőkkel, valamint rengeteg bővíthetőséggel.

A keretrendszer a szerver oldalt fedi le Ez azt is jelenti, hogy a felhasználói felület minden módosítását azonnal elküldjük a szervernek - így a háttéralkalmazás minden pillanatban tudja, mi történik a kezelőfelületen.

A Vaadin kliens és szerver oldalból áll - a jól ismert Google Widget Toolkit keretrendszer tetejére épített kliens oldallal, a szerver oldallal pedig a VaadinServlet.

4. A Servlet

A Vaadin alkalmazás általában nem használja a web.xml fájl; ehelyett meghatározza annak servlet kommentárok használatával:

@WebServlet (urlPatterns = "/ VAADIN / *", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration (ui = VaadinUI.class, productionMode = false) nyilvános statikus osztály A MyUIServlet kiterjeszti a VaadinServlet {}

Ebben az esetben ez a servlet a / VAADIN pálya.

5. A főosztály

A VaadinUI A szervletben hivatkozott osztálynak ki kell terjesztenie a felhasználói felület osztályát a keretrendszerből, és felül kell írnia a benne módszer az alkalmazás indításának befejezéséhez engedélyezve a Vaadin.

A következő lépés egy elrendezés létrehozása és hozzáadása az alkalmazás fő elrendezéséhez:

public class A VaadinUI kiterjeszti a felhasználói felületet {@Orride védett void init (VaadinRequest vaadinRequest) {VerticalLayout verticalLayout = new VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (true); setContent (verticalLayout); }

6. Vaadin Layout Managers

A keretrendszer számos előre definiált elrendezéskezelővel érkezik.

6.1. VerticalLayout

Rakja össze az összetevőket egy oszlopra, ahol az első hozzáadva van a tetején, a legújabb pedig az alján:

VerticalLayout verticalLayout = új VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (true); setContent (verticalLayout);

Vegye figyelembe, hogy az itt található tulajdonságokat lazán kölcsönzik-e a tipikus CSS terminológia.

6.2. HorizontalLayout

Ez az elrendezés az egyes komponenseket egymás mellett helyezi el balról jobbra, hasonlóan a függőleges elrendezéshez:

HorizontalLayout horizontalLayout = új HorizontalLayout ();

6.3. Rácsszerkezet

Ez az elrendezés minden widgetet egy rácsba helyez, paraméterként át kell adnia az oszlopokat és a rács sorait:

GridLayout gridLayout = új GridLayout (3, 2);

6.4. FormLayout

Az űrlap elrendezése két külön oszlopba helyezi a feliratot és az összetevőt, és opcionális mutatókat tartalmazhat a kötelező mezőkhöz:

FormLayout formLayout = új FormLayout ();

7. Vaadin Components

Most, hogy az elrendezés kezelve van, vessünk egy pillantást a felhasználói felület felépítésének néhány elterjedtebb elemére.

7.1. Címke

A címke természetesen szintén jól ismert - és egyszerűen a szöveg megjelenítésére szolgál:

Label label = new Label (); label.setId ("LabelID"); label.setValue ("Címke értéke"); label.setCaption ("Címke"); gridLayout.addComponent (címke);

Miután létrehoztuk az összetevőt, vegye figyelembe az elrendezéshez való hozzáadás kritikus lépését.

7.2. Link

A link a widget alapvetően egy hiperhivatkozás:

Link link = new Link ("Baeldung", új ExternalResource ("// www.baeldung.com/")); link.setTargetName ("_ blank");

Figyelje meg, hogy az elem itt vannak.

7.3. TextField

Ezt a modult a szöveg bevitelére használják:

TextField textField = új TextField (); textField.setIcon (VaadinIcons.USER);

Az elemeket tovább testre szabhatjuk; például gyorsan hozzáadhatunk képeket a widgetekhez a setIcon () API.

Ezt is vegye figyelembe A Font Awesome kiszerelésre kerül a dobozból a kerettel együtt; Enumként definiálják, és könnyen ki tudjuk használni.

7.4. TextArea

Ahogy számítani lehetett rá, TextArea elérhető a többi hagyományos HTML elem mellett:

TextArea textArea = új TextArea ();

7.5. DateField és InlineDateField

Ezt a hatékony komponenst használják a dátumok kiválasztására; a dátum paraméter az az aktuális dátum, amelyet a widgetben kell kiválasztani:

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

Mehetünk tovább és beágyazhatjuk a kombinált doboz vezérlés a helytakarékosság érdekében:

InlineDateField inlineDateField = új InlineDateField ();

7.6. PasswordField

Ez a szokásos maszkos jelszó bevitel:

PasswordField passwordField = új PasswordField ();

7.7. RichTextArea

Ezzel a komponenssel formázott szöveget tudunk megjeleníteni, és interfészt biztosít az ilyen szöveg gombokkal történő manipulálására a betűtípusok, méret, igazítás stb.

RichTextArea richTextArea = új RichTextArea (); richTextArea.setCaption ("Rich Text Area"); richTextArea.setValue (""); richTextArea.setSizeFull (); Panel richTextPanel = új panel (); richTextPanel.setContent (richTextArea);

7.8. Gomb

A gombokat a felhasználói adatok rögzítésére használják, és különböző méretben és színben kaphatók.

Egy gomb létrehozásához a szokásos módon példányosítjuk a widget osztályt:

Button normalButton = új gomb ("Normal Button");

A stílus megváltoztatásakor különböző gombokkal rendelkezhetünk:

tinyButton.addStyleName ("apró"); smallButton.addStyleName ("kicsi"); nagyButton.addStyleName ("nagy"); hatalmasButton.addStyleName ("hatalmas"); veszélyButton.addStyleName ("veszély"); friendlyButton.addStyleName ("barátságos"); primaryButton.addStyleName ("elsődleges"); borderlessButton.addStyleName ("szegély nélküli"); linkButton.addStyleName ("link"); quietButton.addStyleName ("csendes");

Hozhatunk létre egy letiltott gombot:

Button disabledButton = új gomb ("Letiltott gomb"); disabledButton.setDescription ("Erre a gombra nem lehet kattintani"); disabledButton.setEnabled (hamis); buttonLayout.addComponent (disabledButton);

A böngésző megjelenését használó natív gomb:

NativeButton nativeButton = új NativeButton ("Natív gomb"); buttonLayout.addComponent (nativeButton);

És egy gomb egy ikonnal:

Button iconButton = new Button ("Ikon gomb"); iconButton.setIcon (VaadinIcons.ALIGN_LEFT); buttonLayout.addComponent (iconButton);

7.9. CheckBox

A jelölőnégyzet egy állapotváltoztató elem, be van jelölve vagy nincs bejelölve:

CheckBox jelölőnégyzet = new CheckBox ("CheckBox"); checkbox.setValue (true); checkbox.addValueChangeListener (e -> checkbox.setValue (! checkbox.getValue ())); formLayout.addComponent (jelölőnégyzet);

7.10. Listák

Vaadin rendelkezik néhány hasznos eszközzel a listák kezeléséhez.

Először létrehozunk egy listát a widgetbe helyezendő tételeinkről:

Lista számok = new ArrayList (); számok.add ("Egy"); számok.add ("Tíz"); számok.add ("Tizenegy");

A ComboBox egy legördülő lista:

ComboBox comboBox = új ComboBox ("ComboBox"); comboBox.addItems (számok); formLayout.addComponent (comboBox);

A ListSelect függőlegesen helyezi el az elemeket, és túlcsordulás esetén gördítősávot használ:

ListSelect listSelect = new ListSelect ("ListSelect"); listSelect.addItems (számok); listSelect.setRows (2); formLayout.addComponent (listSelect);

A NativeSelect olyan, mint a ComboBox de legyen a böngésző megjelenése és tapintata:

NativeSelect nativeSelect = new NativeSelect ("NativeSelect"); nativeSelect.addItems (számok); formLayout.addComponent (nativeSelect);

A TwinColSelect egy kettős lista, ahol megváltoztathatjuk a két panel közötti elemeket; minden elem egyszerre csak az egyik ablaktáblában élhet:

TwinColSelect twinColSelect = új TwinColSelect ("TwinColSelect"); twinColSelect.addItems (számok);

7.11. Rács

A rács az adatok téglalap alakú megjelenítésére szolgál; vannak sorai és oszlopai, meghatározhatja az adatok fejlécét és lábát:

Rácsrács = új Rács (Sor.osztály); grid.setColumns ("oszlop1", "oszlop2", "oszlop3"); 1. sor 1. = új sor ("1. tétel", "2. tétel", "3. tétel"); 2. sor = új sor ("4. tétel", "5. tétel", "6. tétel"); Sorok felsorolása = new ArrayList (); sorok.add (1. sor); sorok.add (2. sor); rács.setItems (sorok);

A Sor A fenti osztály egy egyszerű POJO, amelyet hozzáadtunk egy sor képviseletéhez:

public class Row {private String oszlop1; privát karakterlánc oszlop2; privát karakterlánc oszlop3; // kivitelezők, szerelők, telepítők}

8. Szerver nyomása

Egy másik érdekes tulajdonság az, hogy üzeneteket küldhet a szerverről a felhasználói felületre.

A kiszolgálói push használatához hozzá kell adnunk a következő függőséget pom.xml:

 com.vaadin vaadin-push 8.8.5 

A függőség legújabb verziója itt található: vaadin-push.

Ezenkívül hozzá kell adnunk a @Nyom kommentár a felhasználói felületet képviselő osztályunk számára:

A @Push @Theme ("mytheme") nyilvános osztály, a VaadinUI kiterjeszti a felhasználói felületet {...}

Létrehozunk egy címkét a szerver push üzenet rögzítéséhez:

privát címke currentTime;

Ezután létrehozunk egy ScheduledExecutorService amely elküldi az időt a szerverről a címke:

ScheduledExecutorService scheduleExecutor = Executors.newScheduledThreadPool (1); Futható feladat = () -> {currentTime.setValue ("Aktuális idő:" + Azonnali.now ()); }; scheduleExecutor.scheduleWithFixedDelay (feladat, 0, 1, TimeUnit.SECONDS);

A ScheduledExecutorService az alkalmazás szerver oldalán fut, és minden alkalommal, amikor fut, a felhasználói felület frissül.

9. Adatkötés

Felhasználói felületünket üzleti osztályainkhoz köthetjük.

Először létrehozunk egy Java osztályt:

public class BindData {private String bindName; public BindData (String bindName) {this.bindName = bindName; } // getter & setter}

Ezután az egyetlen mezővel rendelkező osztályunkat az a-hoz kötjük TextField felhasználói felületünkön:

Kötőanyag-kötőanyag = új Kötőanyag (); BindData bindData = új BindData ("BindData"); kötőanyag.readBean (bindData); TextField bindedTextField = új TextField (); binder.forField (bindedTextField) .bind (BindData :: getBindName, BindData :: setBindName);

Először létrehozunk egy BindData objektumot az általunk korábban létrehozott osztály, majd a Kötőanyag a mezőt a TextField.

10. Validátorok

Alkothatunk Validátorok hogy ellenőrizze az adatokat a beviteli mezőinkben. Ehhez csatoljuk az érvényesítőt az érvényesíteni kívánt mezőhöz:

BindData stringValidatorBindData = új BindData (""); TextField stringValidator = new TextField (); Binder stringValidatorBinder = new Binder (); stringValidatorBinder.setBean (stringValidatorBindData); stringValidatorBinder.forField (stringValidator) .withValidator (új StringLengthValidator ("A karakterláncnak 2-5 karakter hosszúnak kell lennie", 2, 5)) .bind (BindData :: getBindName, BindData :: setBindName);

Ezután ellenőrizzük adatainkat, mielőtt felhasználnánk őket:

Button buttonStringValidator = new Button ("Karakterlánc érvényesítése"); buttonStringValidator.addClickListener (e -> stringValidatorBinder.validate ());

Ebben az esetben a StringLengthValidator amely érvényesíti az a hosszát Húr de Vaadin további hasznos validátorokat kínál, és lehetővé teszi számunkra az egyedi validátorok létrehozását is.

11. Összegzés

Természetesen ez a gyors írás csak alig karcolta meg a felületet; A keretrendszer sokkal több, mint a felhasználói felület widgetjei. A Vaadin mindent megad, amire szüksége van a modern webalkalmazások Java használatával.

És mint mindig, a kód megtalálható a Githubon.