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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Tutorial Online Vaadin - Complete Step-by-Step Chapter 3 (70steps + images)

Jan Öberg
10 years ago Mar 24, 2012 11:28am

Hello Vaadin Lovers! -_-

This is the structure of this threat:
1 - Goal for Chapter 3 (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 3
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
2 - Step by Step
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Step 1: We create a new Project


Step 2: Just next

Step 3: We give it a name


Step 4: We search on the "Project Explorer" panel after "AddressbookApplication.java" file. And double click on it.


Step 5: I write "// Original" comment on the Original source.


Step 6: We go after "Source 1" on this link: Chapter 3.1


Step 7: We selecte this part of source on "Eclipse" and paste over "Source 1"


Step 8: This is how it looks after. Notice that I commented "// Source 1" on it so it is more simple for you to follow me in witch part of the code I am.


Step 9: I go to the tutorial again after "// Source 2" Chapter 3.1


Step 10: I paste it right over "// Source 1"


Step 11: This is how it looks "// Source 2" on Eclipse.


Step 12: I go to the tutorial again after this pece of code "// Source 3". Chapter 3.1


Step 13: And here is where I paste it on "Eclipse" inside "// Source 1". Inside "buildMainLayout".


Step 14: This is how it looks when I have paste it.


Step 15: We move on to the next chapter. Chapter 3.2


Step 16: I select "// Source 4". (Notice that I don´t take all the source! Couse there is already this pece of code inside our Eclipse.


Step 17: And here is where I paste it on "Eclipse" right before "// Source 1" Ends.


Step 18: This is how it looks when I have paste it.


Step 19: Now I want to make one test if there is some "errors" on the code. So i make a "Run on server"


Step 20: Just finish here.


Step 21: This is how it looks our code. Great jobb! :)


Step 22: I move on to the next chapter. Chapter 3.3


Step 23: I copy "// Source 5"


Step 24: Inside "Eclipse" again. I click right click on "SRC" ico and PASTE.


Step 25: This new file was created "NavigationTree.java"


Step 26: I just comment "// Source 5" over.


Step 27: I go to the tutorial and copy "// Source 6"


Step 28: I paste it on Eclipse right over "Source 2"


Step 29: This is how it looks after paste it.


Step 30: Couse when I paste this source, it apears a simbol with a red CROSS. I click on "Source 6" And it pops up this dialog. And I chose IMPORT


Step 31: I go to the tutorial after "Source 7" and y copy it.


Step 32: I paste it inside "Source 4 right after "HorizontalSplic.set..etc" and before "getMainWindows...etc"


Step 33: This is how it looks after paste it


Step 34: I copy "Source 8"


Step 35: Here is where I paste "Source 8". Right after "Source 1 END".


Step 36: This is how it looks after paste it.


Step 37: I go after "Source 9"


Step 38: And I paste it on "The Project Explorer" panel, Right click over "SRC" and Paste.


Step 39: this is how it looks. A new "LisView.java" file created, and the source inside.


Step 40: I copy "Source 10"


Step 41: I paste it over "Source 6"


Step 42: This is how it looks after paste.


Step 43: Couse it popped up again the red CROSS, I click on the source and appears the dialog. And I choose IMPORT.


Step 44: I copy "source 11"


Step 45: And I paste it after "Source 8".


Step 46: This is how it looks after paste it.


Step 47: I go And copy "Source 12"


Step 48: And I paste it inside "Source 1" after "buildMainLayou();"


Step 49: This is how it looks after paste.


Step 50: I copy "Source 13"


Step 51: And I paste it inside "Project Explorer" / and right click over "SRC" map. And choose paste.


Step 52: This is how it looks. after paste it. Ops! Instead to be called "Source 14" as in the image. This sould have been called "Source 13" Sorry ;)


Step 53: We go after "Source 15" (Source 13 and 14 it´s the same ;))


Step 54: And I paste it on "SRC" inside "Project Explorer"


Step 55: This is how it looks after paste.


Step 56: I just copy the 2 first row on this source. "Source 16"


Step 57: And paste it between "Source 10" and "Source 6".


Step 58: This is how it looks after paste.


Step 59: Couse I get 2 red CROSS simbols. I click on the source and click IMPORT


Step 60: The same with this code. I click on the source and click IMPORT


Step 61: I copy "Source 17" just this part of the code.


Step 62: And I paste it inside "Source 11" after "if (listView == null) "


Step 63: This is how it looks after paste.


Step 64: I go to the tutorial and copy "Source 18"


Step 65: I go inside "Project Explorer" right click on "SRC" map, and paste it over.


Step 66: Pops up that this file already exist. And I Overwrite it.


Step 67: This is how it looks "Source 18"


Step 68: Now I want to check if everything is running right. I choose "Run on server"


Step 69: Just finish button.


Step 70: And "voilá!" this is how it looks when we run it.!


Chapter 3.4: Right now in this moment Am not "exactly" what´s going on. So wait some days, so I gonna bring back how to put this peces togheter.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
3 - Questions
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Question 1: (Why doesn´t look exactly the "Tutorial result" against result on "step 21"?

Last updated on Mar, 24th 2012
Jan Öberg
10 years ago Mar 24, 2012 6:06pm

This is the steps for Chapter 3.4

Step 1: Copy this code. "Source 25"

private HelpWindow helpWindow = null; 
	private SharingOptions sharingOptions = null; 

Step 2: Paste it here

Step 3: This is how it looks after paste

Step 4: Copy this code. "Source 26"

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

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

Step 5: Paste it here

Step 6: This is how it looks after paste it.

Step 7: Lets find this pece of code here: Chapter 3.4

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

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

public class HelpWindow extends Window {
     private static final String HELP_HTML_SNIPPET = "This is "
             + "an application built during <strong><a href=\""
             + "http://dev.vaadin.com/\">Vaadin</a></strong> "
             + "tutorial. Hopefully it doesn't need any real help.";

    public HelpWindow() {
         setCaption("Address Book help");
         addComponent(new Label(HELP_HTML_SNIPPET, Label.CONTENT_XHTML));
     }

}

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);
     }
 }

Step 8: Paste it here

Step 9: This code have create this two new files!

That´s all on this Chapter! =D
Good Luck!

Last updated on Mar, 24th 2012
Marko Grönroos
10 years ago Mar 25, 2012 1:07am