Commencer avec vaadin

Créer un projet Vaadin avec Maven

Avec Maven, vous pouvez créer un projet Vaadin avec l’archétype vaadin-archetype-application. Vous pouvez également ajouter cet archétype dans IDE pour créer un projet maven avec IDE.

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

Une fois que vous avez exécuté la commande ci-dessus, vous aurez la structure de projet suivante.

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

Le projet Maven par défaut créé peut être importé directement dans l’IDE. Pour exécuter l’application maven, nous devons compiler les ensembles de widgets par défaut de vaadin.

Notez que nous pouvons directement utiliser la commande maven suivante pour empaqueter l’application vaadin et elle compilera les widgetsets par défaut. Vous pouvez utiliser le plugin maven jetty pour déployer l’application vaadin sur Jetty.

cd path/to/DemoVaadinProject
mvn package jetty:run

Cela déploiera l’application par défaut et commencera à l’exécuter sur le port par défaut “8080”. Vous pouvez accéder à l’application déployée à l’adresse http://localhost:8080.

Il est prêt à fonctionner sans aucun changement. Par défaut, l’archétype Vaadin ajoute le thème par défaut, le widgetset xml et la classe MyUI qui est un point d’entrée pour l’application vaadin.

Dans le navigateur, nous verrons le formulaire suivant.

[![entrez la description de l’image ici][1]][1]

[1] : http://i.stack.imgur.com/QMs9t.png

Créer un projet Vaadin dans Eclipse

Le plug-in Vaadin pour eclipse fournit un moyen rapide de créer un projet vaadin avec le gestionnaire de dépendances Apache Ivy. La [documentation][1] de Vaadin explique comment créer un projet vaadin à l’aide du plugin Eclipse.

Pour installer le plug-in, allez simplement sur le marché eclipse et recherchez vaadin. La version actuelle du plug-in est 3.0.0.

Après avoir installé le plug-in, vous aurez les fonctionnalités rapides suivantes,

  • Créer un projet Vaadin6 ou Vaadin 7 (Le gestionnaire de dépendances par défaut est Ivy)
  • Compile Widgetsets (Pour compiler les widgets côté client)
  • Compiler le thème (Pour compiler le thème pour créer le CSS final)
  • Créer un widget (Pour créer votre widget personnalisé)
  • Créer un thème Vaadin

Ainsi, après avoir configuré le plug-in, créez simplement un nouveau projet Vaadin avec une configuration minimale. Vous pouvez également spécifier la version de vaadin lors de la création du projet.

  • Fichier > Nouveau > Projet Vaadin7
  • Spécifiez la version de vaadin à utiliser dans le projet
  • Spécifiez le runtime cible que vous souhaitez utiliser
  • Finir!

Il faudra du temps pour télécharger tous les fichiers jar requis pour vaadin, une fois qu’Ivy aura résolu toutes les dépendances. Vous pouvez directement exécuter le projet sur le serveur et vous verrez un Button avec Click Me dans l’écran du navigateur. Veuillez noter que Vaadin7 est compatible avec Java 6 et plus récent.

[1] : https://vaadin.com/docs/-/part/framework/getting-started/getting-started-first-project.html

Plugin Vaadin pour Netbeans

Créer un projet avec l’IDE NetBeans

Dans ce qui suit, nous vous guiderons à travers la création d’un projet Vaadin dans NetBeans et montrerons comment l’exécuter.

L’installation de NetBeans et du plug-in Vaadin est traitée dans Installation de l’IDE et du plug-in NetBeans.

Sans le plugin, vous pouvez plus facilement créer un projet Vaadin en tant que projet Maven en utilisant un archétype Vaadin. Vous pouvez également créer un projet Vaadin en tant que projet d’application Web standard, mais cela nécessite de nombreuses étapes manuelles pour installer toutes les bibliothèques Vaadin, créer la classe d’interface utilisateur, configurer le servlet, créer un thème, etc.

Création d’un projet

  1. Sélectionnez Fichier ▸ Nouveau projet…​ dans le menu principal ou appuyez sur Ctrl+Shift+N.

  2. Dans la fenêtre Nouveau projet qui s’ouvre, sélectionnez le Vaadin category and one of the Vaadin archetypes from the right. [![entrez la description de l’image ici][1]][1]

    The archetypes are described in more detail in Overview of Maven Archetypes.

  3. À l’étape Nom et emplacement, saisissez les paramètres du projet. [![entrez la description de l’image ici][2]][2]

    Project Name

    A project name. The name must be a valid identifier that may only contains alphanumerics, minus, and underscore. It is appended to the group ID to obtain the Java package name for the sources.

    Project Location

    Path to the folder where the project is to be created.

    Group Id

    A Maven group ID for your project. It is normally your organization domain name in reverse order, such as com.example. The group ID is also used as a prefix for the Java source package, so it should be Java-compatible package name.

    Version

    Initial version of your application. The number must obey the Maven version numbering format.

    Package

    The Java package name to put sources in.

    Additional Creation Properties

    The properties control various names. They are specific to the archetype you chose.

    Click Finish.

    Creating the project can take a while as Maven loads all the needed dependencies.

Explorer le projet

L’assistant de projet a fait tout le travail pour vous : un squelette de classe d’interface utilisateur a été écrit dans le répertoire src. La hiérarchie des projets affichée dans l’Explorateur de projets est présentée dans [Un nouveau projet Vaadin dans NetBeans][3]. [![entrez la description de l’image ici][4]][4] Figure 1. Un nouveau projet Vaadin dans NetBeans

mon thème

Le thème de l’interface utilisateur. Voir Thèmes pour plus d’informations sur les thèmes.

MonUI.java

La classe UI, qui est le point d’entrée principal de votre application. Voir Applications côté serveur pour plus d’informations sur la structure de base des applications Vaadin.

Les bibliothèques Vaadin et autres dépendances sont gérées par Maven. Notez que les bibliothèques ne sont pas stockées dans le dossier du projet, même si elles sont répertoriées dans le dossier virtuel Java Resources ▸ Libraries ▸ Maven Dependencies. Exécution de l’application

Une fois créé, vous pouvez l’exécuter sur un serveur comme suit.

  1. Dans l’onglet Projets, sélectionnez le projet et cliquez sur Exécuter le projet button in the tool bar (or press F6).

  2. Dans la fenêtre Sélectionner un serveur de déploiement, sélectionnez un serveur dans la liste Serveur. Il doit afficher GlassFish ou Apache Tomcat ou both, depending on what you chose in NetBeans installation.

    [![netbeans server][5]][5]

    Also, select Remember Permanently if you want to use the same server also in future while developing applications.

    Click OK.

L’ensemble de widgets sera compilé à ce stade, ce qui peut prendre un certain temps.

Si tout se passe bien, NetBeans démarre le serveur sur le port 8080 et, selon la configuration de votre système, lance le navigateur par défaut pour afficher l’application Web. Sinon, vous pouvez l’ouvrir manuellement, par exemple à l’adresse http://localhost:8080/myproject. Le nom du projet est utilisé par défaut comme chemin de contexte de l’application.

Désormais, lorsque vous modifiez la classe d’interface utilisateur dans l’éditeur de source et que vous l’enregistrez, NetBeans redéploie automatiquement l’application. Après avoir terminé après quelques secondes, vous pouvez recharger l’application dans le navigateur.

[1] : http://i.stack.imgur.com/BrCdE.png [2] : http://i.stack.imgur.com/j1aSA.png [3] : https://vaadin.com/docs/-/part/framework/getting-started/getting-started-netbeans.html#figure.getting-started.netbeans.exploring [4] : http://i.stack.imgur.com/fsN19.png [5] : http://i.stack.imgur.com/R63U4.png

Premier programme - “Hello World”

Copiez collez ce code et lancez votre programme :

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

Une fois le lancement réussi, veuillez accéder à [localhost:8080/yourApplicationName][1] ou http://localhost:8080/ pour voir que votre application est opérationnelle.

[1] : http://localhost:8080/votreNomApplication [2] : http://localhost:8080/

Installation ou configuration

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

Utiliser des modules complémentaires avec Vaadin →