Newbie - Trying tutorial - Between Chapter 3&4 - Eleven steps with image.

Jan73 · March 22, 2012, 2:44pm

Hello Vaadin lovers! =)
Am trying the tutorial
Vaadin.com Tutorial Online

Using “Eclipse”. NOTE: Sorry for my English, but am not a native english speaker, I try my best!

Right now am Between Chapter 3&4
Chapter 3

And this is
the goal
fors this chapter: (To see in the browser of Eclipse this image)

This is
the wrong result I get back:
(The browser inside Eclipse shows: Nothing (after I make a “Debug on server”)

This is
Step-by-Step
I had taken to get my “wrong” result.

STEP 1:
This is my workspace situation on Eclipse. Where I start from.

STEP 2:
This is the source provided on the tutorial
Chapter 3

STEP 3:
I paste the copied source from the Tutorial over the “Hello world” source.

STEP 3.1:
And now I have inside Eclipse pasted the new source.

STEP 4:
Now I go again to the tutorial after more Source
Chapter 3

STEP 5:
And I gonna paste the new source after the source pasted before

STEP 5.1:
Here I paste the new source.

STEP 5.2:
This is how it looks after I have pasted the new source.

On this step Pops up (

3 questions

in my mind):

QUESTION 1:

(This simbol doesn´t look well ;D) (You think this is interfering on my wrong result?)

-

QUESTION 2:

(This simbols doesn´t look well to ;D) (You think this is interfering on my wrong result?) [b]
[color=#fd00e4]

[/color]Why the pink arrow??
[/b]

QUESTION 3:

(This simbols doesn´t look well to ;D) (You think this is interfering on my wrong result?)

STEP 6:
I go again to the tutorial after a “bit” of code
Chapter 3

STEP 6.1:
Here is where I paste it on Eclipse

STEP 6.2:
This is how it looks after I paste it

On this step Pops up (

3 questions

in my mind):

QUESTION 1:

This simbols looks even worst than the simbols before! This is normal?
QUESTION 2:

This simbols looks even worst than the simbols before! This is normal?
QUESTION 3:

This simbols looks even worst than the simbols before! This is normal?

STEP 7:
Now I jump to the next chapter
Chapter 4

STEP 8:
I copy the new source provided inside Chapter 4

STEP 8.1:
I go to Eclipse after the last Source pasted

STEP 8.2:
I paste the new source from Chapter 4

STEP 8.3:
This is how it looks after I paste the new source.

STEP 9:
What means this? I never seen this word before. Hint??

STEP 10:
Am exited! So I gonna try my brand new pasted source. I make a Debug on Server.

STEP 10.1:
I don´t change anything just run Finish!

STEP 11:
“THE WRONG RESULT” This is my wrong result!

It´s obvious that I am doing something wrong.
But the question is:

In witch step?

Thanks a lot for your patience!
I hope some day be so great as your are! =D

Mathias1 · March 23, 2012, 12:24am

I know that trying to understand what is happening in eclipse can be difficult.
I will try to explain the basics.

The icon overlays :

A warning symbol (exclamation sign on yellow /!) shows that your code is not perfect but will work.
For instance your have created some object but you are not using them, you are using an old method which was replaced by a new better way of doing it (called “deprecated” in java), …
That’s why in step 5.2 “newContact” is displayed as a warning (it is not used yet) and
SplitPanel
is striked through because now the prefred way is to use either HorizontalSplitPanel or VerticalSplitPanel (not up to date tutorial ?).
An error symbol (white cross on red) shows that there is an error. Your code will not work at all in this case.

If you put your mouse cursor on white line with a warning or error should open a tooltip with an explanation.

About the “setTheme(“runo”);” line. This is java code, you can’t put it anywhere you want, it has to be inside a function. So it needs to be between the { and } of buildLayout.

In step 8, you are copy/pasting another function called “buildLayout”, in Java different functions need to have different names. The text of the tutorial tells you to replace the previous “buildLayout” by the new version.

Step 9 : “hint” means “an helpful quick comment which may help you a lot”

In result, as your code has errors, it does not work.

From those errors I can see that you are not familiar with java.
You will loose a lot of time trying to discover java like this. Do some basic java tutorials to understand how it works and come back to vaadin once you know start feeling comfortable. Like this you will be able to actually understand the tutorial and not just copy/paste and hope for the best.

Jan73 · March 23, 2012, 11:42am

Thanks Mathias!

Here my new result: (looks much better)

My new Step-By-Step used.

Step 1:
I create from scratch a new project in Eclipse

Step 2:
Just Next

Step 3:
I give a name to the project

Step 3.1:
I give “AddressBook” as a project name.

Step 3.2:
Just finish button.

Step 4:
Now it´s created a new Project. In my Project explorer panel I can find it.

Step 4.1:
In this step am looking after “AddresbookApplication.java” to could change the source.

Step 4.2:
I just double clicked on “AddresbookApplication.java” file, and it oppened the source panel.

Step 5:
In this step I go to the
Vaadin - Online Tutorial - Chapter 3
and copy the
“source 1”
provided.

Step 6:
I go again to Eclipse and I paste the
“Source 1”
over the template source.

Step 6.1:
This is how it looks after I have pasted the new source.

Step 7:
In this step I go to the
Vaadin - Online Tutorial - Chapter 3
and copy the
“source 2”
provided.

Step 8:
I put some comments to see more clearly Where I pasted each source. Right after
“Source 1”
I paste
“Source 2”

Step 8.1:
I click Paste on Eclipse.

Step 8.2:
Here is how it looks on my Eclipse
“Source 2”
after I pasted it.

Step 9:
Now I move on to the next Chapter
Vaadin - Online Tutorial - Chapter 4

Step 10:
And I copy
“Source 3”

Step 11:
Now again on Eclipse, I paste it over a part of
“Source 1”
right in the end of
“Source 1”

Step 11.1:
This is how it looks after I paste it over the
“Source 3”

Step 12:
Now I go again to the previous Chapter looking for a “note” that saids to include a little bit of code.
Vaadin - Online Tutorial - Chapter 3
I call it
“Source 4”

Step 13:
I find the note, and i copy
“Source 4”

Step 14:
Go again to Eclipse and paste Inside BuidMainLayout { “here” }
“source 4”

Step 14.1:
This is how it looks after I paste it on it.

Step 15:
Now I close the Source panel.

Step 15.1:
Save the document

Step 15.2:
Right-Click on the project on the “Project Browser” and make a “Debug on Server”

Step 15.3:
I select the server manually, Tomcat v7, and finish

Step 16:
This is my “Brand new result”

Step 17:
This is how it “should” look in the turorial
Vaadin - Online Tutorial - Chapter 4

During this steps I get 2 big questions in my head:

QUESTION 1:

Why it doesn´t look “EXACTLY” the same?

QUESTION 2:

How should like be the bit of code that is
stroken
on
“Step 8.2”
. What text I have to put instead of
“SplitPanel”
?

Thanks a lot for your patience!
I hope some day be so great as your are! =D

PS. Sorry for my English, but am not a native english speaker, I try my best!

Jan73 · March 23, 2012, 11:50am

I know, I know,
My eviroment is HTML, CSS, PHP, MySQL right now.
But “Vaadin” is ofering me “EXACTLY” what I have Wished in PHP for a long time ago. But PHP it´s so Slow!!

So before I want to start learning “JAVA”. I want to see in a “PRACTICAL” way how is to work with “Vaadin”. Couse learn Java is a big investment of “TIME” I guess.

By the way, Thanks again!

You are my “Vaadin” Hero! =D

Mathias1 · March 26, 2012, 4:49am

For the differences, I guess you are missing a setSizeFull() somewhere.
Maybe on the window or on a layout. Hard to tell just like this, in your browser add “?debug” to the url (without the quotes) and click on “AL” (or “Analyse Layout” on some versions) and it may tell you in the debug window where the size problem is coming from.

If you are familiar with PHP I don’t think picking up on java would take much time. They have common ancestors so they are not so far away each other.
The hardest is not to mix the 2 languages if you have to switch often (as I do mostly with python…)