Skip to Content
Last modified by Steve Peery on 2013/05/29 14:41
From version 6.1
edited by Pascal Robert
on 2011/12/27 07:02
Change comment: There is no comment for this version
To version 9.1
edited by Pascal Robert
on 2012/08/09 05:05
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -28,14 +28,16 @@
28 28  * **woproject**: this folder holds 6 files that the Ant builder use to include or exclude files and folders in the build product. 99% of the time, you don't need to customize those files.
29 29  * **build.xml**: This is the XML file to build the project with Ant. Note that this is to build a "product", when you run the project in Eclipse, it use the incremental builder instead of Ant.
30 30  
31 -So let's run the project. Expand the **Sources** folder, expand the **your.app** package, right-click on **Application.java** and select **Run As** > **WOApplication**. This action will start the project and it will create a run configuration for Eclipse.
31 +So let's run the project. Expand the **Sources** folder, expand the **your.app** package, right-click on **Application.java** and select **Run As** > **WOApplication**. This action will start the project and it will create a run configuration for Eclipse. [[image:RunProject.png||border="1"]]
32 32  
33 -After a couple of seconds, the project will be started and a page will open in your favorite browser. You just run your first Project Wonder application, congratulations
33 +After a couple of seconds, the project will be started and a page will open in your favorite browser. You just ran your first Project Wonder application, congratulations
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 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.
38 38  
39 +[[image:RelatedTab.png||border="1"]]
40 +
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"}}
... ... @@ -54,6 +54,8 @@
54 54  
55 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.
56 56  
59 +[[image:ComponentEditor.png||border="1"]]
60 +
57 57  Remove the Hello World text from the HTML and replace it with:
58 58  
59 59  {{code language="java" theme="Eclipse"}}
... ... @@ -62,6 +62,8 @@
62 62  
63 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**.
64 64  
69 +[[image:RunConfig.png||border="1"]]
70 +
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.
96 +
97 +[[You can move on to the next tutorial>>Your First Rest Project]].