Inleiding tot Vaadin
1. Overzicht
Vaadin is een server-side Java-framework voor het maken van webgebruikersinterfaces. Hiermee kunnen we onze front-end maken met behulp van Java-functies.
2. Maven afhankelijkheden en instellingen
Laten we beginnen met het toevoegen van de volgende afhankelijkheden aan onze pom.xml:
com.vaadin vaadin-server com.vaadin vaadin-client-gecompileerde com.vaadin vaadin-thema's De laatste versies van de afhankelijkheden zijn hier te vinden: vaadin-server, vaadin-client-gecompileerd, vaadin-themes.
- vaadin-server pakket - bevat klassen voor het afhandelen van alle serverdetails zoals sessies, clientcommunicatie, enz.
- vaadin-client-gecompileerd - is gebaseerd op GWT en bevat de nodige pakketten om de client te compileren
- vaadin-thema's - bevat enkele vooraf gemaakte thema's en alle hulpprogramma's voor het maken van onze thema's
Om onze Vaadin-widgets te compileren, moeten we de maven-war-plugin, vaadin-maven-plugin en de maven-clean-plugin configureren. Controleer voor de volledige pom het pom-bestand in de broncode - aan het einde van de tutorial.
We moeten ook de Vaadin-repository en het afhankelijkheidsbeheer toevoegen:
vaadin-addons //maven.vaadin.com/vaadin-addons com.vaadin vaadin-bom 13.0.9 pom importeren De Afhankelijkheidsbeheer tag beheert versies van alle Vaadin afhankelijkheden.
Om de applicatie snel uit te voeren, gebruiken we de Jetty-plug-in:
org.eclipse.jetty jetty-maven-plugin 9.3.9.v20160517 2 waar De laatste versie van de plug-in is hier te vinden: jetty-maven-plugin.
Met deze plug-in kunnen we ons project uitvoeren met behulp van het commando:
mvn steiger: run3. Wat is Vaadin?
Simpel gezegd, Vaadin is een Java-raamwerk voor het maken van gebruikersinterfaces, met thema's en componenten, en veel uitbreidingsopties.
Het raamwerk bedekt de serverkant ook, wat betekent dat elke wijziging die u aanbrengt in de gebruikersinterface onmiddellijk naar de server wordt gestuurd - zodat de backend-applicatie op elk moment weet wat er in de front-end gebeurt.
Vaadin bestaat uit een client- en serverzijde - met de clientzijde gebouwd bovenop het bekende Google Widget Toolkit-framework en de serverzijde wordt afgehandeld door de VaadinServlet.
4. De servlet
Gewoonlijk gebruikt een Vaadin-applicatie geen web.xml het dossier; in plaats daarvan definieert het zijn servlet annotaties gebruiken:
@WebServlet (urlPatterns = "/ VAADIN / *", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration (ui = VaadinUI.class, productionMode = false) openbare statische klasse MyUIServlet breidt VaadinServlet uit {}In dit geval geeft deze servlet inhoud weer van de / VAADIN pad.
5. De hoofdklasse
De VaadinUI klasse waarnaar in de servlet wordt verwezen, moet de UI-klasse uitbreiden vanuit het framework en moet de in het methode om het opstarten van de applicatie te voltooien met Vaadin ingeschakeld.
De volgende stap is om een lay-out te maken en deze toe te voegen aan een hoofdlay-out van de applicatie:
openbare klasse VaadinUI breidt UI uit {@Override beschermde ongeldige init (VaadinRequest vaadinRequest) {VerticalLayout verticalLayout = nieuwe VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (true); setContent (verticalLayout); }6. Vaadin Layout Managers
Het framework wordt geleverd met een aantal voorgedefinieerde lay-outmanagers.
6.1. Verticale indeling
Stapel de componenten op een kolom waarbij de eerste toegevoegde bovenaan staat en de laatste onderaan:
VerticalLayout verticalLayout = nieuwe VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (true); setContent (verticalLayout);Merk op hoe de eigenschappen hier losjes zijn ontleend aan typische CSS-terminologie.
6.2. Horizontale indeling
Deze lay-out plaatst elke component naast elkaar van links naar rechts is vergelijkbaar met de verticale lay-out:
HorizontalLayout horizontalLayout = nieuwe HorizontalLayout ();6.3. GridLayout
Deze lay-out plaatst elke widget in een raster, u moet als parameter de kolommen en rijen van het raster doorgeven:
GridLayout gridLayout = nieuwe GridLayout (3, 2);6.4. FormLayout
De formulierlay-out plaatst het bijschrift en de component in twee verschillende kolommen en kan optionele indicatoren hebben voor vereiste velden:
FormLayout formLayout = nieuwe FormLayout ();7. Vaadin-componenten
Nu de lay-out is afgehandeld, gaan we eens kijken naar enkele van de meer algemene componenten voor het construeren van onze gebruikersinterface.
7.1. Etiket
Het label is natuurlijk ook bekend - en wordt gewoon gebruikt om tekst weer te geven:
Label label = nieuw label (); label.setId ("LabelID"); label.setValue ("Labelwaarde"); label.setCaption ("Label"); gridLayout.addComponent (label);Let, nadat we de component hebben gemaakt, op de cruciale stap om deze aan de lay-out toe te voegen.
7.2. Koppeling
De koppeling widget is in wezen een eenvoudige hyperlink:
Link link = nieuwe link ("Baeldung", nieuwe ExternalResource ("// www.baeldung.com/")); link.setTargetName ("_ blank");Merk op hoe de typische HTML-waarden van een element zijn allemaal hier.
7.3. TextField
Deze widget wordt gebruikt om tekst in te voeren:
TextField textField = nieuw TextField (); textField.setIcon (VaadinIcons.USER);We kunnen de elementen verder aanpassen; we kunnen bijvoorbeeld snel afbeeldingen toevoegen aan de widgets via de setIcon () API.
Merk ook op dat Font Awesome wordt uit de doos met het framework verzonden; het is gedefinieerd als een Enum, en we kunnen er gemakkelijk gebruik van maken.
7.4. TextArea
Zoals je zou verwachten, TextArea is beschikbaar naast de rest van de traditionele HTML-elementen:
TextArea textArea = nieuwe TextArea ();7.5. DateField en InlineDateField
Deze krachtige component wordt gebruikt om datums te kiezen; de datumparameter is de huidige datum die moet worden geselecteerd in de widget:
DateField dateField = nieuwe DateField ("DateField", LocalDate.ofEpochDay (0));
We kunnen verder gaan en het nestelen in een keuzelijst met invoervak controle om ruimte te besparen:
InlineDateField inlineDateField = nieuwe InlineDateField ();7.6. Wachtwoordveld
Dit is de standaard gemaskeerde wachtwoordinvoer:
PasswordField passwordField = nieuw PasswordField ();7.7. RichTextArea
Met deze component kunnen we opgemaakte tekst weergeven, en het biedt een interface om dergelijke tekst te manipuleren met knoppen om de lettertypen, grootte, uitlijning, enz. Te regelen zijn:
RichTextArea richTextArea = nieuwe RichTextArea (); richTextArea.setCaption ("Rich Text Area"); richTextArea.setValue (""); richTextArea.setSizeFull (); Paneel richTextPanel = nieuw paneel (); richTextPanel.setContent (richTextArea);7.8. Knop
Knoppen worden gebruikt voor het vastleggen van gebruikersinvoer en zijn er in verschillende maten en kleuren.
Om een knop te maken, instantiëren we de widgetklasse zoals gewoonlijk:
Button normalButton = nieuwe knop ("Normale knop");Als we de stijl veranderen, kunnen we een aantal verschillende knoppen hebben:
tinyButton.addStyleName ("tiny"); smallButton.addStyleName ("small"); largeButton.addStyleName ("large"); hugeButton.addStyleName ("huge"); DangerButton.addStyleName ("gevaar"); friendlyButton.addStyleName ("vriendelijk"); primaryButton.addStyleName ("primair"); borderlessButton.addStyleName ("borderless"); linkButton.addStyleName ("link"); quietButton.addStyleName ("quiet");We kunnen een uitgeschakelde knop maken:
Button disabledButton = nieuwe knop ("Uitgeschakelde knop"); DisabledButton.setDescription ("Deze knop kan niet worden aangeklikt"); uitgeschakeldButton.setEnabled (false); buttonLayout.addComponent (disabledButton);Een native knop die het uiterlijk van de browser gebruikt:
NativeButton nativeButton = nieuwe NativeButton ("Native Button"); buttonLayout.addComponent (nativeButton);En een knop met een pictogram:
Button iconButton = nieuwe knop ("Icon Button"); iconButton.setIcon (VaadinIcons.ALIGN_LEFT); buttonLayout.addComponent (iconButton);7.9. CheckBox
Het selectievakje is een statuselement wijzigen, is aangevinkt of niet aangevinkt:
CheckBox checkbox = nieuwe CheckBox ("CheckBox"); checkbox.setValue (true); checkbox.addValueChangeListener (e -> checkbox.setValue (! checkbox.getValue ())); formLayout.addComponent (selectievakje);7.10. Lijsten
Vaadin heeft een aantal handige widgets om lijsten af te handelen.
Eerst maken we een lijst met onze items die in de widget moeten worden geplaatst:
Lijstnummers = nieuwe ArrayList (); numbers.add ("Een"); numbers.add ("Tien"); numbers.add ("Elf");De ComboBox is een vervolgkeuzelijst:
ComboBox comboBox = nieuwe ComboBox ("ComboBox"); comboBox.addItems (cijfers); formLayout.addComponent (comboBox);De Lijst Selecteer plaatst items verticaal en gebruikt een schuifbalk in geval van overloop:
ListSelect listSelect = nieuwe ListSelect ("ListSelect"); listSelect.addItems (nummers); listSelect.setRows (2); formLayout.addComponent (listSelect);De NativeSelect is net als de ComboBox maar laat de browser eruitzien en aanvoelen:
NativeSelect nativeSelect = nieuwe NativeSelect ("NativeSelect"); nativeSelect.addItems (cijfers); formLayout.addComponent (nativeSelect);De TwinColSelect is een dubbele lijst waarin we de items tussen deze twee panelen kunnen wijzigen; elk item kan slechts in een van de panelen tegelijk voorkomen:
TwinColSelect twinColSelect = nieuwe TwinColSelect ("TwinColSelect"); twinColSelect.addItems (cijfers);7.11. Raster
Het raster wordt gebruikt om gegevens op een rechthoekige manier weer te geven; je hebt rijen en kolommen, kan koptekst en voet voor de gegevens definiëren:
Grid grid = nieuw Grid (Row.class); grid.setColumns ("column1", "column2", "column3"); Rij row1 = nieuwe rij ("Item1", "Item2", "Item3"); Rij row2 = nieuwe rij ("Item4", "Item5", "Item6"); Lijst rijen = nieuwe ArrayList (); rijen.add (rij1); rijen.add (rij2); grid.setItems (rijen);De Rij klasse hierboven is een eenvoudige POJO die we hebben toegevoegd om een rij te vertegenwoordigen:
openbare klasse Rij {privé String column1; private String column2; private String column3; // constructeurs, getters, setters}8. Server push
Een andere interessante functie is de mogelijkheid om berichten van de server naar de gebruikersinterface te sturen.
Om server-push te gebruiken, moeten we de volgende afhankelijkheid toevoegen aan onze pom.xml:
com.vaadin vaadin-push 8.8.5 De laatste versie van de afhankelijkheid is hier te vinden: vaadin-push.
We moeten ook de @Duwen annotatie voor onze klasse die de gebruikersinterface vertegenwoordigt:
@Push @Theme ("mytheme") openbare klasse VaadinUI breidt gebruikersinterface uit {...}We maken een label om het pushbericht van de server op te vangen:
private label currentTime;We maken dan een ScheduledExecutorService die de tijd van de server naar de etiket:
ScheduledExecutorService scheduleExecutor = Executors.newScheduledThreadPool (1); Uitvoerbare taak = () -> {currentTime.setValue ("Huidige tijd:" + Instant.now ()); }; scheduleExecutor.scheduleWithFixedDelay (taak, 0, 1, TimeUnit.SECONDS);De ScheduledExecutorService draait aan de serverkant van de applicatie en elke keer dat deze wordt uitgevoerd, wordt de gebruikersinterface bijgewerkt.
9. Gegevensbinding
We kunnen onze gebruikersinterface aan onze businessclasses koppelen.
Eerst maken we een Java-klasse:
openbare klasse BindData {private String bindName; openbare BindData (String bindName) {this.bindName = bindName; } // getter & setter}Vervolgens binden we onze klasse met een enkel veld aan een TextField in onze gebruikersinterface:
Binder binder = nieuwe Binder (); BindData bindData = nieuwe BindData ("BindData"); binder.readBean (bindData); TextField bindedTextField = new TextField (); binder.forField (bindedTextField) .bind (BindData :: getBindName, BindData :: setBindName);Eerst maken we een BindData object met behulp van de klasse die we eerder hebben gemaakt, en vervolgens de Binder bindt het veld aan de TextField.
10. Validators
We kunnen creëren Validators om de gegevens in onze invoervelden te valideren. Om dat te doen, koppelen we de validator aan het veld dat we willen valideren:
BindData stringValidatorBindData = nieuwe BindData (""); TextField stringValidator = nieuw TextField (); Binder stringValidatorBinder = nieuwe Binder (); stringValidatorBinder.setBean (stringValidatorBindData); stringValidatorBinder.forField (stringValidator) .withValidator (nieuwe StringLengthValidator ("String moet 2-5 tekens lang zijn", 2, 5)) .bind (BindData :: getBindName, BindData :: setBindName);Vervolgens valideren we onze gegevens voordat we ze gebruiken:
Button buttonStringValidator = nieuwe Button ("Validate String"); buttonStringValidator.addClickListener (e -> stringValidatorBinder.validate ());In dit geval gebruiken we de StringLengthValidator dat valideert de lengte van een Draad maar Vaadin biedt andere nuttige validators en stelt ons ook in staat om onze aangepaste validators te maken.
11. Samenvatting
Natuurlijk bekrast deze snelle beschrijving nauwelijks het oppervlak; het framework is veel meer dan widgets voor de gebruikersinterface. Vaadin biedt alles wat je nodig hebt voor het maken van moderne webapplicaties met Java.
En, zoals altijd, is de code te vinden op Github.
