Introduktion til Vaadin
1. Oversigt
Vaadin er en Java-ramme på serversiden til oprettelse af webbrugergrænseflader. Ved hjælp af det kan vi oprette vores frontend ved hjælp af Java-funktioner.
2. Maven-afhængigheder og opsætning
Lad os starte med at tilføje følgende afhængigheder til vores pom.xml:
com.vaadin vaadin-server com.vaadin vaadin-klient-kompileret com.vaadin vaadin-temaer De nyeste versioner af afhængighederne kan findes her: vaadin-server, vaadin-client-compiled, vaadin-temaer.
- vaadin-server pakke - inkluderer klasser til håndtering af alle serveroplysninger såsom sessioner, klientkommunikation osv.
- vaadin-klient-kompileret - er baseret på GWT og inkluderer nødvendige pakker til kompilering af klienten
- vaadin-temaer - inkluderer nogle foruddefinerede temaer og alle hjælpeprogrammer til at lave vores temaer
For at kompilere vores Vaadin-widgets skal vi konfigurere maven-war-plugin, vaadin-maven-plugin og maven-clean-plugin. For den fulde pom skal du kontrollere pom-filen i kildekoden - i slutningen af selvstudiet.
Vi skal også tilføje Vaadin-arkivet og afhængighedsstyringen:
vaadin-addons //maven.vaadin.com/vaadin-addons com.vaadin vaadin-bom 13.0.9 pom import Det Afhængighedsstyring tag styrer versioner af alle Vaadin afhængigheder.
For hurtigt at køre applikationen bruger vi Jetty-pluginet:
org.eclipse.jetty jetty-maven-plugin 9.3.9.v20160517 2 sandt Den seneste version af pluginet kan findes her: jetty-maven-plugin.
Med dette plugin kan vi køre vores projekt ved hjælp af kommandoen:
mvn anløbsbro: kør3. Hvad er Vaadin?
Kort sagt, Vaadin er en Java-ramme til oprettelse af brugergrænsefladermed temaer og komponenter og mange muligheder for udvidelse.
Rammen dækker dog serversiden også, hvilket betyder, at enhver ændring, du foretager i brugergrænsefladen, straks sendes til serveren - så i hvert øjeblik ved backend-applikationen, hvad der sker i front-end.
Vaadin består af en klient- og serverside - med klientsiden bygget oven på den velkendte Google Widget Toolkit-ramme, og serversiden håndteres af VaadinServlet.
4. Servlet
Normalt bruger en Vaadin-applikation ikke en web.xml fil; i stedet definerer den dens servlet ved hjælp af annoteringer:
@WebServlet (urlPatterns = "/ VAADIN / *", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration (ui = VaadinUI.class, productionMode = false) offentlig statisk klasse MyUIServlet udvider VaadinServlet {}I dette tilfælde serverer denne servlet indhold fra / VAADIN sti.
5. Hovedklassen
Det VaadinUI klasse, der refereres til i servlet, skal udvide UI-klassen fra rammen og skal tilsidesætte i det metode til at fuldføre bootstrapping af applikationen med Vaadin aktiveret.
Det næste trin er at oprette et layout og føje det til et hovedlayout i applikationen:
offentlig klasse VaadinUI udvider brugergrænsefladen {@Override beskyttet ugyldigt init (VaadinRequest vaadinRequest) {VerticalLayout verticalLayout = ny VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (sand); setContent (lodretLayout); }6. Vaadin Layout Managers
Rammen leveres med et antal foruddefinerede layoutadministratorer.
6.1. Lodret layout
Stak komponenterne på en kolonne, hvor den første tilføjede er øverst og den sidste er nederst:
VerticalLayout verticalLayout = ny VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (sand); setContent (lodretLayout);Bemærk, hvordan ejendommene her er løst lånt fra typisk CSS-terminologi.
6.2. Vandret layout
Dette layout placerer hver komponent side om side fra venstre mod højre svarer til det lodrette layout:
HorizontalLayout horizontalLayout = ny HorizontalLayout ();6.3. GridLayout
Dette layout placerer hver widget i et gitter, du skal videregive kolonnerne og rækkerne i gitteret som parameter:
GridLayout gridLayout = ny GridLayout (3, 2);6.4. FormLayout
Formularlayoutet placerer billedteksten og komponenten i to forskellige kolonner og kan have valgfri indikatorer til de krævede felter:
FormLayout formLayout = ny FormLayout ();7. Vaadin-komponenter
Nu hvor layoutet håndteres, lad os se på nogle af de mere almindelige komponenter til konstruktion af vores brugergrænseflade.
7.1. Etiket
Etiketten er selvfølgelig også kendt - og bruges simpelthen til at vise tekst:
Mærkatmærkat = nyt mærkat (); label.setId ("LabelID"); label.setValue ("Etiketværdi"); label.setCaption ("Etiket"); gridLayout.addComponent (label);Når vi har oprettet komponenten, skal du lægge mærke til det kritiske trin at tilføje den til layoutet.
7.2. Link
Det link widget er i det væsentlige et grundlæggende hyperlink:
Linklink = nyt link ("Baeldung", nyt ExternalResource ("// www.baeldung.com/")); link.setTargetName ("_ blank");Bemærk hvordan de typiske HTML-værdier for en element er alle her.
7.3. Tekstfelt
Denne widget bruges til at indtaste tekst:
TextField textField = nyt TextField (); textField.setIcon (VaadinIcons.USER);Vi kan yderligere tilpasse elementerne; for eksempel kan vi hurtigt tilføje billeder til widgets via setIcon () API.
Bemærk også, at Font Awesome sendes ud af kassen med rammen; det er defineret som en Enum, og vi kan let bruge det.
7.4. TextArea
Som du kunne forvente, TextArea er tilgængelig ud for resten af de traditionelle HTML-elementer:
TextArea textArea = ny TextArea ();7.5. DateField og InlineDateField
Denne kraftfulde komponent bruges til at vælge datoer; datoparameteren er den aktuelle dato, der skal vælges i widgeten:
DateField dateField = new DateField ("DateField", LocalDate.ofEpochDay (0));
Vi kan gå længere og rede det inde i en kombinationsfelt kontrol for at spare plads:
InlineDateField inlineDateField = ny InlineDateField ();7.6. PasswordField
Dette er den standard maskerede adgangskodeindtastning:
PasswordField passwordField = nyt PasswordField ();7.7. RichTextArea
Med denne komponent kan vi vise formateret tekst, og den giver en grænseflade til at manipulere sådan tekst med knapper til at kontrollere skrifttyper, størrelse, justering osv. Er:
RichTextArea richTextArea = ny RichTextArea (); richTextArea.setCaption ("Rich Text Area"); richTextArea.setValue (""); richTextArea.setSizeFull (); Panel richTextPanel = nyt panel (); richTextPanel.setContent (richTextArea);7.8. Knap
Knapper bruges til at indfange brugerinput og fås i forskellige størrelser og farver.
For at oprette en knap instantierer vi widgetklassen som normalt:
Knap normalButton = ny knap ("Normal knap");Ændring af stil kan vi have nogle forskellige knapper:
tinyButton.addStyleName ("lille"); smallButton.addStyleName ("lille"); largeButton.addStyleName ("large"); hugeButton.addStyleName ("enorm"); dangerButton.addStyleName ("fare"); friendlyButton.addStyleName ("venlig"); primaryButton.addStyleName ("primary"); borderlessButton.addStyleName ("borderless"); linkButton.addStyleName ("link"); quietButton.addStyleName ("stille");Vi kan oprette en deaktiveret knap:
Button disabledButton = ny knap ("Deaktiveret knap"); disabledButton.setDescription ("Denne knap kan ikke klikkes på"); disabledButton.setEnabled (false); buttonLayout.addComponent (disabledButton);En indbygget knap, der bruger browserens udseende:
NativeButton nativeButton = ny NativeButton ("Native Button"); buttonLayout.addComponent (nativeButton);Og en knap med et ikon:
Button iconButton = ny knap ("Ikon-knap"); iconButton.setIcon (VaadinIcons.ALIGN_LEFT); buttonLayout.addComponent (iconButton);7.9. CheckBox
Afkrydsningsfeltet er et element i ændringstilstand, er markeret eller er ikke markeret:
CheckBox afkrydsningsfelt = ny CheckBox ("CheckBox"); afkrydsningsfelt.setValue (sand); checkbox.addValueChangeListener (e -> checkbox.setValue (! checkbox.getValue ())); formLayout.addComponent (afkrydsningsfelt);7.10. Lister
Vaadin har nogle nyttige widgets til håndtering af lister.
Først opretter vi en liste over vores varer, der skal placeres i widgeten:
Listenumre = ny ArrayList (); numbers.add ("One"); numbers.add ("Ti"); numbers.add ("Elleve");Det Kombinationsfelt er en rulleliste:
ComboBox comboBox = ny ComboBox ("ComboBox"); comboBox.addItems (tal); formLayout.addComponent (comboBox);Det ListeVælg placerer elementer lodret og bruger en rullebjælke i tilfælde af overløb:
ListSelect listSelect = new ListSelect ("ListSelect"); listSelect.addItems (tal); listSelect.setRows (2); formLayout.addComponent (listSelect);Det NativeSelect er som Kombinationsfelt men få browseren til at se ud og føle:
NativeSelect nativeSelect = ny NativeSelect ("NativeSelect"); nativeSelect.addItems (tal); formLayout.addComponent (nativeSelect);Det TwinColSelect er en dobbelt liste, hvor vi kan ændre elementerne mellem disse to ruder; hvert emne kan kun leve i et af ruderne ad gangen:
TwinColSelect twinColSelect = ny TwinColSelect ("TwinColSelect"); twinColSelect.addItems (tal);7.11. Gitter
Gitteret bruges til at vise data på en rektangulær måde; du har rækker og kolonner, kan definere overskrift og fod for dataene:
Gitternet = nyt gitter (række.klasse); grid.setColumns ("column1", "column2", "column3"); Række række1 = ny række ("Item1", "Item2", "Item3"); Række række2 = ny række ("Item4", "Item5", "Item6"); Liste rækker = ny ArrayList (); rows.add (række1); rows.add (række2); grid.setItems (rækker);Det Række klasse ovenfor er en simpel POJO, som vi har tilføjet for at repræsentere en række:
offentlig klasse række {privat streng kolonne1; privat streng kolonne2; privat streng kolonne3; // konstruktører, getters, setters}8. Server push
En anden interessant funktion er evnen til at sende meddelelser fra serveren til brugergrænsefladen.
For at bruge server push skal vi tilføje følgende afhængighed til vores pom.xml:
com.vaadin vaadin-push 8.8.5 Den seneste version af afhængigheden kan findes her: vaadin-push.
Vi skal også tilføje @Skubbe kommentar til vores klasse, der repræsenterer brugergrænseflade:
@Push @Theme ("mytheme") offentlig klasse VaadinUI udvider brugergrænsefladen {...}Vi opretter en etiket til at fange serverens push-besked:
private Label nuværende tid;Vi opretter derefter en ScheduledExecutorService der sender tiden fra serveren til etiket:
ScheduledExecutorService scheduleExecutor = Executors.newScheduledThreadPool (1); Kørbar opgave = () -> {currentTime.setValue ("Aktuel tid:" + Instant.now ()); }; scheduleExecutor.scheduleWithFixedDelay (opgave, 0, 1, TimeUnit.SECONDS);Det ScheduledExecutorService kører på serversiden af applikationen, og hver gang den kører, opdateres brugergrænsefladen.
9. Databinding
Vi kan binde vores brugergrænseflade til vores forretningsklasser.
Først opretter vi en Java-klasse:
offentlig klasse BindData {private String bindName; public BindData (String bindName) {this.bindName = bindName; } // getter & setter}Derefter binder vi vores klasse, der har et enkelt felt, til en Tekstfelt i vores brugergrænseflade:
Bindemiddel = nyt bindemiddel (); BindData bindData = nye BindData ("BindData"); binder.readBean (bindData); TextField bindedTextField = ny TextField (); binder.forField (bindedTextField) .bind (BindData :: getBindName, BindData :: setBindName);Først opretter vi en BindData objekt ved hjælp af den klasse, vi oprettede før, derefter Ringbind binder marken til Tekstfelt.
10. Validatorer
Vi kan skabe Validatorer for at validere dataene i vores inputfelter. For at gøre det vedhæfter vi validatoren til det felt, vi vil validere:
BindData stringValidatorBindData = ny BindData (""); TextField stringValidator = ny TextField (); Binder stringValidatorBinder = ny Binder (); stringValidatorBinder.setBean (stringValidatorBindData); stringValidatorBinder.forField (stringValidator) .withValidator (ny StringLengthValidator ("String skal have 2-5 tegn længde", 2, 5)). bind (BindData :: getBindName, BindData :: setBindName);Derefter validerer vi vores data, før vi bruger dem:
Button buttonStringValidator = ny knap ("Valider streng"); buttonStringValidator.addClickListener (e -> stringValidatorBinder.validate ());I dette tilfælde bruger vi StringLengthValidator der validerer længden af en Snor men Vaadin leverer andre nyttige validatorer og giver os også mulighed for at oprette vores tilpassede validatorer.
11. Resumé
Selvfølgelig ridsede denne hurtige opskrivning næppe overfladen; rammen er meget mere end brugergrænseflade-widgets, Vaadin giver alt hvad du behøver for at oprette moderne webapplikationer ved hjælp af Java.
Og som altid kan koden findes på Github.
