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:
1 - Goal for Chapter 4 (link)2 - Step by Step 3 - QUESTIONS (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! :)