vaadin tutorials (relevant for working with database)

[lifemichael]

https://vaadin.com/tutorial - simple address book web application

https://vaadin.com/book/vaadin7/-/page/sqlcontainer.getting-started.html
- learn how to use sql container

[lifemichael]

package com.vaadin.tutorial.addressbook;




import com.vaadin.annotations.Title;
import com.vaadin.data.Container.Filter;
import com.vaadin.data.Item;
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.fieldgroup.FieldGroup;
import com.vaadin.data.util.IndexedContainer;
import com.vaadin.event.FieldEvents.TextChangeEvent;
import com.vaadin.event.FieldEvents.TextChangeListener;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.AbstractTextField.TextChangeEventMode;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.HorizontalSplitPanel;
import com.vaadin.ui.Table;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;




@Title("Addressbook")
public class AddressbookUI extends UI
{
//creating a table for showing all data on screen
private Table contactList = new Table();

//creating a simple text field to be used as a search text field
private TextField searchField = new TextField();

//creating two simple buttons
private Button addNewContactButton = new Button("New");
private Button removeContactButton = new Button("Remove this
contact");




// instantiating FormLayout... this layout will be shown on
// the right (when needed)
private FormLayout editorLayout = new FormLayout();




// instantiating FieldGroup.. the object we receive represents the
// fields we are dealing with (First Name, Last Name, Company, Mobile
Phone
// etc...).. the FieldGroup object doesn't have any meaning in terms
// of the user interface we see... we just use it for binding the
// text fields on screen with values represented by the
IndexedContainer
// object in our program... each time the values of another item
private FieldGroup editorFields = new FieldGroup();




// creating a simple IndexedContainer... we can later replace it with
// a container that represents a table on our database
IndexedContainer contactContainer = createDummyDatasource();




private static final String FNAME = "First Name";
private static final String LNAME = "Last Name";
private static final String COMPANY = "Company";
private static final String[] fieldNames = new String[]
{ FNAME, LNAME, COMPANY, "Mobile Phone", "Work Phone", "Home Phone",
"Work Email", "Home Email", "Street", "City", "Zip", "State",
"Country" };




protected void init(VaadinRequest request)
{
initLayout();
initContactList();
initEditor();
initSearch();
initAddRemoveButtons();
}




private void initLayout()
{




// creating the main layout
HorizontalSplitPanel splitPanel = new HorizontalSplitPanel();
setContent(splitPanel);




// setting the left layout
VerticalLayout leftLayout = new VerticalLayout();
splitPanel.addComponent(leftLayout);




// setting the right layout
splitPanel.addComponent(editorLayout);




// adding a table on the left layout
leftLayout.addComponent(contactList);




// adding a simple horizontal layout below the table on the left
layout
HorizontalLayout bottomLeftLayout = new HorizontalLayout();
leftLayout.addComponent(bottomLeftLayout);




// adding a simple text field and a simple button on the
// horizontal layout we placed below the table
bottomLeftLayout.addComponent(searchField);
bottomLeftLayout.addComponent(addNewContactButton);




// setting the size of the left layout to be full
leftLayout.setSizeFull();




// setting left layout expand ration to be 1
leftLayout.setExpandRatio(contactList, 1);




// setting the size of the table to be full
contactList.setSizeFull();




// setting the width of the small bottom left
// horizontal layout to be 100% of the left layout
bottomLeftLayout.setWidth("100%");




// setting the width of the text field we have
// on top of the bottom left layout to be 100%
// of the bottom left layout width
searchField.setWidth("100%");




// setting bottom left layout expand ratio
// to be 1
bottomLeftLayout.setExpandRatio(searchField, 1);




// setting margins for the right layout
editorLayout.setMargin(true);




// setting visibility of the right layout to be
// false... it will become true when needed
editorLayout.setVisible(false);
}




private void initEditor()
{
//creating the editor layout filled with
//text fields
for (String fieldName : fieldNames)
{
TextField field = new TextField(fieldName);
editorLayout.addComponent(field);
field.setWidth("100%");
//binding each text field with a specific
//field name
editorFields.bind(field, fieldName);
}
//adding a button (the remove button)
editorLayout.addComponent(removeContactButton);

//we set false for possible buffering of the field group
editorFields.setBuffered(false);
}




private void initSearch()
{




// setting the gray text we want to be displayed
// inside of the search text fields before
// the user enters his/her own text
searchField.setInputPrompt("Search contacts");




// setting that each time the text in our search field is changed an
event
// will take place.... the LAZY option from the TextChangeEventMode
enum
// possible values means that the event will take place only when
there is
// a pause in the text modification
searchField.setTextChangeEventMode(TextChangeEventMode.LAZY);




// here we set the listener for the search text field... the
textChange() method
// will be invoked on that listener each time a text change event
takes place
searchField.addTextChangeListener(new TextChangeListener()
{
// this method will be invoked each time the text inside
// the search text field changes
public void textChange(final TextChangeEvent event)
{
// removing any filters (if any)
contactContainer.removeAllContainerFilters();

// adding a new filter that will cause us to see just
// those items that include the text we entered into
// the search text field
contactContainer.addContainerFilter(new ContactFilter(event
.getText()));
}
});
}




private class ContactFilter implements Filter
{

/* this class implements Filter... each object instantiated form
this
* class can be served as a filter for the results we get
*/

private String needle;




public ContactFilter(String needle)
{
this.needle = needle.toLowerCase();
}




public boolean passesFilter(Object itemId, Item item)
{
String haystack = ("" + item.getItemProperty(FNAME).getValue()
+ item.getItemProperty(LNAME).getValue() + item
.getItemProperty(COMPANY).getValue()).toLowerCase();
// we implement a simple search
return haystack.contains(needle);
}




public boolean appliesToProperty(Object id)
{
return true;
}
}




private void initAddRemoveButtons()
{
addNewContactButton.addClickListener(new ClickListener()
{
public void buttonClick(ClickEvent event)
{




contactContainer.removeAllContainerFilters();
Object contactId = contactContainer.addItemAt(0);




contactList.getContainerProperty(contactId, FNAME).setValue(
"New");
contactList.getContainerProperty(contactId, LNAME).setValue(
"Contact");




contactList.select(contactId);
}
});




removeContactButton.addClickListener(new ClickListener()
{
public void buttonClick(ClickEvent event)
{
Object contactId = contactList.getValue();
contactList.removeItem(contactId);
}
});
}




private void initContactList()
{
// setting the table data source
contactList.setContainerDataSource(contactContainer);

// setting the visible coloumns to be just three
contactList.setVisibleColumns(new String[]
{ FNAME, LNAME, COMPANY });

// setting the table to allow user to select an item
contactList.setSelectable(true);

// set the table to respond immediately when it changes
contactList.setImmediate(true);




// setting a listener for changes in the item selected from our
table
contactList.addValueChangeListener(new
Property.ValueChangeListener()
{
public void valueChange(ValueChangeEvent event)
{
/*
* this function will be invoked each time the user selects
another
* item from the list... when it happens we need to update the
* editor fields with the data of the selected item
*/

Object contactId = contactList.getValue();




editorFields.setItemDataSource(contactList.getItem(contactId));




editorLayout.setVisible(contactId != null);
}
});
}




private static IndexedContainer createDummyDatasource()
{




// instantiating IndexedContainer class... later, we can
// switch this class with a container that represents a database
table
IndexedContainer ic = new IndexedContainer();




// setting properties for the new IndexedContainer object
// with empty strings as their default values
for (String p : fieldNames)
{
ic.addContainerProperty(p, String.class, "");
}




// populating the IndexedContainer object with 1000 items
// first name and last name are randomly selected for each
// item and the rest of the properties remain with empty strings
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" };
for (int i = 0; i < 1000; i++)
{
Object id = ic.addItem();
ic.getContainerProperty(id, FNAME).setValue(
fnames[(int) (fnames.length * Math.random())]);
ic.getContainerProperty(id, LNAME).setValue(
lnames[(int) (lnames.length * Math.random())]);
}
return ic;
}
}







On Jun 9, 8:24 am, lifemichael <haim.mich...@gmail.com> wrote:
> https://vaadin.com/tutorial- simple address book web application