Skip to Content
Last modified by Steve Peery on 2013/05/29 14:41
From version 17.1
edited by Theodore Petrosky
on 2023/11/13 11:54
Change comment: Renamed from xwiki:WEB.Your First Project - Hello World
To version 14.1
edited by Theodore Petrosky
on 2013/05/29 14:41
Change comment: There is no comment for this version

Summary

Details

Page properties
Parent
... ... @@ -1,1 +1,0 @@
1 -Getting Started
Tags
... ... @@ -1,1 +1,0 @@
1 -tutorials
Content
... ... @@ -1,18 +1,18 @@
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, select **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:attach:NewWOProject.png]]
5 +[[image:NewWOProject.png||border="1"]]
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 +Go to the Window->Open Perspective->Other... menu and select WOLips.
11 11  {{/info}}
12 12  
13 13  The project wizard will ask for the project name. Enter **HelloWorld**. Click **Finish**.
14 14  
15 -[[image:attach:SetProjectName.png]]
15 +[[image:SetProjectName.png||border="1"]]
16 16  
17 17  {{info}}
18 18  Don't put spaces in the project name, Eclipse has a hard time with projects that have spaces in the file system path.
... ... @@ -29,15 +29,15 @@
29 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 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 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]]
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 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!
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 35  
36 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 37  
38 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 39  
40 -[[image:attach:RelatedTab.png]]
40 +[[image:RelatedTab.png||border="1"]]
41 41  
42 42  In the **Main.java** editor tab, you will need to put one variable + one setter + one getter. Complete code:
43 43  
... ... @@ -57,7 +57,7 @@
57 57  
58 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 59  
60 -[[image:attach:ComponentEditor.png]]
60 +[[image:ComponentEditor.png||border="1"]]
61 61  
62 62  Remove the Hello World text from the HTML and replace it with:
63 63  
... ... @@ -67,11 +67,11 @@
67 67  
68 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 69  
70 -[[image:attach:RunConfig.png]]
70 +[[image:RunConfig.png||border="1"]]
71 71  
72 -The application is now displaying the string for the Java variable! You can terminate the application.
72 +The application is now displaying the string for the Java variable You can terminate the application.
73 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:
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 75  
76 76  {{code language="java" theme="Eclipse"}}
77 77  
... ... @@ -93,6 +93,6 @@
93 93  
94 94  {{/code}}
95 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.
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 97  
98 -[[You can move on to the next tutorial>>doc:Your First Rest Project]].
98 +[[You can move on to the next tutorial>>Your First Rest Project]].
ComponentEditor.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -31.8 KB
Content
NewWOProject.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -63.8 KB
Content
ProjectInExplorer.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -31.2 KB
Content
RelatedTab.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -18.2 KB
Content
RunConfig.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -15.3 KB
Content
RunProject.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -136.3 KB
Content
SetProjectName.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
Size
... ... @@ -1,1 +1,0 @@
1 -50.0 KB
Content
XWiki.XWikiComments[0]
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.pauljager
Comment
... ... @@ -1,11 +1,0 @@
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,1 +1,0 @@
1 -2013-05-22 14:56:27.850
XWiki.XWikiComments[1]
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.probert
Comment
... ... @@ -1,3 +1,0 @@
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,1 +1,0 @@
1 -2013-05-23 21:01:07.854
Reply To
... ... @@ -1,1 +1,0 @@
1 -0
XWiki.XWikiComments[2]
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.pauljager
Comment
... ... @@ -1,3 +1,0 @@
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,1 +1,0 @@
1 -2013-05-24 02:12:15.233