Skip to Content
Last modified by Steve Peery on 2013/05/29 14:41
From version 2.1
edited by Pascal Robert
on 2011/12/27 05:52
Change comment: There is no comment for this version
To version 16.1
edited by Theodore Petrosky
on 2013/05/29 14:41
Change comment: Migrated to Confluence 5.3

Summary

Details

Page properties
Parent
... ... @@ -1,0 +1,1 @@
1 +Getting Started
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.probert
1 +XWiki.tedpet
Tags
... ... @@ -1,0 +1,1 @@
1 +tutorials
Content
... ... @@ -1,10 +1,98 @@
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 2  
3 -First, we will create a new Wonder Application. In Eclipse, open the **File** menu, open **New** and select **Wonder Application**.
3 +First, we will create a new Wonder Application. In Eclipse, open the **File** menu, select **New** and select **Wonder Application**.
4 4  
5 -[[image:NewWOProject.png||border="1"]]
5 +[[image:attach:NewWOProject.png]]
6 6  
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}}
12 +
13 +The project wizard will ask for the project name. Enter **HelloWorld**. Click **Finish**.
14 +
15 +[[image:attach:SetProjectName.png]]
16 +
17 +{{info}}
18 +Don't put spaces in the project name, Eclipse has a hard time with projects that have spaces in the file system path.
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:attach:RunProject.png]]
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:attach:RelatedTab.png]]
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:attach:ComponentEditor.png]]
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:attach:RunConfig.png]]
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>>doc:Your First Rest Project]].
ComponentEditor.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +31.8 KB
Content
NewWOProject.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +63.8 KB
Content
ProjectInExplorer.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +31.2 KB
Content
RelatedTab.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +18.2 KB
Content
RunConfig.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +15.3 KB
Content
RunProject.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +136.3 KB
Content
SetProjectName.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +50.0 KB
Content
XWiki.XWikiComments[0]
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.pauljager
Comment
... ... @@ -1,0 +1,11 @@
1 +Hi. I'm a complete n00b with WebObjects/WOLips/Wonder. I feel pretty dumb because my code wont work, and its such a basic bit. I'm really hoping someone can help me out :). I can't get
2 + <wo:str value ="$myTextForDisplay" />
3 +
4 +to work. My error is:
5 +
6 +**Application: TestWO**
7 + **Error: com.webobjects.appserver.parser.woml.WOMLTemplateParserException exception**
8 + **Reason:**
9 + **com.webobjects.appserver.parser.woml.WOMLTemplateParserException: Main: 8:2: wo:str {null={value=$myTextForDisplay}} has no WOElement**
10 +
11 +...(the above error is from the web page)... I am getting frustrated such a simple first step seems out of my reach as I want to use this apple/nextstep/wonder stuff. I do !!! But already I feel i want to give up and go use something easier..Prob cos its now 3:21 am :(% style="text-decoration: line-through;" %)/ I'm confused if i even have my installation done properly :(%%)/ Anyway, I found some post online that i didn't quite understand that spoke of inline bindings for something with WOOgnl.frameworks. I don't get any "warnings" in my Eclipse IDE, so i guessed all is linked ok? Maybe not.. A post said to replace "$myValue" with "[myValue]", but that didn't  help. Am i not linked to the WOOgnl stuff? :(. Im really not sure how to fix that - i tried to follow the instructions. Also, I tried the Golips... it didn't work so had to go the long way installing (Golips seemed to work, but it just made a folder with nothing inside it... weird). ANy help would be awesome guys, thanks ! Paul. Im using OSX 10.7.5.
Date
... ... @@ -1,0 +1,1 @@
1 +2013-05-22 14:56:27.850
XWiki.XWikiComments[1]
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.probert
Comment
... ... @@ -1,0 +1,3 @@
1 +Hi Paul,
2 +
3 +You might need to add the WOOgnl framework to the build path of your project. Did you install the Project Wonder frameworks on your machine?
Date
... ... @@ -1,0 +1,1 @@
1 +2013-05-23 21:01:07.854
Reply To
... ... @@ -1,0 +1,1 @@
1 +0
XWiki.XWikiComments[2]
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.pauljager
Comment
... ... @@ -1,0 +1,3 @@
1 +Hi Pascal
2 +
3 +I did install wonder frameworks but I think there's problems with how I linked stuff. And prob with my build paths as you say. I also had a problem in the tutorial for adding a framework and using ant to compile... it said "WOlips framework doesn't exist" so clearly ive got the paths wrong? I'm trying to work out what the issue is... i downloaded the wonder code using instructions from here. Im confused as to where things "should" go... I also had a try of doing the ant-build on WOOgnl to see what would happen - it fails also but its a massive trace, complaining about lots of things - looks like i am missing lots of stuff i.e. "package org.apache.commons.lang does not exist", and "package er.extensions.appserver does not exist".. I have all the WOOgnl and WOLips frameworks listed as included libraries for the project in properties..
Date
... ... @@ -1,0 +1,1 @@
1 +2013-05-24 02:12:15.233