Chapter 4. Writing a Web Application
Table of Contents
This chapter provides the fundamentals of web application development with Vaadin, concentrating on the basic elements of an application from a practical point-of-view.
If you are a newcomer to AJAX development, you may benefit from Section 12.1, “Special Characteristics of AJAX Applications”. It explains the role of pages in AJAX web applications, and provides some basic design patterns for applications.
An application made with Vaadin runs as a Java Servlet in a Servlet container. The entry-point is the application class, which needs to create and manage all necessary user interface components, including windows. User interaction is handled with event listeners, simplified by binding user interface components directly to data. Visual appearance is defined in themes as CSS files. Icons, other images, and downloadable files are handled as resources, which can be external or served by the application server or the application itself.
Figure 4.1, “Application Architecture” above gives the basic architecture of an application made with the Vaadin framework, with all the major elements, which are introduced below and discussed in detail in this chapter.
First of all, an application that uses Vaadin must define an
application class that inherits the abstract
com.vaadin.Application class. The application
class must implement the init() method.
public class MyApp extends com.vaadin.Application {
public void init() {
... initialization code goes here ...
}
}
Besides acting as the entry-point in the servlet, the
Application class provides facilities for window
access, execution control, and theme selection. The application API may seem
similar to Java Servlet API, but that is only superficial. Vaadin
framework associates requests with sessions so that an application class
instance is really a session object. Because of this, you can develop web
applications much like you would develop desktop applications.
Restarting Application Session
When you open the URL for the application, it creates a new user session. The session is preserved even if you reload the page. However, if you use Eclipse, it likes to do hot deployment to Tomcat and you may experience a problem that the application does not return to its initial state after you modify code. As Tomcat likes to persist sessions on server shutdown, the application state can remain even if you restart the server.
Adding the ?restartApplication parameter in the URL tells
the Vaadin servlet to create a new Application
instance on loading the page. If you also include a URI fragment, the
parameter should be given before the fragment.
The most important thing in the initialization is the creation of the main window (see below), which any application has. This, and the deployment of the application as a Java Servlet in the Servlet container, as described in Section 4.8, “Setting Up the Application Environment”, are the minimal requirements for an application.
Below is a short overview of the basic elements of an application:
- Windows
-
An application always has a main window, as described in Section 4.2, “Managing the Main Window”. An application can actually have a number of such application-level windows, all bound to the same application session, as described in Section 12.2, “Application-Level Windows”. Application-level windows can contain non-native sub-windows, which are essentially floating layout components handled inside the browser.
- User Interface Components
-
The user interface consists of UI components that are created and laid out by the application. User interaction with the components causes events (see below) related to the component, which the application must handle. Most components are bound to some data using the Data Model (see below). You can make your own UI components through either inheritance or composition. For a thorough reference of UI components, see Chapter 5, User Interface Components, for layout components, see Chapter 6, Managing Layout, and for composing components, see Section 5.23, “Component Composition with
CustomComponent”. - Events and Listeners
-
Events, and listeners that handle events, are the basis of handling user interaction in an application. Section 3.5, “Events and Listeners” gave an introduction to events and listeners from an architectural point-of-view, while Section 4.4, “Handling Events with Listeners” later in this chapter takes a more practical view.
- Resources
-
A user interface can display images or have links to web pages or downloadable documents. These are resources, which can be external or provided by the web server or the application itself. Section 4.5, “Referencing Resources” gives a practical overview of the different types of resources.
- Themes
-
The presentation and logic of the user interface are separated. While the UI logic is handled as Java code, the presentation is defined in themes as CSS. Vaadin provides a default theme. User-defined themes can, in addition to style sheets, include HTML templates that define custom layouts and other theme resources, such as images. Themes are discussed in detail in Chapter 8, Themes, custom layouts in Section 6.13, “Custom Layouts”, and theme resources in Section 4.5.4, “Theme Resources”.
- Data Binding
-
Field components are essentially views to data, represented in a data model. Using the data model, the components can update the application data directly, without the need for any control code. A field component model is always bound to a property, an item, or a container, depending on the field type. While all the components have a default data model, they can be bound to a user-defined data source. For example, you can bind a table component to an SQL query response. For a complete overview of data binding in Vaadin, please refer to Chapter 9, Binding Components to Data.