Introduksjon til Vaadin
1. Oversikt
Vaadin er et Java-rammeverk på serversiden for å lage nettbrukergrensesnitt. Ved å bruke den kan vi lage vår front-end ved hjelp av Java-funksjoner.
2. Maven-avhengigheter og oppsett
La oss starte med å legge til følgende avhengigheter til vår pom.xml:
com.vaadin vaadin-server com.vaadin vaadin-klient-kompilert com.vaadin vaadin-temaer De siste versjonene av avhengighetene finner du her: vaadin-server, vaadin-client-compiled, vaadin-themes.
- vaadin-server pakke - inkluderer klasser for håndtering av alle serveropplysninger som økter, klientkommunikasjon, etc.
- vaadin-klient-kompilert - er basert på GWT og inkluderer nødvendige pakker for å kompilere klienten
- vaadin-temaer - inkluderer noen pre-laget temaer og alle verktøy for å lage våre temaer
For å kompilere Vaadin-widgetene våre, må vi konfigurere maven-war-plugin, vaadin-maven-plugin og maven-clean-plugin. For hele pom, sørg for å sjekke pom-filen i kildekoden - på slutten av opplæringen.
Vi må også legge til Vaadin-depotet og avhengighetsadministrasjonen:
vaadin-addons //maven.vaadin.com/vaadin-addons com.vaadin vaadin-bom 13.0.9 pom import De Avhengighetsadministrasjon tag kontrollerer versjoner av alle Vaadin avhengigheter.
For å kjøre applikasjonen raskt, bruker vi Jetty-plugin:
org.eclipse.jetty jetty-maven-plugin 9.3.9.v20160517 2 sant Den siste versjonen av pluginet finner du her: jetty-maven-plugin.
Med dette pluginet kan vi kjøre prosjektet vårt ved hjelp av kommandoen:
mvn brygge: løp3. Hva er Vaadin?
Enkelt sagt, Vaadin er et Java-rammeverk for å lage brukergrensesnitt, med temaer og komponenter, og mange muligheter for utvidelse.
Rammeverket dekker serversiden også, noe som betyr at hver endring du gjør i brukergrensesnittet blir umiddelbart sendt til serveren - så i hvert øyeblikk vet backend-applikasjonen hva som skjer i front-enden.
Vaadin består av en klient- og serverside - med klientsiden bygget på toppen av det velkjente Google Widget Toolkit-rammeverket, og serversiden håndtert av VaadinServlet.
4. Servleten
Vanligvis bruker ikke et Vaadin-program a web.xml fil; i stedet definerer den sin servlet ved hjelp av merknader:
@WebServlet (urlPatterns = "/ VAADIN / *", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration (ui = VaadinUI.class, productionMode = false) offentlig statisk klasse MyUIServlet utvider VaadinServlet {}I dette tilfellet serverer denne servletten innhold fra / VAADIN sti.
5. Hovedklassen
De VaadinUI klasse som det vises til i servletten, må utvide UI-klassen fra rammeverket og må overstyre i det metode for å fullføre bootstrapping av applikasjonen med Vaadin aktivert.
Det neste trinnet er å lage et oppsett og legge det til et hovedoppsett for applikasjonen:
offentlig klasse VaadinUI utvider brukergrensesnittet {@ Override protected void init (VaadinRequest vaadinRequest) {VerticalLayout verticalLayout = new VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (true); setContent (verticalLayout); }6. Vaadin Layout Managers
Rammeverket kommer med en rekke forhåndsdefinerte layoutadministratorer.
6.1. VerticalLayout
Stabl komponentene på en kolonne der den første som er lagt til er øverst og den siste er nederst:
VerticalLayout verticalLayout = ny VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (true); setContent (verticalLayout);Legg merke til hvordan eiendommene her er løst lånt fra typisk CSS-terminologi.
6.2. Horisontal oppsett
Dette oppsettet plasserer hver komponent side om side fra venstre til høyre, ligner på det vertikale oppsettet:
HorizontalLayout horizontalLayout = ny HorizontalLayout ();6.3. GridLayout
Dette oppsettet plasserer hver widget i et rutenett, du må sende kolonnene og radene i rutenettet som parameter:
GridLayout gridLayout = ny GridLayout (3, 2);6.4. FormLayout
Skjemaoppsettet plasserer bildeteksten og komponenten i to forskjellige kolonner og kan ha valgfrie indikatorer for nødvendige felt:
FormLayout formLayout = ny FormLayout ();7. Vaadin-komponenter
Nå som oppsettet er håndtert, la oss ta en titt på noen av de vanligste komponentene for å konstruere brukergrensesnittet vårt.
7.1. Merkelapp
Etiketten er selvfølgelig også kjent - og bare brukt til å vise tekst:
Merkelapp = ny etikett (); label.setId ("LabelID"); label.setValue ("Etikettverdi"); label.setCaption ("Etikett"); gridLayout.addComponent (label);Etter at vi har laget komponenten, legg merke til det kritiske trinnet med å legge den til oppsettet.
7.2. Link
De lenke widget er egentlig en grunnleggende hyperkobling:
Link link = new Link ("Baeldung", new ExternalResource ("// www.baeldung.com/")); link.setTargetName ("_ blank");Legg merke til hvordan de typiske HTML-verdiene til en element er alle her.
7.3. Tekstfelt
Denne widgeten brukes til å legge inn tekst:
TextField textField = ny TextField (); textField.setIcon (VaadinIcons.USER);Vi kan videre tilpasse elementene; for eksempel kan vi raskt legge til bilder i modulene via setIcon () API.
Vær også oppmerksom på at Font Awesome sendes ut av esken med rammeverket; den er definert som en Enum, og vi kan enkelt bruke den.
7.4. TextArea
Som du forventer, TextArea er tilgjengelig ved siden av resten av de tradisjonelle HTML-elementene:
TextArea textArea = ny TextArea ();7.5. DateField og InlineDateField
Denne kraftige komponenten brukes til å velge datoer; datoparameteren er den gjeldende datoen som skal velges i modulen:
DateField dateField = new DateField ("DateField", LocalDate.ofEpochDay (0));
Vi kan gå lenger og hekke den inne i en kombinasjonsboks kontroll for å spare plass:
InlineDateField inlineDateField = ny InlineDateField ();7.6. PasswordField
Dette er standard maskerte passordinnganger:
PasswordField passwordField = nytt PasswordField ();7.7. RichTextArea
Med denne komponenten kan vi vise formatert tekst, og den gir et grensesnitt for å manipulere slik tekst med knapper for å kontrollere skrifttyper, størrelse, justering, etc. er:
RichTextArea richTextArea = ny RichTextArea (); richTextArea.setCaption ("Rich Text Area"); richTextArea.setValue (""); richTextArea.setSizeFull (); Panel richTextPanel = nytt panel (); richTextPanel.setContent (richTextArea);7.8. Knapp
Knapper brukes til å fange brukerinngang og kommer i en rekke størrelser og farger.
For å lage en knapp instanserer vi widgetklassen som vanlig:
Button normalButton = ny knapp ("Normal Button");Endring av stil kan vi ha noen forskjellige knapper:
tinyButton.addStyleName ("liten"); smallButton.addStyleName ("liten"); largeButton.addStyleName ("large"); hugeButton.addStyleName ("enorm"); dangerButton.addStyleName ("fare"); friendlyButton.addStyleName ("vennlig"); primaryButton.addStyleName ("primær"); borderlessButton.addStyleName ("borderless"); linkButton.addStyleName ("link"); quietButton.addStyleName ("stille");Vi kan opprette en deaktivert knapp:
Button disabledButton = ny knapp ("Disabled Button"); disabledButton.setDescription ("Denne knappen kan ikke klikkes"); disabledButton.setEnabled (false); buttonLayout.addComponent (disabledButton);En innfødt knapp som bruker nettleserens utseende:
NativeButton nativeButton = ny NativeButton ("Native Button"); buttonLayout.addComponent (nativeButton);Og en knapp med et ikon:
Button iconButton = ny knapp ("Ikon-knapp"); iconButton.setIcon (VaadinIcons.ALIGN_LEFT); buttonLayout.addComponent (iconButton);7.9. Sjekk boksen
Avkrysningsruten er et element for endringstilstand, er merket eller er ikke merket av:
CheckBox avkrysningsrute = ny CheckBox ("CheckBox"); checkbox.setValue (true); checkbox.addValueChangeListener (e -> checkbox.setValue (! checkbox.getValue ())); formLayout.addComponent (avkrysningsrute);7.10. Lister
Vaadin har noen nyttige widgets for å håndtere lister.
Først oppretter vi en liste over elementene våre som skal plasseres i widgeten:
Listetall = ny ArrayList (); numbers.add ("One"); numbers.add ("Ti"); numbers.add ("Elleve");De ComboBox er en rullegardinliste:
ComboBox comboBox = ny ComboBox ("ComboBox"); comboBox.addItems (tall); formLayout.addComponent (comboBox);De ListeVelg plasserer elementer vertikalt og bruker en rullefelt i tilfelle overløp:
ListSelect listSelect = new ListSelect ("ListSelect"); listSelect.addItems (tall); listSelect.setRows (2); formLayout.addComponent (listSelect);De NativeVelg er som ComboBox men få nettleseren til å se og føle:
NativeSelect nativeSelect = new NativeSelect ("NativeSelect"); nativeSelect.addItems (tall); formLayout.addComponent (nativeSelect);De TwinColSelect er en dobbel liste der vi kan endre elementene mellom disse to rutene; hvert element kan bare leve i ett av rutene om gangen:
TwinColSelect twinColSelect = ny TwinColSelect ("TwinColSelect"); twinColSelect.addItems (tall);7.11. Nett
Rutenettet brukes til å vise data på en rektangulær måte; du har rader og kolonner, kan definere overskrift og fot for dataene:
Rutenett = nytt rutenett (rad.klasse); grid.setColumns ("column1", "column2", "column3"); Rad rad1 = ny rad ("Item1", "Item2", "Item3"); Rad rad2 = ny rad ("Item4", "Item5", "Item6"); Liste rader = ny ArrayList (); rows.add (rad1); rows.add (row2); grid.setItems (rader);De Rad klasse over er en enkel POJO vi har lagt til for å representere en rad:
offentlig klasse Rad {privat streng kolonne1; privat streng kolonne2; privat streng kolonne3; // konstruktører, getters, setters}8. Server Push
En annen interessant funksjon er muligheten til å sende meldinger fra serveren til brukergrensesnittet.
For å bruke server push, må vi legge til følgende avhengighet til vår pom.xml:
com.vaadin vaadin-push 8.8.5 Den siste versjonen av avhengigheten finner du her: vaadin-push.
Vi må også legge til @Trykk kommentar til klassen vår som representerer brukergrensesnittet:
@Push @Theme ("mytheme") offentlig klasse VaadinUI utvider brukergrensesnittet {...}Vi lager en etikett for å fange serverens push-melding:
private Label currentTime;Vi lager da en PlanlagtExecutorService som sender tiden fra serveren til merkelapp:
ScheduledExecutorService scheduleExecutor = Executors.newScheduledThreadPool (1); Kjørbar oppgave = () -> {currentTime.setValue ("Nåværende tid:" + Instant.now ()); }; scheduleExecutor.scheduleWithFixedDelay (oppgave, 0, 1, TimeUnit.SECONDS);De PlanlagtExecutorService kjører på serversiden av applikasjonen, og hver gang den kjører, blir brukergrensesnittet oppdatert.
9. Databinding
Vi kan binde brukergrensesnittet vårt til forretningsklasser.
Først oppretter vi en Java-klasse:
offentlig klasse BindData {private String bindName; public BindData (String bindName) {this.bindName = bindName; } // getter & setter}Så binder vi klassen vår som har et enkelt felt til a Tekstfelt i vårt brukergrensesnitt:
Bindemiddel = nytt Bindemiddel (); BindData bindData = nye BindData ("BindData"); binder.readBean (bindData); TextField bindedTextField = ny TextField (); binder.forField (bindedTextField) .bind (BindData :: getBindName, BindData :: setBindName);Først lager vi en BindData objekt ved hjelp av klassen vi opprettet før, deretter Binder binder feltet til Tekstfelt.
10. Validatorer
Vi kan skape Validatorer for å validere dataene i våre inndatafelt. For å gjøre det, fester vi validatoren til feltet vi vil validere:
BindData stringValidatorBindData = new BindData (""); TextField stringValidator = ny TextField (); Binder stringValidatorBinder = new Binder (); stringValidatorBinder.setBean (stringValidatorBindData); stringValidatorBinder.forField (stringValidator) .withValidator (ny StringLengthValidator ("String må ha 2-5 tegn lengde", 2, 5)). bind (BindData :: getBindName, BindData :: setBindName);Deretter validerer vi dataene våre før vi bruker dem:
Button buttonStringValidator = ny knapp ("Valider streng"); buttonStringValidator.addClickListener (e -> stringValidatorBinder.validate ());I dette tilfellet bruker vi StringLengthValidator som validerer lengden på en String men Vaadin gir andre nyttige validatorer og lar oss også lage våre tilpassede validatorer.
11. Oppsummering
Selvfølgelig klød denne raske oppskriften knapt overflaten; rammeverket er mye mer enn brukergrensesnitt-widgets, Vaadin gir alt du trenger for å lage moderne webapplikasjoner ved hjelp av Java.
Og som alltid kan koden finnes på Github.
