Vaadin

Join Vaadin Log In

This section gives a step-by-step guide for setting up a development environment. Vaadin supports a wide variety of tools, so you can use any IDE for writing the code, most web browsers for viewing the results, any operating system or processor supported by the Java 1.5 platform, and almost any Java server for deploying the results.

In this example, we use the following toolchain:

The above is a good choice of tools, but you can use almost any tools you are comfortable with.


Figure 2.2, “Development Toolchain and Process” illustrates the development environment and process. You develop your application as an Eclipse project. The project must include, in addition to your source code, the Vaadin Library. It can also include your project-specific themes.

You must compile and deploy a project to a web container before you can use use it. You can deploy a project through the Web Tools Platform for Eclipse, which allows automatic deployment of web applications from Eclipse. You can deploy a project also manually, by creating a web application archive (WAR) and deploying it through the web container's interface.

Java SDK is required by Vaadin and also by the Eclipse IDE. Vaadin is compatible with Java 1.5 and later editions.

  1. Download Sun Java 2 Standard Edition 6.0 from http://java.sun.com/javase/downloads/index.jsp

  2. Install the Java SDK by running the installer. The default options are fine.

  1. Download Sun Java 2 Standard Edition 6.0 from http://java.sun.com/javase/downloads/index.jsp

  2. Decompress it under a suitable base directory, such as /opt. For example, for Java SDK, enter (either as root or with sudo in Linux):

    # cd /opt
    # sh (path-to-installation-package)/jdk-6u1-linux-i586.bin
    and follow the instructions in the installer.

Eclipse is now installed in C:\dev\eclipse and can be started from there (by double clicking eclipse.exe).

  1. Download Eclipse IDE for Java EE Developers (Ganymede version) from http://www.eclipse.org/downloads/

  2. Decompress the Eclipse IDE package to a suitable directory. You are free to select any directory and to use any ZIP decompressor, but in this example we decompress the ZIP file by just double-clicking it and selecting "Extract all files" task from Windows compressed folder task. In our installation example, we use C:\dev as the target directory.

You have two basic options for installing Eclipse in Linux and UNIX: you can either install it using the package manager of your operating system or by downloading and installing the packages manually. The manual installation method is recommended, because the latest versions of the packages available in a Linux package repository may be incompatible with Eclipse plugins that are not installed using the package manager.

  1. Download Download Eclipse IDE for Java EE Developers (Ganymede version) from http://www.eclipse.org/downloads/

  2. Decompress the Eclipse package into a suitable base directory. It is important to make sure that there is no old Eclipse installation in the target directory. Installing a new version on top of an old one probably renders Eclipse unusable.

  3. Eclipse should normally be installed as a regular user, as this makes installation of plugins easier. Eclipse also stores some user settings in the installation directory. To install the package, enter:

    $ tar zxf (path-to-installation-package)/eclipse-jee-ganymede-SR2-linux-gtk.tar.gz
    This will extract the package to a subdirectory with the name eclipse.

  4. You may wish to add the Eclipse installation directory and the bin subdirectory in the installation directory of Java SDK to your system or user PATH.

An alternative to the above procedure is to use the package management system of your operating system. For example, in Ubuntu Linux, which includes Sun Java SDK and Eclipse in its APT repository, you can install the programs from a package manager GUI or from command-line with a command such as:

$ sudo apt-get install sun-java6-jdk eclipse

This is, however, not recommended, because the Eclipse package may not include all the necessary Java EE tools, most importantly the Web Standard Tools, and it may cause incompatibilities with some components that are not installed with the package management system of your operating system.

Vaadin supports many web browsers and you can use any of them for development. If you plan to create a custom theme, customized layouts or new user interface components, we recommend that you use Firefox together with Firebug for debugging. Vaadin contains special support for Firebug and can show debug information in its console.

If you do not have Firefox installed already, go to www.getfirefox.com and download and run the installer.

Optional. After installing Firefox, use it to open http://www.getfirebug.com/. Follow the instructions on the site to install the latest stable version of Firebug available for the browser. You might need to tell Firefox to allow the installation by clicking the yellow warning bar at the top of the browser-window.

When Firebug is installed, it can be enabled at any time from the bottom right corner of the Firefox window. Figure 2.3, “Firebug Debugger for Firefox” shows an example of what Firebug looks like.


Now that you have installed the development environment, you can proceed to creating your first application.

If you are using the Eclipse IDE, using the Vaadin plugin should help greatly. The plugin includes:

  • An integration plugin with wizards for creating new Vaadin-based projects, themes, and client-side widgets and widget sets.

  • A visual editor for editing custom composite user interface components in a WYSIWYG fashion. With full round-trip support from source code to visual model and back, the editor integrates seamlessly with your development process.

  • A version of Book of Vaadin that you can browse in the Eclipse Help system.

You can install the plugin as follows:

  1. Start Eclipse.

  2. Select HelpSoftware Updates....

  3. Select the Available Software tab.

  4. Add the Vaadin plugin update site by clicking Add Site....

    Enter the URL of the Vaadin Update Site: http://vaadin.com/eclipse and click OK. The Vaadin site should now appear in the Software Updates window.

  5. Select all the Vaadin plugins in the tree.

    Finally, click Install.

Detailed and up-to-date installation instructions for the Eclipse plugin can be found at http://vaadin.com/eclipse.

Table of Contents

Preface
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. Installing Vaadin
2.2. Setting up the Development Environment
2.3. QuickStart with Eclipse
2.4. Your First Project with Vaadin
3. Architecture
3.1. Overview
3.2. Technological Background
3.3. Applications as Java Servlet Sessions
3.4. Client-Side Engine
3.5. Events and Listeners
4. Writing a Web Application
4.1. Overview
4.2. Managing the Main Window
4.3. Child Windows
4.4. Handling Events with Listeners
4.5. Referencing Resources
4.6. Shutting Down an Application
4.7. Handling Errors
4.8. Setting Up the Application Environment
5. User Interface Components
5.1. Overview
5.2. Interfaces and Abstractions
5.3. Common Component Features
5.4. Label
5.5. Link
5.6. TextField
5.7. RichTextArea
5.8. Date and Time Input
5.9. Button
5.10. CheckBox
5.11. Selecting Items
5.12. Table
5.13. Tree
5.14. MenuBar
5.15. Embedded
5.16. Upload
5.17. Form
5.18. ProgressIndicator
5.19. Slider
5.20. LoginForm
5.21. Component Composition with CustomComponent
6. Managing Layout
6.1. Overview
6.2. Window and Panel Root Layout
6.3. VerticalLayout and HorizontalLayout
6.4. GridLayout
6.5. FormLayout
6.6. Panel
6.7. SplitPanel
6.8. TabSheet
6.9. Accordion
6.10. AbsoluteLayout
6.11. CssLayout
6.12. Layout Formatting
6.13. Custom Layouts
7. Visual User Interface Design with Eclipse (experimental)
7.1. Overview
7.2. Creating a New CustomComponent
7.3. Using The Visual Editor
7.4. Structure of a Visually Editable Component
8. Themes
8.1. Overview
8.2. Introduction to Cascading Style Sheets
8.3. Creating and Using Themes
8.4. Creating a Theme in Eclipse
9. Binding Components to Data
9.1. Overview
9.2. Properties
9.3. Holding properties in Items
9.4. Collecting items in Containers
10. Developing Custom Components
10.1. Overview
10.2. Doing It the Simple Way in Eclipse
10.3. Google Web Toolkit Widgets
10.4. Integrating a GWT Widget
10.5. Defining a Widget Set
10.6. Server-Side Components
10.7. Using a Custom Component
10.8. GWT Widget Development
11. Advanced Web Application Topics
11.1. Special Characteristics of AJAX Applications
11.2. Application-Level Windows
11.3. Embedding Applications in Web Pages
11.4. Debug and Production Mode
11.5. Resources
11.6. Shortcut Keys
11.7. Printing
11.8. Portal Integration
11.9. Google App Engine Integration
11.10. Common Security Issues
11.11. URI Fragment and History Management with UriFragmentUtility
11.12. Capturing HTTP Requests
11.13. Drag and Drop
11.14. Using Add-on Components
A. User Interface Definition Language (UIDL)
A.1. API for Painting Components
A.2. JSON Rendering
B. Songs of Vaadin
Index