Vaadin

Join Vaadin Log In

Chapter 5. User Interface Components
Prev		Next

Chapter 5. User Interface Components

This chapter provides an overview and a detailed description of all non-layout components in Vaadin.

5.1. Overview

Vaadin provides a comprehensive set of user interface components and allows you to define custom components. Figure 5.1, “UI Component Inheritance Diagram” illustrates the inheritance hierarchy of the UI component classes and interfaces. Interfaces are displayed in gray, abstract classes in orange, and regular classes in blue. An annotated version of the diagram is featured in the Vaadin Cheat Sheet.

Figure 5.1. UI Component Inheritance Diagram

UI Component Inheritance Diagram

At the top of the interface hierarchy, we have the Component interface. At the top of the class hierarchy, we have the AbstractComponent class. It is inherited by two other abstract classes: AbstractField, inherited further by field components, and AbstractComponentContainer, inherited by various container and layout components. Components that are not bound to a content data model, such as labels and links, inherit AbstractComponent directly.

The layout of the various components in a window is controlled, logically, by layout components, just like in conventional Java UI toolkits for desktop applications. In addition, with the CustomLayout component, you can write a custom layout as an XHTML template that includes the locations of any contained components. Looking at the inheritance diagram, we can see that layout components inherit the AbstractComponentContainer and the Layout interface. Layout components are described in detail in Chapter 6, Managing Layout.

Looking at it from the perspective of an object hierarchy, we would have a Window object, which contains a hierachy of layout components, which again contain other layout components, field components, and other visible components.

You can browse the available UI components in the Sampler application of the Vaadin Demo. The Sampler shows a description, JavaDoc documentation, and a code samples for each of the components.

Prev		Next
4.8. Setting Up the Application Environment	Home	5.2. Interfaces and Abstractions

Table of Contents

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. 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. Layout Formatting
6.11. 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.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

A. User Interface Definition Language (UIDL)

A.1. API for Painting Components
A.2. JSON Rendering

B. Songs of Vaadin