vaadinAan de slag met vaadin


Opmerkingen

Vaadin is een scripttaal op de server, geschreven in Java, die het grootste deel van de client-side code genereert die nodig is voor een webapplicatie. Het maakt gebruik van Google Web Toolkit om de client-side-objecten te genereren en kan worden uitgebreid door de Google Web Toolkit uit te breiden.

versies

Versie Publicatiedatum
6.8.17 2016/03/21
7.6.8 2016/07/13

Maak een Vaadin-project in Eclipse

Vaadin plug-in voor eclipse biedt een snelle manier om een vaadin-project te bouwen met Apache Ivy dependency manager. In de documentatie van Vaadin wordt uitgelegd hoe u een vaadin-project kunt maken met behulp van de Eclipse-plug-in.

Om de plug-in te installeren, ga je gewoon naar Eclipse Marketplace en zoek je op vaadin . De huidige versie van de plug-in is 3.0.0 .

Na het installeren van de plug-in heeft u de volgende snelle functies,

  • Maak een Vaadin6 of Vaadin 7 project ( standaardafhankelijkheidsmanager is Ivy )
  • Compileer widgetsets ( om client-side widgets te compileren )
  • Thema compileren (Thema compileren om definitieve CSS te bouwen )
  • Widget maken ( om uw aangepaste widget te maken )
  • Maak een Vaadin-thema

Dus, na het instellen van de plug-in, maakt u gewoon een nieuw Vaadin-project met minimale configuratie. U kunt ook de versie van vaadin opgeven tijdens het maken van het project.

  • File > New > Vaadin7 Project
  • Geef de versie van vaadin op die in het project moet worden gebruikt
  • Geef de doelruntime op die u wilt gebruiken
  • Af hebben!

Het kost tijd om alle potten te downloaden die nodig zijn voor vaadin, zodra Ivy alle afhankelijkheden heeft opgelost. U kunt het project direct op de server uitvoeren en u ziet één Button met Click Me in het browservenster. Houd er rekening mee dat Vaadin7 compatibel is met Java 6 en nieuwer.

Maak een Vaadin-project met Maven

Met Maven kunt u een Vaadin-project maken met het vaadin-archetype-application . Je kunt dat archetype ook toevoegen aan IDE om een mavenproject met IDE te maken.

mvn archetype:generate 
   -DarchetypeGroupId=com.vaadin 
   -DarchetypeArtifactId=vaadin-archetype-application 
   -DarchetypeVersion=7.6.8 
   -DgroupId=myvaadin.project 
   -DartifactId=DemoVaadinProject 
   -Dversion=0.1 
   -Dpackaging=war 
 

Zodra u bovenstaande opdracht uitvoert, heeft u de volgende projectstructuur.

DemoVaadinProject 
  |-src
     |-main
         |-java
         |   |-myvaadin
         |         |-project
         |            |-MyUI.java
         |-resource
         |    |-myvaadin
         |         |-project
         |            |-MyAppWidgetset.gwt.xml
         |-webapps
              |- VAADIN
                   |-theme   
                      |- mytheme.scss
                      |- addons.scss
                      |- styles.scss
                      |- favicon.ico
 

Het gemaakte standaard maven-project kan rechtstreeks in IDE worden geïmporteerd. Om de maven-applicatie uit te voeren, moeten we de standaard widget-sets van vaadin compileren.

Merk op dat we direct het volgende maven-commando kunnen gebruiken om de vaadin-applicatie te verpakken en het compileert standaard de widgetsets. U kunt de maven jetty-plug-in gebruiken om de vaadin-applicatie op Jetty te implementeren.

cd path/to/DemoVaadinProject
mvn package jetty:run
 

Hiermee wordt de standaardtoepassing geïmplementeerd en wordt deze op standaardpoort 8080 . U hebt toegang tot de geïmplementeerde toepassing op http: // localhost: 8080 .

Het is klaar om zonder wijzigingen te worden uitgevoerd. Standaard voegt het Vaadin-archetype een standaardthema, widgetset xml en MyUI klasse toe, wat een toegangspunt is voor de vaadin-toepassing.

In de browser zien we het volgende formulier.

voer hier de afbeeldingsbeschrijving in

Eerste programma - "Hallo wereld"

Kopieer en plak deze code en start uw programma:

@Theme(ValoTheme.THEME_NAME) //[optional] adds Vaadin built in theming 
public class SampleUI extends UI {
    
@Override
protected void init(VaadinRequest request) {
         final VerticalLayout rootLayout = new VerticalLayout();
         Label label = new Label("Hello World"!);
         rootLayout.addComponent(label);
         setContent(rootLayout);
     }
 }
 

Nadat het lukken succesvol was, navigeer je naar localhost: 8080 / yourApplicationName of http: // localhost: 8080 / om te zien of je app actief is.

Installatie of instellingen

https://vaadin.com/framework/get-started

Vaadin Plugin voor Netbeans

Een project maken met de NetBeans IDE

In het volgende begeleiden we u bij het maken van een Vaadin-project in NetBeans en laten we zien hoe u het kunt uitvoeren.

Installatie van NetBeans en de Vaadin-plug-in wordt behandeld in De NetBeans IDE en plug-in installeren.

Zonder de plug-in kunt u eenvoudig een Vaadin-project maken als een Maven-project met behulp van een Vaadin-archetype. U kunt ook een Vaadin-project maken als een regulier webtoepassingsproject, maar het vereist veel handmatige stappen om alle Vaadin-bibliotheken te installeren, de UI-klasse te maken, de servlet te configureren, een thema te maken, enzovoort.

Een project maken

  1. Selecteer Bestand ▸ Nieuw project ... in het hoofdmenu of druk op Ctrl + Shift + N.

  2. Selecteer in het venster Nieuw project dat wordt geopend de categorie Vaadin en een van de archetypen van Vaadin aan de rechterkant. voer hier de afbeeldingsbeschrijving in

    De archetypen worden in meer detail beschreven in Overzicht van Maven-archetypen.

  3. Voer in de stap Naam en locatie de projectparameters in. voer hier de afbeeldingsbeschrijving in

    Naam van het project

    Een projectnaam. De naam moet een geldige id zijn die alleen alfanumerieke tekens, mintekens en onderstrepingstekens mag bevatten. Het wordt toegevoegd aan de groeps-ID om de Java-pakketnaam voor de bronnen te verkrijgen.

    Project Locatie

    Pad naar de map waarin het project moet worden gemaakt.

    Groeps-ID

    Een Maven-groeps-ID voor uw project. Normaal gesproken is dit de domeinnaam van uw organisatie in omgekeerde volgorde, zoals com.example. De groeps-ID wordt ook gebruikt als een voorvoegsel voor het Java-bronpakket, dus het moet een Java-compatibele pakketnaam zijn.

    Versie

    Eerste versie van uw aanvraag. Het nummer moet voldoen aan het nummeringsformaat van de Maven-versie.

    Pakket

    De Java-pakketnaam om bronnen in te plaatsen.

    Aanvullende creatie-eigenschappen

    De eigenschappen beheren verschillende namen. Ze zijn specifiek voor het archetype dat u hebt gekozen.

    Klik op Voltooien.

    Het maken van het project kan even duren omdat Maven alle benodigde afhankelijkheden laadt.

Onderzoek van het project

De projectwizard heeft al het werk voor u gedaan: een skelet van de UI-klasse is naar de map src geschreven. De projecthiërarchie die wordt weergegeven in de Project Explorer wordt weergegeven in Een nieuw Vaadin-project in NetBeans . voer hier de afbeeldingsbeschrijving in Figuur 1. Een nieuw Vaadin-project in NetBeans

mijn thema

Het thema van de gebruikersinterface. Zie Thema's voor informatie over thema's.

MyUI.java

De UI-klasse, het belangrijkste toegangspunt van uw toepassing. Zie Toepassingen op de server voor informatie over de basisstructuur van Vaadin-toepassingen.

De Vaadin-bibliotheken en andere afhankelijkheden worden beheerd door Maven. Merk op dat de bibliotheken niet worden opgeslagen in de projectmap, hoewel ze worden vermeld in de virtuele map Java Resources ▸ Libraries ▸ Maven Dependencies. De toepassing uitvoeren

Eenmaal gemaakt, kunt u het als volgt op een server uitvoeren.

  1. Selecteer op het tabblad Projecten het project en klik op de knop Project uitvoeren op de werkbalk (of druk op F6).

  2. Selecteer een server in de serverlijst in het venster Implementatieserver selecteren. Het moet GlassFish of Apache Tomcat of beide weergeven, afhankelijk van wat u hebt gekozen in de NetBeans-installatie.

    netbeans server

    Selecteer ook Permanent onthouden als u dezelfde server ook in de toekomst wilt gebruiken bij het ontwikkelen van toepassingen.

    Klik OK.

De widget-set wordt nu gecompileerd, wat even kan duren.

Als alles goed gaat, start NetBeans de server in poort 8080 en start, afhankelijk van uw systeemconfiguratie, de standaardbrowser om de webapplicatie weer te geven. Als dit niet het geval is, kunt u het handmatig openen, bijvoorbeeld op http: // localhost: 8080 / myproject . De projectnaam wordt standaard gebruikt als het contextpad van de toepassing.

Wanneer u nu de UI-klasse in de broneditor bewerkt en opslaat, zal NetBeans de toepassing automatisch opnieuw implementeren. Nadat het na enkele seconden is afgelopen, kunt u de toepassing opnieuw laden in de browser.