Tutorial Online Vaadin - Complete Step-by-Step Chapter 4 (30steps + images)

Hello Vaadin Lovers! -_-
This is the continuation of this threat:
Thread whit steps for Chapter 3
.

This is the structure of this threat:
[b]

1 - Goal for
Chapter 4
(link)
2 - Step by Step
3 -

QUESTIONS

[/b]
(for “Advanced Users” if they have time to explain us “why” or if they can apport some source where it explains this questions.)




1 - Goal for chapter 4





2 - Step by Step



Step 1:
So let´s copy this code from
Chapter 4

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

import java.io.Serializable;

public class Person implements Serializable {
          private String firstName = "";
          private String lastName = "";
          private String email = "";
          private String phoneNumber = "";
          private String streetAddress = "";
          private Integer postalCode = null;
          private String city = "";
 
// + setters and getters for all fields
}


Step 2:
And we paste it on “Project Explorer” / SRC


Step 3:
And we get a new file called “Person.java”


Step 4:
We select the new file. And press ALT + SHIFT + S and apears this dialog.


Step 5:
We select all the “Checkboxes” and OK


Step 6:
This is how it looks the code automatically created.


Step 7:
Now we create a new “Package”. We take this pece of code “Source 30” from here
Chapter 4.3

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

import java.io.Serializable;

import com.vaadin.data.util.BeanItemContainer;

public class PersonContainer extends BeanItemContainer<Person> implements
          Serializable {
 
      public PersonContainer() throws InstantiationException,
      IllegalAccessException {
            super(Person.class);
      }
}


Step 8:
We paste it on the “Project Explorer”.


Step 9:
This is how it looks inside the new file created “PersonContainer.java”


Step 10:
Now we copy this code.

	public static final Object[] NATURAL_COL_ORDER = new Object[]
 {
			"firstName", "lastName", "email", "phoneNumber", "streetAddress",
			"postalCode", "city" };
	
	
	public static final String[] COL_HEADERS_ENGLISH = new String[]
 {
			"First name", "Last name", "Email", "Phone number",
			"Street Address", "Postal Code", "City" };


Step 11:
And paste it inside “PersonContainer.java” file


Step 12:
This is how it looks once it´s pasted.


Step 13:
Now we copy this code “Source 31”

public static PersonContainer createWithTestData() {
		final String[] fnames = { "Peter", "Alice", "Joshua", "Mike", "Olivia",
				"Nina", "Alex", "Rita", "Dan", "Umberto", "Henrik", "Rene",
				"Lisa", "Marge" };
		final String[] lnames = { "Smith", "Gordon", "Simpson", "Brown",
				"Clavel", "Simons", "Verne", "Scott", "Allison", "Gates",
				"Rowling", "Barks", "Ross", "Schneider", "Tate" };
		final String cities[] = { "Amsterdam", "Berlin", "Helsinki",
				"Hong Kong", "London", "Luxemburg", "New York", "Oslo",
				"Paris", "Rome", "Stockholm", "Tokyo", "Turku" };
		final String streets[] = { "4215 Blandit Av.", "452-8121 Sem Ave",
				"279-4475 Tellus Road", "4062 Libero. Av.", "7081 Pede. Ave",
				"6800 Aliquet St.", "P.O. Box 298, 9401 Mauris St.",
				"161-7279 Augue Ave", "P.O. Box 496, 1390 Sagittis. Rd.",
				"448-8295 Mi Avenue", "6419 Non Av.",
				"659-2538 Elementum Street", "2205 Quis St.",
				"252-5213 Tincidunt St.", "P.O. Box 175, 4049 Adipiscing Rd.",
				"3217 Nam Ave", "P.O. Box 859, 7661 Auctor St.",
				"2873 Nonummy Av.", "7342 Mi, Avenue",
				"539-3914 Dignissim. Rd.", "539-3675 Magna Avenue",
				"Ap #357-5640 Pharetra Avenue", "416-2983 Posuere Rd.",
				"141-1287 Adipiscing Avenue", "Ap #781-3145 Gravida St.",
				"6897 Suscipit Rd.", "8336 Purus Avenue", "2603 Bibendum. Av.",
				"2870 Vestibulum St.", "Ap #722 Aenean Avenue",
				"446-968 Augue Ave", "1141 Ultricies Street",
				"Ap #992-5769 Nunc Street", "6690 Porttitor Avenue",
				"Ap #105-1700 Risus Street",
				"P.O. Box 532, 3225 Lacus. Avenue", "736 Metus Street",
				"414-1417 Fringilla Street", "Ap #183-928 Scelerisque Road",
				"561-9262 Iaculis Avenue" };
		PersonContainer c = null;
		Random r = new Random(0);
		try {
			c = new PersonContainer();
			for (int i = 0; i < 100; i++) {
				Person p = new Person();
				p.setFirstName(fnames[r.nextInt(fnames.length)]
);
				p.setLastName(lnames[r.nextInt(lnames.length)]
);
				p.setCity(cities[r.nextInt(cities.length)]
);
				p.setEmail(p.getFirstName().toLowerCase() + "."
						+ p.getLastName().toLowerCase() + "@vaadin.com");
				p.setPhoneNumber("+358 02 555 " + r.nextInt(10) + r.nextInt(10)
						+ r.nextInt(10) + r.nextInt(10));
				int n = r.nextInt(100000);
				if (n < 10000) {
					n += 10000;
				}
				p.setPostalCode(n);
				p.setStreetAddress(streets[r.nextInt(streets.length)]
);
				c.addItem(p);
			}
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		return c;
	}

}


Step 14:
And we paste it inside “PersonContainer.java” right here.


Step 15:
This is how it looks after we paste it.


Step 16:
Now we copy this code. “Source 32” from
Chapter 4.4

private PersonContainer dataSource = PersonContainer.createWithTestData();


Step 17:
And paste it inside “AddressbookApplication.java”


Step 18:
This is how it looks once pasted


Step 19:
Now we copy “Source 33” from
Chapter 4.4

public PersonContainer getDataSource() {
           return dataSource;
      }


Step 20:
And we paste it right here.


Step 21:
This is how it looks once paste it.


Step 22:
Now we copy this “Source 34” from
Chapter 4.4

public PersonList(AddressBookApplication app) {
		setSizeFull();
		setContainerDataSource(app.getDataSource());

		setVisibleColumns(PersonContainer.NATURAL_COL_ORDER);
		setColumnHeaders(PersonContainer.COL_HEADERS_ENGLISH);
	}


Step 23:
And paste it over the this code inside “PersonList.java” and replace it with this one.


Step 24:
This is how it looks once paste it.


Step 25:
Now we move inside “AddressbookAplication.java” And search after this pece of code.


Step 26:
We click again over the code until we see this dialog. And click over IMPORT


Step 27:
Now we move on the same file “AddressbookApplication.java” until “Source 9” right here


Step 28:
And we add “this” inside the ( ).


Step 29:
And that´s all! Now we gonna just “Run on Server” and check after the result!


Step 30:
Just Finish button


Step 31:
And here we go!! PERFECT!! :lol:





3 - Questions



Question 1: No questions for the moment

Best regards! :slight_smile: