Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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! :)