Skip to Content
Last modified by Steve Peery on 2013/05/29 14:41
From version 7.1
edited by Pascal Robert
on 2011/12/27 07:05
Change comment: There is no comment for this version
To version 14.1
edited by Theodore Petrosky
on 2013/05/29 14:41
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.probert
1 +XWiki.tedpet
Content
... ... @@ -7,6 +7,7 @@
7 7  
8 8  {{info}}
9 9  If the Wonder project types don't appear in the File->New menu, you are probably in a Java perspective instead of WOLips.
10 +Go to the Window->Open Perspective->Other... menu and select WOLips.
10 10  {{/info}}
11 11  
12 12  The project wizard will ask for the project name. Enter **HelloWorld**. Click **Finish**.
... ... @@ -14,7 +14,7 @@
14 14  [[image:SetProjectName.png||border="1"]]
15 15  
16 16  {{info}}
17 -Don't put spaces in the project name, Eclipse have a hard time with projects that have spaces in the file system path.
18 +Don't put spaces in the project name, Eclipse has a hard time with projects that have spaces in the file system path.
18 18  {{/info}}
19 19  
20 20  The project have been created, you will see it in the **WO Explorer** tab. Expand it (click on the triangle next to the project name) and you will see the following folders:
... ... @@ -34,8 +34,10 @@
34 34  
35 35  Now, let's make the "Hello World" to be dynamic. If the HelloWorld application is still running, terminate it by clicking on the square red button in the **Console** tab.
36 36  
37 -In the project, open the **Sources** folder, open the **your.app.components** package and open **Main.java**. **Main.java** is the Java part of a Project Wonder component. If you check the content of the **Related** tab, you will see that **Main.java** is related to other files like **Main.wo** and **Main.api**, it's a good way to find out if a Java class is part of a component. [[image:RelatedTab.png||border="1"]]
38 +In the project, open the **Sources** folder, open the **your.app.components** package and open **Main.java**. **Main.java** is the Java part of a Project Wonder component. If you check the content of the **Related** tab, you will see that **Main.java** is related to other files like **Main.wo** and **Main.api**, it's a good way to find out if a Java class is part of a component.
38 38  
40 +[[image:RelatedTab.png||border="1"]]
41 +
39 39  In the **Main.java** editor tab, you will need to put one variable + one setter + one getter. Complete code:
40 40  
41 41  {{code language="java" theme="Eclipse"}}
... ... @@ -52,8 +52,10 @@
52 52  
53 53  Save the file.
54 54  
55 -So now we have a variable to display the content of a string. The next step is to open the HTML part of the component to actually display the string. In the **Related** view, double-click on the **Main.wo** file. This action will open the component in the Component Editor. [[image:ComponentEditor.png||border="1"]]
58 +So now we have a variable to display the content of a string. The next step is to open the HTML part of the component to actually display the string. In the **Related** view, double-click on the **Main.wo** file. This action will open the component in the Component Editor.
56 56  
60 +[[image:ComponentEditor.png||border="1"]]
61 +
57 57  Remove the Hello World text from the HTML and replace it with:
58 58  
59 59  {{code language="java" theme="Eclipse"}}
... ... @@ -60,8 +60,10 @@
60 60  <wo:str value = "$myTextForDisplay" />
61 61  {{/code}}
62 62  
63 -And save your modifications. You are now ready to run the application again. The first time you ran the application, it created a run configuration inside Eclipse, so to run the application again, click on the green circle with a white arrow in the toolbar, and select **HelloWorld**. [[image:RunConfig.png||border="1"]]
68 +And save your modifications. You are now ready to run the application again. The first time you ran the application, it created a run configuration inside Eclipse, so to run the application again, click on the green circle with a white arrow in the toolbar, and select **HelloWorld**.
64 64  
70 +[[image:RunConfig.png||border="1"]]
71 +
65 65  The application is now displaying the string for the Java variable You can terminate the application.
66 66  
67 67  Final step: making the string truly variable by having a small text field to update the string. To do so, go back into the Main component editor view and just after the //<wo:str_ call, add~://
... ... @@ -87,3 +87,5 @@
87 87  {{/code}}
88 88  
89 89  Run the project again, and update the string in the text field. It's now 100% dynamic Since we added a setter for the variable a couple of steps before, you don't need to set the string in the updateString method, that's the power of bindings.
97 +
98 +[[You can move on to the next tutorial>>Your First Rest Project]].