Presentación introductoria al Vaadin 8 en nuestra empresa. BBR Spa, Santiago de Chile.

1. BBRVaadin
Introducción alVaadin 8
Estructura de un proyecto

2. • Introducción
• IDE y Configuración
• Arquitectura
• Server-Side
• Temas (Themes)
• Client-Side
Introducción al Framework

3. Introducción
• Framework de Java para el desarrollo de aplicaciones web.
• Soporta dos modelos de desarrollo (server-side y client-side)
• Vaadin se ocupa de la gestión de la UI en el navegador y de la comunicación
entre el navegador y el servidor a través de AJAX
• Compatible con todos los navegadores. No necesita un plugin adicional.

4. IDE y Configuración
• Eclipse Neon
• Vaadin Plugin

5. IDE y Configuración
• CompilarTheme
• CompilarWidgetset
• Maven
• JDK 8
• WildFly 10

6. • Client-Side
• Motor del lado del cliente.
• Widgets
• Server-Side
• Servlet (com.vaadin.server.VaadinServlet)
• Interfaz Usuario (com.vaadin.ui.UI)
• Componentes
• Temas (Separa la apariencia de la aplicación)
• Eventos
• Push
Arquitectura

7. Server-Side
•Vaadin Servlet
•UI
•Componentes
•Eventos
•Temas

8. Vaadin Servlet
• Una aplicación del lado de servidor se ejecuta como un Servlet de Java en un contenedor de
servlets.
• com.vaadin.server.VaadinServlet
• Se asocia una UI y se mapea una URL.

9. UI (com.vaadin.ui.UI)
• Una aplicación debe tener al menos una UI.
• Se debe implementar el método init()
• Se le asigna el contenido de la UI a través del método setContent()
• Se define elTema.
• Se puede acceder a la UI a través del método estático UI.getCurrent()

10. UI (com.vaadin.ui.UI)
• Vaadin se ejecuta sobre un solo hilo de la aplicación. (Thread)
• No se puede acceder a las propiedades estáticas de la UI, Page, Session… desde otro hilo.
• Problemas para actualizar la UI mientras se están ejecutando operaciones que requieren de
tiempo y recursos.
1. Se solicita una operación desde el cliente (botón, menú,combo…).
2. Se ejecuta el código Java correspondiente en el servidor.
3. Si hay cambios en la UI se establece una marca que define que esta debe ser actualizada.
4. Se actualiza la UI en el cliente.
• Flujo de Ejecución

11. Componentes
• Addons
• Vaadin Directory
• No se necesita
implementar el
componente
• Composición
• CustomComponent
• Varios controles
existentes
• La implementación
es del lado del
servidor.
• Herencia
• Agregamos o
modificamos
comportamiento
del componente

12. Eventos y Listeners
• Vaadin ofrece un modelo conducido por eventos.
• Patrón de diseño – Observer
• Manejar la interacción del usuario en la interfaz.
• Los componentes definen su propia clase de eventos y su correspondiente listener.

13. Eventos y Listeners (Ejemplo)
• public void addBbrEventListener(BbrEventListener listener)
• public void removeBbrEventListener(BbrEventListener listener)
• public void dispatchBbrEvent(BbrEvent event)
public interface BbrEventListener extends Serializable
{
public void bbrEvent_handler(BbrEvent event);
}

14. Temas
• Separar la apariencia de la lógica en la interfaz de usuario.
• Sass, CSS, Imágenes, recursos.
• Los temas van dentro de src/main/webapp/VAADIN/themes
• Es necesario compilar el tema después de cada modificación.
• Para utilizar el tema es necesario utilizar la anotación @Theme en la UI.
• Los recursos del tema son accesibles mediante la claseThemeResource.

15. Client - Side
• El código se ejecuta en el navegador (JavaScript)
• Se codifica en Java y se compila con elVaadin Client Compiler
• Puedes desarrollar un componente que tenga una contraparte en el
servidor.
• El Framework del cliente está basado en GWT.
• El motor del cliente está basado en un conjunto de widgets.

16. Client - Side

17. Ejemplo

19. BbrHSeparator y BbrVSeparator

20. Proyectos y Paquetes en el Portal