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.