Tab

Panel

Buffered

Validatable

Property

Item

Editor ValueChangeListener

Cheat Sheet

VariableOwnerchangeVariables()

Sizeable

Paintable paint()setDebugId()

Component

AbstractComponent

Embedded

Link

Label

MenuBarv-menubar

Upload

ComponentContainer

AbstractComponentContainer

Focusable

Field

ValueChangeEventViewer

BufferedValidatable

AbstractField Buttonv-button

CheckBoxv-checkbox

TextFieldv-textfield

RichTextAreav-richtextarea

DateFieldv-datefield

InlineDateFieldv-inlinedatefield

PopupDateFieldv-popupdatefield

AbstractSelect

Formv-form

Sliderv-slider

ProgressIndicatorv-progressindicator

Developer site: dev.vaadin.comvaadin.comWebsite:

Server-Side Components

ClickEvent

ClickListener

Container

Editor

Viewer

Editor

Viewer

Data Model

ListSelectv-listselect

NativeSelectv-nativeselect

TwinColSelectv-twincolselect

OptionGroupv-optiongroup

Tablev-table

Treev-tree

Selectv-select

ComboBoxv-filterselect

Ordered

Hierarchical

Sortable

Indexed

Filterable

IndexedContainer

HierarchicalContainer

Interface

Class Abstract Class

LegendInner

Inner Inner

Inherits orimplements

Container.Hierarchical

Container.OrderedContainer.Sortable

Buffered

ValidatableItem

Editor

Event

AbstractLayout

AbstractOrderedLayout

AbsoluteLayoutv-absolutelayout

CustomLayoutv-customlayout

SplitPanelv-splitpanel-...

GridLayoutv-gridlayout

VerticalLayoutv-verticallayout

HorizontalLayoutv-horizontallayout

FormLayoutv-formlayout

Accordionv-accordion

PopupViewv-popupview

TabSheetv-tabsheet n

addTab()

setContent()

Windowv-window

CustomComponentv-customcomponent

addComponent()

Container

The Class Diagram presents all user interface component classes and the most important interfaces, relationships, and methods.

n

n

setWidth()setHeight()setFullSize()setUndefinedSize()

setRequired()setRequiredError()

setValue()getValue()

commit/discard()setWriteThrough()setReadThrough()

addValidator()isValid()

validate()

focus()setTabIndex()

Forum: vaadin.com/forum Manual: vaadin.com/book

Listener addStyleName/Listener()setCaption/Icon()setEnabled/Visible()getParent(), attach/detach()

1

CellStyleGenerator

ColumnGenerator

TableFieldFactorycreateField()

1setTableFieldFactory()

DefaultFieldFactory

FormFieldFactorycreateField()

1

setFormFieldFactory()

For Vaadin 6.2

2009 IT Mill Ltd

setLayout()setFooter()

v-container

v-link

v-label

v-upload

v-panel

Applicationcom.vaadin.

setMainWindow()1

YourApplication

setCompositionRoot()

setTheme/Locale/LogoutURL()

Layout

setMargin()

setVisible/Enabled()setCaption/Icon()setDescription()

paintContent()

init()

method() abstractMethod() (must or may implement)

ComponentPosition

getPosition()

addComponent(c)/(c, col, row)/(c, c1, r1, c2, r2)CustomLayout("template")

CommandMenuItem

addItem()

setDescription()setImmediate()

setOrientation/Resolution()setMin/Max()

setSplitPosition/Locked()

addItem()

addItemProperty()

LoginFormv-loginform

setPollingInterval/Indeterminate()

buttonClick()

valueChange()

setResolution()

setRows/Columns/Secret/InputPrompt/MaxLength()

setMultiSelect()

Makes XMLHttpRequest

Cheat Sheet For Vaadin 6.2

Application Architecture for Vaadin Applications

Resources

Client-Side Widget Integration

ApplicationResourceResource

ExternalResource

ThemeResource

FileResource

ClassResource

StreamResource

Theme Contents

AbstractComponent

Widget MyWidget...

VMyWidgetPaintable

ApplicationConnection

com.vaadin.terminal.gwt.client.

n

Google Web Toolkit

Vaadin Client-Side Integration

CommunicationManagercom.vaadin.terminal.server.

Paintablecom.vaadin.terminal.

n

MyComponent

Server connection:UIDL / JSON / HTTP(S)

Componentcom.vaadin.ui.

paint()

getTag() paintContent()

Must implementupdateFromUIDL()to deserialize statefrom servercom.vaadin.terminal.gwt.client.

Server-Side Integration

Must implement changeVariables() fordeserialization andpaintContent() forserialization using thePaintTarget interface.

updateFromUIDL()

updateVariable()

Needs to callupdateVariable() toto serialize state toserver

1

Widget Project

PaintTargetcom.vaadin.terminal.

addAttribute()addVariable()

All images, embedded objects, and downloadablefiles are represented as resources.

Use a custom theme by setting it in the main window object:

mainWindow.setTheme("mytheme");

Use images included in a team as a ThemeResource:

Button button = new Button("Button with Icon"); button.setIcon(new ThemeResource("img/myimage.png"));

Use a HTML template having <div location="hello"/> location tagswith the CustomLayout component. Add components by their location tag: CustomLayout layout = new CustomLayout("mylayout"); layout.addComponent(new Button("Hello"), "hello");

public class MyApp extends com.vaadin.Application { public void init() { Window main = new Window("Hello Window"); setMainWindow(main);

main.setTheme("mytheme"); // Optional

Label label = new Label("Hello, World!"); main.addComponent(label); }}

A user application - inherits the Application class - adds a main window to it - sets a theme for the window (optional) - populates it with components

... - binds components to data - binds components to resources - defines event listeners to implement the UI logic

Hello, World!

...

any URL

loaded from a theme

loaded from the file system

loaded from the class path

provided dynamically by the application

Any GWT widget -an existing or your own

(See the Color Picker demo)

GWT: code.google.com/webtoolkit/

VariableOwnercom.vaadin.terminal.

changeVariables()

(Implements paint())