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

Hello Vaadin Lovers! -_-

This is the structure of this threat:
[b]

1 - Goal for
Chapter 3
(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 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! :slight_smile:


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 :wink:


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”?

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!

:grin: excellent - 80 pictures is worth 80,000 words!