Vaadin framework for Java web application

1. VAADIN 7

2. ARCHITETTURA
• Framework per sviluppare applicazioni web
• Supporta due modelli: server-side e client-side.
• Server-side web application consiste in un server-side
framework e una client-side engine nel browser.
• L’interfaccia utente comprende una Java servlet server-
side e Java script come client-side engine
• Quindi si possono sviluppare applicazioniVaadin in ogni
ambiente con una Java SDK e un Java Servlet container
Questa e tutte le immagini successive sono tratte da “Book of Vaadin 7”

3. APPLICAZIONEVAADIN
• Un’applicazione ha una UI (che è parte di una pagina web, solitamente le nostre applicazioni hanno in pagina una sola UI).
• Ogni UI è associata ad una Page che rappresenta sia la pagina Web che la finestra del browser web. Solitamente una UI
consente la navigazione tra varie View che mostrano contenuti diversi.
• Interfaccia utente: consiste nei componenti aggiunti alla UI. Ogni component ha la sua controparte client-side, una
widget, visualizzata dal browser e con cui l’utente interagisce.
• L’engine client side diVaadin comunica le interazioni utente al server e ridisegna le modifiche ricevute dal server.
• La servletVaadin riceve le richieste dai diversi client, e determina a quale sessione utente appartengono e delega loro le
risposte.
• Temi: è possibile modifica l’aspetto dell’applicazioneVaadin andando ad agire sui temi. Sono scritti in SASS e compilati in
CSS

4. COMPONENT, EVENTI E LISTENER
• Vaadin segue il paradigma di programmazione ad eventi. Questo
significa che l’interazione utente è gestita attraverso listener e
gestione degli eventi generati.
• L’interfaccia utente viene prodotta partendo dalla UI e aggiungendo
al suo interno i vari componenti in maniera gerarchica. (Un pannello
che contiene un Layout, che contiene tre etichette e un
comboBox…)

5. COMPONENTI
https://demo.vaadin.com/sampler/#ui/
data-input/text-input/text-field

6. BINDING
• Oltre all’interfaccia utente,Vaadin fornisce un modo per collegare in
binding i dati presentati dei componenti a dei data source. In modo da
garantire che se modifico i dati, la modifica viene visualizzata dai
componenti e viceversa.
• Questo viene fatto attraverso le interfacce Property e Item.
• Le classi che implementano Field consentono di assegnare una
propertyDatasource.

7. CONTAINER
• Alcuni componenti mostrano collezioni di dati (tabelle,
tree, griglie) oppure consentono di scegliere un item in
una lista di oggetti (comboBox)
• Una modalità per assegnare una collezioni di oggetti a
questi componenti è tramite un Container
• I Container sono oggetti in grado di gestire collezioni di
dati e di informare i componenti sul come visualizzarli.
• Ci sono varie sottoclassi di Container: Filterable,
Sortable, Hierarchical…

8. TABLEVS GRID
• Il nostro uso delle tabelle è parecchio avanzato (si parte da
AbstractTableLayout e EditableTable)
• Attenzione: inVaadin 7 la table ha limitazioni, ma la Grid non è ancora
del tutto matura, anche se è molto più veloce in visualizzazione.
• Quindi alcune cose sono gestite tramite tabella, altre tramite Grid.
• Table inVaadin 8 andrà a sparire.

9. ALTRO
FieldGroup
• Consente di collegare in binding a varie proprietà di un item, un insieme di field.
• Ne gestisce la validazione e il commit
• è stato introdotto conVaadin7, prima esisteva l’oggetto Form
• Abbiamo creato l’oggetto PanelForm, che contiene un FieldGroupVaadin e si occupa di gestire tutto in modo uniforme anche
dopo il passaggio daVaadin6.
Declarative design (usato nei layout dei filtri dei nostri report, ad esempio PlannerDeclarativeFilter)
• Usa un file html
• Tutti i campi dell’oggetto devono avere un corrispettivo nell’html

10. ADDON & WIDGETSET
• Gli addon sono componenti, o temi, o tool aggiuntivi che possono essere
inclusi nelle applicazioniVaadin. La maggior parte include un widget set
che deve essere compilato all’interno del widget set di progetto.
• Il nostro progetto base-widgets7 include tutti gli Addon che usiamo.
Li si vede elencati nel suo pom. Quando compiliamo questo progetto, gli
eventuali widget degli addon vengono compilati automaticamente nel
nostro widgetset,

11. SPRINGVAADIN
• Nei nostri progetti usiamo Spring Boot eVaadin mette a disposizione SpringVaadin per gestire tramite Spring gli
oggetti principali delle nostre applicazioni.
• Le UI vanno annotate @SpringUI in modo che quando un applicazione viene aperta nel browser, viene creata
un’istanza e iniettata nel contesto Spring. Accetta anche il parametro opzionale del path. Questo ci consente anche
di iniettare ulteriori oggetti al suo interno tramite @Autowired.
• LeView vanno annotate @SpringView in modo da essere trovate.
• Se vogliamo che un oggetto iniettato sia sempre lo stesso all’interno della stessa UI, la sua classe va annotata
@UIScope.
• Viceversa, se vogliamo ricevere una nuova istanza di una classe ogni volta che un bean è iniettato, esso va annotato
@Scope(“prototype”)

12. VAADIN 8
Vaadin 8 ha introdotto parecchi cambiamenti sostanziali. Di fatto hanno cercato di utilizzare meglio tutti vari
aspetti del linguaggio Java (Generic e approccio funzionale dove utile).
Vale la pena ricordare che:
• Item e Property sono stati eliminati completamente
• Container è stato eliminato, sostituito con DataProvider
• FieldGroup è stato sostituito da Binder
• Field è stato eliminato, esiste HasValue.
• Table non è stato ancora eliminato, ma manca poco.

13. READING LIST
• Book ofVaadin https://vaadin.com/docs/v8/index.html#book-of-
vaadin
• Vaadin Demo eVaadin Sampler https://demo.vaadin.com/sampler/
• Forum https://vaadin.com/forum
• Addon directory https://vaadin.com/directory