Tutorial
Learning Vaadin - Step-by-step
This tutorial gives you one brief glimpse as well as a more comprehensive look on on how to create a simple
address book application using Vaadin. Select five minute, one hour or one day version below.
Five minute version
Vaadin is framework for building web applications completely in Java. Your application
is run in a Java server (Tomcat, WebSphere, ..). Ajax and other web-stuff is automatically
handled by the framework.
To understand how it works, browse through a simple example.
package com.vaadin.demo.simpleaddressbook;
import com.vaadin.Application;
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.util.IndexedContainer;
import com.vaadin.ui.Button;
import com.vaadin.ui.Form;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.SplitPanel;
import com.vaadin.ui.Table;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
import com.vaadin.ui.Button.ClickEvent;
public class SimpleAddressBook extends Application {
private static String[] fields = { "First Name", "Last Name", "Company",
"Mobile Phone", "Work Phone", "Home Phone", "Work Email",
"Home Email", "Street", "Zip", "City", "State", "Country" };
private static String[] visibleCols = new String[] { "Last Name",
"First Name", "Company" };
private Table contactList = new Table();
private Form contactEditor = new Form();
private HorizontalLayout bottomLeftCorner = new HorizontalLayout();
private Button contactRemovalButton;
private IndexedContainer addressBookData = createDummyData();
@Override
public void init() {
initLayout();
initContactAddRemoveButtons();
initAddressList();
initFilteringControls();
}
private void initLayout() {
SplitPanel splitPanel = new SplitPanel(
SplitPanel.ORIENTATION_HORIZONTAL);
setMainWindow(new Window("Address Book", splitPanel));
VerticalLayout left = new VerticalLayout();
left.setSizeFull();
left.addComponent(contactList);
contactList.setSizeFull();
left.setExpandRatio(contactList, 1);
splitPanel.addComponent(left);
splitPanel.addComponent(contactEditor);
contactEditor.setSizeFull();
contactEditor.getLayout().setMargin(true);
contactEditor.setImmediate(true);
bottomLeftCorner.setWidth("100%");
left.addComponent(bottomLeftCorner);
}
private void initContactAddRemoveButtons() {
// New item button
bottomLeftCorner.addComponent(new Button("+",
new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
Object id = contactList.addItem();
contactList.setValue(id);
}
}));
// Remove item button
contactRemovalButton = new Button("-", new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
contactList.removeItem(contactList.getValue());
contactList.select(null);
}
});
contactRemovalButton.setVisible(false);
bottomLeftCorner.addComponent(contactRemovalButton);
}
private String[] initAddressList() {
contactList.setContainerDataSource(addressBookData);
contactList.setVisibleColumns(visibleCols);
contactList.setSelectable(true);
contactList.setImmediate(true);
contactList.addListener(new Property.ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
Object id = contactList.getValue();
contactEditor.setItemDataSource(id == null ? null : contactList
.getItem(id));
contactRemovalButton.setVisible(id != null);
}
});
return visibleCols;
}
private void initFilteringControls() {
for (final String pn : visibleCols) {
final TextField sf = new TextField();
bottomLeftCorner.addComponent(sf);
sf.setWidth("100%");
sf.setInputPrompt(pn);
sf.setImmediate(true);
bottomLeftCorner.setExpandRatio(sf, 1);
sf.addListener(new Property.ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
addressBookData.removeContainerFilters(pn);
if (sf.toString().length() > 0 && !pn.equals(sf.toString())) {
addressBookData.addContainerFilter(pn, sf.toString(),
true, false);
}
getMainWindow().showNotification(
"" + addressBookData.size() + " matches found");
}
});
}
}
private static IndexedContainer createDummyData() {
String[] fnames = { "Peter", "Alice", "Joshua", "Mike", "Olivia",
"Nina", "Alex", "Rita", "Dan", "Umberto", "Henrik", "Rene",
"Lisa", "Marge" };
String[] lnames = { "Smith", "Gordon", "Simpson", "Brown", "Clavel",
"Simons", "Verne", "Scott", "Allison", "Gates", "Rowling",
"Barks", "Ross", "Schneider", "Tate" };
IndexedContainer ic = new IndexedContainer();
for (String p : fields) {
ic.addContainerProperty(p, String.class, "");
}
for (int i = 0; i < 1000; i++) {
Object id = ic.addItem();
ic.getContainerProperty(id, "First Name").setValue(
fnames[(int) (fnames.length * Math.random())]);
ic.getContainerProperty(id, "Last Name").setValue(
lnames[(int) (lnames.length * Math.random())]);
}
return ic;
}
}
Thats all. Application source and project can be downloaded from SVN. The application looks like this
One hour version
A more comprehensive tutorial walks you through the creation of
a more complete address book application. The tutorial introduces you
some of the key elements of Vaadin. Contents of the tutorial can
be seen on right.
Already read the "one minute version"? Skip to the the beginning and start reading the chapter 3.
One day version
Read the Book of Vaadin.
| |
|