Chapter 7 v17 - (15 Steps)

Chapter 7

File 1:

(AddressBookApplication.java)


File 2:

(SearchView.java)


File 3:

(SharingOptions.java)


File 4:

(Styles.css)


1 - STEPS


Step 1:

(Styles.css)

C:\Program\eclipse\workspace\Chapter 7\WebContent\VAADIN\themes\contacts

[color=#ff00f6]

@import url(../runo/styles.css);

[/color]

Step 2:

(AddressBookApplication.java)


[color=#0000ff]
@Override
    public void init() {
        buildMainLayout();
        setMainComponent(getListView());
    }

    private void buildMainLayout() {
        setMainWindow(new Window("Address Book Demo application"));

[/color]
[color=#ff00f6]
        setTheme("contacts");
[/color]
[color=#0000ff]

        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();

        layout.addComponent(createToolbar());
        layout.addComponent(horizontalSplit);
        layout.setExpandRatio(horizontalSplit, 1);
[/color]

Step 3:

(AddressBookApplication.java)


[color=#0000ff]
    private HorizontalLayout createToolbar() {
        HorizontalLayout lo = new HorizontalLayout();
        lo.addComponent(newContact);
        lo.addComponent(search);
        lo.addComponent(share);
        lo.addComponent(help);

        search.addListener((ClickListener) this);
        share.addListener((ClickListener) this);
        help.addListener((ClickListener) this);
        newContact.addListener((ClickListener) this);
[/color]

[color=#ff00f6]
        lo.setMargin(true);
        lo.setSpacing(true);
[/color]
[color=#0000ff]

        return lo;
    }

    private void setMainComponent(Component c) {
        horizontalSplit.setSecondComponent(c);
    }
[/color]

Step 4:

(Styles.css)


[color=#0000ff]
@import url(../runo/styles.css);
[/color]
[color=#ff00f6]

.v-tree {
      padding-top: 8px;
      padding-left: 4px;
}

[/color]

Step 5:

(AddressBookApplication.java)


[color=#0000ff]
    private HorizontalLayout createToolbar() {
        HorizontalLayout lo = new HorizontalLayout();
        lo.addComponent(newContact);
        lo.addComponent(search);
        lo.addComponent(share);
        lo.addComponent(help);

        search.addListener((ClickListener) this);
        share.addListener((ClickListener) this);
        help.addListener((ClickListener) this);
        newContact.addListener((ClickListener) this);
[/color]

[color=#ff00f6]
        search.setIcon(new ThemeResource("icons/32/folder-add.png"));
        share.setIcon(new ThemeResource("icons/32/users.png"));
        help.setIcon(new ThemeResource("icons/32/help.png"));
        newContact.setIcon(new ThemeResource("icons/32/document-add.png"));

[/color]
[color=#0000ff]

        lo.setMargin(true);
        lo.setSpacing(true);

        return lo;
    }

    private void setMainComponent(Component c) {
        horizontalSplit.setSecondComponent(c);
    }
[/color]

Step 6:

(AddressBookApplication.java)


[color=#0000ff]
    private HorizontalLayout createToolbar() {
        HorizontalLayout lo = new HorizontalLayout();
        lo.addComponent(newContact);
        lo.addComponent(search);
        lo.addComponent(share);
        lo.addComponent(help);

        search.addListener((ClickListener) this);
        share.addListener((ClickListener) this);
        help.addListener((ClickListener) this);
        newContact.addListener((ClickListener) this);

        search.setIcon(new ThemeResource("icons/32/folder-add.png"));
        share.setIcon(new ThemeResource("icons/32/users.png"));
        help.setIcon(new ThemeResource("icons/32/help.png"));
        newContact.setIcon(new ThemeResource("icons/32/document-add.png"));

        lo.setMargin(true);
        lo.setSpacing(true);
[/color]

[color=#ff00f6]
        lo.setStyleName("toolbar");

        lo.setWidth("100%");

        Embedded em = new Embedded("", new ThemeResource("images/logo.png"));
        lo.addComponent(em);
        lo.setComponentAlignment(em, Alignment.MIDDLE_RIGHT);
        lo.setExpandRatio(em, 1);

[/color]
[color=#0000ff]
        return lo;
    }

    private void setMainComponent(Component c) {
        horizontalSplit.setSecondComponent(c);
    }
[/color]

Step 7:

(AddressBookApplication.java)


[color=#0000ff]
package com.vaadin.demo.tutorial.addressbook;

import com.vaadin.demo.tutorial.addressbook.data.PersonContainer;
import com.vaadin.demo.tutorial.addressbook.data.SearchFilter;
import com.vaadin.demo.tutorial.addressbook.ui.HelpWindow;
import com.vaadin.demo.tutorial.addressbook.ui.ListView;
import com.vaadin.demo.tutorial.addressbook.ui.NavigationTree;
import com.vaadin.demo.tutorial.addressbook.ui.PersonForm;
import com.vaadin.demo.tutorial.addressbook.ui.PersonList;
import com.vaadin.demo.tutorial.addressbook.ui.SearchView;
import com.vaadin.demo.tutorial.addressbook.ui.SharingOptions;
import com.vaadin.Application;
import com.vaadin.data.Item;
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.Property.ValueChangeListener;
import com.vaadin.event.ItemClickEvent;
import com.vaadin.event.ItemClickEvent.ItemClickListener;
[/color]
[color=#ff00f6]
import com.vaadin.terminal.ThemeResource;
import com.vaadin.ui.Alignment;
[/color]
[color=#0000ff]
import com.vaadin.ui.Button;
import com.vaadin.ui.Component;
[/color]
[color=#ff00f6]
import com.vaadin.ui.Embedded;
[/color]
[color=#0000ff]
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.SplitPanel;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.Window.Notification;

@SuppressWarnings("serial")
public class AddressBookApplication extends Application implements
        ClickListener, ValueChangeListener, ItemClickListener {
[/color]

Step 8:

(Styles.css)


[color=#0000ff]
  @import url(../runo/styles.css);
/* Using the old default theme (runo) as the basis for now */

/* Add some padding to the tree */
.v-tree {
      padding-top: 8px;
      padding-left: 4px;
}
[/color]

[color=#ff00f6]
.toolbar .v-button {
      display: block;
      width: 65px;
      height: 55px;
      background: transparent;
      border: none;
      text-align: center;
}
 
.toolbar .v-button img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 5px;
}

.toolbar .v-button span {
      font-size: x-small;
      text-shadow: #fafafa 1px 1px 0;
}
[/color]

Step 9:

(SearchView.java)

[color=#0000ff]

ublic class SearchView extends Panel {

    private TextField tf;
    private NativeSelect fieldToSearch;
    private CheckBox saveSearch;
    private TextField searchName;
    private AddressBookApplication app;

    public SearchView(final AddressBookApplication app) {
        this.app = app;
[/color]
        [color=#ff00f6]
addStyleName("view");
[/color]
[color=#0000ff]
        
        setCaption("Search contacts");
        setSizeFull();

        /* Use a FormLayout as main layout for this Panel */
        FormLayout formLayout = new FormLayout();
        setContent(formLayout);
[/color]

Step 10:

(SearchView.java)

[color=#0000ff]

	private void performSearch() {
		String searchTerm = (String) tf.getValue();
[/color]
		[color=#ff00f6]
if (searchTerm == null || searchTerm.equals("")) {
			getWindow().showNotification("Search term cannot be empty!",
					Notification.TYPE_WARNING_MESSAGE);
			return;
		}
[/color]

		[color=#0000ff]
SearchFilter searchFilter = new SearchFilter(fieldToSearch.getValue(),
				searchTerm, (String) searchName.getValue());
		if (saveSearch.booleanValue()) {
[/color]
			[color=#ff00f6]
if (searchName.getValue() == null
					|| searchName.getValue().equals("")) {
				getWindow().showNotification(
						"Please enter a name for your search!",
						Notification.TYPE_WARNING_MESSAGE);
				return;
			}
[/color]
			[color=#0000ff]
app.saveSearch(searchFilter);
		}
		app.search(searchFilter);
	}

}

[/color]

Step 11:

(SearchView.java)

[color=#0000ff]

import com.vaadin.demo.tutorial.addressbook.AddressBookApplication;
import com.vaadin.demo.tutorial.addressbook.data.PersonContainer;
import com.vaadin.demo.tutorial.addressbook.data.SearchFilter;
import com.vaadin.ui.Button;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.NativeSelect;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
[/color][color=#ff00f6]

import com.vaadin.ui.Window.Notification;
[/color]

[color=#0000ff]
public class SearchView extends Panel {

    private TextField tf;
    private NativeSelect fieldToSearch;
[/color]

Step 12:

(Styles.css)


[color=#0000ff]
.toolbar .v-button img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 5px;
}

.toolbar .v-button span {
      font-size: x-small;
      text-shadow: #fafafa 1px 1px 0;
}
[/color]

[color=#ff00f6]
.v-app {
      background: #d0e2ec;
      font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
      color: #222;
}

.toolbar {
      background: #ccc url(images/gradient.png) repeat-x bottom left;
}

.v-panel-caption-view {
      color: #004b98;
}
 
.view {
      background: white;     
}
[/color]

Step 13:

(Styles.css)


[color=#0000ff]
.toolbar {
      background: #ccc url(images/gradient.png) repeat-x bottom left;
}

.v-panel-caption-view {
      color: #004b98;
}
 
.view {
      background: white;     
}
[/color]

 [color=#ff00f6]
/* Theme table to look bit lighter */
.v-table-header-wrap {
      height: 20px;
      border: none;
      border-bottom: 1px solid #555;
      background: transparent url(images/table-header-bg.png) repeat-x;
}

.v-table-caption-container {
      font-size: 11px;
      color: #000;
      font-weight: bold;
      text-shadow: #fff 0 1px 0;
      padding-top: 1px;
}
 
.v-table-body {
      border: none;
}
 
.v-table-row-odd {
      background: #f1f5fa;
}
 
.v-table-row:hover {
      background: #fff;
}
 
.v-table-row-odd:hover {
      background: #f1f5fa;
}
 
.v-table .v-selected {
      background: #3d80df;
}
 
.v-table-cell-content {
      padding: 2px 6px 2px 3px;
      line-height: normal;
      font-size: 85%;
}
[/color]

Step 14:

(SharingOptions.java)


[color=#0000ff]
        setCaption("Sharing options");
        addComponent(new Label(
                "With these setting you can modify contact sharing "
                        + "options. (non-functional, example of modal dialog)"));
        addComponent(new CheckBox("Gmail"));
        addComponent(new CheckBox(".Mac"));
        Button close = new Button("OK");
[/color]
[color=#ff00f6]
        close.addListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                SharingOptions.this.close();
            }
        });
[/color][color=#0000ff]

        addComponent(close);
    }
}
[/color]

Step 15:

(SharingOptions.java)


[color=#0000ff]
import com.vaadin.ui.Button;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.Label;
import com.vaadin.ui.Window;
[/color]
[color=#ff00f6]
import com.vaadin.ui.Button.ClickEvent;
[/color]

[color=#0000ff]
public class SharingOptions extends Window {
    public SharingOptions() {
[/color]


2 - FINALS


File 1:

(AddressBookApplication.java)


FINAL

(AddressBookApplication.java)


package com.vaadin.demo.tutorial.addressbook;

import com.vaadin.demo.tutorial.addressbook.data.PersonContainer;
import com.vaadin.demo.tutorial.addressbook.data.SearchFilter;
import com.vaadin.demo.tutorial.addressbook.ui.HelpWindow;
import com.vaadin.demo.tutorial.addressbook.ui.ListView;
import com.vaadin.demo.tutorial.addressbook.ui.NavigationTree;
import com.vaadin.demo.tutorial.addressbook.ui.PersonForm;
import com.vaadin.demo.tutorial.addressbook.ui.PersonList;
import com.vaadin.demo.tutorial.addressbook.ui.SearchView;
import com.vaadin.demo.tutorial.addressbook.ui.SharingOptions;
import com.vaadin.Application;
import com.vaadin.data.Item;
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.Property.ValueChangeListener;
import com.vaadin.event.ItemClickEvent;
import com.vaadin.event.ItemClickEvent.ItemClickListener;
import com.vaadin.terminal.ThemeResource;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Component;
import com.vaadin.ui.Embedded;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.SplitPanel;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.Window.Notification;

@SuppressWarnings("serial")
public class AddressBookApplication extends Application implements
        ClickListener, ValueChangeListener, ItemClickListener {

    private NavigationTree tree = new NavigationTree(this);

    private Button newContact = new Button("Add contact");
    private Button search = new Button("Search");
    private Button share = new Button("Share");
    private Button help = new Button("Help");
    private SplitPanel horizontalSplit = new SplitPanel(
            SplitPanel.ORIENTATION_HORIZONTAL);

    // Lazyly created ui references
    private ListView listView = null;
    private SearchView searchView = null;
    private PersonList personList = null;
    private PersonForm personForm = null;
    private HelpWindow helpWindow = null;
    private SharingOptions sharingOptions = null;

    private PersonContainer dataSource = PersonContainer.createWithTestData();

    @Override
    public void init() {
        buildMainLayout();
        setMainComponent(getListView());
    }

    private void buildMainLayout() {
        setMainWindow(new Window("Address Book Demo application"));

        setTheme("contacts");

        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();

        layout.addComponent(createToolbar());
        layout.addComponent(horizontalSplit);
        layout.setExpandRatio(horizontalSplit, 1);

        horizontalSplit.setSplitPosition(200, SplitPanel.UNITS_PIXELS);
        horizontalSplit.setFirstComponent(tree);

        getMainWindow().setContent(layout);
    }

    private HorizontalLayout createToolbar() {
        HorizontalLayout lo = new HorizontalLayout();
        lo.addComponent(newContact);
        lo.addComponent(search);
        lo.addComponent(share);
        lo.addComponent(help);

        search.addListener((ClickListener) this);
        share.addListener((ClickListener) this);
        help.addListener((ClickListener) this);
        newContact.addListener((ClickListener) this);

        search.setIcon(new ThemeResource("icons/32/folder-add.png"));
        share.setIcon(new ThemeResource("icons/32/users.png"));
        help.setIcon(new ThemeResource("icons/32/help.png"));
        newContact.setIcon(new ThemeResource("icons/32/document-add.png"));

        lo.setMargin(true);
        lo.setSpacing(true);

        lo.setStyleName("toolbar");

        lo.setWidth("100%");

        Embedded em = new Embedded("", new ThemeResource("images/logo.png"));
        lo.addComponent(em);
        lo.setComponentAlignment(em, Alignment.MIDDLE_RIGHT);
        lo.setExpandRatio(em, 1);

        return lo;
    }

    private void setMainComponent(Component c) {
        horizontalSplit.setSecondComponent(c);
    }

    /*
     * View getters exist so we can lazily generate the views, resulting in
     * faster application startup time.
     */
    private ListView getListView() {
        if (listView == null) {
            personList = new PersonList(this);
            personForm = new PersonForm(this);
            listView = new ListView(personList, personForm);
        }
        return listView;
    }

    private SearchView getSearchView() {
        if (searchView == null) {
            searchView = new SearchView(this);
        }
        return searchView;
    }

    private HelpWindow getHelpWindow() {
        if (helpWindow == null) {
            helpWindow = new HelpWindow();
        }
        return helpWindow;
    }

    private SharingOptions getSharingOptions() {
        if (sharingOptions == null) {
            sharingOptions = new SharingOptions();
        }
        return sharingOptions;
    }

    public PersonContainer getDataSource() {
        return dataSource;
    }

    public void buttonClick(ClickEvent event) {
        final Button source = event.getButton();

        if (source == search) {
            showSearchView();
        } else if (source == help) {
            showHelpWindow();
        } else if (source == share) {
            showShareWindow();
        } else if (source == newContact) {
            addNewContanct();
        }
    }

    private void showHelpWindow() {
        getMainWindow().addWindow(getHelpWindow());
    }

    private void showShareWindow() {
        getMainWindow().addWindow(getSharingOptions());
    }

    private void showListView() {
        setMainComponent(getListView());
    }

    private void showSearchView() {
        setMainComponent(getSearchView());
    }

    public void valueChange(ValueChangeEvent event) {
        Property property = event.getProperty();
        if (property == personList) {
            Item item = personList.getItem(personList.getValue());
            if (item != personForm.getItemDataSource()) {
                personForm.setItemDataSource(item);
            }
        }
    }

    public void itemClick(ItemClickEvent event) {
        if (event.getSource() == tree) {
            Object itemId = event.getItemId();
            if (itemId != null) {
                if (NavigationTree.SHOW_ALL.equals(itemId)) {
                                    // clear previous filters
                                    getDataSource().removeAllContainerFilters();
                    showListView();
                } else if (NavigationTree.SEARCH.equals(itemId)) {
                    showSearchView();
                } else if (itemId instanceof SearchFilter) {
                    search((SearchFilter) itemId);
                }
            }
        }
    }

    private void addNewContanct() {
        showListView();
        personForm.addContact();
    }

    public void search(SearchFilter searchFilter) {
        // clear previous filters
        getDataSource().removeAllContainerFilters();
        // filter contacts with given filter
        getDataSource().addContainerFilter(searchFilter.getPropertyId(),
                searchFilter.getTerm(), true, false);
        showListView();

        getMainWindow().showNotification(
                "Searched for " + searchFilter.getPropertyId() + "=*"
                        + searchFilter.getTerm() + "*, found "
                        + getDataSource().size() + " item(s).",
                Notification.TYPE_TRAY_NOTIFICATION);
    }

    public void saveSearch(SearchFilter searchFilter) {
        tree.addItem(searchFilter);
        tree.setParent(searchFilter, NavigationTree.SEARCH);
        // mark the saved search as a leaf (cannot have children)
        tree.setChildrenAllowed(searchFilter, false);
        // make sure "Search" is expanded
        tree.expandItem(NavigationTree.SEARCH);
        // select the saved search
        tree.setValue(searchFilter);
    }

}

File 2:

(SearchView.java)


FINAL

(SearchView.java)


package com.vaadin.demo.tutorial.addressbook.ui;

import com.vaadin.demo.tutorial.addressbook.AddressBookApplication;
import com.vaadin.demo.tutorial.addressbook.data.PersonContainer;
import com.vaadin.demo.tutorial.addressbook.data.SearchFilter;
import com.vaadin.ui.Button;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.NativeSelect;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.Window.Notification;

@SuppressWarnings("serial")
public class SearchView extends Panel {

    private TextField tf;
    private NativeSelect fieldToSearch;
    private CheckBox saveSearch;
    private TextField searchName;
    private AddressBookApplication app;

    public SearchView(final AddressBookApplication app) {
        this.app = app;
        addStyleName("view");
        
        setCaption("Search contacts");
        setSizeFull();

        /* Use a FormLayout as main layout for this Panel */
        FormLayout formLayout = new FormLayout();
        setContent(formLayout);

        /* Create UI components */
        tf = new TextField("Search term");
        fieldToSearch = new NativeSelect("Field to search");
        saveSearch = new CheckBox("Save search");
        searchName = new TextField("Search name");
        Button search = new Button("Search");

        /* Initialize fieldToSearch */
        for (int i = 0; i < PersonContainer.NATURAL_COL_ORDER.length; i++) {
            fieldToSearch.addItem(PersonContainer.NATURAL_COL_ORDER);
            fieldToSearch.setItemCaption(PersonContainer.NATURAL_COL_ORDER,
                    PersonContainer.COL_HEADERS_ENGLISH);
        }

        fieldToSearch.setValue("lastName");
        fieldToSearch.setNullSelectionAllowed(false);

        /* Initialize save checkbox */
        saveSearch.setValue(true);
        saveSearch.setImmediate(true);
        saveSearch.addListener(new ClickListener() {
            public void buttonClick(ClickEvent event) {
                searchName.setVisible(event.getButton().booleanValue());
            }
        });

        search.addListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                performSearch();
            }

        });

        /* Add all the created components to the form */
        addComponent(tf);
        addComponent(fieldToSearch);
        addComponent(saveSearch);
        addComponent(searchName);
        addComponent(search);
    }

    private void performSearch() {
        String searchTerm = (String) tf.getValue();
        if (searchTerm == null || searchTerm.equals("")) {
            getWindow().showNotification("Search term cannot be empty!",
                    Notification.TYPE_WARNING_MESSAGE);
            return;
        }

        SearchFilter searchFilter = new SearchFilter(fieldToSearch.getValue(),
                searchTerm, (String) searchName.getValue());
        if (saveSearch.booleanValue()) {
            if (searchName.getValue() == null
                    || searchName.getValue().equals("")) {
                getWindow().showNotification(
                        "Please enter a name for your search!",
                        Notification.TYPE_WARNING_MESSAGE);
                return;
            }
            app.saveSearch(searchFilter);
        }
        app.search(searchFilter);
    }

}

File 3:

(SharingOptions.java)


FINAL

(SharingOptions.java)


package com.vaadin.demo.tutorial.addressbook.ui;

import com.vaadin.ui.Button;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.Label;
import com.vaadin.ui.Window;
import com.vaadin.ui.Button.ClickEvent;

@SuppressWarnings("serial")
public class SharingOptions extends Window {
    public SharingOptions() {
        /*
         * Make the window modal, which will disable all other components while
         * it is visible
         */
        setModal(true);

        /* Make the sub window 50% the size of the browser window */
        setWidth("50%");
        /*
         * Center the window both horizontally and vertically in the browser
         * window
         */
        center();

        setCaption("Sharing options");
        addComponent(new Label(
                "With these setting you can modify contact sharing "
                        + "options. (non-functional, example of modal dialog)"));
        addComponent(new CheckBox("Gmail"));
        addComponent(new CheckBox(".Mac"));
        Button close = new Button("OK");
        close.addListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                SharingOptions.this.close();
            }
        });
        addComponent(close);
    }
}

File 4:

(Styles.css)

C:\Program\eclipse\workspace\Chapter 7\WebContent\VAADIN\themes\contacts
FINAL


@import url(../runo/styles.css);
/* Using the old default theme (runo) as the basis for now */

/* Add some padding to the tree */
.v-tree {
      padding-top: 8px;
      padding-left: 4px;
}

.toolbar .v-button {
      display: block;
      width: 65px;
      height: 55px;
      background: transparent;
      border: none;
      text-align: center;
}
 
.toolbar .v-button img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 5px;
}

.toolbar .v-button span {
      font-size: x-small;
      text-shadow: #fafafa 1px 1px 0;
}

.v-app {
      background: #d0e2ec;
      font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
      color: #222;
}

.toolbar {
      background: #ccc url(images/gradient.png) repeat-x bottom left;
}

.v-panel-caption-view {
      color: #004b98;
}
 
.view {
      background: white;     
}

 /* Theme table to look bit lighter */
.v-table-header-wrap {
      height: 20px;
      border: none;
      border-bottom: 1px solid #555;
      background: transparent url(images/table-header-bg.png) repeat-x;
}

.v-table-caption-container {
      font-size: 11px;
      color: #000;
      font-weight: bold;
      text-shadow: #fff 0 1px 0;
      padding-top: 1px;
}
 
.v-table-body {
      border: none;
}
 
.v-table-row-odd {
      background: #f1f5fa;
}
 
.v-table-row:hover {
      background: #fff;
}
 
.v-table-row-odd:hover {
      background: #f1f5fa;
}
 
.v-table .v-selected {
      background: #3d80df;
}
 
.v-table-cell-content {
      padding: 2px 6px 2px 3px;
      line-height: normal;
      font-size: 85%;
}

3 - INICIALS


File 1:

(AddressBookApplication.java)


INICIO

[color=#0000ff]

package com.vaadin.demo.tutorial.addressbook;

import com.vaadin.Application;
import com.vaadin.data.Item;
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.Property.ValueChangeListener;
import com.vaadin.demo.tutorial.addressbook.data.PersonContainer;
import com.vaadin.demo.tutorial.addressbook.data.SearchFilter;
import com.vaadin.demo.tutorial.addressbook.ui.HelpWindow;
import com.vaadin.demo.tutorial.addressbook.ui.ListView;
import com.vaadin.demo.tutorial.addressbook.ui.NavigationTree;
import com.vaadin.demo.tutorial.addressbook.ui.PersonForm;
import com.vaadin.demo.tutorial.addressbook.ui.PersonList;
import com.vaadin.demo.tutorial.addressbook.ui.SearchView;
import com.vaadin.demo.tutorial.addressbook.ui.SharingOptions;
import com.vaadin.event.ItemClickEvent;
import com.vaadin.event.ItemClickEvent.ItemClickListener;
import com.vaadin.ui.Button;
import com.vaadin.ui.Component;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.SplitPanel;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.Window.Notification;

public class AddressBookApplication extends Application implements
		ClickListener, ValueChangeListener, ItemClickListener {

	private NavigationTree tree = new NavigationTree(this);

	private Button newContact = new Button("Add contact");
	private Button search = new Button("Search");
	private Button share = new Button("Share");
	private Button help = new Button("Help");
	private SplitPanel horizontalSplit = new SplitPanel(
			SplitPanel.ORIENTATION_HORIZONTAL);

	// Lazyly created ui references
	private ListView listView = null;
	private SearchView searchView = null;
	private PersonList personList = null;
	private PersonForm personForm = null;
	private HelpWindow helpWindow = null;
	private SharingOptions sharingOptions = null;

	private PersonContainer dataSource = PersonContainer.createWithTestData();

	@Override
	public void init() {
		buildMainLayout();
		setMainComponent(getListView());
	}

	private void buildMainLayout() {
		setMainWindow(new Window("Address Book Demo application"));

		VerticalLayout layout = new VerticalLayout();
		layout.setSizeFull();

		layout.addComponent(createToolbar());
		layout.addComponent(horizontalSplit);
		layout.setExpandRatio(horizontalSplit, 1);

		horizontalSplit.setSplitPosition(200, SplitPanel.UNITS_PIXELS);
		horizontalSplit.setFirstComponent(tree);

		getMainWindow().setContent(layout);
	}

	private HorizontalLayout createToolbar() {
		HorizontalLayout lo = new HorizontalLayout();
		lo.addComponent(newContact);
		lo.addComponent(search);
		lo.addComponent(share);
		lo.addComponent(help);

		search.addListener((ClickListener) this);
		share.addListener((ClickListener) this);
		help.addListener((ClickListener) this);
		newContact.addListener((ClickListener) this);

		return lo;
	}

	private void setMainComponent(Component c) {
		horizontalSplit.setSecondComponent(c);
	}

	/*
	 * View getters exist so we can lazily generate the views, resulting in
	 * faster application startup time.
	 */
	private ListView getListView() {
		if (listView == null) {
			personList = new PersonList(this);
			personForm = new PersonForm(this);
			listView = new ListView(personList, personForm);
		}
		return listView;
	}

	private SearchView getSearchView() {
		if (searchView == null) {
			searchView = new SearchView(this);
		}
		return searchView;
	}

	private HelpWindow getHelpWindow() {
		if (helpWindow == null) {
			helpWindow = new HelpWindow();
		}
		return helpWindow;
	}

	private SharingOptions getSharingOptions() {
		if (sharingOptions == null) {
			sharingOptions = new SharingOptions();
		}
		return sharingOptions;
	}

	public PersonContainer getDataSource() {
		return dataSource;
	}

	public void buttonClick(ClickEvent event) {
		final Button source = event.getButton();

		if (source == search) {
			showSearchView();
		} else if (source == help) {
			showHelpWindow();
		} else if (source == share) {
			showShareWindow();
		} else if (source == newContact) {
			addNewContanct();
		}
	}

	private void showHelpWindow() {
		getMainWindow().addWindow(getHelpWindow());
	}

	private void showShareWindow() {
		getMainWindow().addWindow(getSharingOptions());
	}

	private void showListView() {
		setMainComponent(getListView());
	}

	private void showSearchView() {
		setMainComponent(getSearchView());
	}

	public void valueChange(ValueChangeEvent event) {
		Property property = event.getProperty();
		if (property == personList) {
			Item item = personList.getItem(personList.getValue());
			if (item != personForm.getItemDataSource()) {
				personForm.setItemDataSource(item);
			}
		}
	}

	public void itemClick(ItemClickEvent event) {
		if (event.getSource() == tree) {
			Object itemId = event.getItemId();
			if (itemId != null) {
				if (NavigationTree.SHOW_ALL.equals(itemId)) {
                                    // clear previous filters
                                    getDataSource().removeAllContainerFilters();
					showListView();
				} else if (NavigationTree.SEARCH.equals(itemId)) {
					showSearchView();
				} else if (itemId instanceof SearchFilter) {
					search((SearchFilter) itemId);
				}
			}
		}
	}

	private void addNewContanct() {
		showListView();
		personForm.addContact();
	}

	public void search(SearchFilter searchFilter) {
		// clear previous filters
		getDataSource().removeAllContainerFilters();
		// filter contacts with given filter
		getDataSource().addContainerFilter(searchFilter.getPropertyId(),
				searchFilter.getTerm(), true, false);
		showListView();

		getMainWindow().showNotification(
				"Searched for " + searchFilter.getPropertyId() + "=*"
						+ searchFilter.getTerm() + "*, found "
						+ getDataSource().size() + " item(s).",
				Notification.TYPE_TRAY_NOTIFICATION);
	}

	public void saveSearch(SearchFilter searchFilter) {
		tree.addItem(searchFilter);
		tree.setParent(searchFilter, NavigationTree.SEARCH);
		// mark the saved search as a leaf (cannot have children)
		tree.setChildrenAllowed(searchFilter, false);
		// make sure "Search" is expanded
		tree.expandItem(NavigationTree.SEARCH);
		// select the saved search
		tree.setValue(searchFilter);
	}

}


[/color]

File 2:

(SearchView.java)


INICIO

[color=#0000ff]

package com.vaadin.demo.tutorial.addressbook.ui;

import com.vaadin.demo.tutorial.addressbook.AddressBookApplication;
import com.vaadin.demo.tutorial.addressbook.data.PersonContainer;
import com.vaadin.demo.tutorial.addressbook.data.SearchFilter;
import com.vaadin.ui.Button;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.NativeSelect;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;

public class SearchView extends Panel {

	private TextField tf;
	private NativeSelect fieldToSearch;
	private CheckBox saveSearch;
	private TextField searchName;
	private AddressBookApplication app;

	public SearchView(final AddressBookApplication app) {
		this.app = app;

		setCaption("Search contacts");
		setSizeFull();

		/* Use a FormLayout as main layout for this Panel */
		FormLayout formLayout = new FormLayout();
		setContent(formLayout);

		/* Create UI components */
		tf = new TextField("Search term");
		fieldToSearch = new NativeSelect("Field to search");
		saveSearch = new CheckBox("Save search");
		searchName = new TextField("Search name");
		Button search = new Button("Search");

		/* Initialize fieldToSearch */
		for (int i = 0; i < PersonContainer.NATURAL_COL_ORDER.length; i++) {
			fieldToSearch.addItem(PersonContainer.NATURAL_COL_ORDER[i]
);
			fieldToSearch.setItemCaption(PersonContainer.NATURAL_COL_ORDER[i]
,
					PersonContainer.COL_HEADERS_ENGLISH[i]
);
		}

		fieldToSearch.setValue("lastName");
		fieldToSearch.setNullSelectionAllowed(false);

		/* Initialize save checkbox */
		saveSearch.setValue(true);
		saveSearch.setImmediate(true);
		saveSearch.addListener(new ClickListener() {
			public void buttonClick(ClickEvent event) {
				searchName.setVisible(event.getButton().booleanValue());
			}
		});

		search.addListener(new Button.ClickListener() {
			public void buttonClick(ClickEvent event) {
				performSearch();
			}

		});

		/* Add all the created components to the form */
		addComponent(tf);
		addComponent(fieldToSearch);
		addComponent(saveSearch);
		addComponent(searchName);
		addComponent(search);
	}

	private void performSearch() {
		String searchTerm = (String) tf.getValue();
		SearchFilter searchFilter = new SearchFilter(fieldToSearch.getValue(),
				searchTerm, (String) searchName.getValue());
		if (saveSearch.booleanValue()) {
			app.saveSearch(searchFilter);
		}
		app.search(searchFilter);
	}

}


[/color]

File 3:

(SharingOptions.java)


INICIO

[color=#0000ff]

package com.vaadin.demo.tutorial.addressbook.ui;

import com.vaadin.ui.Button;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.Label;
import com.vaadin.ui.Window;

public class SharingOptions extends Window {
	public SharingOptions() {
		/*
		 * Make the window modal, which will disable all other components while
		 * it is visible
		 */
		setModal(true);

		/* Make the sub window 50% the size of the browser window */
		setWidth("50%");
		/*
		 * Center the window both horizontally and vertically in the browser
		 * window
		 */
		center();

		setCaption("Sharing options");
		addComponent(new Label(
				"With these setting you can modify contact sharing "
						+ "options. (non-functional, example of modal dialog)"));
		addComponent(new CheckBox("Gmail"));
		addComponent(new CheckBox(".Mac"));
		Button close = new Button("OK");
		addComponent(close);
	}
}


[/color]

File 4:

(Styles.css)

C:\Program\eclipse\workspace\Chapter 7\WebContent\VAADIN\themes\contacts
INICIO

[color=#0000ff]

NUEVO

[/color]