Skip to Content
Last modified by Steve Peery on 2013/05/29 14:41
From version 13.1
edited by Steve Peery
on 2013/01/14 11:03
Change comment: There is no comment for this version
To version 3.1
edited by Pascal Robert
on 2011/12/27 05:59
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.speery
1 +XWiki.probert
Content
... ... @@ -7,10 +7,9 @@
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.
11 11  {{/info}}
12 12  
13 -The project wizard will ask for the project name. Enter **HelloWorld**. Click **Finish**.
12 +The project wizard will ask for the project name. Enter **HelloWorld**
14 14  
15 15  [[image:SetProjectName.png||border="1"]]
16 16  
... ... @@ -17,82 +17,3 @@
17 17  {{info}}
18 18  Don't put spaces in the project name, Eclipse have a hard time with projects that have spaces in the file system path.
19 19  {{/info}}
20 -
21 -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:
22 -
23 -* **Sources**: this folder holds all of your Java source code. When you create a new project, that folder have 4 files: Application.java, Session.java, DirectAction.java and Main.java.
24 -* **JRE System Library**: don't touch this.
25 -* **Components**: this folder holds all of your Project Wonder components.
26 -* **Libraries**: if you have JARs, for example JDBC drivers, that you need for your project, put them in there.
27 -* **Resources**: that folder is for Project Wonder-specific files. A **Properties** file is added by default.
28 -* **WebServerResources**: that folder is for "static" content that you use in your components, be it images, CSS or JavaScript files.
29 -* **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.
30 -* **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.
31 -
32 -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"]]
33 -
34 -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
35 -
36 -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.
37 -
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.
39 -
40 -[[image:RelatedTab.png||border="1"]]
41 -
42 -In the **Main.java** editor tab, you will need to put one variable + one setter + one getter. Complete code:
43 -
44 -{{code language="java" theme="Eclipse"}}
45 -private String myTextForDisplay = "Hello World from the Java world";
46 -
47 -public String myTextForDisplay() {
48 - return myTextForDisplay;
49 -}
50 -
51 -public void setMyTextForDisplay(String myTextForDisplay) {
52 - this.myTextForDisplay = myTextForDisplay;
53 -}
54 -{{/code}}
55 -
56 -Save the file.
57 -
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.
59 -
60 -[[image:ComponentEditor.png||border="1"]]
61 -
62 -Remove the Hello World text from the HTML and replace it with:
63 -
64 -{{code language="java" theme="Eclipse"}}
65 -<wo:str value = "$myTextForDisplay" />
66 -{{/code}}
67 -
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**.
69 -
70 -[[image:RunConfig.png||border="1"]]
71 -
72 -The application is now displaying the string for the Java variable You can terminate the application.
73 -
74 -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~://
75 -
76 -{{code language="java" theme="Eclipse"}}
77 -
78 -<br />
79 -<wo:form>
80 -<wo:textfield value = "$myTextForDisplay" />
81 -<wo:submit action = "~updateString" />
82 -</wo:form>
83 -
84 -{{/code}}
85 -
86 -Now we have a simple form to update the string. The only thing we need to do is to implement the //updateString// method. Open the **Main.java** file and add the following code:
87 -
88 -{{code language="java" theme="Eclipse"}}
89 -
90 -public WOActionResults updateString() {
91 - return null;
92 - }
93 -
94 -{{/code}}
95 -
96 -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]].