Book of-vaadin-br Book of-vaadin-br

1. Livro de Vaadin
Vaadin 7ª Edição - 3ª Revisão

2. Livro de Vaadin:Vaadin 7ª Edição - 3ª Revisão
Vaadin Ltd
Marko Grönroos
Vaadin 7ª Edição - 3ª Revisão Edição
Framework Vaadin 7.2.0
Published: 2014-11-03
Copyright © 2000-2014 Vaadin Ltd
Resumo
Vaadin é um framework de desenvolvimento de aplicações web AJAX que permite aos desenvolvedores
criar interfaces de usuário de alta qualidade com Java, tanto no lado servidor quanto no cliente. Ele fornece
um conjunto de bibliotecas de componentes de interface de usuário prontas para uso, e um framework para
criar seus próprios componentes. O foco é a facilidade de uso, reutilização, extensibilidade, e atender às
exigências de aplicações de grandes empresas.
Todos os direitos reservados. Esta obra está licenciada sob a Creative Commons Licença CC-BY-ND Versão 2.0.

3. Índice
Prefácio .......................................................................................................................... xv
Part I. Introdução ............................................................................................................. 21
Chapter 1. Introdução ............................................................................................ 23
1.1. Visão Geral .............................................................................................. 23
1.2. Exemplo de Aplicação Passo a Passo ........................................................ 25
1.3. Suporte à IDE Eclipse ............................................................................... 26
1.4. Metas e Filosofia ...................................................................................... 27
1.5. Conhecimento .......................................................................................... 27
Chapter 2. Começando com Vaadin ....................................................................... 31
2.1. Visão Geral .............................................................................................. 31
2.2. Configurando o Ambiente de Desenvolvimento ........................................... 32
2.2.1. Instalando o SDK Java ................................................................... 33
2.2.2. Instalando o IDE Eclipse ................................................................. 34
2.2.3. Instalando o Apache Tomcat ........................................................... 35
2.2.4. Firefox e Firebug ............................................................................ 35
2.3. Visão Geral das Bibliotecas Vaadin ............................................................ 36
2.4. Instalando o Plugin Vaadin para Eclipse ..................................................... 37
2.4.1. Instalando o Plugin IvyDE ............................................................... 38
2.4.2. Instalando o Plugin Vaadin .............................................................. 39
2.4.3. Atualizando os Plugins ................................................................... 40
2.4.4. Atualizando as bibliotecas Vaadin .................................................... 41
2.5. Criando e Executando um Projeto com Eclipse ........................................... 41
2.5.1. Criando o Projeto ........................................................................... 41
2.5.2. Explorando o Projeto ...................................................................... 45
2.5.3. Dicas de Codificação para Eclipse .................................................. 47
2.5.4. Configurando e Iniciando o Servidor Web ........................................ 48
2.5.5. Executando e Depurando ............................................................... 49
2.6. Usando Vaadin com Maven ....................................................................... 50
2.6.1. Trabalhando a partir de Linha de Comando ...................................... 50
2.6.2. Compilando e Executando a Aplicação ............................................ 51
2.6.3. Utilizando Add-ons e Widget Sets customizados .............................. 52
2.7. Criando um projeto no IDE NetBeans ......................................................... 52
2.7.1. Projeto Maven a partir de um Archetype Vaadin ............................... 52
2.8. Criando um projeto com IntelliJ IDEA ......................................................... 53
2.8.1. Configurando um Servidor de Aplicações ........................................ 53
2.8.2. Criando um Projeto de Aplicação Vaadin Web .................................. 54
2.8.3. Criando um Projeto Maven ............................................................. 58
2.9. Pacote de instalação Vaadin ...................................................................... 62
2.9.1. Conteúdo do Pacote ....................................................................... 62
2.9.2. Instalação de Bibliotecas ................................................................ 63
2.10. Usando Vaadin com Scala ....................................................................... 63
Chapter 3. Arquitetura ........................................................................................... 65
3.1. Visão Geral .............................................................................................. 65
3.2. Conhecimento Tecnológico ........................................................................ 68
3.2.1. HTML e JavaScript ......................................................................... 68
3.2.2. Customizando com CSS e Sass ..................................................... 68
3.2.3. AJAX ............................................................................................. 69
3.2.4. Google Web Toolkit ........................................................................ 69
3.2.5. Servlets Java ................................................................................. 70
Book of Vaadin i

4. 3.3. Engine de Lado Cliente ............................................................................. 70
3.4. Eventos e Ouvintes ................................................................................... 71
Part II. Server-Side Framework ........................................................................................ 75
Chapter 4. Escrevendo uma Aplicação Web de Lado Servidor .............................. 77
4.1. Visão Geral .............................................................................................. 77
4.2. Construindo a UI ....................................................................................... 80
4.2.1. Arquitetura da Aplicação ................................................................. 81
4.2.2. Compondo Componentes ............................................................... 82
4.2.3. Navegação de View ........................................................................ 83
4.2.4. Acessando UI, Page, Session, e Service ......................................... 83
4.3. Manipulando Eventos com Ouvintes .......................................................... 84
4.3.1. Implementando um Ouvinte em uma Classe Regular ....................... 84
4.3.2. Diferenciando Fontes de Eventos .................................................... 84
4.3.3. A maneira Mais Fácil: Usando Classes Anônimas ........................... 85
4.4. Imagens e Outros Recursos ...................................................................... 86
4.4.1. Interfaces e Classes de Recursos ................................................... 86
4.4.2. Recursos de Arquivos .................................................................... 86
4.4.3. Recursos de Carregamento de Classe ............................................ 87
4.4.4. Recursos de Tema ......................................................................... 87
4.4.5. Recursos de Stream ...................................................................... 88
4.5. Manipulando Erros .................................................................................... 89
4.5.1. Indicador e Mensagem de Erro ....................................................... 89
4.5.2. Customizando Mensagens do Sistema ............................................ 90
4.5.3. Manipulando Exceções Não Tratadas ............................................. 91
4.6. Notificações .............................................................................................. 92
4.6.1. Tipos de Notificação ....................................................................... 93
4.6.2. Customizando Notificações ............................................................ 94
4.6.3. Customizando com CSS ................................................................. 94
4.7. Ciclo de Vida da Aplicação ........................................................................ 95
4.7.1. Implantação ................................................................................... 95
4.7.2. Servlet Vaadin, Portlet, e Serviço .................................................... 96
4.7.3. Sessão de Usuário ......................................................................... 97
4.7.4. Carregando uma UI ........................................................................ 98
4.7.5. Expiração de UI ............................................................................. 99
4.7.6. Expiração de Sessão ..................................................................... 99
4.7.7. Fechando uma Sessão ................................................................... 99
4.8. Implantando uma Aplicação ..................................................................... 100
4.8.1. Criando um WAR Implantável no Eclipse ....................................... 100
4.8.2. Conteúdo de Aplicações Web ....................................................... 100
4.8.3. Classe de Servlet Web ................................................................. 101
4.8.4. Usando um Descritor de Implantação web.xml ............................. 101
4.8.5. Mapeamento de Servlets com Padrões de URL ............................. 103
4.8.6. Outros Parâmetros de Configuração de Servlet .............................. 104
4.8.7. Configuração de Implantação ........................................................ 106
Chapter 5. User Interface Components ............................................................... 109
5.1. Overview ................................................................................................ 110
5.2. Interfaces and Abstractions ...................................................................... 111
5.2.1. Component Interface ................................................................... 112
5.2.2. AbstractComponent ................................................................... 113
5.3. Common Component Features ................................................................ 113
5.3.1. Caption ........................................................................................ 113
5.3.2. Description and Tooltips ................................................................ 114
ii
Livro de Vaadin

5. 5.3.3. Enabled ....................................................................................... 115
5.3.4. Icon ............................................................................................. 116
5.3.5. Locale ......................................................................................... 117
5.3.6. Read-Only ................................................................................... 120
5.3.7. Style Name .................................................................................. 121
5.3.8. Visible ......................................................................................... 121
5.3.9. Sizing Components ...................................................................... 122
5.3.10. Managing Input Focus ................................................................ 123
5.4. Field Components ................................................................................... 124
5.4.1. Field Interface ............................................................................. 124
5.4.2. Data Binding and Conversions ...................................................... 126
5.4.3. Handling Field Value Changes ...................................................... 127
5.4.4. Field Buffering .............................................................................. 127
5.4.5. Field Validation ............................................................................. 127
5.5. Component Extensions ........................................................................... 130
5.6. Label ..................................................................................................... 130
5.6.1. Content Mode .............................................................................. 131
5.6.2. Spacing with a Label .................................................................... 132
5.6.3. CSS Style Rules .......................................................................... 133
5.7. Link ....................................................................................................... 133
5.8. TextField ............................................................................................... 135
5.8.1. Data Binding ................................................................................ 136
5.8.2. String Length ............................................................................... 137
5.8.3. Handling Null Values .................................................................... 137
5.8.4. Text Change Events ...................................................................... 138
5.8.5. CSS Style Rules .......................................................................... 139
5.9. TextArea ................................................................................................ 140
5.10. PasswordField ..................................................................................... 141
5.11. RichTextArea ....................................................................................... 141
5.12. Date and Time Input with DateField ....................................................... 143
5.12.1. PopupDateField ........................................................................ 144
5.12.2. InlineDateField ......................................................................... 147
5.12.3. Time Resolution ......................................................................... 148
5.12.4. DateField Locale ........................................................................ 148
5.13. Button ................................................................................................. 148
5.14. CheckBox ............................................................................................ 149
5.15. Selection Components .......................................................................... 150
5.15.1. Binding Selection Components to Data ........................................ 151
5.15.2. ComboBox ............................................................................... 154
5.15.3. ListSelect ................................................................................. 156
5.15.4. Native Selection Component NativeSelect .................................. 157
5.15.5. Radio Button and Check Box Groups with OptionGroup .............. 158
5.15.6. Twin Column Selection with TwinColSelect ................................. 160
5.15.7. Allowing Adding New Items ......................................................... 161
5.15.8. Multiple Selection ....................................................................... 162
5.15.9. Other Common Features ............................................................ 163
5.16. Table .................................................................................................... 163
5.16.1. Selecting Items in a Table ........................................................... 165
5.16.2. Table Features ........................................................................... 166
5.16.3. Editing the Values in a Table ........................................................ 170
5.16.4. Column Headers and Footers ...................................................... 173
5.16.5. Generated Table Columns ........................................................... 175
5.16.6. Formatting Table Columns ........................................................... 178
5.16.7. CSS Style Rules ......................................................................... 179
iii
Livro de Vaadin

6. 5.17. Tree ..................................................................................................... 182
5.18. MenuBar .............................................................................................. 183
5.19. Embedded Resources ........................................................................... 186
5.19.1. Embedded Image ...................................................................... 187
5.19.2. Adobe Flash Graphics ................................................................ 188
5.19.3. BrowserFrame .......................................................................... 188
5.19.4. Generic Embedded Objects ....................................................... 188
5.20. Upload ................................................................................................. 189
5.21. ProgressBar ........................................................................................ 191
5.22. Slider ................................................................................................... 194
5.23. Calendar .............................................................................................. 196
5.23.1. Date Range and View Mode ........................................................ 197
5.23.2. Calendar Events ......................................................................... 197
5.23.3. Getting Events from a Container .................................................. 199
5.23.4. Implementing an Event Provider .................................................. 201
5.23.5. Styling a Calendar ...................................................................... 204
5.23.6. Visible Hours and Days ............................................................... 205
5.23.7. Drag and Drop ........................................................................... 205
5.23.8. Using the Context Menu .............................................................. 207
5.23.9. Localization and Formatting ........................................................ 207
5.23.10. Customizing the Calendar ......................................................... 208
5.23.11. Backward and Forward Navigation ............................................. 209
5.23.12. Date Click Handling .................................................................. 209
5.23.13. Handling Week Clicks ............................................................... 210
5.23.14. Handling Event Clicks ............................................................... 210
5.23.15. Event Dragging ........................................................................ 210
5.23.16. Handling Drag Selection ........................................................... 212
5.23.17. Resizing Events ........................................................................ 213
5.24. Component Composition with CustomComponent ................................. 213
5.25. Composite Fields with CustomField ...................................................... 214
Chapter 6. Managing Layout ................................................................................ 215
6.1. Overview ................................................................................................ 216
6.2. UI, Window, and Panel Content ................................................................ 218
6.3. VerticalLayout and HorizontalLayout ..................................................... 218
6.3.1. Spacing in Ordered Layouts .......................................................... 219
6.3.2. Sizing Contained Components ...................................................... 220
6.4. GridLayout ............................................................................................ 223
6.4.1. Sizing Grid Cells .......................................................................... 225
6.5. FormLayout ........................................................................................... 227
6.6. Panel ..................................................................................................... 229
6.6.1. Scrolling the Panel Content ........................................................... 229
6.7. Sub-Windows ......................................................................................... 231
6.7.1. Opening and Closing Sub-Windows .............................................. 231
6.7.2. Window Positioning ...................................................................... 233
6.7.3. Scrolling Sub-Window Content ...................................................... 233
6.7.4. Modal Sub-Windows ..................................................................... 233
6.8. HorizontalSplitPanel and VerticalSplitPanel .......................................... 234
6.9. TabSheet ............................................................................................... 236
6.9.1. Adding Tabs ................................................................................. 237
6.9.2. Tab Objects .................................................................................. 237
6.9.3. Tab Change Events ...................................................................... 238
6.9.4. Enabling and Handling Closing Tabs .............................................. 239
6.10. Accordion ............................................................................................ 240
iv
Livro de Vaadin

7. 6.11. AbsoluteLayout ................................................................................... 241
6.12. CssLayout ........................................................................................... 244
6.12.1. CSS Injection ............................................................................. 244
6.12.2. Browser Compatibility ................................................................. 245
6.13. Layout Formatting ................................................................................. 246
6.13.1. Layout Size ................................................................................ 246
6.13.2. Expanding Components .............................................................. 247
6.13.3. Layout Cell Alignment ................................................................. 248
6.13.4. Layout Cell Spacing .................................................................... 250
6.13.5. Layout Margins ........................................................................... 251
6.14. Custom Layouts .................................................................................... 251
Chapter 7. Visual User Interface Design with Eclipse .......................................... 255
7.1. Overview ................................................................................................ 255
7.2. Creating a New Composite ...................................................................... 257
7.3. Using The Visual Editor ........................................................................... 259
7.3.1. Adding New Components ............................................................. 259
7.3.2. Setting Component Properties ...................................................... 260
7.3.3. Editing an AbsoluteLayout .......................................................... 263
7.4. Structure of a Visually Editable Component .............................................. 264
7.4.1. Sub-Component References ......................................................... 265
7.4.2. Sub-Component Builders .............................................................. 265
7.4.3. The Constructor ........................................................................... 266
Chapter 8.Themes ............................................................................................... 267
8.1. Overview ................................................................................................ 267
8.2. Introduction to Cascading Style Sheets .................................................... 269
8.2.1. Applying CSS to HTML ................................................................. 269
8.2.2. Basic CSS Rules .......................................................................... 269
8.2.3. Matching by Element Class ........................................................... 270
8.2.4. Matching by Descendant Relationship ........................................... 272
8.2.5. Importance of Cascading .............................................................. 272
8.2.6. Style Class Hierarchy of a Vaadin UI .............................................. 273
8.2.7. Notes on Compatibility .................................................................. 276
8.3. Syntactically Awesome Stylesheets (Sass) ............................................... 276
8.3.1. Sass Overview ............................................................................. 277
8.3.2. Sass Basics with Vaadin ............................................................... 278
8.3.3. Compiling Sass Themes ............................................................... 278
8.4. Creating and Using Themes .................................................................... 281
8.4.1. Sass Themes ............................................................................... 281
8.4.2. Plain Old CSS Themes ................................................................. 283
8.4.3. Styling Standard Components ....................................................... 283
8.4.4. Built-in Themes ............................................................................ 283
8.4.5. Add-on Themes ........................................................................... 285
8.5. Creating a Theme in Eclipse .................................................................... 285
8.6. Valo Theme ............................................................................................ 286
8.6.1. Basic Use .................................................................................... 287
8.6.2. Common Settings ......................................................................... 287
8.6.3. Valo Fonts .................................................................................... 289
8.6.4. Component Styles ........................................................................ 290
8.6.5. Theme Optimization ..................................................................... 290
8.7. Custom Fonts ......................................................................................... 291
8.7.1. Loading Fonts .............................................................................. 291
8.7.2. Using Custom Fonts ..................................................................... 291
v
Livro de Vaadin

8. 8.8. Responsive Themes ................................................................................ 291
Chapter 9. Binding Components to Data ............................................................. 297
9.1. Overview ................................................................................................ 297
9.2. Properties .............................................................................................. 299
9.2.1. Property Viewers and Editors ........................................................ 300
9.2.2. ObjectProperty Implementation ................................................... 301
9.2.3. Converting Between Property Type and Representation .................. 301
9.2.4. Implementing the Property Interface ............................................. 304
9.3. Holding properties in Items ...................................................................... 305
9.3.1. The PropertysetItem Implementation ........................................... 305
9.3.2. Wrapping a Bean in a BeanItem ................................................... 306
9.4. Creating Forms by Binding Fields to Items ................................................ 308
9.4.1. Simple Binding ............................................................................. 308
9.4.2. Using a FieldFactory to Build and Bind Fields ........................... 308
9.4.3. Binding Member Fields ................................................................. 309
9.4.4. Buffering Forms ........................................................................... 310
9.4.5. Binding Fields to a Bean ............................................................... 311
9.4.6. Bean Validation ............................................................................ 311
9.5. Collecting Items in Containers .................................................................. 313
9.5.1. Basic Use of Containers ............................................................... 313
9.5.2. Container Subinterfaces ............................................................... 315
9.5.3. IndexedContainer ....................................................................... 315
9.5.4. BeanContainer ........................................................................... 316
9.5.5. BeanItemContainer .................................................................... 319
9.5.6. Iterating Over a Container ............................................................. 319
9.5.7. Filterable Containers ................................................................... 320
Chapter 10. Vaadin SQLContainer ....................................................................... 323
10.1. Architecture .......................................................................................... 324
10.2. Getting Started with SQLContainer ........................................................ 324
10.2.1. Creating a connection pool .......................................................... 325
10.2.2. Creating the TableQuery Query Delegate .................................... 325
10.2.3. Creating the Container ................................................................ 325
10.3. Filtering and Sorting .............................................................................. 325
10.3.1. Filtering ..................................................................................... 326
10.3.2. Sorting ...................................................................................... 326
10.4. Editing .................................................................................................. 326
10.4.1. Adding items .............................................................................. 326
10.4.2. Fetching generated row keys ....................................................... 327
10.4.3. Version column requirement ........................................................ 327
10.4.4. Auto-commit mode ..................................................................... 327
10.4.5. Modified state ............................................................................ 328
10.5. Caching, Paging and Refreshing ............................................................ 328
10.5.1. Container Size ........................................................................... 328
10.5.2. Page Length and Cache Size ...................................................... 328
10.5.3. Refreshing the Container ............................................................ 329
10.5.4. Cache Flush Notification Mechanism ........................................... 329
10.6. Referencing Another SQLContainer ...................................................... 330
10.7. Using FreeformQuery and FreeformStatementDelegate ....................... 331
10.8. Non-implemented methods of Vaadin container interfaces ....................... 332
10.9. Known Issues and Limitations ................................................................ 332
Chapter 11. Advanced Web Application Topics .................................................... 335
11.1. Handling Browser Windows ................................................................... 336
vi
Livro de Vaadin

9. 11.1.1. Opening Popup Windows ............................................................ 336
11.2. Embedding UIs in Web Pages ................................................................ 338
11.2.1. Embedding Inside a div Element ................................................ 338
11.2.2. Embedding Inside an iframe Element ........................................ 344
11.2.3. Cross-Site Embedding with the Vaadin XS Add-on ....................... 345
11.3. Debug Mode and Window ...................................................................... 346
11.3.1. Enabling the Debug Mode ........................................................... 346
11.3.2. Opening the Debug Window ........................................................ 347
11.3.3. Debug Message Log .................................................................. 347
11.3.4. General Information .................................................................... 348
11.3.5. Inspecting Component Hierarchy ................................................. 348
11.3.6. Communication Log .................................................................... 350
11.3.7. Debug Modes ............................................................................ 351
11.4. Request Handlers ................................................................................. 351
11.5. Shortcut Keys ....................................................................................... 352
11.5.1. Shortcut Keys for Default Buttons ................................................ 352
11.5.2. Field Focus Shortcuts ................................................................. 352
11.5.3. Generic Shortcut Actions ............................................................ 353
11.5.4. Supported Key Codes and Modifier Keys ..................................... 355
11.6. Printing ................................................................................................. 356
11.6.1. Printing the Browser Window ....................................................... 356
11.6.2. Opening a Print Window ............................................................. 356
11.6.3. Printing PDF .............................................................................. 357
11.7. Google App Engine Integration .............................................................. 358
11.8. Common Security Issues ....................................................................... 359
11.8.1. Sanitizing User Input to Prevent Cross-Site Scripting .................... 359
11.9. Navigating in an Application ................................................................... 360
11.9.1. Setting Up for Navigation ............................................................ 360
11.9.2. Implementing a View .................................................................. 361
11.9.3. Handling URI Fragment Path ....................................................... 361
11.10. Advanced Application Architectures ...................................................... 364
11.10.1. Layered Architectures ............................................................... 364
11.10.2. Model-View-Presenter Pattern ................................................... 365
11.11. Managing URI Fragments .................................................................... 369
11.11.1. Setting the URI Fragment .......................................................... 369
11.11.2. Reading the URI Fragment ........................................................ 369
11.11.3. Listening for URI Fragment Changes ......................................... 370
11.11.4. Supporting Web Crawling .......................................................... 371
11.12. Drag and Drop .................................................................................... 371
11.12.1. Handling Drops ........................................................................ 372
11.12.2. Dropping Items On a Tree ......................................................... 373
11.12.3. Dropping Items On a Table ....................................................... 374
11.12.4. Accepting Drops ....................................................................... 375
11.12.5. Dragging Components .............................................................. 378
11.12.6. Dropping on a Component ........................................................ 379
11.12.7. Dragging Files from Outside the Browser ................................... 380
11.13. Logging .............................................................................................. 380
11.14. JavaScript Interaction .......................................................................... 381
11.14.1. Calling JavaScript ..................................................................... 382
11.14.2. Handling JavaScript Function Callbacks ..................................... 382
11.15. Accessing Session-Global Data ........................................................... 383
11.15.1. Passing References Around ...................................................... 384
11.15.2. Overriding attach() ............................................................... 385
vii
Livro de Vaadin

10. 11.15.3. ThreadLocal Pattern ................................................................. 385
11.16. Server Push ........................................................................................ 386
11.16.1. Installing the Push Support ....................................................... 387
11.16.2. Enabling Push for a UI .............................................................. 387
11.16.3. Accessing UI from Another Thread ............................................ 388
11.16.4. Broadcasting to Other Users ..................................................... 390
11.17. Font Icons ........................................................................................... 391
11.17.1. Loading Icon Fonts ................................................................... 392
11.17.2. Basic Use ................................................................................ 392
11.17.3. Using Font icons in HTML ......................................................... 393
11.17.4. Using Font Icons in Other Text ................................................... 394
11.17.5. Custom Font Icons ................................................................... 394
Chapter 12. Portal Integration .............................................................................. 397
12.1. Overview .............................................................................................. 397
12.2. Creating a Portlet Project in Eclipse ........................................................ 398
12.3. Portlet UI .............................................................................................. 400
12.4. Deploying to a Portal ............................................................................. 401
12.4.1. Portlet Deployment Descriptor ..................................................... 402
12.4.2. Liferay Portlet Descriptor ............................................................. 403
12.4.3. Liferay Display Descriptor ........................................................... 403
12.4.4. Liferay Plugin Package Properties ............................................... 404
12.4.5. Using a Single Widget Set ........................................................... 405
12.4.6. Building the WAR Package .......................................................... 405
12.4.7. Deploying the WAR Package ....................................................... 405
12.5. Installing Vaadin in Liferay ...................................................................... 406
12.5.1. Removing the Bundled Installation ............................................... 406
12.5.2. Installing Vaadin ......................................................................... 406
12.6. Handling Portlet Requests ..................................................................... 407
12.7. Handling Portlet Mode Changes ............................................................. 408
12.8. Non-Vaadin Portlet Modes ..................................................................... 410
12.9. Vaadin IPC for Liferay ............................................................................ 413
12.9.1. Installing the Add-on ................................................................... 414
12.9.2. Basic Communication ................................................................. 415
12.9.3. Considerations ........................................................................... 415
12.9.4. Communication Through Session Attributes ................................. 416
12.9.5. Serializing and Encoding Data .................................................... 417
12.9.6. Communicating with Non-Vaadin Portlets ..................................... 418
Part III. Framework de Lado Cliente ................................................................................ 421
Chapter 13. Client-Side Vaadin Development ....................................................... 423
13.1. Overview .............................................................................................. 423
13.2. Installing the Client-Side Development Environment ................................ 424
13.3. Client-Side Module Descriptor ................................................................ 424
13.3.1. Specifying a Stylesheet ............................................................... 425
13.3.2. Limiting Compilation Targets ........................................................ 425
13.4. Compiling a Client-Side Module ............................................................. 425
13.4.1. Vaadin Compiler Overview .......................................................... 425
13.4.2. Compiling in Eclipse ................................................................... 426
13.4.3. Compiling with Ant ...................................................................... 426
13.4.4. Compiling with Maven ................................................................. 426
13.5. Creating a Custom Widget ..................................................................... 426
13.5.1. A Basic Widget ........................................................................... 426
13.5.2. Using the Widget ........................................................................ 427
viii
Livro de Vaadin

11. 13.6. Debugging Client-Side Code .................................................................. 428
13.6.1. Launching Development Mode .................................................... 428
13.6.2. Launching SuperDevMode .......................................................... 428
Chapter 14. Client-Side Applications ................................................................... 431
14.1. Overview .............................................................................................. 431
14.2. Client-Side Module Entry-Point .............................................................. 433
14.2.1. Module Descriptor ...................................................................... 433
14.3. Compiling and Running a Client-Side Application .................................... 434
14.4. Loading a Client-Side Application ........................................................... 434
Chapter 15. Client-Side Widgets .......................................................................... 437
15.1. Overview .............................................................................................. 437
15.2. GWT Widgets ....................................................................................... 438
15.3. Vaadin Widgets ..................................................................................... 438
Chapter 16. Integrating with the Server-Side ....................................................... 439
16.1. Overview .............................................................................................. 440
16.2. Starting It Simple With Eclipse ............................................................... 443
16.2.1. Creating a Widget ....................................................................... 444
16.2.2. Compiling the Widget Set ............................................................ 446
16.3. Creating a Server-Side Component ........................................................ 446
16.3.1. Basic Server-Side Component .................................................... 446
16.4. Integrating the Two Sides with a Connector ............................................. 447
16.4.1. A Basic Connector ...................................................................... 447
16.4.2. Communication with the Server-Side ........................................... 448
16.5. Shared State ........................................................................................ 448
16.5.1. Accessing Shared State on Server-Side ...................................... 448
16.5.2. Handing Shared State in a Connector .......................................... 449
16.5.3. Handling Property State Changes with @OnStateChange ........... 449
16.5.4. Delegating State Properties to Widget ......................................... 450
16.5.5. Referring to Components in Shared State .................................... 450
16.5.6. Sharing Resources ..................................................................... 451
16.6. RPC Calls Between Client- and Server-Side ........................................... 452
16.6.1. RPC Calls to the Server-Side ...................................................... 452
16.7. Component and UI Extensions ............................................................... 453
16.7.1. Server-Side Extension API .......................................................... 453
16.7.2. Extension Connectors ................................................................. 454
16.8. Styling a Widget .................................................................................... 455
16.8.1. Determining the CSS Class ......................................................... 455
16.8.2. Default Stylesheet ...................................................................... 456
16.9. Component Containers .......................................................................... 456
16.10. Advanced Client-Side Topics ................................................................ 456
16.10.1. Client-Side Processing Phases .................................................. 456
16.11. Creating Add-ons ................................................................................ 457
16.11.1. Exporting Add-on in Eclipse ...................................................... 458
16.11.2. Building Add-on with Ant ........................................................... 458
16.12. Migrating from Vaadin 6 ....................................................................... 463
16.12.1. Quick (and Dirty) Migration ........................................................ 463
16.13. Integrating JavaScript Components and Extensions ............................... 463
16.13.1. Example JavaScript Library ....................................................... 463
16.13.2. A Server-Side API for a JavaScript Component .......................... 465
16.13.3. Defining a JavaScript Connector ................................................ 466
16.13.4. RPC from JavaScript to Server-Side .......................................... 467
ix
Livro de Vaadin

12. Part IV. Vaadin Add-ons ................................................................................................. 469
Chapter 17. Using Vaadin Add-ons ...................................................................... 471
17.1. Overview .............................................................................................. 471
17.2. Downloading Add-ons from Vaadin Directory ........................................... 472
17.2.1. Compiling Widget Sets with an Ant Script ..................................... 472
17.3. Installing Add-ons in Eclipse with Ivy ...................................................... 472
17.4. Using Add-ons in a Maven Project .......................................................... 474
17.4.1. Adding a Dependency ................................................................ 474
17.4.2. Compiling the Project Widget Set ................................................ 476
17.4.3. Enabling Widget Set Compilation ................................................. 476
17.5. Troubleshooting ..................................................................................... 477
Chapter 18. Vaadin Charts ................................................................................... 479
18.1. Overview .............................................................................................. 479
18.2. Installing Vaadin Charts ......................................................................... 481
18.3. Basic Use ............................................................................................. 482
18.3.1. Displaying Multiple Series ........................................................... 483
18.3.2. Mixed Type Charts ...................................................................... 484
18.3.3. Chart Themes ............................................................................ 485
18.4. Chart Types .......................................................................................... 485
18.4.1. Line and Spline Charts ............................................................... 485
18.4.2. Area Charts ............................................................................... 486
18.4.3. Column and Bar Charts .............................................................. 486
18.4.4. Error Bars .................................................................................. 487
18.4.5. Box Plot Charts .......................................................................... 488
18.4.6. Scatter Charts ............................................................................ 490
18.4.7. Bubble Charts ............................................................................ 492
18.4.8. Pie Charts ................................................................................. 494
18.4.9. Gauges ..................................................................................... 496
18.4.10. Area and Column Range Charts ................................................ 497
18.4.11. Polar, Wind Rose, and Spiderweb Charts ................................... 498
18.4.12. Funnel Charts .......................................................................... 500
18.4.13.Waterfall Charts ........................................................................ 501
18.5. Chart Configuration ............................................................................... 503
18.5.1. Plot Options ............................................................................... 504
18.5.2. Axes .......................................................................................... 504
18.5.3. Legend ...................................................................................... 505
18.6. Chart Data ............................................................................................ 505
18.6.1. List Series .................................................................................. 506
18.6.2. Generic Data Series ................................................................... 506
18.6.3. Range Series ............................................................................. 507
18.6.4. Container Data Series ................................................................ 508
18.7. Advanced Uses ..................................................................................... 509
18.7.1. Server-Side Rendering and Exporting .......................................... 509
18.8. Timeline ................................................................................................ 510
18.8.1. Graph types ............................................................................... 511
18.8.2. Interaction Elements ................................................................... 512
18.8.3. Event Markers ............................................................................ 515
18.8.4. Efficiency ................................................................................... 513
18.8.5. Data Source Requirements ......................................................... 514
18.8.6. Events and Listeners .................................................................. 515
18.8.7. Configurability ............................................................................ 516
18.8.8. Localization ................................................................................ 516
x
Livro de Vaadin

13. 18.8.9. Timeline Tutorial ......................................................................... 517
Chapter 19. Vaadin JPAContainer ........................................................................ 525
19.1. Overview .............................................................................................. 525
19.2. Installing ............................................................................................... 528
19.2.1. Downloading the Package ........................................................... 528
19.2.2. Installation Package Content ....................................................... 528
19.2.3. Downloading with Maven ............................................................ 528
19.2.4. Including Libraries in Your Project ................................................ 529
19.2.5. Persistence Configuration ........................................................... 529
19.2.6. Troubleshooting .......................................................................... 531
19.3. Defining a Domain Model ....................................................................... 532
19.3.1. Persistence Metadata ................................................................. 532
19.4. Basic Use of JPAContainer .................................................................... 535
19.4.1. Creating JPAContainer with JPAContainerFactory ..................... 535
19.4.2. Creating and Accessing Entities .................................................. 537
19.4.3. Nested Properties ...................................................................... 538
19.4.4. Hierarchical Container ................................................................ 539
19.5. Entity Providers ..................................................................................... 540
19.5.1. Built-In Entity Providers ............................................................... 540
19.5.2. Using JNDI Entity Providers in JEE6 Environment ........................ 542
19.5.3. Entity Providers as Enterprise Beans ........................................... 542
19.6. Filtering JPAContainer .......................................................................... 543
19.7. Querying with the Criteria API ................................................................ 543
19.7.1. Filtering the Query ...................................................................... 544
19.7.2. Compatibility .............................................................................. 545
19.8. Automatic Form Generation ................................................................... 545
19.8.1. Configuring the Field Factory ...................................................... 545
19.8.2. Using the Field Factory ............................................................... 545
19.8.3. Master-Detail Editor .................................................................... 547
19.9. Using JPAContainer with Hibernate ........................................................ 547
19.9.1. Lazy loading .............................................................................. 547
19.9.2. The EntityManager-Per-Request pattern ...................................... 548
19.9.3. Joins in Hibernate vs EclipseLink ................................................ 549
Chapter 20. Mobile Applications with TouchKit ................................................... 551
20.1. Overview .............................................................................................. 552
20.2. Considerations Regarding Mobile Browsing ............................................ 554
20.2.1. Mobile Human Interface .............................................................. 554
20.2.2. Bandwidth and Performance ....................................................... 554
20.2.3. Mobile Features ......................................................................... 555
20.2.4. Compatibility .............................................................................. 555
20.3. Installing Vaadin TouchKit ...................................................................... 555
20.3.1. Installing as Ivy Dependency ....................................................... 555
20.3.2. Installing the Zip Package ........................................................... 556
20.3.3. Defining the Maven Dependency ................................................. 556
20.4. Importing the Vornitologist Demo ............................................................ 556
20.5. Creating a New TouchKit Project ............................................................ 557
20.5.1. Using the Maven Archetype ........................................................ 557
20.5.2. Starting from a New Eclipse Project ............................................. 558
20.6. Elements of a TouchKit Application ......................................................... 558
20.6.1. The Servlet Class ....................................................................... 559
20.6.2. Defining Servlet and UI with web.xml Deployment Descriptor ...... 559
20.6.3. TouchKit Settings ........................................................................ 560
xi
Livro de Vaadin

14. 20.6.4. The UI ....................................................................................... 561
20.6.5. Mobile Widget Set ...................................................................... 562
20.6.6. Mobile Theme ............................................................................ 562
20.7. Mobile User Interface Components ......................................................... 564
20.7.1. NavigationView ......................................................................... 565
20.7.2. Toolbar ..................................................................................... 566
20.7.3. NavigationManager .................................................................. 566
20.7.4. NavigationButton ..................................................................... 568
20.7.5. Popover .................................................................................... 570
20.7.6. SwipeView ................................................................................ 573
20.7.7. Switch ...................................................................................... 574
20.7.8. VerticalComponentGroup ......................................................... 575
20.7.9. HorizontalButtonGroup ............................................................ 576
20.7.10. TabBarView ............................................................................. 577
20.7.11. EmailField ............................................................................... 578
20.7.12. NumberField ........................................................................... 578
20.7.13. UrlField ................................................................................... 579
20.8. Advanced Mobile Features .................................................................... 579
20.8.1. Providing a Fallback UI ............................................................... 579
20.8.2. Geolocation ............................................................................... 580
20.8.3. Storing Data in the Local Storage ................................................ 582
20.8.4. Uploading Content ...................................................................... 583
20.9. Offline Mode ......................................................................................... 586
20.9.1. Enabling the Cache Manifest ....................................................... 587
20.9.2. Enabling Offline Mode ................................................................ 587
20.9.3. The Offline User Interface ........................................................... 587
20.9.4. Sending Data to Server ............................................................... 587
20.9.5. The Offline Theme ...................................................................... 588
20.10. Building an Optimized Widget Set ......................................................... 588
20.10.1. Generating the Widget Map ....................................................... 588
20.10.2. Defining the Widget Loading Style ............................................. 589
20.10.3. Applying the Custom Widget Map Generator .............................. 589
20.10.4. Deployment .............................................................................. 590
20.11. Testing and Debugging on Mobile Devices ............................................ 590
20.11.1. Debugging ............................................................................... 590
Chapter 21. Vaadin TestBench ............................................................................. 591
21.1. Overview .............................................................................................. 591
21.2. Installing Vaadin TestBench .................................................................... 594
21.2.1. Test Development Setup ............................................................. 594
21.2.2. A Distributed Testing Environment ............................................... 595
21.2.3. Installation Package Contents ..................................................... 596
21.2.4. Example Contents ...................................................................... 597
21.2.5. Installing Browser Drivers ........................................................... 598
21.2.6. Test Node Configuration .............................................................. 598
21.3. Preparing an Application for Testing ........................................................ 599
21.4. Developing JUnit Tests .......................................................................... 600
21.4.1. Basic Test Case Structure ........................................................... 600
21.4.2. Running JUnit Tests in Eclipse ..................................................... 602
21.5. Creating a Test Case ............................................................................. 603
21.5.1. Test Setup .................................................................................. 603
21.5.2. Basic Test Case Structure ........................................................... 604
21.5.3. Creating and Closing a Web Driver .............................................. 605
21.6. Querying Elements ................................................................................ 606
xii
Livro de Vaadin

15. 21.6.1. Generating Queries with Debug Window ...................................... 607
21.6.2. Querying Elements by Component Type ($) ................................. 607
21.6.3. Non-Recursive Component Queries ($$) ..................................... 607
21.6.4. Element Classes ........................................................................ 608
21.6.5. ElementQuery Objects .............................................................. 608
21.6.6. Query Terminators ...................................................................... 608
21.7. Element Selectors ................................................................................. 608
21.7.1. Selector Robustness .................................................................. 609
21.7.2. Finding by ID .............................................................................. 609
21.7.3. Finding by Vaadin Selector .......................................................... 610
21.7.4. Finding by CSS Class ................................................................. 610
21.8. Special Test Features ............................................................................ 611
21.8.1.Waiting for Vaadin ....................................................................... 611
21.8.2. Testing Tooltips ........................................................................... 611
21.8.3. Scrolling .................................................................................... 612
21.8.4. Testing Notifications .................................................................... 612
21.8.5. Testing Context Menus ................................................................ 612
21.8.6. Profiling Test Execution Time ....................................................... 613
21.9. Creating Maintainable Tests ................................................................... 615
21.9.1. The Page Object Pattern ............................................................. 615
21.10. Taking and Comparing Screenshots ..................................................... 617
21.10.1. Screenshot Parameters ............................................................ 617
21.10.2. Taking Screenshots on Failure ................................................... 618
21.10.3. Taking Screenshots for Comparison ........................................... 618
21.10.4. Practices for Handling Screenshots ........................................... 621
21.10.5. Known Compatibility Problems .................................................. 621
21.11. Running Tests ..................................................................................... 621
21.11.1. Running Tests with Ant .............................................................. 621
21.11.2. Running Tests with Maven ......................................................... 622
21.12. Running Tests in a Distributed Environment .......................................... 623
21.12.1. Running Tests Remotely ........................................................... 623
21.12.2. Starting the Hub ....................................................................... 624
21.12.3. Node Service Configuration ...................................................... 624
21.12.4. Starting a Grid Node ................................................................. 626
21.12.5. Mobile Testing .......................................................................... 627
21.13. Headless Testing ................................................................................. 627
21.13.1. Basic Setup for Running Headless Tests .................................... 627
21.13.2. Running Headless Tests in a Distributed Environment ................. 628
21.14. Known Issues ..................................................................................... 628
21.14.1. Testing the LoginForm ............................................................... 628
21.14.2. Running Firefox Tests on Mac OS X ........................................... 629
A. Songs of Vaadin ...................................................................................................... 631
Índice Remissivo ........................................................................................................... 635
xiii
Livro de Vaadin

16. xiv

17. Prefácio
Este livro fornece uma visão geral do framework Vaadin e abrange os tópicos mais importantes
que você pode encontrar durante o desenvolvimento de aplicações Vaadin. A documentação
mais detalhada das classes individuais, interfaces e métodos é dada na API de referência Vaadin.
Esta edição aborda principalmente Vaadin 7.2, lançado em maio de 2014. A versão inclui suporte
para ícones de fontes e layouts responsivos. No lado cliente, a manipulação de mudanças de
estado tornou-se mais fácil com a anotação @OnStateChange. Além disso, o futuro tema Valo
para Vaadin 7.3 é apresentado.
Além das mudanças no núcleo do framework, esta edição apresenta documentação para os
add-ons TestBench 4 e TouchKit 4, que ainda não foram lançados no momento da escrita. Os
capítulos atualizados são baseados em versões pré-lançamento dos add-ons, por isso as versões
finais podem ter algumas mudanças.
Escrever este manual é um trabalho contínuo e raramente está completamente atualizado com
o produto de evolução rápida. Alguns recursos podem não estar incluídos neste livro ainda. Para
a versão mais atual, consulte a edição on-line disponível em http://vaadin.com/book.Você
também pode encontrar versões em PDF e EPUB do livro lá, além de outras versões mais
amigáveis a ferramentas de pesquisa que o livro impresso. O índice do livro está incompleto e
será expandido mais tarde. A edição web também tem alguns conteúdos adicionais, como código
de exemplo e seções adicionais que você pode precisar ao desenvolver software em cenários
reais. O objetivo da edição impressa ligeiramente abreviada é mais ser um livro didático
introdutório para Vaadin, e ainda caber no seu bolso.
Além disso, muitas funcionalidades de Vaadin 7 são apresentadas como mini-tutoriais, que estão
disponíveis no Wiki Vaadin https://vaadin.com/wiki/-/wiki/Main/Vaadin+7.
1. Para Quem é Este Livro?
Este livro é destinado a desenvolvedores de software que usam, ou estão considerando a
possibilidade de usar, Vaadin para desenvolver aplicações web.
O livro pressupõe que você tenha alguma experiência com programação em Java. Porém, se
não tiver, pelo menos é tão fácil começar a aprender Java com Vaadin como com qualquer outro
framework de UI. Nenhum conhecimento de AJAX é necessário, uma vez que ele está bem
escondido do desenvolvedor.
Você pode já ter utilizado alguns frameworks de interface de usuário em Java voltados para
desktops, como AWT, Swing, SWT ou uma biblioteca como Qt para C++. Tal conhecimento é
útil para compreender o escopo do Vaadin, o modelo de programação orientada a eventos, e
outros conceitos comuns de frameworks de interface do usuário (UI), mas não é obrigatório.
Se você não tem um Web Designer à disposição, saber o básico de HTML e CSS pode ajudar
para que você possa desenvolver temas de apresentação para a sua aplicação. Uma breve
introdução a CSS é fornecida. Conhecimento do Google Web Toolkit (GWT) pode ser útil se
você desenvolver ou integrar novos componentes ao lado cliente.
2. Organização Deste Livro
O Livro de Vaadin dá uma introdução sobre o que o Vaadin é e como usá-lo para desenvolver
aplicações web.
Book of Vaadin xv

18. Parte I: Introdução
Capítulo 1, Introdução
Prefácio
O capítulo apresenta uma introdução à arquitetura de aplicação suportada pelo Vaadin,
às idéias de projeto principais por trás do framework e algum background histórico.
Capítulo 2, Começando com Vaadin
Este capítulo fornece instruções práticas para a instalação do Vaadin e um conjunto
de ferramentas de referência, incluindo o plugin Vaadin para Eclipse, como executar
e depurar os demos, e como criar o seu próprio projeto de aplicação na IDE Eclipse.
Capítulo 3, Arquitetura
Este capítulo apresenta uma introdução à arquitetura do Vaadin e suas principais
tecnologias, incluindo AJAX, Google Web Toolkit, e programação orientada a eventos.
Parte II: Framework Lado Servidor
Capítulo 4, Escrevendo uma Aplicação Web de Lado Servidor
Este capítulo apresenta todo o conhecimento prático necessário para a criação de
aplicações com Vaadin, tais como gerenciamento de janelas, ciclo de vida de
aplicativos, implantação em container servlet, e tratamento de eventos, erros e
recursos.
Capítulo 5, User Interface Components
Este capítulo apresenta essencialmente a documentação de referência para todos os
principais componentes de interface de usuário em Vaadin e suas características mais
significativas. O texto dá exemplos de utilização para cada um dos componentes.
Capítulo 6, Managing Layout
Este capítulo descreve os componentes de layout, que são usados para gerenciar o
layout da interface do usuário, assim como em qualquer framework de aplicações
desktop.
Capítulo 7, Visual User Interface Design with Eclipse
Este capítulo fornece instruções para utilizar o editor visual para Eclipse, que está
incluso no plugin Vaadin para a IDE Eclipse.
Capítulo 8, Themes
Este capítulo apresenta uma introdução para Cascading Style Sheets (CSS) e explica
como você pode usá-los para construir temas visuais personalizados para sua
aplicação.
Capítulo 9, Binding Components to Data
Este capítulo apresenta uma visão geral do modelo de dados implementado no Vaadin,
que consiste de propriedades, itens e containers.
Capítulo 10, Vaadin SQLContainer
Este capítulo fornece documentação para o SQLContainer, que permite a ligação de
componentes Vaadin a consultas SQL.
Capítulo 11, Advanced Web Application Topics
Este capítulo apresenta muitos tópicos especiais que são normalmente necessários
em aplicações, tais como a abertura de novas janelas do navegador, a incorporação
de aplicações em páginas web regulares, gerenciamento de recursos em baixo nível,
teclas de atalho, depuração, etc.
xvi Organização Deste Livro

19. Capítulo 12, Portal Integration
Prefácio
Este capítulo descreve o desenvolvimento de aplicações Vaadin como portlets, que
você pode implantar em qualquer portal que suporte Java Portlet API 2.0 (JSR-286).
O capítulo também descreve o suporte especial à Liferay e os add-ons Painel de
Controle, IPC, e WSRP.
Parte III: Framework Lado Cliente
Capítulo 13, Client-Side Vaadin Development
Este capítulo apresenta uma introdução à criação e desenvolvimento de aplicações
e widgets do lado cliente, incluindo instalação, compilação e depuração.
Capítulo 14, Client-Side Applications
Este capítulo descreve como desenvolver aplicações do lado cliente e como integrá-los
com um serviço de back-end.
Capítulo 15, Client-Side Widgets
Este capítulo descreve os widgets internos (componentes do lado cliente) disponíveis
para o desenvolvimento do lado cliente. Os widgets internos incluem widgets Google
Web Toolkit, bem como widgets Vaadin.
Capítulo 16, Integrating with the Server-Side
Este capítulo descreve como integrar widgets do lado cliente com seus correspondentes
do lado servidor para fins de criação de novos componentes do lado servidor. O
capítulo aborda também a integração de componentes em JavaScript.
Parte IV: Add-ons Vaadin
Capítulo 17, Using Vaadin Add-ons
Este capítulo fornece instruções para baixar e instalar add-ons do Diretório Vaadin.
Capítulo 18, Vaadin Charts
Este capítulo documenta o uso do add-on Vaadin Charts para criação de gráficos
interativos com vários tipos de diagramas. O add-on inclui os componentes Chart e
Timeline.
Capítulo 19, Vaadin JPAContainer
Este capítulo apresenta a documentação do add-on JPAContainer, que permite a
ligação de componentes Vaadin diretamente a bancos de dados relacionais e outras
bases de dados que usem Java Persistence API (JPA).
Capítulo 20, Mobile Applications with TouchKit
Este capítulo apresenta exemplos e documentação de referência para o uso do add-on
Vaadin TouchKit para o desenvolvimento de aplicações móveis.
Capítulo 21, Vaadin TestBench
Este capítulo apresenta a documentação completa do uso da ferramenta Vaadin
TestBench para gravação e execução de testes de regressão de interface de usuário
em aplicações Vaadin.
Apêndice A, Songs of Vaadin
Fundo mitológico do nome Vaadin.
Organização Deste Livro xvii

20. 3. Material Suplementar
Prefácio
O site do Vaadin oferece bastante material que pode ajudar você a entender o que o Vaadin é,
o que você pode fazer com ele, e como você pode fazê-lo.
Aplicações de Demonstração
A aplicação mais importante para a demonstração do Vaadin é o Sampler, que
demonstra a utilização de todos os componentes e as funcionalidades básicas.Você
pode executá-lo on-line em http://demo.vaadin.com/ ou baixá-lo como um WAR na
página de download do Vaadin.
A maioria dos exemplos de código neste livro e muitos outros podem ser encontrados
on-line em: http://demo.vaadin.com/book-examples-vaadin7/book/.
Folha de Acesso Rápido
A folha de acesso rápido ilustra o relacionamento de hierarquia das classes e interfaces
de UI e de ligação de dados. Você pode baixá-la em http://vaadin.com/book.
Cartão de Referência
O cartão de referência DZone de seis páginas dá uma visão geral para o
desenvolvimento de aplicações com Vaadin. Ele inclui um diagrama de classes e
interfaces de UI e de ligação de dados.Você pode encontrar mais informações sobre
ele em https://vaadin.com/refcard.
Tutorial Address Book (Catálogo de Endereços)
O Address Book (Catálogo de Endereços) é uma aplicação de amostra acompanhada
por um tutorial que dá instruções detalhadas passo-a-passo para a criação de uma
aplicação web da vida real com Vaadin. Você pode encontrar o tutorial no site do
produto.
Site do Desenvolvedor
O Site do Desenvolvedor Vaadin, disponível em http://dev.vaadin.com/, oferece vários
recursos on-line, tais como um exemplo de um sistema de ingressos, a wiki de
desenvolvimento, repositórios de código fonte, cronograma de atividades, marcos de
desenvolvimento, e assim por diante.
A wiki fornece instruções para desenvolvedores, especialmente para aqueles que
desejam fazer check-out e compilar o Vaadin a partir do repositório de código fonte.
Os artigos técnicos lidam com a integração de aplicações Vaadin com vários sistemas,
tais como JSP, Maven, Spring, Hibernate e portais. A wiki também oferece respostas
às perguntas mais frequentes.
Documentação Online
Você pode ler este livro online em http://vaadin.com/book. Bastante material adicional,
incluindo tutoriais técnicos, respostas às perguntas mais frequentes e outras
documentações também estão disponíveis no Site do Vaadin.
4. Suporte
Preso em um problema? Não há necessidade de perder o seu cabelo por isso. A comunidade
de desenvolvedores do framework Vaadin e a companhia Vaadin oferecem suporte a todas as
suas necessidades.
xviii Material Suplementar

21. Fórum Comunitário de Suporte
Prefácio
Você pode encontrar o fórum comunitário do usuário e desenvolvedor em
http://vaadin.com/forum. Por favor, use o fórum para discutir qualquer problema que
você possa encontrar, desejos por funcionalidades, e assim por diante. A resposta
para seus problemas pode já estar nos arquivos do fórum. Então, pesquisar as
discussões é sempre a melhor maneira de começar.
Reportar Bugs
Se você encontrar um possível bug no Vaadin, nas aplicações de demonstração, ou
na documentação, por favor, reporte-o preenchendo um ticket no site do desenvolvedor
Vaadin em http://dev.vaadin.com/. Você pode querer verificar os tickets existentes
antes de adicionar um novo. Você pode preencher um ticket para pedir uma nova
funcionalidade também, ou sugerir modificações para uma funcionalidade existente.
Suporte Comercial
Vaadin oferece suporte comercial completo e serviços de treinamento para o
Framework Vaadin e produtos relacionados. Leia mais sobre os produtos comerciais
em http://vaadin.com/pro para mais detalhes.
5. Sobre o Autor
Marko Grönroos é um escritor e desenvolvedor de software profissional que trabalha na Vaadin
Ltd, em Turku, na Finlândia. Ele esteve envolvido no desenvolvimento de aplicações web desde
1994 e já trabalhou em diversos frameworks de desenvolvimento de aplicações em C, C++ e
Java. Ele tem estado ativo em muitos projetos de software de código aberto e possui Mestrado
em Ciência da Computação pela Universidade de Turku.
6. Agradecimentos
Grande parte do livro é o resultado do trabalho próximo ao time de desenvolvimento na Vaadin
Ltd. Joonas Lehtinen, CEO da Vaadin Ltd, escreveu o primeiro esboço do livro, que se tornou
a base para os dois primeiros capítulos. Desde então, Marko Grönroos tornou-se o principal
autor e editor. A equipe de desenvolvimento tem contribuído em várias passagens, respondendo
inúmeras perguntas técnicas, revisando o manual, e fazendo muitas correções.
Os colaboradores são (em ordem cronológica aproximada):
Joonas Lehtinen
Jani Laakso
Marko Grönroos
Jouni Koivuviita
Matti Tahvonen
Artur Signell
Marc Englund
Henri Sara
Jonatan Kronqvist
Mikael Grankvist (TestBench)
Teppo Kurki (SQLContainer)
Tomi Virtanen (Calendar)
Risto Yrjänä (Calendar)
John Ahlroos (Timeline)
Petter Holmström (JPAContainer)
Leif Åstrand
Sobre o Autor xix

22. 7. Sobre a Vaadin Ltd
Prefácio
Vaadin Ltd é uma empresa finlandesa de software especializada na concepção e desenvolvimento
de Rich Internet Applications. A companhia oferece planejamento, implementação e serviços de
apoio para os projetos de seus clientes de software, bem como o desenvolvimento de software
por contrato. O Framework Vaadin, anteriormente conhecido como Toolkit IT Mill, é o carro-chefe
do produto open source da companhia, para o qual presta serviços de desenvolvimento e suporte
comercial.
xx Sobre a Vaadin Ltd

23. Parte I. Introdução
Esta parte vem em três capítulos que apresentam as idéias básicas por trás do Vaadin e seus dois modelos
de programação, de lado servidor e de lado cliente. Além disso, descreve sua instalação e dá uma visão
geral de sua arquitetura.

25. bapítulo 1
Introdução
1.1. Visão Geral .............................................................................................. 23
1.2. Exemplo de Aplicação Passo a Passo .................................................... 25
1.3. Suporte à IDE Eclipse ............................................................................. 26
1.4. Metas e Filosofia ..................................................................................... 27
1.5. Conhecimento ......................................................................................... 27
Este capítulo apresenta uma breve introdução ao desenvolvimento de software com Vaadin.
Também tentamos dar algumas dicas sobre a filosofia de projeto por trás do Vaadin e sua história.
1.1. Visão Geral
Vaadin é um framework de desenvolvimento de aplicações web em Java que foi projetado para
tornar a criação e manutenção de interfaces de usuário web de alta qualidade fácil. Vaadin
suporta dois modelos de programação diferentes: no lado servidor e no lado cliente. O modelo
de programação orientado pelo servidor é o mais poderoso. Ele permite que você esqueça a
web e programe interfaces de usuário de forma muito parecida como você programa uma
aplicação desktop com toolkits Java convencionais como AWT, Swing ou SWT. Porém, mais
fácil.
Enquanto a programação web tradicional é uma maneira divertida de passar o tempo aprendendo
novas tecnologias, você provavelmente quer ser produtivo e concentrar-se na lógica da aplicação.
O framework Vaadin se encarrega do gerenciamento da interface do usuário no navegador e
da comunicação com AJAX entre o navegador e o servidor. Com a abordagem Vaadin, você
não precisa aprender e lidar diretamente com as tecnologias do navegador, como HTML ou
JavaScript.
Book of Vaadin 23

26. Introdução
Figura 1.1. Arquitetura da Aplicação Vaadin
Figura 1.1, “Arquitetura da Aplicação Vaadin” ilustra as arquiteturas básicas de aplicações web
feitas com Vaadin. A arquitetura da aplicação do lado servidor é composta do framework de lado
servidor e de uma engine de lado cliente. A engine é executada no navegador como código
JavaScript, apresentando a interface do usuário e entregando sua interação para o servidor. A
lógica da UI de uma aplicação é executada como um Servlet Java em um servidor de aplicações
Java.
Como a engine do lado cliente é executada como JavaScript no navegador, não são necessários
plugins para utilizar aplicações feitas com Vaadin. Isso dá uma vantagem sobre os frameworks
baseados em Flash, Applets Java e outros plugins.Vaadin conta com o suporte ao Google Web
Toolkit para uma ampla variedade de navegadores, de modo que o desenvolvedor não precisa
se preocupar com o suporte ao navegador.
Como o HTML, JavaScript e outras tecnologias de navegadores são essencialmente invisíveis
à lógica da aplicação, você pode pensar no navegador web como sendo apenas uma plataforma
thin client. Um thin client exibe a interface do usuário e comunica eventos do usuário para o
servidor em um baixo nível. A lógica de controle da interface do usuário é executada em um
servidor Java web, juntamente com a sua lógica de negócios. Em contraste, uma arquitetura
cliente-servidor normal, com uma aplicação cliente dedicada, incluiria uma série de comunicações
específicas da aplicação entre cliente e servidor. Remover substancialmente a camada da
interface de usuário da arquitetura da aplicação torna a nossa abordagem bastante eficaz.
Por trás do modelo de desenvolvimento orientado pelo servidor, Vaadin faz o melhor uso de
AJAX (Javascript Assíncrono e XML, veja Secção 3.2.3, “AJAX” para uma descrição) e de
técnicas que tornam possível a criação de Aplicações de Internet Rica (RIA - Rich Internet
Application) que são tão ágeis e interativas quanto aplicações desktop.
Além do desenvolvimento de aplicações Java no lado servidor, você pode desenvolver no lado
cliente, fazendo novos widgets em Java, e até mesmo aplicações totalmente no lado cliente,
que rodem apenas no navegador. O framework Vaadin de lado cliente inclui o Google Web
Toolkit (GWT), que fornece um compilador de Java para JavaScript, que roda no navegador,
bem como um framework de interface de usuário completo. Com esta abordagem, Vaadin é
puro Java em ambos os lados.
Vaadin usa uma engine de lado cliente para apresentar a interface de usuário de aplicações de
lado servidor no navegador.Todas as comunicações cliente-servidor ficam bem escondidas sob
o capô. Vaadin é projetado para ser extensível, e você realmente pode usar quaisquer widgets
de terceiros com facilidade, além do conjunto de componentes oferecidos no Vaadin. Na verdade,
você pode encontrar centenas de add-ons no Diretório Vaadin.
24 Visão Geral

27. Introdução
O Framework Vaadin define uma separação clara entre a
estrutura da interface de usuário e sua aparência, e permite
que você desenvolva-os separadamente. Nossa abordagem
para isso é o uso de temas que controlam a aparência com
CSS e templates HTML opcionais. Como o Vaadin fornece
temas padrão excelentes, usualmente você não precisa fazer
muita customização. Mas você pode, se necessário. Para mais
informações sobre temas, consulte Capítulo 8, Themes.
Esperamos que isso seja o suficiente sobre arquitetura e
funcionalidades básicas do Vaadin para agora. Você pode ler
mais sobre isso depois em Capítulo 3, Arquitetura, ou pular
direto para coisas mais práticas em Capítulo 4, Escrevendo
uma Aplicação Web de Lado Servidor.
1.2. Exemplo de Aplicação Passo a Passo
Vamos seguir a longa tradição de primeiro dizer "Hello World!" ao aprender um novo framework
de programação. Primeiro, utilizando a API de lado servidor.
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
@Title("Hello Window")
public class HelloWorld extends UI {
@Override
protected void init(VaadinRequest request) {
// Criar o layout raiz de conteúdo para a interface de usuário
VerticalLayout content = new VerticalLayout();
setContent(content);
// Mostra a saudação
content.addComponent(new Label("Hello World!"));
}
}
Uma aplicação Vaadin tem uma ou mais UIs que estendem a classe com.vaadin.ui.UI. Uma UI
é uma parte da página web onde a aplicação Vaadin é executada. Uma aplicação pode ter
múltiplas UIs na mesma página, especialmente em portais, ou em diferentes janelas ou abas.
Elas ficam associadas a uma sessão de usuário. Uma sessão é criada para cada usuário que
usa a aplicação. No contexto do nosso "Hello World!", é suficiente saber que a sessão subjacente
é criada quando o usuário acessa pela primeira vez a aplicação ao abrir a página, e o método
init() é invocado nesse momento .
No exemplo acima, o título da página, que é mostrado na legenda da janela ou aba do navegador,
é definido com uma anotação. O exemplo usa um componente de layout como conteúdo raiz
da UI, como é o caso da maioria das aplicações Vaadin, que normalmente têm mais de um
componente. Em seguida, cria um novo componente de interface de usuário Label, que exibe
um texto simples, e define o texto para "Hello World!". O label é adicionado ao layout.
O resultado da aplicação Hello World, quando aberta em um navegador, é apresentado em
Figura 1.2, “Aplicação Hello World”.
Exemplo de Aplicação Passo a Passo 25

28. Introdução
Figura 1.2. Aplicação Hello World
Para executar o programa, você pode simplesmente empacotá-lo como uma aplicação web em
um pacote WAR e instalá-lo em um servidor, como é explicado em Secção 4.8, “Implantando
uma Aplicação”.
Desenvolvendo uma aplicação puramente de lado cliente, você poderia escrever um Hello World
com a mesma facilidade, e também em Java:
public class HelloWorld implements EntryPoint {
@Override
public void onModuleLoad() {
RootPanel.get().add(new Label("Hello, world!"));
}
}
Nós não definimos o título aqui, porque ele é geralmente definido na página HTML em que o
código é executado. A aplicação seria compilada para JavaScript com o Vaadin Client Compiler
(ou GWT Compiler). É mais comum, no entanto, escrever widgets de lado cliente, que podem
ser utilizados a partir de aplicações Vaadin de lado servidor. Para mais informações sobre o
desenvolvimento no lado cliente, consulte Capítulo 13, Client-Side Vaadin Development.
1.3. Suporte à IDE Eclipse
Enquanto o Vaadin não está vinculado a qualquer IDE específica, e você pode de fato usá-lo
facilmente sem qualquer IDE, nós fornecemos suporte especial para a IDE Eclipse, que se tornou
o ambiente mais utilizado para desenvolvimento em Java. O suporte é fornecido no Plugin Vaadin
para Eclipse, que ajuda você a:
• Criar novos projetos Vaadin
• Criar temas customizados
• Criar widgets customizados
• Criar componentes compostos com um editor visual
• Atualizar facilmente para uma versão mais recente da biblioteca Vaadin
Utilizar o Plugin Vaadin para Eclipse é a forma recomendada de instalar Vaadin para o
desenvolvimento. Baixar o pacote de instalação que contém os JARs ou definir Vaadin como
uma dependência no Maven também é possível.
A instalação e a atualização do plugin do Eclipse são cobertos em Secção 2.4, “Instalando o
Plugin Vaadin para Eclipse”, e a criação de um novo projeto Vaadin usando o plugin em
26 Suporte à IDE Eclipse

29. Introdução
Secção 2.5.1, “Criando o Projeto”.Veja Secção 8.5, “Creating a Theme in Eclipse”, Secção 16.2,
“Starting It Simple With Eclipse”, e Capítulo 7, Visual User Interface Design with Eclipse para
instruções sobre como utilizar as diferentes funcionalidades do plugin.
1.4. Metas e Filosofia
Simplificando, a ambição do Vaadin é ser a melhor ferramenta possível, quando se trata de
criação de interfaces de usuário web para aplicações de negócios. É fácil de adotar, como ele
é projetado para suportar tanto programadores iniciantes quanto avançados, bem como
especialistas em usabilidade e designers gráficos.
Ao projetar o Vaadin, temos seguido a filosofia inscrita nas seguintes regras.
1.4.1. Ferramenta certa para o propósito certo
Como as nossas metas são altas, o foco deve ser claro. Vaadin é projetado para a criação de
aplicações web. Ele não foi projetado para a criação de sites ou demonstrações de propaganda.
Você pode achar, por exemplo, JSP/JSF ou Flash mais adequados para tais fins.
1.4.2. Simplicidade e facilidade de manutenção
Optamos por ressaltar a robustez, simplicidade e facilidade de manutenção. Trata-se de seguir
as melhores práticas bem estabelecidas nos frameworks de interface de usuário e garantir que
nossa implementação representa uma solução ideal para o seu propósito, sem desordem ou
inchaço.
1.4.3. XML não é projetado para programação
A Web é inerentemente centrada a documentos e muito ligada à apresentação declarativa de
interfaces de usuário. O framework Vaadin liberta o programador dessas limitações. É muito
mais natural criar interfaces de usuário programando-as do que definindo-as em templates
declarativos, que não são flexíveis o suficiente para a interação complexa e dinâmica do usuário.
1.4.4. Ferramentas não devem limitar o seu trabalho
Não deve haver limites para o que você pode fazer com o framework: se por algum motivo os
componentes da interface de usuário não suportam o que você precisa alcançar, deve ser fácil
adicionar novos componentes para a sua aplicação. Quando você precisar criar componentes
novos, o papel do framework é fundamental: ele facilita a criação de componentes reutilizáveis
que são fáceis de manter.
1.5. Conhecimento
O framework Vaadin não foi escrito da noite para o dia. Depois de trabalhar com interfaces de
usuário web desde o início da Web, um grupo de desenvolvedores se juntou no ano 2000 para
formar o IT Mill. A equipe teve o desejo de desenvolver um novo paradigma de programação
que apoiaria a criação de interfaces de usuário reais para aplicações reais utilizando uma
linguagem de programação real.
A biblioteca foi originalmente chamada Millstone Library. A primeira versão foi usada em uma
aplicação de produção grande que o IT Mill concebeu e implementou para uma empresa
farmacêutica internacional. O IT Mill fez a aplicação no ano 2001 e ela ainda está em uso. Desde
Metas e Filosofia 27

30. Introdução
então, a empresa já produziu dezenas de aplicações de negócios grandes com a biblioteca e
ela provou sua capacidade de resolver problemas difíceis com facilidade.
A geração seguinte da biblioteca, Toolkit IT Mill Release 4, foi lançada em 2006. Ela introduziu
uma engine de apresentação baseada em AJAX totalmente nova. Isso permitiu o desenvolvimento
de aplicações AJAX, sem a necessidade de se preocupar com a comunicação entre o cliente e
o servidor.
1.5.1. Release 5 Aberta
O Toolkit IT Mill 5, lançado inicialmente no final de 2007, deu um passo significativo no AJAX.
A renderização da interface de usuário no lado cliente foi totalmente rescrita usando GWT, o
Google Web Toolkit.
O Toolkit IT Mill 5 introduziu muitas melhorias significativas tanto na API do lado servidor quanto
na funcionalidade. Rescrever a engine do lado cliente com GWT permitiu o uso de Java, tanto
no lado cliente quanto no servidor. A transição de JavaScript para GWT tornou o desenvolvimento
e integração de componentes customizados e a customização de componentes existentes muito
mais fácil do que antes. Também permitiu a fácil integração de componentes GWT existentes.
A adoção de GWT no lado cliente não causou, por si só, qualquer alteração na API do lado
servidor, porque GWT é uma tecnologia de navegador que está bem escondida por trás da API.
A tematização também foi completamente revista no Toolkit IT Mill 5.
A Release 5 foi publicada sob a Licença Apache 2, uma licença de código aberto sem restrições
para expandir rapidamente a base de usuários e tornar a formação de uma comunidade de
desenvolvedores possível.
1.5.2. Nascimento do Release Vaadin 6
Toolkit IT Mill foi rebatizado para Framework Vaadin, ou Vaadin em suma, na primavera de 2009.
Posteriormente, IT Mill, a companhia, também foi rebatizada como Vaadin Ltd. Vaadin significa
uma rena adulta fêmea semi-domesticada das montanhas na Finlândia.
Com o Vaadin 6, o número de desenvolvedores que usam o framework explodiu. Juntamente
com o lançamento, o Plugin Vaadin para Eclipse foi lançado, ajudando a criação de projetos
Vaadin. A introdução do Diretório Vaadin no início de 2010 deu-lhe um novo impulso, com o
número de componentes disponíveis multiplicado quase da noite para o dia. Muitos dos
componentes originalmente experimentais têm, desde então, amadurecido e agora são usados
por milhares de desenvolvedores. Em 2013, estamos vendo um enorme crescimento no
ecossistema em torno do Vaadin. O tamanho da comunidade de usuários, pelo menos se medido
pela atividade do fórum, já ultrapassou os frameworks concorrentes de lado servidor e até mesmo
GWT.
1.5.3. A Importante Revisão com Vaadin 7
O Vaadin 7 é uma revisão importante que muda a API Vaadin muito mais do que o Vaadin 6 fez.
É certamente mais orientado à web que Vaadin 6. Estamos fazendo todo o possível para ajudar
a ascensão do Vaadin no universo web. Parte desse trabalho é fácil e quase rotineiro - correção
de bugs e implementação de funcionalidades. Mas ir além também requer pé firme. Esse foi um
dos objetivos do Vaadin 7 - redesenhar o produto para que a nova arquitetura permita ao Vaadin
alcançar muitos desafios de longa data. Muitas das mudanças requereram romper a
compatibilidade da API com Vaadin 6, especialmente no lado cliente. Mas elas foram feitas com
um forte desejo de evitar carregar peso legado desnecessário para um futuro distante. Vaadin
28 Release 5 Aberta

31. Introdução
7 inclui uma camada de compatibilidade para tornar sua adoção em aplicações existentes mais
fácil.
A inclusão do Google Web Toolkit no Vaadin 7 é um desenvolvimento significativo, uma vez que
isso significa que agora fornecemos suporte para GWT também. Quando o Google abriu o
desenvolvimento GWT no Verão de 2012, a Vaadin (a companhia) se juntou ao novo comitê de
direção GWT. Como membro do comitê, Vaadin pode trabalhar para o sucesso do GWT como
uma fundação da comunidade de desenvolvimento Java web.
A Importante Revisão com Vaadin 7 29

32. 30