Changes for page Your First Project - Hello World

Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -1,6 +1,6 @@
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	5	[[image:NewWOProject.png||border="1"]]
6	6	
...	...	@@ -8,3 +8,82 @@
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	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.
	32	+
	33	+After a couple of seconds, the project will be started and a page will open in your favorite browser. You just run 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	+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	+
	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.
	56	+
	57	+Remove the Hello World text from the HTML and replace it with:
	58	+
	59	+{{code language="java" theme="Eclipse"}}
	60	+<wo:str value = "$myTextForDisplay" />
	61	+{{/code}}
	62	+
	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**.
	64	+
	65	+The application is now displaying the string for the Java variable You can terminate the application.
	66	+
	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	+
	83	+ public WOActionResults updateString() {
	84	+ return null;
	85	+ }
	86	+
	87	+{{/code}}
	88	+
	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.