Skip to Content
Version 7.1 by Pascal Robert on 2011/12/27 07:05
Hide last authors
Pascal Robert 1.1 1 For your first project, we will do the classic "Hello world" example. This tutorial is more for learning how the development tools works.
2
Pascal Robert 3.1 3 First, we will create a new Wonder Application. In Eclipse, open the **File** menu, select **New** and select **Wonder Application**.
Pascal Robert 1.1 4
5 [[image:NewWOProject.png||border="1"]]
6 
7
8 {{info}}
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 {{/info}}
Pascal Robert 3.1 11
Pascal Robert 4.1 12 The project wizard will ask for the project name. Enter **HelloWorld**. Click **Finish**.
Pascal Robert 3.1 13
14 [[image:SetProjectName.png||border="1"]]
15
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 {{/info}}
Pascal Robert 4.1 19
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:
21
22 * **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.
23 * **JRE System Library**: don't touch this.
24 * **Components**: this folder holds all of your Project Wonder components.
25 * **Libraries**: if you have JARs, for example JDBC drivers, that you need for your project, put them in there.
26 * **Resources**: that folder is for Project Wonder-specific files. A **Properties** file is added by default.
27 * **WebServerResources**: that folder is for "static" content that you use in your components, be it images, CSS or JavaScript files.
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 * **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
Pascal Robert 7.1 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"]]
Pascal Robert 4.1 32
Pascal Robert 7.1 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
Pascal Robert 4.1 34
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
Pascal Robert 7.1 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"]]
Pascal Robert 4.1 38
39 In the **Main.java** editor tab, you will need to put one variable + one setter + one getter. Complete code:
40
41 {{code language="java" theme="Eclipse"}}
42 private String myTextForDisplay = "Hello World from the Java world";
43
44 public String myTextForDisplay() {
45 return myTextForDisplay;
46 }
47
48 public void setMyTextForDisplay(String myTextForDisplay) {
49 this.myTextForDisplay = myTextForDisplay;
50 }
51 {{/code}}
52
53 Save the file.
54
Pascal Robert 7.1 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"]]
Pascal Robert 4.1 56
57 Remove the Hello World text from the HTML and replace it with:
58
Pascal Robert 5.1 59 {{code language="java" theme="Eclipse"}}
Pascal Robert 4.1 60 <wo:str value = "$myTextForDisplay" />
61 {{/code}}
62
Pascal Robert 7.1 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"]]
Pascal Robert 4.1 64
65 The application is now displaying the string for the Java variable You can terminate the application.
66
Pascal Robert 5.1 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~://
68
69 {{code language="java" theme="Eclipse"}}
70
71 <br />
72 <wo:form>
73 <wo:textfield value = "$myTextForDisplay" />
74 <wo:submit action = "~updateString" />
75 </wo:form>
76
77 {{/code}}
78
79 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:
80
81 {{code language="java" theme="Eclipse"}}
82
Pascal Robert 6.1 83 public WOActionResults updateString() {
Pascal Robert 5.1 84 return null;
85 }
86
87 {{/code}}
88
Pascal Robert 6.1 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.