---
[[access-control-for-views]]
-Access control for views
-------------------------
+= Access control for views
The Navigator API provides a simple mechanism to allow or disallow
navigating to a View. Before a View is shown, each ViewChangeListener
---
[[accessing-web-page-and-browser-information]]
-Accessing web page and browser information
-------------------------------------------
+= Accessing web page and browser information
Vaadin 7 includes a new *Page* class offering access to various
client-side information and events concerning the web page and browser
---
[[adding-a-splash-sreen]]
-Adding a splash screen
-----------------------
+= Adding a splash screen
When a Vaadin application is loading a loading indicator is
automatically shown so the user knows something is happening. But what
---
[[broadcasting-messages-to-other-users]]
-Broadcasting messages to other users
-------------------------------------
+= Broadcasting messages to other users
In this tutorial we will create an application where any user can send a
broadcast message to all other active users. We will start from a
---
[[changing-theme-on-the-fly]]
-Changing theme on the fly
--------------------------
+= Changing theme on the fly
Starting from Vaadin 7.3, you can change themes in the application
without reloading the page. To do this, simply use the
---
[[choosing-input-field-components-wisely]]
-Choosing input field components wisely
---------------------------------------
+= Choosing input field components wisely
The core Vaadin framework has more than ten different input field
components. Choosing the right one can improve your application’s
---
[[cleaning-up-resources-in-a-ui]]
-Cleaning up resources in a UI
------------------------------
+= Cleaning up resources in a UI
Vaadin UIs that are open on the client side send a regular heartbeat
to the server to indicate they are still alive, even though there is no
---
[[component-add-on-project-setup-howto]]
-Component add-on project setup how-to
-------------------------------------
+= Component add-on project setup how-to
This how-to walks you through a complete setup for a project for
developing, building and publishing your own Vaadin UI component
---
[[configure-comboboxes-wisely]]
-Configure ComboBoxes wisely
----------------------------
+= Configure ComboBoxes wisely
The Vaadin *ComboBox* is a versatile input field with lots of settings
that change its behavior. The default settings are a good start, but are
not necessarily suitable for all situations. Configure your ComboBoxes
---
[[configure-input-fields-to-guide-data-entry]]
-Configure input fields to guide data entry
-------------------------------------------
+= Configure input fields to guide data entry
[[field-size]]
Field size
---
[[configuring-push-for-your-environment]]
-Configuring push for your environment
--------------------------------------
+= Configuring push for your environment
Server push and especially websockets are emerging technologies and not
all servers and browsers handle them correctly (or even close to
---
[[creating-a-bookmarkable-application-with-back-button-support]]
-Creating a bookmarkable application with back button support
-------------------------------------------------------------
+= Creating a bookmarkable application with back button support
Vaadin 7 comes with a new set of APIs to aid creation of navigation
within your application. The main concepts are *Navigator* and *View*,
---
[[creating-a-component-extension]]
-Creating a component extension
-------------------------------
+= Creating a component extension
In this tutorial we create a simple extension that can be attached to a
`PasswordField`, displaying a floating notification if the user's Caps
---
[[creating-a-servlet-3.0-application]]
-Creating a servlet 3.0 application
-----------------------------------
+= Creating a servlet 3.0 application
Servlet 3.0 introduces a `@WebServlet` annotation which can be used to
replace the traditional web.xml. The straightforward approach to create
---
[[creating-a-simple-component]]
-Creating a simple component
----------------------------
+= Creating a simple component
To make a component with a new client-side widget (as opposed to making
a server-side composite), you will need to make three things: the
---
[[creating-a-simple-component-container]]
-Creating a simple component container
--------------------------------------
+= Creating a simple component container
Components in Vaadin can be roughly split into two groups, `Component`{empty}s
and `ComponentContainer`{empty}s. ComponentContainers are Components in
---
[[creating-a-theme-using-sass]]
-Creating a theme using SASS
----------------------------
+= Creating a theme using SASS
Vaadin 7 comes with built in support for Sass, which can be thought of
as a preprocessor for CSS. From the Sass homepage:
---
[[creating-a-ui-extension]]
-Creating a UI extension
------------------------
+= Creating a UI extension
An *Extension* is an entity that is not a full-fledged UI component, but
is instead used to enhance or extend the functionality of an existing
---
[[creating-an-application-that-preserves-state-on-refresh]]
-Creating an application that preserves state on refresh
--------------------------------------------------------
+= Creating an application that preserves state on refresh
By default, Vaadin 7 does not preserve UI state when the browser page is
refreshed. This means that the instance number in this example is
---
[[creating-an-eclipse-project]]
-Creating an Eclipse project
----------------------------
+= Creating an Eclipse project
At the moment you have two options:
---
[[creating-multi-tab-applications]]
-Creating multi-tab applications
--------------------------------
+= Creating multi-tab applications
Every new request to the server gets a new session and UI instance.
Having the application open in separate tabs or windows means that the
---
[[creating-secure-vaadin-applications-using-jee6]]
-Creating secure Vaadin applications using JEE6
-----------------------------------------------
+= Creating secure Vaadin applications using JEE6
by Petter Holmström
---
[[customizing-component-theme-with-sass]]
-Customizing component theme with SASS
--------------------------------------
+= Customizing component theme with SASS
In addition to the general benefits Sass brings to the world of CSS in
Vaadin 7, the way themes are set up allows us to quite easily accomplish
---
[[customizing-the-startup-page-in-an-application]]
-Customizing the startup page in an application
-----------------------------------------------
+= Customizing the startup page in an application
In Vaadin 6, the startup page - used to bootstrap a new Vaadin UI
instance in the browser - was generated as a monolithic chunk of HTML
---
[[developing-portlets-for-the-websphere-portal-server]]
-Developing portlets for the Websphere Portal Server
----------------------------------------------------
+= Developing portlets for the Websphere Portal Server
When creating portlets for the Websphere Portal Server (aka WPS) you
have the choice between different frameworks
---
[[dynamically-injecting-css]]
-Dynamically injecting CSS
--------------------------
+= Dynamically injecting CSS
In most cases you will style your components using SASS or CSS and
create a theme for the application which you include with the `@Theme`
---
[[dynamically-updating-state-before-sending-changes-to-client]]
-Dynamically updating state before sending changes to client
------------------------------------------------------------
+= Dynamically updating state before sending changes to client
There are some cases where a server-side implementation must delay some
work until right before data is about to be sent to the client. Some
---
[[enable-and-disable-buttons-to-indicate-state]]
-Enable and disable buttons to indicate state
---------------------------------------------
+= Enable and disable buttons to indicate state
Most user interfaces have actions that can only be performed if certain
conditions are met. In other cases, the actions can be performed at any
---
[[enabling-server-push]]
-Enabling server push
---------------------
+= Enabling server push
The traditional way of communication between client and server in Vaadin
has been through XHR, i.e. AJAX requests. The client does a request to
---
[[exposing-server-side-api-to-javascript]]
-Exposing server-side API to JavaScript
---------------------------------------
+= Exposing server-side API to JavaScript
The new JavaScript integration functionality will allow you to easily
publish methods that can be called with JavaScript on the client side.
---
[[finding-the-current-ui-and-page-and-vaadin-session]]
-Finding the current UI and page and vaadin session
---------------------------------------------------
+= Finding the current UI and page and vaadin session
There are many cases where you need a reference to the active `UI`, `Page`
or `VaadinServiceSession`, for instance for showing notifications in a
click listener. It is possible to get a reference to the component from
---
[[generating-dynamic-resources-based-on-uri-or-parameters]]
-Generating dynamic resources based on URI or parameters
--------------------------------------------------------
+= Generating dynamic resources based on URI or parameters
You can dynamically generate responses based on e.g. query parameters by
creating your own `RequestHandler` and registering it with the session.
---
[[getting-started-on-netbeans]]
-Getting started on NetBeans
----------------------------
+= Getting started on NetBeans
*This page is for old NetBeans version. Take a look at
http://wiki.netbeans.org/VaadinPlugin1.0.0[New plugin in NetBeans wiki]*
---
[[handling-logout]]
-Handling logout
----------------
+= Handling logout
What should happen the user wants to log out from a Vaadin application
depends on how the user is stored when the user logged in.
---
[[i-b-getting-started-with-vaadin-spring-without-spring-boot]]
-I b - Getting started with Vaadin Spring without Spring Boot
-------------------------------------------------------------
+= I b - Getting started with Vaadin Spring without Spring Boot
Note: this tutorial applies to *Vaadin Spring 1.0.0 and later*
---
[[ii-injection-and-scopes]]
-II - Injection and scopes
--------------------------
+= II - Injection and scopes
In this tutorial we'll take a closer look at the @CDIUI annotation and
use CDI to inject some beans to our application.
---
[[integrating-a-javascript-component]]
-Integrating a JavaScript component
-----------------------------------
+= Integrating a JavaScript component
You can use an existing JavaScript component as a component in Vaadin by
creating a server-side API for the component as well as writing the
---
[[integrating-a-javascript-library-as-an-extension]]
-Integrating a JavaScript library as an extension
-------------------------------------------------
+= Integrating a JavaScript library as an extension
JavaScript can also be used for creating Extensions e.g. for integrating
existing JavaScript libraries. See link:CreatingAUIExtension.asciidoc[Creating a UI extension] for general information about Extensions. The main
---
[[integrating-an-existing-gwt-widget]]
-Integrating an existing GWT widget
-----------------------------------
+= Integrating an existing GWT widget
Integrating an existing, third party GWT widget usually just involves
creating a regular Vaadin component with a client-side connector that
---
[[integrating-vaadin-applications-with-other-technologies]]
-Integrating Vaadin Applications with other technologies
--------------------------------------------------------
+= Integrating Vaadin Applications with other technologies
[[preface]]
Preface
---
[[label-buttons-expressively]]
-Label buttons expressively
---------------------------
+= Label buttons expressively
People don’t read dialog box messages. They just click _“OK”_ or _“Yes”_
or whichever button that seems like the right choice to make the dialog
---
[[letting-the-user-download-a-file]]
-Letting The User Download A File
---------------------------------
+= Letting The User Download A File
Providing a file for download to the user might be trickier that what it
seems - the file should be downloaded instead of just opened by the
---
[[loading-testing-with-gatling]]
-Load testing with Gatling
--------------------------
+= Load testing with Gatling
http://gatling.io[Gatling] is a powerful tool for load testing. Compared
to WebDriver/Selenium/TestBench, it doesn't render the actual content,
---
[[mvc-basics-in-itmill-toolkit]]
-MVC Basics in IT Mill Toolkit
------------------------------
+= MVC Basics in IT Mill Toolkit
The Goal
^^^^^^^^
---
[[mark-required-fields-as-such]]
-Mark required fields as such
-----------------------------
+= Mark required fields as such
Don’t make your users guess which fields in your form are required. Mark
them as such:
---
[[opening-a-ui-in-a-popup-window]]
-Opening a UI in a popup window
-------------------------------
+= Opening a UI in a popup window
To open a new popup window in the browser showing another part of your
application, you can use the new `BrowserWindowOpener` extension. Any
---
[[optimizing-sluggish-ui]]
-Optimizing sluggish UI
-----------------------
+= Optimizing sluggish UI
Is your Vaadin application becoming sluggish? Yes, this can happen - it
is no secret. This can happen for every application, with every
---
[[optimizing-the-widget-set]]
-Optimizing the widget set
--------------------------
+= Optimizing the widget set
Vaadin contains a lot of components and most of those components
contains a client side part which is executed in the browser. Together
---
[[packaging-scss-or-css-in-an-add-on]]
-Packaging SCSS or CSS in an add-on
-----------------------------------
+= Packaging SCSS or CSS in an add-on
The add-on architecture of Vaadin enables you to easily create reusable
components and share them with the world. The add-on can be of various
This article was written before Vaadin 7.3, and is referring to the previous default theme, Reindeer. The visual appearance of read-only fields is different in the newer default theme, Valo. In Valo, read-only fields retain the border around the input field.
[[read-only-vs-disabled-fields]]
-Read-only vs Disabled fields
-----------------------------
+= Read-only vs Disabled fields
Vaadin input field components have both a _disabled_ and a _read-only_
state (which can be set through the *setEnabled(false)* and
---
[[remember-to-the-set-the-locale]]
-Remember to the set the locale
-------------------------------
+= Remember to the set the locale
The Locale of an application or an individual component dictates the
language and format used for displaying and parsing numbers and dates.
This includes things like names of months, 12 or 24 hour time formats,
---
[[right-align-comparable-numeric-fields]]
-Right-align comparable numeric fields
--------------------------------------
+= Right-align comparable numeric fields
In the table below, the various numerical fields are kind of hard to
compare and easy misinterpret, because of the alignment of the values:
---
[[scalable-web-applications]]
-Scalable web applications
--------------------------
+= Scalable web applications
[[introduction]]
Introduction
---
[[sending-email-from-java-applications]]
-Sending email from Java Applications
-------------------------------------
+= Sending email from Java Applications
[[introduction]]
Introduction
---
[[sending-events-from-the-client-to-the-server-using-RPC]]
-Sending events from the client to the server using RPC
-------------------------------------------------------
+= Sending events from the client to the server using RPC
An RPC mechanism can be used to communicate from the client to the
server. In effect, the client can call methods that are executed by the
server component. The server component can then take appropriate action
---
[[setting-and-reading-cookies]]
-Setting And Reading Cookies
----------------------------
+= Setting And Reading Cookies
You can easily read and write
http://en.wikipedia.org/wiki/HTTP_cookie[cookies] from both the server
---
[[setting-and-reading-session-attributes]]
-Setting and reading session attributes
---------------------------------------
+= Setting and reading session attributes
Vaadin has a few different ways of storing data that should be
accessible later. Which one you should use depends on the scope of the
---
[[use-tooltips-to-clarify-functions]]
-Use tooltips to clarify functions
----------------------------------
+= Use tooltips to clarify functions
Even when clearly labelled, the action performed by a button might not
be clear enough to the user. This is especially common when space or
---
[[using-a-javascript-library-or-a-style-sheet-in-an-addon]]
-Using a JavaScript library or a style sheet in an add-on
---------------------------------------------------------
+= Using a JavaScript library or a style sheet in an add-on
Including style sheets or JavaScript files in your add-ons or as a part
of your application can now be done by adding a `@StyleSheet` or
---
[[using-bean-validation-to-validate-input]]
-Using Bean Validation to validate input
----------------------------------------
+= Using Bean Validation to validate input
Before you get started with Bean Validation you need to download a Bean
Validation implementation and add it to your project. You can find one
---
[[using-declarative-services]]
-Using declarative services
---------------------------
+= Using declarative services
Declarative Services (DS) are very common to define OSGi services. The
DS bundle scans all bundles (extender pattern), parses the component
---
[[using-font-icons-in-vaadin-7.2]]
-Using font icons in Vaadin 7.2
-------------------------------
+= Using font icons in Vaadin 7.2
A “font icon” is an icon that is a glyph (essentially a character) from
a font. A font that is made for this purpose (containing only icons) is
---
[[using-parameters-with-views]]
-Using parameters with Views
----------------------------
+= Using parameters with Views
When the Navigator API is in use, one can pass "parameters" to Views in
the URI fragment.
---
[[using-polling]]
-Using Polling
--------------
+= Using Polling
To set up polling for your UI, you only need to set a poll interval
using `UI.setPollInterval(timeout)`. By doing this the browser will poll
the server each "timeout" ms and retrieve any possibly pending changes.
---
[[using-rpc-from-javascript]]
-Using RPC from JavaScript
--------------------------
+= Using RPC from JavaScript
This tutorial continues where
link:IntegratingAJavaScriptComponent.asciidoc[Integrating a JavaScript
---
[[using-rpc-to-send-events-to-the-client]]
-Using RPC to send events to the client
---------------------------------------
+= Using RPC to send events to the client
An RPC mechanism can be used to communicate from the server to the
client. In effect, the server-side component can call methods that are
---
[[using-server-initiated-events]]
-Using server-initiated events
------------------------------
+= Using server-initiated events
The traditional way of communicating with the server is always client
initiated. Whenever the user interacts with the application so a server
---
[[using-uri-fragments]]
-Using URI fragments
--------------------
+= Using URI fragments
[[reading-fragment-when-initializing-ui]]
Reading Fragment when Initializing UI
---
[[using-vaadin-cdi-with-jaas-authentication]]
-Using Vaadin CDI with JAAS authentication
------------------------------------------
+= Using Vaadin CDI with JAAS authentication
Servlet 3.0 is awesome, so is CDI. They work well and are a joy to set
up. Even adding the Vaadin Navigator to the mix isn't an issue, since
---
[[using-vaadin-in-ibm-domino]]
-Using Vaadin In IBM Domino
---------------------------
+= Using Vaadin In IBM Domino
Vaadin can be used as a UI technology in Domino. This page will contain
the instruction how to setup the development environment and to get
---
[[vaadin-7-spring-security-base-authentication]]
-Vaadin 7 + Spring Security (base authentication)
-------------------------------------------------
+= Vaadin 7 + Spring Security (base authentication)
Vaadin 7 is easy to integrate with Spring Security. You should configure only
2 files. First - web.xml and second one spring-security.xml (user
---
[[vaadin-cdi]]
-Vaadin CDI
-----------
+= Vaadin CDI
During these tutorials we will be solving a number of common problems
when using the https://vaadin.com/directory/component/vaadin-cdi[Vaadin CDI plugin].
---
[[vaadin-on-grails-with-intellij-idea]]
-Vaadin on Grails with IntelliJ IDEA
------------------------------------
+= Vaadin on Grails with IntelliJ IDEA
_Versions used in this tutorial: Grails 2.3.x, Vaadin 7.1.x. News and
updates about Vaadin on Grails are available on
---
[[vaadin-on-grails-database-access]]
-Vaadin on grails - Database access
-----------------------------------
+= Vaadin on grails - Database access
_Versions used in this tutorial: Grails 2.3.x, Vaadin 7.1.x. News and
updates about Vaadin on Grails are available on
---
[[vaadin-on-grails-multiple-uis]]
-Vaadin on grails - multiple UIs
--------------------------------
+= Vaadin on grails - multiple UIs
_Versions used in this tutorial: Grails 2.3.x, Vaadin 7.1.x. News and
updates about Vaadin on Grails are available on
---
[[vaadin-scalability-testing-with-amazon-web-services]]
-Vaadin scalability testing with Amazon Web Services
----------------------------------------------------
+= Vaadin scalability testing with Amazon Web Services
This article explains how you can test the scalability of your
application in the Amazon Web Services (AWS) cloud. The AWS services
---
[[vaadin-spring-tips]]
-Vaadin Spring tips
-------------------
+= Vaadin Spring tips
[[vaadin-spring-boot-configuration-properties]]
Vaadin Spring (Boot) configuration properties
---
[[a-hitchhikers-guide-to-convert-aswing-appto-modern-web-app]]
-A hitchhiker's guide to convert a Swing app to modern web app
--------------------------------------------------------------
+= A hitchhiker's guide to convert a Swing app to modern web app
[[intro]]
Intro
---
[[valo-examples]]
-Valo examples
--------------
+= Valo examples
These are some sample looks for the Valo theme. You can use these as-is,
as a starting point, or while learning Valo.
---
[[valo-theme-getting-started]]
-Valo theme - Getting started
-----------------------------
+= Valo theme - Getting started
To create your own variation of the Valo theme, start by creating a new
custom theme for your project. See
---
[[view-change-confirmations]]
-View change confirmations
--------------------------
+= View change confirmations
The `Navigator` API provides ways to prevent the user from navigating away
from a view in some cases, usually when the view has some unsaved
---
[[visually-distinguish-primary-actions]]
-Visually distinguish primary actions
-------------------------------------
+= Visually distinguish primary actions
Most forms and dialogs have at least two actions that can be performed,
such as _Submit/Cancel_, _Save/Revert_ or _Yes/No_. Quite often, there
---
[[widget-styling-using-only-css]]
-Widget styling using only CSS
------------------------------
+= Widget styling using only CSS
The preferred way of styling your widget is to only use static CSS
included in the theme's styles.css file. For information on how to
layout: page
---
[[migration]]
-== Migration from Framework 7 to Framework 8
+= Migration from Framework 7 to Framework 8
Most Vaadin Framework 7 applications will need some changes when migrating to Vaadin Framework 8.
To make migration from version 7 to 8 as straightforward as possible, Vaadin Framework 8 ships with compatibility packages that include all the old features and APIs that have changed between versions.
projects / vaadin-framework.git / commitdiff