Empezando con vaadin

Crear proyecto Vaadin con Maven

Con Maven puede crear un proyecto Vaadin con el arquetipo vaadin-archetype-application. También puede agregar ese arquetipo en IDE para crear un proyecto 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 vez que ejecute el comando anterior, tendrá la siguiente estructura del proyecto.

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

El proyecto maven predeterminado creado se puede importar directamente en IDE. Para ejecutar la aplicación maven, debemos compilar los conjuntos de widgets predeterminados de vaadin.

Tenga en cuenta que podemos usar directamente el siguiente comando maven para empaquetar la aplicación vaadin y compilará los conjuntos de widgets de forma predeterminada. Puede usar el complemento maven jetty para implementar la aplicación vaadin en Jetty.

cd path/to/DemoVaadinProject
mvn package jetty:run

Esto implementará la aplicación predeterminada y comenzará a ejecutarla en el puerto predeterminado 8080. Puede acceder a la aplicación implementada en http://localhost:8080.

Está listo para funcionar sin ningún cambio. De forma predeterminada, el arquetipo de Vaadin agrega un tema predeterminado, widgetset xml y clase MyUI, que es un punto de entrada para la aplicación de Vaadin.

En el navegador veremos el siguiente formulario.

ingrese la descripción de la imagen aquí

Crear Proyecto Vaadin en Eclipse

El complemento de Vaadin para Eclipse proporciona una forma rápida de crear un proyecto de Vaadin con el administrador de dependencias de Apache Ivy. La documentación de Vaadin explica cómo crear un proyecto de Vaadin con la ayuda del complemento Eclipse.

Para instalar el complemento, simplemente vaya a Eclipse Marketplace y busque vaadin. La versión actual del complemento es 3.0.0.

Después de instalar el complemento, tendrá las siguientes funciones rápidas,

  • Cree el proyecto Vaadin6 o Vaadin 7 (El administrador de dependencia predeterminado es Ivy)
  • Compilar Widgetsets (Para compilar widgets del lado del cliente)
  • Compilar Tema (Para compilar Tema para construir CSS final)
  • Crear Widget (Para construir tu widget personalizado)
  • Crear tema de Vaadin

Entonces, después de configurar el complemento, simplemente cree un nuevo proyecto de Vaadin con una configuración mínima. También puede especificar la versión de vaadin al crear el proyecto.

  • Archivo > Nuevo > Proyecto Vaadin7
  • Especificar la versión de vaadin que se utilizará en el proyecto
  • Especifique Target Runtime que desea usar
  • ¡Finalizar!

Llevará tiempo descargar todos los archivos jar necesarios para vaadin, una vez que Ivy resuelva todas las dependencias. Puede ejecutar directamente el proyecto en el servidor y verá un Botón con Click Me en la pantalla del navegador. Tenga en cuenta que Vaadin7 es compatible con Java 6 y posteriores.

Complemento de Vaadin para Netbeans

Creación de un proyecto con el IDE de NetBeans

A continuación, lo guiaremos a través de la creación de un proyecto de Vaadin en NetBeans y le mostraremos cómo ejecutarlo.

La instalación de NetBeans y el complemento de Vaadin se trata en Instalación del IDE y el complemento de NetBeans.

Sin el complemento, puede crear fácilmente un proyecto de Vaadin como un proyecto de Maven utilizando un arquetipo de Vaadin. También puede crear un proyecto de Vaadin como un proyecto de aplicación web normal, pero requiere muchos pasos manuales para instalar todas las bibliotecas de Vaadin, crear la clase de interfaz de usuario, configurar el servlet, crear un tema, etc.

Creación de un proyecto

  1. Seleccione Archivo ▸ Nuevo Proyecto…​ del menú principal o presione Ctrl+Shift+N.

  2. En la ventana Nuevo proyecto que se abre, seleccione el Vaadin category and one of the Vaadin archetypes from the right. ingrese la descripción de la imagen aquí

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

  3. En el paso Nombre y ubicación, ingrese los parámetros del proyecto. ingrese la descripción de la imagen aquí

    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.

Explorando el proyecto

El asistente del proyecto ha hecho todo el trabajo por usted: se ha escrito un esqueleto de clase de interfaz de usuario en el directorio src. La jerarquía de proyectos que se muestra en el Explorador de proyectos se muestra en Un nuevo proyecto de Vaadin en NetBeans. ingrese la descripción de la imagen aquí Figura 1. Un nuevo proyecto de Vaadin en NetBeans

mi tema

El tema de la interfaz de usuario. Consulte Temas para obtener información acerca de los temas.

MiUI.java

La clase UI, que es el principal punto de entrada de su aplicación. Consulte Aplicaciones del lado del servidor para obtener información sobre la estructura básica de las aplicaciones de Vaadin.

Maven administra las bibliotecas de Vaadin y otras dependencias. Tenga en cuenta que las bibliotecas no se almacenan en la carpeta del proyecto, aunque se enumeran en la carpeta virtual Recursos de Java ▸ Bibliotecas ▸ Dependencias de Maven. Ejecutar la aplicación

Una vez creado, puede ejecutarlo en un servidor de la siguiente manera.

  1. En la pestaña Proyectos, seleccione el proyecto y haga clic en Ejecutar proyecto button in the tool bar (or press F6).

  2. En la ventana Seleccionar servidor de implementación, seleccione un servidor de la lista Servidor. Debería mostrar GlassFish o Apache Tomcat o both, depending on what you chose in NetBeans installation.

    netbeans server

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

    Click OK.

El conjunto de widgets se compilará en este punto, lo que puede llevar un tiempo.

Si todo va bien, NetBeans inicia el servidor en el puerto 8080 y, según la configuración de su sistema, inicia el navegador predeterminado para mostrar la aplicación web. Si no, puede abrirlo manualmente, por ejemplo, en http://localhost:8080/myproject. El nombre del proyecto se utiliza de forma predeterminada como la ruta de contexto de la aplicación.

Ahora, cuando edite la clase de interfaz de usuario en el editor de código fuente y la guarde, NetBeans volverá a implementar automáticamente la aplicación. Después de que haya terminado después de unos segundos, puede volver a cargar la aplicación en el navegador.

Primer programa - “Hola Mundo”

Copie y pegue este código e inicie su programa:

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

Después de que el lanzamiento se haya realizado correctamente, vaya a localhost:8080/yourApplicationName o http://localhost:8080/ para ver si su aplicación está funcionando.

Instalación o Configuración

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