Wiki source code of Your First Project - Hello World
Version 12.1 by Pascal Robert on 2011/12/27 07:07
Show last authors
author | version | line-number | content |
---|---|---|---|
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 | |||
3 | First, we will create a new Wonder Application. In Eclipse, open the **File** menu, select **New** and select **Wonder Application**. | ||
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}} | ||
11 | |||
12 | The project wizard will ask for the project name. Enter **HelloWorld**. Click **Finish**. | ||
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}} | ||
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 | |||
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 | |||
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 | |||
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 | |||
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 | |||
39 | [[image:RelatedTab.png||border="1"]] | ||
40 | |||
41 | In the **Main.java** editor tab, you will need to put one variable + one setter + one getter. Complete code: | ||
42 | |||
43 | {{code language="java" theme="Eclipse"}} | ||
44 | private String myTextForDisplay = "Hello World from the Java world"; | ||
45 | |||
46 | public String myTextForDisplay() { | ||
47 | return myTextForDisplay; | ||
48 | } | ||
49 | |||
50 | public void setMyTextForDisplay(String myTextForDisplay) { | ||
51 | this.myTextForDisplay = myTextForDisplay; | ||
52 | } | ||
53 | {{/code}} | ||
54 | |||
55 | Save the file. | ||
56 | |||
57 | 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. | ||
58 | |||
59 | [[image:ComponentEditor.png||border="1"]] | ||
60 | |||
61 | Remove the Hello World text from the HTML and replace it with: | ||
62 | |||
63 | {{code language="java" theme="Eclipse"}} | ||
64 | <wo:str value = "$myTextForDisplay" /> | ||
65 | {{/code}} | ||
66 | |||
67 | 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**. | ||
68 | |||
69 | [[image:RunConfig.png||border="1"]] | ||
70 | |||
71 | The application is now displaying the string for the Java variable You can terminate the application. | ||
72 | |||
73 | 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~:// | ||
74 | |||
75 | {{code language="java" theme="Eclipse"}} | ||
76 | |||
77 | <br /> | ||
78 | <wo:form> | ||
79 | <wo:textfield value = "$myTextForDisplay" /> | ||
80 | <wo:submit action = "~updateString" /> | ||
81 | </wo:form> | ||
82 | |||
83 | {{/code}} | ||
84 | |||
85 | 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: | ||
86 | |||
87 | {{code language="java" theme="Eclipse"}} | ||
88 | |||
89 | public WOActionResults updateString() { | ||
90 | return null; | ||
91 | } | ||
92 | |||
93 | {{/code}} | ||
94 | |||
95 | 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. |