Thanks, we value your feedback!

5.9. TextField

TextField is one of the most commonly used user interface components. It is a Field component that allows entering textual values using keyboard.

The following example creates a simple text field:

// Create a text field
TextField tf = new TextField("A Field");
// Put some initial content in it
tf.setValue("Stuff in the field");

The result is shown in Figure 5.20, “TextField Example”.

Figure 5.20. TextField Example

TextField Example

Value changes are handled with a Property.ValueChangeListener, as in most other fields. The value can be acquired with getValue() directly from the text field, as is done in the example below, or from the property reference of the event.

// Handle changes in the value
tf.addValueChangeListener(new Property.ValueChangeListener() {
    public void valueChange(ValueChangeEvent event) {
        // Assuming that the value type is a String
        String value = (String) event.getProperty().getValue();

        // Do something with the value"Value is: " + value);

// Fire value changes immediately when the field loses focus

As with other event listeners, you can use lambda expression with one parameter to handle the events in Java 8.

Much of the API of TextField is defined in AbstractTextField, which allows different kinds of text input fields, such as rich text editors, which do not share all the features of the single-line text fields.

Figure 5.21. Text Field Class Relationships

Text Field Class Relationships

5.9.1. Data Binding

TextField edits String values, but you can bind it to any property type that has a proper converter, as described in Section 9.2.3, “Converting Between Property Type and Representation”.

// Have an initial data model. As Double is unmodificable and
// doesn't support assignment from String, the object is
// reconstructed in the wrapper when the value is changed.
Double trouble = 42.0;
// Wrap it in a property data source
final ObjectProperty<Double> property =
    new ObjectProperty<Double>(trouble);
// Create a text field bound to it
// (StringToDoubleConverter is used automatically)
TextField tf = new TextField("The Answer", property);

// Show that the value is really written back to the
// data source when edited by user.
Label feedback = new Label(property);
feedback.setCaption("The Value");

When you put a Table in editable mode or create fields with a FieldGroup, the DefaultFieldFactory creates a TextField for almost every property type by default. You often need to make a custom factory to customize the creation and to set the field tooltip, validation, formatting, and so on.

See Chapter 9, Binding Components to Data for more details on data binding, field factories for Table in Section 5.21.3, “Editing the Values in a Table”, and Section 9.4, “Creating Forms by Binding Fields to Items” regarding forms.

5.9.2. String Length

The setMaxLength() method sets the maximum length of the input string so that the browser prevents the user from entering a longer one. As a security feature, the input value is automatically truncated on the server-side, as the maximum length setting could be bypassed on the client-side. The maximum length property is defined at AbstractTextField level.

Notice that the maximum length setting does not affect the width of the field. You can set the width with setWidth(), as with other components. Using em widths is recommended to better approximate the proper width in relation to the size of the used font. There is no standard way in HTML for setting the width exactly to a number of letters (in a monospaced font). You can trick your way around this restriction by putting the text field in an undefined-width VerticalLayout together with an undefined-width Label that contains a sample text, and setting the width of the text field as 100%. The layout will get its width from the label, and the text field will use that.

5.9.3. Handling Null Values

As with any field, the value of a TextField can be set as null. This occurs most commonly when you create a new field without setting a value for it or bind the field value to a data source that allows null values. In such case, you might want to show a special value that stands for the null value. You can set the null representation with the setNullRepresentation() method. Most typically, you use an empty string for the null representation, unless you want to differentiate from a string that is explicitly empty. The default null representation is "null", which essentially warns that you may have forgotten to initialize your data objects properly.

The setNullSettingAllowed() controls whether the user can actually input a null value by using the null value representation. If the setting is false, which is the default, inputting the null value representation string sets the value as the literal value of the string, not null. This default assumption is a safeguard for data sources that may not allow null values.

// Have a property with null value
ObjectProperty<Double> dataModel =
    new ObjectProperty<Double>(new Double(0.0));
dataModel.setValue(null); // Have to set it null here

// Create a text field bound to the null data
TextField tf = new TextField("Field Energy (J)", dataModel);
tf.setNullRepresentation("-- null-point --");

// Allow user to input the null value by its representation

The Label, which is bound to the value of the TextField, displays a null value as empty. The resulting user interface is shown in Figure 5.22, “Null Value Representation”.

Figure 5.22. Null Value Representation

Null Value Representation

5.9.4. Text Change Events

Often you want to receive a change event immediately when the text field value changes. The immediate mode is not literally immediate, as the changes are transmitted only after the field loses focus. In the other extreme, using keyboard events for every keypress would make typing unbearably slow and also processing the keypresses is too complicated for most purposes. Text change events are transmitted asynchronously soon after typing and do not block typing while an event is being processed.

Text change events are received with a TextChangeListener, as is done in the following example that demonstrates how to create a text length counter:

// Text field with maximum length
final TextField tf = new TextField("My Eventful Field");
tf.setValue("Initial content");

// Counter for input length
final Label counter = new Label();
counter.setValue(tf.getValue().length() +
                 " of " + tf.getMaxLength());

// Display the current length interactively in the counter
tf.addTextChangeListener(new TextChangeListener() {
    public void textChange(TextChangeEvent event) {
        int len = event.getText().length();
        counter.setValue(len + " of " + tf.getMaxLength());

// The lazy mode is actually the default

The result is shown in Figure 5.23, “Text Change Events”.

Figure 5.23. Text Change Events

Text Change Events

The text change event mode defines how quickly the changes are transmitted to the server and cause a server-side event. Lazier change events allow sending larger changes in one event if the user is typing fast, thereby reducing server requests.

You can set the text change event mode of a TextField with setTextChangeEventMode(). The allowed modes are defined in TextChangeEventMode enum and are as follows:

TextChangeEventMode.LAZY (default)

An event is triggered when there is a pause in editing the text. The length of the pause can be modified with setInputEventTimeout(). As with the TIMEOUT mode, a text change event is forced before a possible ValueChangeEvent, even if the user did not keep a pause while entering the text.

This is the default mode.


A text change in the user interface causes the event to be communicated to the application after a timeout period. If more changes are made during this period, the event sent to the server-side includes the changes made up to the last change. The length of the timeout can be set with setInputEventTimeout().

If a ValueChangeEvent would occur before the timeout period, a TextChangeEvent is triggered before it, on the condition that the text content has changed since the previous TextChangeEvent.


An event is triggered immediately for every change in the text content, typically caused by a key press. The requests are separate and are processed sequentially one after another. Change events are nevertheless communicated asynchronously to the server, so further input can be typed while event requests are being processed.

5.9.5. CSS Style Rules

.v-textfield { }

The HTML structure of TextField is extremely simple, consisting only of an element with the v-textfield style.

For example, the following custom style uses dashed border:

.v-textfield-dashing {
    border:     thin dashed;
    background: white; /* Has shading image by default */

The result is shown in Figure 5.24, “Styling TextField with CSS”.

Figure 5.24. Styling TextField with CSS

Styling TextField with CSS

The style name for TextField is also used in several components that contain a text input field, even if the text input is not an actual TextField. This ensures that the style of different text input boxes is similar.

1. Introduction
1.1. Overview
1.2. Example Application Walkthrough
1.3. Support for the Eclipse IDE
1.4. Goals and Philosophy
1.5. Background
2. Getting Started with Vaadin
2.1. Overview
2.2. Setting up the Development Environment
2.2.1. Installing Java SDK
2.2.2. Installing Eclipse IDE
2.2.3. Installing Apache Tomcat
2.2.4. Firefox and Firebug
2.3. Overview of Vaadin Libraries
2.4. Vaadin Plugin for Eclipse
2.4.1. Installing the Vaadin Plugin
2.4.2. Updating the Plugins
2.4.3. Updating the Vaadin Libraries
2.5. Creating and Running a Project with Eclipse
2.5.1. Creating the Project
2.5.2. Exploring the Project
2.5.3. Coding Tips for Eclipse
2.5.4. Setting Up and Starting the Web Server
2.5.5. Running and Debugging
2.6. Using Vaadin with Maven
2.6.1. Working from Command-Line
2.6.2. Compiling and Running the Application
2.6.3. Using Add-ons and Custom Widget Sets
2.7. Creating a Project with NetBeans IDE
2.7.1. Maven Project from a Vaadin Archetype
2.8. Creating a Project with IntelliJ IDEA
2.8.1. Configuring an Application Server
2.8.2. Creating a Vaadin Web Application Project
2.8.3. Creating a Maven Project
2.9. Vaadin Installation Package
2.9.1. Package Contents
2.9.2. Installing the Libraries
2.10. Using Vaadin with Scala
2.10.1. Defining Listeners with Lambda Expressions
3. Architecture
3.1. Overview
3.2. Technological Background
3.2.1. HTML and JavaScript
3.2.2. Styling with CSS and Sass
3.2.3. AJAX
3.2.4. Google Web Toolkit
3.2.5. Java Servlets
3.3. Client-Side Engine
3.4. Events and Listeners
4. Writing a Server-Side Web Application
4.1. Overview
4.2. Building the UI
4.2.1. Application Architecture
4.2.2. Compositing Components
4.2.3. View Navigation
4.2.4. Accessing UI, Page, Session, and Service
4.3. Designing UIs Declaratively
4.3.1. Declarative Syntax
4.3.2. Component Elements
4.3.3. Component Attributes
4.3.4. Component Identifiers
4.3.5. Using Designs in Code
4.4. Handling Events with Listeners
4.4.1. Using Anonymous Classes
4.4.2. Handling Events in Java 8
4.4.3. Implementing a Listener in a Regular Class
4.4.4. Differentiating Between Event Sources
4.5. Images and Other Resources
4.5.1. Resource Interfaces and Classes
4.5.2. File Resources
4.5.3. Class Loader Resources
4.5.4. Theme Resources
4.5.5. Stream Resources
4.6. Handling Errors
4.6.1. Error Indicator and Message
4.6.2. Customizing System Messages
4.6.3. Handling Uncaught Exceptions
4.7. Notifications
4.7.1. Notification Type
4.7.2. Customizing Notifications
4.7.3. Styling with CSS
4.8. Application Lifecycle
4.8.1. Deployment
4.8.2. Vaadin Servlet, Portlet, and Service
4.8.3. User Session
4.8.4. Loading a UI
4.8.5. UI Expiration
4.8.6. Closing UIs Explicitly
4.8.7. Session Expiration
4.8.8. Closing a Session
4.9. Deploying an Application
4.9.1. Creating Deployable WAR in Eclipse
4.9.2. Web Application Contents
4.9.3. Web Servlet Class
4.9.4. Using a web.xml Deployment Descriptor
4.9.5. Servlet Mapping with URL Patterns
4.9.6. Other Servlet Configuration Parameters
4.9.7. Deployment Configuration
5. User Interface Components
5.1. Overview
5.2. Interfaces and Abstractions
5.2.1. Component Interface
5.2.2. AbstractComponent
5.3. Common Component Features
5.3.1. Caption
5.3.2. Description and Tooltips
5.3.3. Enabled
5.3.4. Icon
5.3.5. Locale
5.3.6. Read-Only
5.3.7. Style Name
5.3.8. Visible
5.3.9. Sizing Components
5.3.10. Managing Input Focus
5.4. Field Components
5.4.1. Field Interface
5.4.2. Data Binding and Conversions
5.4.3. Handling Field Value Changes
5.4.4. Field Buffering
5.4.5. Field Validation
5.5. Selection Components
5.5.1. Binding Selection Components to Data
5.5.2. Adding New Items
5.5.3. Item Captions
5.5.4. Getting and Setting Selection
5.5.5. Handling Selection Changes
5.5.6. Allowing Adding New Items
5.5.7. Multiple Selection
5.5.8. Item Icons
5.6. Component Extensions
5.7. Label
5.7.1. Text Width and Wrapping
5.7.2. Content Mode
5.7.3. Spacing with a Label
5.7.4. Data Binding
5.7.5. CSS Style Rules
5.8. Link
5.9. TextField
5.9.1. Data Binding
5.9.2. String Length
5.9.3. Handling Null Values
5.9.4. Text Change Events
5.9.5. CSS Style Rules
5.10. TextArea
5.11. PasswordField
5.12. RichTextArea
5.13. Date and Time Input with DateField
5.13.1. PopupDateField
5.13.2. InlineDateField
5.13.3. Date and Time Resolution
5.13.4. DateField Locale
5.13.5. Week Numbers
5.14. Button
5.15. CheckBox
5.16. ComboBox
5.16.1. Filtered Selection
5.17. ListSelect
5.18. NativeSelect
5.19. OptionGroup
5.19.1. Disabling Items
5.20. TwinColSelect
5.21. Table
5.21.1. Selecting Items in a Table
5.21.2. Table Features
5.21.3. Editing the Values in a Table
5.21.4. Column Headers and Footers
5.21.5. Generated Table Columns
5.21.6. Formatting Table Columns
5.21.7. CSS Style Rules
5.22. Tree
5.23. TreeTable
5.23.1. Expanding and Collapsing Items
5.24. Grid
5.24.1. Overview
5.24.2. Binding to Data
5.24.3. Handling Selection Changes
5.24.4. Configuring Columns
5.24.5. Generating Columns
5.24.6. Column Renderers
5.24.7. Header and Footer
5.24.8. Filtering
5.24.9. Sorting
5.24.10. Editing
5.24.11. Programmatic Scrolling
5.24.12. Generating Row or Cell Styles
5.24.13. Styling with CSS
5.25. MenuBar
5.26. Upload
5.27. ProgressBar
5.28. Slider
5.29. PopupView
5.30. Calendar
5.30.1. Date Range and View Mode
5.30.2. Calendar Events
5.30.3. Getting Events from a Container
5.30.4. Implementing an Event Provider
5.30.5. Styling a Calendar
5.30.6. Visible Hours and Days
5.30.7. Drag and Drop
5.30.8. Using the Context Menu
5.30.9. Localization and Formatting
5.30.10. Customizing the Calendar
5.30.11. Backward and Forward Navigation
5.30.12. Date Click Handling
5.30.13. Handling Week Clicks
5.30.14. Handling Event Clicks
5.30.15. Event Dragging
5.30.16. Handling Drag Selection
5.30.17. Resizing Events
5.31. Composition with CustomComponent
5.32. Composite Fields with CustomField
5.33. Embedded Resources
5.33.1. Embedded Image
5.33.2. Adobe Flash Graphics
5.33.3. BrowserFrame
5.33.4. Generic Embedded Objects
6. Managing Layout
6.1. Overview
6.2. UI, Window, and Panel Content
6.3. VerticalLayout and HorizontalLayout
6.3.1. Properties or Attributes
6.3.2. Spacing in Ordered Layouts
6.3.3. Sizing Contained Components
6.4. GridLayout
6.4.1. Sizing Grid Cells
6.5. FormLayout
6.5.1. CSS Style Rules
6.6. Panel
6.6.1. Scrolling the Panel Content
6.7. Sub-Windows
6.7.1. Opening and Closing Sub-Windows
6.7.2. Window Positioning
6.7.3. Scrolling Sub-Window Content
6.7.4. Modal Sub-Windows
6.8. HorizontalSplitPanel and VerticalSplitPanel
6.9. TabSheet
6.9.1. Adding Tabs
6.9.2. Tab Objects
6.9.3. Tab Change Events
6.9.4. Enabling and Handling Closing Tabs
6.9.5. CSS Style Rules
6.10. Accordion
6.11. AbsoluteLayout
6.11.1. Placing a Component in an Area
6.11.2. Proportional Coordinates
6.11.3. Styling with CSS
6.12. CssLayout
6.12.1. CSS Injection
6.12.2. Browser Compatibility
6.13. Layout Formatting
6.13.1. Layout Size
6.13.2. Expanding Components
6.13.3. Layout Cell Alignment
6.13.4. Layout Cell Spacing
6.13.5. Layout Margins
6.14. Custom Layouts
7. Vaadin Designer
7.1. Overview
7.2. Installation
7.2.1. Installing Eclipse and Plug-Ins
7.2.2. License
7.2.3. Uninstalling
7.3. Getting Started
7.3.1. Creating a Design
7.3.2. Vaadin Designer GUI Overview
7.4. Designing
7.4.1. About Layouts
7.4.2. Starting from Blank
7.4.3. Using Templates
7.4.4. Adding Components
7.4.5. Previewing
7.5. Theming and Styling
7.5.1. Theme Based on Valo
7.5.2. Theme File
7.6. Wiring It Up
7.6.1. Declarative Code
7.6.2. Java Code
7.7. Limitations
8. Themes
8.1. Overview
8.2. Introduction to Cascading Style Sheets
8.2.1. Applying CSS to HTML
8.2.2. Basic CSS Rules
8.2.3. Matching by Element Class
8.2.4. Matching by Descendant Relationship
8.2.5. Importance of Cascading
8.2.6. Style Class Hierarchy of a Vaadin UI
8.2.7. Notes on Compatibility
8.3. Syntactically Awesome Stylesheets (Sass)
8.3.1. Sass Overview
8.3.2. Sass Basics with Vaadin
8.4. Compiling Sass Themes
8.4.1. Compiling On the Fly
8.4.2. Compiling in Eclipse
8.4.3. Compiling with Maven
8.4.4. Compiling in Command-line
8.4.5. Compiling with Ant
8.5. Creating and Using Themes
8.5.1. Sass Themes
8.5.2. Plain Old CSS Themes
8.5.3. Styling Standard Components
8.5.4. Built-in Themes
8.5.5. Add-on Themes
8.6. Creating a Theme in Eclipse
8.7. Valo Theme
8.7.1. Basic Use
8.7.2. Common Settings
8.7.3. Valo Mixins and Functions
8.7.4. Valo Fonts
8.7.5. Component Styles
8.7.6. Theme Optimization
8.8. Font Icons
8.8.1. Loading Icon Fonts
8.8.2. Basic Use
8.8.3. Using Font icons in HTML
8.8.4. Using Font Icons in Other Text
8.8.5. Custom Font Icons
8.9. Custom Fonts
8.9.1. Loading Local Fonts
8.9.2. Loading Web Fonts
8.9.3. Using Custom Fonts
8.10. Responsive Themes
9. Binding Components to Data
9.1. Overview
9.2. Properties
9.2.1. Property Viewers and Editors
9.2.2. ObjectProperty Implementation
9.2.3. Converting Between Property Type and Representation
9.2.4. Implementing the Property Interface
9.3. Holding properties in Items
9.3.1. The PropertysetItem Implementation
9.3.2. Wrapping a Bean in a BeanItem
9.4. Creating Forms by Binding Fields to Items
9.4.1. Simple Binding
9.4.2. Using a FieldFactory to Build and Bind Fields
9.4.3. Binding Member Fields
9.4.4. Buffering Forms
9.4.5. Binding Fields to a Bean
9.4.6. Bean Validation
9.5. Collecting Items in Containers
9.5.1. Basic Use of Containers
9.5.2. Container Subinterfaces
9.5.3. IndexedContainer
9.5.4. BeanContainer
9.5.5. BeanItemContainer
9.5.6. Iterating Over a Container
9.5.7. GeneratedPropertyContainer
9.5.8. Filterable Containers
10. Vaadin SQLContainer
10.1. Architecture
10.2. Getting Started with SQLContainer
10.2.1. Creating a connection pool
10.2.2. Creating the TableQuery Query Delegate
10.2.3. Creating the Container
10.3. Filtering and Sorting
10.3.1. Filtering
10.3.2. Sorting
10.4. Editing
10.4.1. Adding items
10.4.2. Fetching generated row keys
10.4.3. Version column requirement
10.4.4. Auto-commit mode
10.4.5. Modified state
10.5. Caching, Paging and Refreshing
10.5.1. Container Size
10.5.2. Page Length and Cache Size
10.5.3. Refreshing the Container
10.5.4. Cache Flush Notification Mechanism
10.6. Referencing Another SQLContainer
10.7. Making Freeform Queries
10.8. Non-Implemented Methods
10.9. Known Issues and Limitations
11. Advanced Web Application Topics
11.1. Handling Browser Windows
11.1.1. Opening Popup Windows
11.1.2. Closing Popup Windows
11.2. Embedding UIs in Web Pages
11.2.1. Embedding Inside a div Element
11.2.2. Embedding Inside an iframe Element
11.2.3. Cross-Site Embedding with the Vaadin XS Add-on
11.3. Debug Mode and Window
11.3.1. Enabling the Debug Mode
11.3.2. Opening the Debug Window
11.3.3. Debug Message Log
11.3.4. General Information
11.3.5. Inspecting Component Hierarchy
11.3.6. Communication Log
11.3.7. Debug Modes
11.4. Request Handlers
11.5. Shortcut Keys
11.5.1. Shortcut Keys for Default Buttons
11.5.2. Field Focus Shortcuts
11.5.3. Generic Shortcut Actions
11.5.4. Supported Key Codes and Modifier Keys
11.6. Printing
11.6.1. Printing the Browser Window
11.6.2. Opening a Print Window
11.6.3. Printing PDF
11.7. Google App Engine Integration
11.8. Common Security Issues
11.8.1. Sanitizing User Input to Prevent Cross-Site Scripting
11.9. Navigating in an Application
11.9.1. Setting Up for Navigation
11.9.2. Implementing a View
11.9.3. Handling URI Fragment Path
11.10. Advanced Application Architectures
11.10.1. Layered Architectures
11.10.2. Model-View-Presenter Pattern
11.11. Managing URI Fragments
11.11.1. Setting the URI Fragment
11.11.2. Reading the URI Fragment
11.11.3. Listening for URI Fragment Changes
11.11.4. Supporting Web Crawling
11.12. Drag and Drop
11.12.1. Handling Drops
11.12.2. Dropping Items On a Tree
11.12.3. Dropping Items On a Table
11.12.4. Accepting Drops
11.12.5. Dragging Components
11.12.6. Dropping on a Component
11.12.7. Dragging Files from Outside the Browser
11.13. Logging
11.14. JavaScript Interaction
11.14.1. Calling JavaScript
11.14.2. Handling JavaScript Function Callbacks
11.15. Accessing Session-Global Data
11.15.1. Passing References Around
11.15.2. Overriding attach()
11.15.3. ThreadLocal Pattern
11.16. Server Push
11.16.1. Installing the Push Support
11.16.2. Enabling Push for a UI
11.16.3. Accessing UI from Another Thread
11.16.4. Broadcasting to Other Users
11.17. Vaadin CDI Add-on
11.17.1. CDI Overview
11.17.2. Installing Vaadin CDI Add-on
11.17.3. Preparing Application for CDI
11.17.4. Injecting a UI with @CDIUI
11.17.5. Scopes
11.17.6. Deploying CDI UIs and Servlets
11.17.7. View Navigation
11.17.8. CDI Events
11.18. Vaadin Spring Add-on
11.18.1. Spring Overview
11.18.2. Quick Start with Vaadin Spring Boot
11.18.3. Installing Vaadin Spring Add-on
11.18.4. Preparing Application for Spring
11.18.5. Injecting a UI with @SpringUI
11.18.6. Scopes
11.18.7. View Navigation
11.18.8. Access Control
11.18.9. Deploying Spring UIs and Servlets
12. Portal Integration
12.1. Overview
12.2. Creating a Generic Portlet in Eclipse
12.2.1. Creating a Project with Vaadin Plugin
12.3. Developing Vaadin Portlets for Liferay
12.3.1. Defining Liferay Profile for Maven
12.3.2. Creating a Portlet Project with Maven
12.3.3. Creating a Portlet Project in Liferay IDE
12.3.4. Removing the Bundled Installation
12.3.5. Installing Vaadin Resources
12.4. Portlet UI
12.5. Deploying to a Portal
12.5.1. Portlet Deployment Descriptor
12.5.2. Liferay Portlet Descriptor
12.5.3. Liferay Display Descriptor
12.5.4. Liferay Plugin Package Properties
12.5.5. Using a Single Widget Set
12.5.6. Building the WAR Package
12.5.7. Deploying the WAR Package
12.6. Vaadin IPC for Liferay
12.6.1. Installing the Add-on
12.6.2. Basic Communication
12.6.3. Considerations
12.6.4. Communication Through Session Attributes
12.6.5. Serializing and Encoding Data
12.6.6. Communicating with Non-Vaadin Portlets
13. Client-Side Vaadin Development
13.1. Overview
13.2. Installing the Client-Side Development Environment
13.3. Client-Side Module Descriptor
13.3.1. Specifying a Stylesheet
13.3.2. Limiting Compilation Targets
13.4. Compiling a Client-Side Module
13.4.1. Vaadin Compiler Overview
13.4.2. Compiling in Eclipse
13.4.3. Compiling with Ant
13.4.4. Compiling with Maven
13.5. Creating a Custom Widget
13.5.1. A Basic Widget
13.5.2. Using the Widget
13.6. Debugging Client-Side Code
13.6.1. Launching Development Mode
13.6.2. Launching SuperDevMode
13.6.3. Debugging Java Code in Chrome
14. Client-Side Applications
14.1. Overview
14.2. Client-Side Module Entry-Point
14.2.1. Module Descriptor
14.3. Compiling and Running a Client-Side Application
14.4. Loading a Client-Side Application
15. Client-Side Widgets
15.1. Overview
15.2. GWT Widgets
15.3. Vaadin Widgets
15.4. Grid
15.4.1. Renderers
16. Integrating with the Server-Side
16.1. Overview
16.2. Starting It Simple With Eclipse
16.2.1. Creating a Widget
16.2.2. Compiling the Widget Set
16.3. Creating a Server-Side Component
16.3.1. Basic Server-Side Component
16.4. Integrating the Two Sides with a Connector
16.4.1. A Basic Connector
16.4.2. Communication with the Server-Side
16.5. Shared State
16.5.1. Accessing Shared State on Server-Side
16.5.2. Handing Shared State in a Connector
16.5.3. Handling Property State Changes with @OnStateChange
16.5.4. Delegating State Properties to Widget
16.5.5. Referring to Components in Shared State
16.5.6. Sharing Resources
16.6. RPC Calls Between Client- and Server-Side
16.6.1. RPC Calls to the Server-Side
16.7. Component and UI Extensions
16.7.1. Server-Side Extension API
16.7.2. Extension Connectors
16.8. Styling a Widget
16.8.1. Determining the CSS Class
16.8.2. Default Stylesheet
16.9. Component Containers
16.10. Advanced Client-Side Topics
16.10.1. Client-Side Processing Phases
16.11. Creating Add-ons
16.11.1. Exporting Add-on in Eclipse
16.11.2. Building Add-on with Ant
16.12. Migrating from Vaadin 6
16.12.1. Quick (and Dirty) Migration
16.13. Integrating JavaScript Components and Extensions
16.13.1. Example JavaScript Library
16.13.2. A Server-Side API for a JavaScript Component
16.13.3. Defining a JavaScript Connector
16.13.4. RPC from JavaScript to Server-Side
17. Using Vaadin Add-ons
17.1. Overview
17.2. Downloading Add-ons from Vaadin Directory
17.2.1. Compiling Widget Sets with an Ant Script
17.3. Installing Add-ons in Eclipse with Ivy
17.4. Using Add-ons in a Maven Project
17.4.1. Adding a Dependency
17.4.2. Compiling the Project Widget Set
17.4.3. Enabling Widget Set Compilation
17.5. Installing Commercial Vaadin Add-on Licence
17.5.1. Obtaining License Keys
17.5.2. Installing License Key in License File
17.5.3. Passing License Key as System Property
17.6. Troubleshooting
18. Vaadin Charts
18.1. Overview
18.2. Installing Vaadin Charts
18.2.1. Maven Dependency
18.2.2. Ivy Dependency
18.2.3. Installing License Key
18.3. Basic Use
18.3.1. Basic Chart Configuration
18.3.2. Plot Options
18.3.3. Chart Data Series
18.3.4. Axis Configuration
18.3.5. Displaying Multiple Series
18.3.6. Mixed Type Charts
18.3.7. 3D Charts
18.3.8. Chart Themes
18.4. Chart Types
18.4.1. Line and Spline Charts
18.4.2. Area Charts
18.4.3. Column and Bar Charts
18.4.4. Error Bars
18.4.5. Box Plot Charts
18.4.6. Scatter Charts
18.4.7. Bubble Charts
18.4.8. Pie Charts
18.4.9. Gauges
18.4.10. Solid Gauges
18.4.11. Area and Column Range Charts
18.4.12. Polar, Wind Rose, and Spiderweb Charts
18.4.13. Funnel and Pyramid Charts
18.4.14. Waterfall Charts
18.4.15. Heat Maps
18.4.16. Tree Maps
18.4.17. Polygons
18.5. Chart Configuration
18.5.1. Plot Options
18.5.2. Axes
18.5.3. Legend
18.5.4. Formatting Labels
18.6. Chart Data
18.6.1. List Series
18.6.2. Generic Data Series
18.6.3. Range Series
18.6.4. Container Data Series
18.6.5. Drill-Down
18.7. Advanced Uses
18.7.1. Server-Side Rendering and Exporting
18.8. Timeline
18.8.1. Graph types
18.8.2. Interaction Elements
18.8.3. Event Markers
18.8.4. Efficiency
18.8.5. Data Source Requirements
18.8.6. Events and Listeners
18.8.7. Configurability
18.8.8. Localization
18.8.9. Timeline Tutorial
19. Vaadin JPAContainer
19.1. Overview
19.2. Installing
19.2.1. Downloading the Package
19.2.2. Installation Package Content
19.2.3. Downloading with Maven
19.2.4. Including Libraries in Your Project
19.2.5. Persistence Configuration
19.2.6. Troubleshooting
19.3. Defining a Domain Model
19.3.1. Persistence Metadata
19.4. Basic Use of JPAContainer
19.4.1. Creating JPAContainer with JPAContainerFactory
19.4.2. Creating and Accessing Entities
19.4.3. Nested Properties
19.4.4. Hierarchical Container
19.5. Entity Providers
19.5.1. Built-In Entity Providers
19.5.2. Using JNDI Entity Providers in JEE6 Environment
19.5.3. Entity Providers as Enterprise Beans
19.6. Filtering JPAContainer
19.7. Querying with the Criteria API
19.7.1. Filtering the Query
19.7.2. Compatibility
19.8. Automatic Form Generation
19.8.1. Configuring the Field Factory
19.8.2. Using the Field Factory
19.8.3. Master-Detail Editor
19.9. Using JPAContainer with Hibernate
19.9.1. Lazy loading
19.9.2. The EntityManager-Per-Request pattern
19.9.3. Joins in Hibernate vs EclipseLink
20. Mobile Applications with TouchKit
20.1. Overview
20.2. Considerations Regarding Mobile Browsing
20.2.1. Mobile Human Interface
20.2.2. Bandwidth and Performance
20.2.3. Mobile Features
20.2.4. Compatibility
20.3. Installing Vaadin TouchKit
20.3.1. Installing as Ivy Dependency
20.3.2. Defining the Maven Dependency
20.3.3. Installing the Zip Package
20.4. Importing the Parking Demo
20.5. Creating a New TouchKit Project
20.5.1. Using the Maven Archetype
20.5.2. Starting from a New Eclipse Project
20.6. Elements of a TouchKit Application
20.6.1. The Servlet Class
20.6.2. Defining Servlet and UI with web.xml Deployment Descriptor
20.6.3. TouchKit Settings
20.6.4. The UI
20.6.5. Mobile Widget Set
20.6.6. Mobile Theme
20.6.7. Using Font Icons
20.7. Mobile User Interface Components
20.7.1. NavigationView
20.7.2. Toolbar
20.7.3. NavigationManager
20.7.4. NavigationButton
20.7.5. Popover
20.7.6. SwipeView
20.7.7. Switch
20.7.8. VerticalComponentGroup
20.7.9. HorizontalButtonGroup
20.7.10. TabBarView
20.7.11. EmailField
20.7.12. NumberField
20.7.13. UrlField
20.8. Advanced Mobile Features
20.8.1. Providing a Fallback UI
20.8.2. Geolocation
20.8.3. Storing Data in the Local Storage
20.8.4. Uploading Content
20.9. Offline Mode
20.9.1. Enabling the Cache Manifest
20.9.2. Enabling Offline Mode
20.9.3. The Offline User Interface
20.9.4. Sending Data to Server
20.9.5. The Offline Theme
20.10. Building an Optimized Widget Set
20.10.1. Generating the Widget Map
20.10.2. Defining the Widget Loading Style
20.10.3. Applying the Custom Widget Map Generator
20.10.4. Deployment
20.11. Testing and Debugging on Mobile Devices
20.11.1. Debugging
21. Vaadin Spreadsheet
21.1. Overview
21.2. Installing Vaadin Spreadsheet
21.2.1. Installing as Ivy Dependency
21.2.2. Defining the Maven Dependency
21.2.3. Installing the Zip Package
21.2.4. Installing License Key
21.2.5. Compiling Widget Set
21.2.6. Compiling Theme
21.2.7. Importing the Demo
21.3. Basic Use
21.3.1. Creating a Spreadsheet
21.3.2. Working with Sheets
21.4. Spreadsheet Configuration
21.4.1. Spreadsheet Elements
21.4.2. Frozen Row and Column Panes
21.5. Cell Content and Formatting
21.5.1. Cell Formatting
21.5.2. Cell Font Style
21.5.3. Cell Comments
21.5.4. Merging Cells
21.5.5. Components in Cells
21.5.6. Hyperlinks
21.5.7. Popup Buttons in Cells
21.6. Context Menus
21.6.1. Default Context Menu
21.6.2. Custom Context Menus
21.7. Tables Within Spreadsheets
21.7.1. Creating a Table
21.7.2. Filtering With a Table
22. Vaadin TestBench
22.1. Overview
22.2. Quick Start
22.2.1. Installing License Key
22.2.2. Quick Start with Eclipse
22.2.3. Quick Start with Maven
22.3. Installing Vaadin TestBench
22.3.1. Test Development Setup
22.3.2. A Distributed Testing Environment
22.3.3. Installation Package Contents
22.3.4. TestBench Demo
22.3.5. Installing Browser Drivers
22.3.6. Test Node Configuration
22.4. Developing JUnit Tests
22.4.1. Basic Test Case Structure
22.4.2. Running JUnit Tests in Eclipse
22.5. Creating a Test Case
22.5.1. Test Setup
22.5.2. Basic Test Case Structure
22.5.3. Creating and Closing a Web Driver
22.6. Querying Elements
22.6.1. Generating Queries with Debug Window
22.6.2. Querying Elements by Component Type ($)
22.6.3. Non-Recursive Component Queries ($$)
22.6.4. Element Classes
22.6.5. ElementQuery Objects
22.6.6. Query Terminators
22.7. Element Selectors
22.7.1. Finding by ID
22.7.2. Finding by CSS Class
22.8. Special Testing Topics
22.8.1. Waiting for Vaadin
22.8.2. Testing Tooltips
22.8.3. Scrolling
22.8.4. Testing Notifications
22.8.5. Testing Context Menus
22.8.6. Profiling Test Execution Time
22.9. Creating Maintainable Tests
22.9.1. Increasing Selector Robustness
22.9.2. The Page Object Pattern
22.10. Taking and Comparing Screenshots
22.10.1. Screenshot Parameters
22.10.2. Taking Screenshots on Failure
22.10.3. Taking Screenshots for Comparison
22.10.4. Practices for Handling Screenshots
22.10.5. Known Compatibility Problems
22.11. Running Tests
22.11.1. Running Tests with Ant
22.11.2. Running Tests with Maven
22.12. Running Tests in a Distributed Environment
22.12.1. Running Tests Remotely
22.12.2. Starting the Hub
22.12.3. Node Service Configuration
22.12.4. Starting a Grid Node
22.12.5. Mobile Testing
22.13. Parallel Execution of Tests
22.13.1. Local Parallel Execution
22.13.2. Multi-Browser Execution in a Grid
22.14. Headless Testing
22.14.1. Basic Setup for Running Headless Tests
22.14.2. Running Headless Tests in a Distributed Environment
22.15. Behaviour-Driven Development
22.16. Integration Testing with Maven
22.16.1. Project Structure
22.16.2. Overview of Lifecycle
22.16.3. Overview of Configuration
22.16.4. Vaadin Plugin Configuration
22.16.5. Configuring Integration Testing
22.16.6. Configuring Test Server
22.17. Known Issues
22.17.1. Running Firefox Tests on Mac OS X
Need some help?


Upcoming trainings

The official Vaadin trainings are the best way to learn the framework and tools. We offer the following courses.

Vaadin FundamentalsRead more »
Advanced VaadinRead more »
Extending VaadinRead more »
Vaadin & JavaEERead more »


Learn more

For most of us, time is money and a support channel pays itself back in saved development time, developers' nerves and a faster time to market.