Файл: book-of-vaadin.pdf

Getting Started with Vaadin

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 would be to use an Eclipse version available through the package management system of your operating system. It is, however, not recommended, because you will need write access to the Eclipse installation directory to install Eclipse plugins, and you may face incompatibility issues with Eclipse plugins installed by the package management of the operating system.

2.2.3. Installing Apache Tomcat

Apache Tomcat is a lightweight Java web server suitable for both development and production. There are many ways to install it, but here we simply decompress the installation package.

Apache Tomcat should be installed with user permissions. During development, you will be running Eclipse or some other IDE with user permissions, but deploying web applications to a Tomcat server that is installed system-wide requires administrator or root permissions.

1.Download the installation package:

Apache Tomcat 7.0 (Core Binary Distribution) from http://tomcat.apache.org/

2.Decompress Apache Tomcat package to a suitable target directory, such as C:\dev (Windows) or /opt (Linux or Mac OS X). The Apache Tomcat home directory will be

C:\dev\apache-tomcat-7.0.x or /opt/apache-tomcat-7.0.x, respectively.

2.2.4.Firefox and Firebug

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 create new components, we recommend that you use Firefox together with Firebug.

If you do not have Firefox installed already, go to www.getfirefox.com [http://www.getfirefox.com/] and download and run the installer. In Linux, you can install it also with a package manager.

Using Firebug with Vaadin

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

After Firebug is installed, it can be enabled at any time from the Firefox toolbar. Figure 2.2, “Firebug Debugger for Firefox” shows Firebug in action.

Getting Started with Vaadin

Figure 2.2. Firebug Debugger for Firefox

2.3. Overview of Vaadin Libraries

Vaadin comes as a set of library JARs, of which some are optional or alternative ones, depending on whether you are developing server-side or client-side applications, whether you use add-on components, or use CSS or SASS themes.

vaadin-server-7.x.x.jar

The main library for developing server-side Vaadin applications, as described in Chapter 4, Writing a Server-Side Web Application. It requires the vaadin-shared and the vaadin-themes libraries. You can use the prebuilt vaadin-client-compiled for server-side development, unless you need add-on components or custom widgets.

vaadin-shared-7.x.x.jar

A shared library for server-side and client-side development. It is always needed.

vaadin-client-7.x.x.jar

The client-side Vaadin framework, including the basic GWT API and Vaadin-specific widgets and other additions. It is required when using the vaadin-client-compiler to compile client-side modules. It is not needed if you just use the server-side framework with the precompiled Client-Side Engine.

vaadin-client-compiler-7.x.x.jar

The Vaadin Client Compiler is a Java-to-JavaScript compiler that allows building clientside modules, such as the Client-Side Engine (widget set) required for server-side applications. The compiler is needed, for example, for compiling add-on components to the application widget set, as described in Chapter 17, Using Vaadin Add-ons. For

Getting Started with Vaadin

detailed information regarding the compiler, see Section 13.4, “Compiling a Client-Side Module”.

vaadin-client-compiled-7.x.x.jar

A precompiled Vaadin Client-Side Engine (widget set) that includes all the basic builtin widgets in Vaadin. This library is not needed if you compile the application widget set with the Vaadin Client Compiler.

vaadin-themes-7.x.x.jar

Vaadin built-in themes both as SCSS source files and precompiled CSS files. The library is required both for basic use with CSS themes and for compiling custom SASS themes.

vaadin-theme-compiler7.x.x.jar

The Vaadin Theme Compiler compiles SASS themes to CSS, as described in Section 8.3, “Syntactically Awesome Stylesheets (Sass)”. It requires the vaadin-themes-7.x.x.jar library, which contains the SCSS sources for the builtin themes.

Some of the libraries depend on each other as well as on the dependency libraries provided in the lib folder of the installation package, especially the lib/vaadin-shared-deps.jar.

The different ways to install the libraries are described in the subsequent sections.

2.4. Installing Vaadin Plugin for Eclipse

If you are using the Eclipse IDE, using the Vaadin Plugin for Eclipse helps greatly. Notice that you can also create Vaadin projects as Maven projects in Eclipse.

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.

2.4.1.Installing the IvyDE Plugin

The Vaadin Plugin for Eclipse requires the Apache IvyDE plugin, which needs to be installed manually in Eclipse before the Vaadin plugin.

1.Select Help Install New Software....

2.Add the IvyDE update site by clicking the Add... button.

Enter a name such as "Apache Ivy Update Site" and the URL of the update site:

http://www.apache.org/dist/ant/ivyde/updatesite

Then click OK. The Vaadin site should now appear in the Available Software window.

3. Select the new "Apache Ivy Update Site" from the Work with list.

Getting Started with Vaadin

4. Select the Apache Ivy, Apache Ivy Ant Tasks, and Apache IvyDE plugins.

The Apache IvyDE Resolve Visualizer is optional, and would require additional dependency plugins to be installed.

Then, click Next.

5.Review the installation details and click Next.

6.Accept or unaccept the license. Finally, click Finish.

7.Eclipse may warn about unsigned content. If you feel safe, click OK.

8.After the plugin is installed, Eclipse will ask to restart itself. You can proceed to install the Vaadin plugin before the restart, as described in the following section, so you can answer Apply Changes Now.

2.4.2.Installing the Vaadin Plugin

You can install the plugin as follows:

1.Select Help Install New Software....

2.Add the Vaadin plugin update site by clicking Add... button.

Getting Started with Vaadin

Enter a name such as "Vaadin Update Site" and the URL of the update site: http://vaadin.com/eclipse. If you want or need to use the latest unstable plugin, which is usually more compatible with development and beta releases of Vaadin, you can use http://vaadin.com/eclipse/experimental. Then click OK. The Vaadin site should now appear in the Available Software window.

3. Select all the Vaadin plugins in the tree.

Then, click Next.

4.Review the installation details and click Next.

5.Accept or unaccept the license. Finally, click Finish.

6.After the plugin is installed, Eclipse will ask to restart itself. Click Restart.

More installation instructions for the Eclipse plugin can be found at http://vaadin.com/eclipse.

Getting Started with Vaadin

2.4.3. Updating the Plugins

If you have automatic updates enabled in Eclipse (see Window Preferences Install/Update Automatic Updates), the Vaadin plugin will be updated automatically along with other plugins.

Otherwise, you can update the Vaadin plugin manually as follows:

1. Select Help Check for Updates. Eclipse will contact the update sites of the installed software.

2. After the updates are installed, Eclipse will ask to restart itself. Click Restart.

Notice that updating the Vaadin plugin updates only the plugin and not the Vaadin libraries, which are project specific. See below for instructions for updating the libraries.

2.4.4. Updating the Vaadin Libraries

Updating the Vaadin plugin does not update Vaadin libraries. The libraries are project specific, as a different version might be required for different projects, so you have to update them separately for each project.

1.Open the ivy.xml in an editor Eclipse.

2.Edit the entity definition at the beginning of the file to set the Vaadin version.

<!ENTITY vaadin.version "7.0.1">

You can specify either a fixed version number, as shown in the above example, or a dynamic revision tag such as latest.release. You can find more information about the dependency declarations in Ivy documentation.

3. Right-click the project and select Ivy Resolve.

Updating the libraries can take several minutes.You can see the progress in the Eclipse status bar. You can get more details about the progress by clicking the indicator.

4.If you have compiled the widget set for your project, recompile it by clicking the Compile Vaadin widgets button in Eclipse toolbar.

5.Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by right-clicking the server and selecting Clean as well as Clean Tomcat Work Directory, and restart it.

If you experience problems after updating the libraries, you can try clearing the Ivy resolution caches by right-clicking the project and selecting Ivy Clean all caches. Then, do the Ivy Resolve and other tasks again.

2.5. Creating and Running a Project with Eclipse

This section gives instructions for creating a new Eclipse project using the Vaadin Plugin. The task will include the following steps:

1.Create a new project

2.Write the source code

3.Configure and start Tomcat (or some other web server)

Getting Started with Vaadin

4. Open a web browser to use the web application

We also show how you can debug the application in the debug mode in Eclipse.

This walkthrough assumes that you have already installed the Vaadin Plugin for Eclipse and set up your development environment, as instructed in Section 2.2, “Setting up the Development Environment”.

2.5.1. Creating the Project

Let us create the first application project with the tools installed in the previous section. First, launch Eclipse and follow the following steps:

If you choose to go the Vaadin 6 way, please use the latest Vaadin 6 version of this book for further instructions.