Looking for vaadin Keywords? Try Ask4Keywords

vaadinErste Schritte mit Vaadin


Bemerkungen

Vaadin ist eine serverseitige Skriptsprache, die in Java geschrieben ist und die den meisten für eine Webanwendung erforderlichen clientseitigen Code generiert. Es verwendet Google Web Toolkit zum Generieren der clientseitigen Objekte und kann durch Erstellen erweitert werden, indem das Google Web Toolkit erweitert wird.

Versionen

Ausführung Veröffentlichungsdatum
6.8.17 2016-03-21
7.6.8 2016-07-13

Vaadin-Projekt in Eclipse erstellen

Das Vaadin-Plug-in für Eclipse bietet eine schnelle Möglichkeit zum Erstellen eines Vaadin-Projekts mit dem Apache Ivy-Abhängigkeitsmanager. In der Vaadin- Dokumentation wird erläutert, wie ein Vaadin-Projekt mithilfe des Eclipse-Plugins erstellt wird.

Um das Plug-in zu installieren, gehen Sie einfach zum Eclipse-Marktplatz und suchen Sie nach vaadin . Die aktuelle Version des Plug- 3.0.0 ist 3.0.0 .

Nach der Installation des Plug-Ins haben Sie folgende Schnellfunktionen:

  • Vaadin6 oder Vaadin 7 Projekt erstellen ( Standardabhängigkeitsmanager ist Ivy )
  • Widgetsets kompilieren ( Um clientseitige Widgets zu kompilieren )
  • Compile Theme ( Um ein Theme zu kompilieren, um finales CSS zu erstellen )
  • Widget erstellen ( So erstellen Sie Ihr benutzerdefiniertes Widget )
  • Vaadin Theme erstellen

Nachdem Sie das Plug-In eingerichtet haben, erstellen Sie einfach ein neues Vaadin-Projekt mit minimaler Konfiguration. Sie können auch eine Version von Vaadin angeben, während Sie das Projekt erstellen.

  • File > New > Vaadin7 Project
  • Geben Sie die Version des Vaadins an, die im Projekt verwendet werden soll
  • Geben Sie die Ziellaufzeit an, die Sie verwenden möchten
  • Fertig!

Nachdem Ivy alle Abhängigkeiten aufgelöst hat, wird es einige Zeit dauern, alle für vaadin erforderlichen Gläser herunterzuladen. Sie können das Projekt direkt auf dem Server ausführen. Auf dem Browser-Bildschirm wird ein Button mit Click Me angezeigt. Bitte beachten Sie, dass Vaadin7 mit Java 6 und neuer kompatibel ist.

Vaadin-Projekt mit Maven erstellen

Mit Maven können Sie ein Vaadin-Projekt mit vaadin-archetype-application Vaadin vaadin-archetype-application erstellen. Sie können diesen Archetyp auch in IDE hinzufügen, um ein Maven-Projekt mit IDE zu erstellen.

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

Sobald Sie den obigen Befehl ausführen, erhalten Sie folgende Projektstruktur.

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
 

Das erstellte Standard-Maven-Projekt kann direkt in IDE importiert werden. Um die Maven-Anwendung auszuführen, müssen wir die Standard-Widget-Sets von vaadin kompilieren.

Beachten Sie, dass wir den folgenden Befehl maven direkt verwenden können, um die vaadin-Anwendung zu packen. Die Widgetsets werden standardmäßig kompiliert. Sie können maven Anlegesteg verwenden, um die Vaadin-Anwendung auf Jetty bereitzustellen.

cd path/to/DemoVaadinProject
mvn package jetty:run
 

Dadurch wird die Standardanwendung bereitgestellt und auf dem Standardport 8080 . Sie können auf die bereitgestellte Anwendung unter http: // localhost: 8080 zugreifen.

Es ist ohne Änderungen betriebsbereit. Standardmäßig fügt der Vaadin-Archetyp das Standarddesign, die XML- MyUI Klasse und die MyUI Klasse hinzu, die einen Einstiegspunkt für die Vaadin-Anwendung darstellt.

Im Browser sehen wir folgendes Formular.

Geben Sie hier die Bildbeschreibung ein

Erstes Programm - "Hello World"

Kopieren Sie diesen Code und starten Sie Ihr Programm:

@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);
     }
 }
 

Wenn das Lauchen erfolgreich war, navigieren Sie zu localhost: 8080 / yourApplicationName oder http: // localhost: 8080 /, um zu sehen, ob Ihre App läuft.

Installation oder Setup

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

Vaadin Plugin für Netbeans

Erstellen eines Projekts mit der NetBeans-IDE

Im Folgenden führen wir Sie durch die Erstellung eines Vaadin-Projekts in NetBeans und zeigen, wie es ausgeführt wird.

Die Installation von NetBeans und des Vaadin-Plugins wird in Installation der NetBeans-IDE und des Plugins beschrieben.

Ohne das Plugin können Sie ein Vaadin-Projekt am einfachsten mit einem Vaadin-Archetyp als Maven-Projekt erstellen. Sie können ein Vaadin-Projekt auch als reguläres Webanwendungsprojekt erstellen. Es sind jedoch viele manuelle Schritte erforderlich, um alle Vaadin-Bibliotheken zu installieren, die UI-Klasse zu erstellen, das Servlet zu konfigurieren, ein Design zu erstellen usw.

Ein Projekt erstellen

  1. Wählen Sie Datei ▸ Neues Projekt ... aus dem Hauptmenü oder drücken Sie Strg + Shift + N.

  2. Wählen Sie im folgenden Fenster Neues Projekt die Vaadin-Kategorie und einen der Vaadin-Archetypen von rechts aus. Geben Sie hier die Bildbeschreibung ein

    Die Archetypen werden in Übersicht über Maven-Archetypen ausführlicher beschrieben.

  3. Geben Sie im Schritt Name und Ort die Projektparameter ein. Geben Sie hier die Bildbeschreibung ein

    Projektname

    Ein Projektname Der Name muss ein gültiger Bezeichner sein, der nur alphanumerische Zeichen, Minus und Unterstrich enthalten darf. Sie wird an die Gruppen-ID angehängt, um den Java-Paketnamen für die Quellen zu erhalten.

    Projektstandort

    Pfad zu dem Ordner, in dem das Projekt erstellt werden soll.

    Gruppen-ID

    Eine Maven-Gruppen-ID für Ihr Projekt. Normalerweise ist dies der Domänenname Ihrer Organisation in umgekehrter Reihenfolge, z. B. com.example. Die Gruppen-ID wird auch als Präfix für das Java-Quellpaket verwendet. Daher sollte es ein Java-kompatibler Paketname sein.

    Ausführung

    Ursprüngliche Version Ihrer Anwendung. Die Nummer muss dem Maven-Versionsnummerierungsformat entsprechen.

    Paket

    Der Java-Paketname, in den die Quellen eingefügt werden.

    Zusätzliche Erstellungseigenschaften

    Die Eigenschaften steuern verschiedene Namen. Sie sind spezifisch für den von Ihnen gewählten Archetyp.

    Klicken Sie auf Fertig stellen.

    Das Erstellen des Projekts kann eine Weile dauern, da Maven alle erforderlichen Abhängigkeiten lädt.

Das Projekt erkunden

Der Projektassistent hat die ganze Arbeit für Sie erledigt: In das src-Verzeichnis wurde ein UI-Klassengerüst geschrieben. Die im Projektexplorer dargestellte Projekthierarchie wird in Ein neues Vaadin-Projekt in NetBeans angezeigt. Geben Sie hier die Bildbeschreibung ein Abbildung 1. Ein neues Vaadin-Projekt in NetBeans

mein Thema

Das Thema der Benutzeroberfläche. Informationen zu Themen finden Sie unter Themen.

MyUI.java

Die UI-Klasse, die den Haupteinstiegspunkt Ihrer Anwendung darstellt. Informationen zur grundlegenden Struktur von Vaadin-Anwendungen finden Sie unter Serverseitige Anwendungen.

Die Vaadin-Bibliotheken und andere Abhängigkeiten werden von Maven verwaltet. Beachten Sie, dass die Bibliotheken nicht im Projektordner gespeichert sind, obwohl sie im virtuellen Ordner Java-Ressourcen ▸ Bibliotheken ▸ Maven-Abhängigkeiten aufgeführt sind. Anwendung ausführen

Nach dem Erstellen können Sie es wie folgt auf einem Server ausführen.

  1. Wählen Sie auf der Registerkarte Projekte das Projekt aus und klicken Sie in der Symbolleiste auf die Schaltfläche Projekt ausführen (oder drücken Sie F6).

  2. Wählen Sie im Fenster Bereitstellungsserver auswählen einen Server aus der Liste Server aus. Es sollte entweder GlassFish oder Apache Tomcat oder beides anzeigen, je nachdem, was Sie bei der NetBeans-Installation gewählt haben.

    Netbeans-Server

    Wählen Sie auch Remember Remember (dauerhaft merken) aus, wenn Sie denselben Server zukünftig beim Entwickeln von Anwendungen verwenden möchten.

    OK klicken.

Das Widget-Set wird an dieser Stelle zusammengestellt, was eine Weile dauern kann.

Wenn alles gut geht, startet NetBeans den Server in Port 8080 und startet je nach Systemkonfiguration den Standardbrowser, um die Webanwendung anzuzeigen. Wenn nicht, können Sie es manuell öffnen, z. B. unter http: // localhost: 8080 / myproject . Der Projektname wird standardmäßig als Kontextpfad der Anwendung verwendet.

Wenn Sie nun die UI-Klasse im Quelleditor bearbeiten und speichern, stellt NetBeans die Anwendung automatisch erneut bereit. Nach einigen Sekunden können Sie die Anwendung erneut in den Browser laden.