vaadinIniziare con vaadin


Osservazioni

Vaadin è un linguaggio di scripting lato server, scritto in Java, che genererà la maggior parte del codice lato client necessario per un'applicazione web. Utilizza Google Web Toolkit per generare gli oggetti lato client e può essere esteso creando estendendo Google Web Toolkit.

Versioni

Versione Data di rilascio
6.8.17 2016/03/21
7.6.8 2016/07/13

Crea un progetto Vaadin in Eclipse

Il plug-in Vaadin per eclipse fornisce un modo rapido per creare il progetto vaadin con il manager delle dipendenze di Apache Ivy. La documentazione di Vaadin spiega come creare un progetto vaadin con l'aiuto del plugin Eclipse.

Per installare il plug-in basta andare su eclipse marketplace e cercare vaadin . La versione corrente del plug-in è 3.0.0 .

Dopo aver installato il plug-in, avrai le seguenti funzioni rapide,

  • Crea un progetto Vaadin6 o Vaadin 7 ( Il gestore delle dipendenze predefinito è Ivy )
  • Compilare Widgetsets ( per compilare i widget lato client )
  • Compilare il tema ( per compilare il tema per creare il CSS finale )
  • Crea widget ( per costruire il tuo widget personalizzato )
  • Crea un tema Vaadin

Quindi, dopo aver configurato il plug-in, basta creare un nuovo progetto Vaadin con una configurazione minima. È inoltre possibile specificare la versione di vaadin durante la creazione del progetto.

  • File > New > Vaadin7 Project
  • Specifica la versione di vaadin da utilizzare nel progetto
  • Specifica Target Runtime che desideri utilizzare
  • Finire!

Ci vorrà del tempo per scaricare tutti i barattoli necessari per vaadin, una volta che Ivy risolve tutte le dipendenze. Puoi eseguire direttamente il progetto sul server e vedrai un Button con Click Me nella schermata del browser. Si noti che Vaadin7 è compatibile con Java 6 e versioni successive.

Crea un progetto Vaadin con Maven

Con Maven puoi creare un progetto vaadin-archetype-application archetipo di vaadin-archetype-application . Puoi anche aggiungere quell'archetipo in IDE per creare un progetto maven con 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 
 

Una volta eseguito il comando sopra, avrai la seguente struttura del progetto.

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
 

Il progetto maven predefinito creato può essere importato direttamente in IDE. Per eseguire l'applicazione Maven, dobbiamo compilare i set di widget predefiniti di vaadin.

Nota che possiamo usare direttamente il seguente comando di maven per impacchettare l'applicazione di vaadin e che compilerà i widgetset per impostazione predefinita. È possibile utilizzare il plugin maven jetty per distribuire l'applicazione vaadin su Jetty.

cd path/to/DemoVaadinProject
mvn package jetty:run
 

Questo distribuirà l'applicazione predefinita e inizierà a eseguirla sulla porta predefinita 8080 . È possibile accedere all'applicazione distribuita all'indirizzo http: // localhost: 8080 .

È pronto per essere eseguito senza modifiche. Per impostazione predefinita, l'archetipo Vaadin aggiunge il tema predefinito, widgetset xml e classe MyUI , che è un punto di ingresso per l'applicazione vaadin.

Nel browser vedremo il seguente modulo.

inserisci la descrizione dell'immagine qui

Primo programma - "Hello World"

Copia incolla questo codice e avvia il tuo 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);
     }
 }
 

Dopo aver effettuato il successo, passare a localhost: 8080 / yourApplicationName o http: // localhost: 8080 / per vedere se la tua app è attiva e funzionante.

Installazione o configurazione

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

Vaadin Plugin per Netbeans

Creazione di un progetto con l'IDE NetBeans

Di seguito, ti guideremo attraverso la creazione di un progetto Vaadin in NetBeans e mostreremo come eseguirlo.

L'installazione di NetBeans e del plug-in Vaadin è descritta in Installazione dell'IDE e del plug-in NetBeans.

Senza il plugin, puoi facilmente creare un progetto Vaadin come progetto Maven usando un archetipo di Vaadin. È anche possibile creare un progetto Vaadin come un normale progetto di applicazione Web, ma richiede molti passaggi manuali per installare tutte le librerie Vaadin, creare la classe UI, configurare il servlet, creare il tema e così via.

Creare un progetto

  1. Selezionare File ▸ Nuovo progetto ... dal menu principale oppure premere Ctrl + Maiusc + N.

  2. Nella finestra Nuovo progetto che si apre, seleziona la categoria Vaadin e uno degli archetipi Vaadin dalla destra. inserisci la descrizione dell'immagine qui

    Gli archetipi sono descritti in modo più dettagliato in Panoramica degli archetipi di Maven.

  3. Nel passaggio Nome e Posizione , inserire i parametri del progetto. inserisci la descrizione dell'immagine qui

    Nome del progetto

    Un nome di progetto. Il nome deve essere un identificatore valido che può contenere solo caratteri alfanumerici, meno e caratteri di sottolineatura. Viene aggiunto all'ID di gruppo per ottenere il nome del pacchetto Java per le origini.

    Sede del progetto

    Percorso della cartella in cui deve essere creato il progetto.

    ID gruppo

    Un ID di gruppo Maven per il tuo progetto. Normalmente è il nome del dominio dell'organizzazione in ordine inverso, come ad esempio com.example. L'ID gruppo viene anche usato come prefisso per il pacchetto sorgente Java, quindi dovrebbe essere il nome del pacchetto compatibile con Java.

    Versione

    Versione iniziale della tua applicazione. Il numero deve rispettare il formato di numerazione delle versioni di Maven.

    Pacchetto

    Il nome del pacchetto Java per inserire le fonti.

    Ulteriori proprietà di creazione

    Le proprietà controllano vari nomi. Sono specifici per l'archetipo che hai scelto.

    Fai clic su Fine.

    La creazione del progetto può richiedere del tempo poiché Maven carica tutte le dipendenze necessarie.

Esplorando il progetto

Il wizard del progetto ha fatto tutto il lavoro per te: uno scheletro della classe UI è stato scritto nella directory src. La gerarchia di progetto mostrata in Esplora progetti viene mostrata in Un nuovo progetto Vaadin in NetBeans . inserisci la descrizione dell'immagine qui Figura 1. Un nuovo progetto Vaadin in NetBeans

MyTheme

Il tema dell'interfaccia utente. Vedi Temi per informazioni sui temi.

MyUI.java

La classe UI, che è il punto di accesso principale della tua applicazione. Vedi Applicazioni lato server per informazioni sulla struttura di base delle applicazioni Vaadin.

Le librerie di Vaadin e altre dipendenze sono gestite da Maven. Si noti che le librerie non sono archiviate nella cartella del progetto, anche se sono elencate nelle risorse Java ▸ Librerie ▸ Cartella virtuale Dipendenze Maven. Esecuzione dell'applicazione

Una volta creato, è possibile eseguirlo su un server come segue.

  1. Nella scheda Progetti, selezionare il progetto e fare clic sul pulsante Esegui progetto nella barra degli strumenti (o premere F6).

  2. Nella finestra Seleziona server di distribuzione, selezionare un server dall'elenco Server. Dovrebbe mostrare GlassFish o Apache Tomcat o entrambi, a seconda di cosa hai scelto nell'installazione di NetBeans.

    server netbeans

    Inoltre, selezionare Ricorda permanentemente se si desidera utilizzare lo stesso server anche in futuro durante lo sviluppo di applicazioni.

    Clicca OK.

Il set di widget verrà compilato a questo punto, che potrebbe richiedere un po 'di tempo.

Se tutto va bene, NetBeans avvia il server nella porta 8080 e, in base alla configurazione del sistema, avvia il browser predefinito per visualizzare l'applicazione web. In caso contrario, è possibile aprirlo manualmente, ad esempio, all'indirizzo http: // localhost: 8080 / myproject . Il nome del progetto viene utilizzato per impostazione predefinita come percorso di contesto dell'applicazione.

Ora quando modifichi la classe UI nell'editor di origine e la salvi, NetBeans ridistribuirà automaticamente l'applicazione. Dopo che è terminato dopo alcuni secondi, puoi ricaricare l'applicazione nel browser.