Changes for page Hello World - Your First WebObjects Application

Summary

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

Details

Page properties

Title

...	...	@@ -1,1 +1,1 @@
1		-Hello World - Your First WebObjects Application
	1	+Programming__WebObjects-Hands On___Hello World - Your First WebObjects Application

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.probert
	1	+XWiki.smmccraw

Content

...	...	@@ -1,11 +1,8 @@
1		-{{warning}}
2		-This information is now located [here|WONDER:Project Wonder Installation]
3		-{{/warning}}
	1	+=== Create a New WebObjects Project ===
4	4
5		-=== Create a New WebObjects Project ===
	3	+Launch Xcode (found in Developer->Applications). Choose 'New Project...' from the 'File' menu to display to 'New Project' Assistant.
	4	+Scroll to the bottom of the list of project types and choose 'WebObjects Application'.
6	6
7		-Make sure that Eclipse and WOLips are [[installed>>WOL:Install WOLips with Eclipse Update Manager]].  Launch Eclipse, chosse //New//>//WebObjects Application// from the //File// menu.
8		-
9	9	Click 'Next'.
10	10	Type 'HelloWorld' as the 'Project Name' and click on the 'Set...' button to specify that you'd like to save your project to the desktop, or where ever you'd like to save your project. Note that earlier versions of WebObjects had problems building projects if their path had any spaces.
11	11
...	...	@@ -12,7 +12,7 @@
12	12	Click 'Next' lots more times until you come to a 'Finish' button, and click it (we'll cover all those other screens later).
13	13	If you did everything right, you'll end up with something that looks like this (depending on how you've configured Xcode).
14	14
15		-=== Edit the 'Main' Component ===
	12	+=== Edit the 'Main' Component ===
16	16
17	17	You should now be looking at a brand-new WebObjects project. This is your 'blank canvas' if you're fond of analogies.
18	18	It may seem a little complicated if you're used to creating web sites that consist only of HTML files and images, but it isn't too much more complicated. The main files we're interested in are in the 'Web Components' group.
...	...	@@ -19,13 +19,13 @@
19	19
20	20	When you first create a WebObjects project, you will have just one 'Component', the 'Main' one.
21	21	A WebObjects component consists of a folder and a bunch of files, but at this stage we're really only interested in 2:
22		-
23		-* Main.wo - which contains the interface
24		-* Main.java - where we'll put the logic for the Main.wo page.
25		-
	19	+<ul>
	20	+<li>Main.wo - which contains the interface</li>
	21	+<li>Main.java - where we'll put the logic for the Main.wo page.</li>
	22	+</ul>
26	26	Double-click on the 'Main.wo' file to edit the interface in WebObjects Builder.
27	27
28		-You should see something like the screen above. This is how a WebObjects component looks in WebObjects Builder. The top half of the window is a What-You-See-Is-What-You-Get (most of the time (WYSIWYG(MOTT)) HTML editor where you can design your pages. The bottom half of the window is used to connect interface elements to variables in the 'logic' section of your web application.
	25	+You should see something like the screen above. This is how a WebObjects component looks in WebObjects Builder. The top half of the window is a What-You-See-Is-What-You-Get (most of the time (WYSIWYG(MOTT)) HTML editor where you can design your pages. The bottom half of the window is used to connect interface elements to variables in the 'logic' section of your web application.
29	29	Add the text "Hello, what is your name?" by typing in the top half of the window.
30	30
31	31	Add some form elements to the page by selecting a 'WOForm', a 'Text Field' and a 'Submit Button' from the 'Forms' menu bar item.
...	...	@@ -32,7 +32,7 @@
32	32	Finally, add a place-holder String2 by selecting 'String' from the 'WebObject' menu bar item.
33	33	You now have a finished interface: a heading inviting visitors to your web application to enter their name, a text field where they can type their name, a button so they can submit the form and a place-holder for the string of characters that you want to display in response.
34	34
35		-=== Add an Action and a Key ===
	32	+=== Add an Action and a Key ===
36	36
37	37	Now that you have an interface, you need to write the logic of your first WebObjects application. This application allows a user to type their name in to a form and displays a message in response. In order to achieve this, we're going to write a little Java code.
38	38	Each WebObjects component has a Java file that contains the logic for the component. Java is an object-oriented programming language so if you're not familiar with object-oriented programming the next section might introduce some new concepts. At this stage you don't need to know the gory details of object-oriented programming, but it might help to understand some basic terminology.
...	...	@@ -56,21 +56,27 @@
56	56	{{code}}
57	57
58	58	public class Main extends WOComponent {
	56	+{panel}
59	59	public String visitorsName;
60	60	public String message;
61		-
	59	+{panel}
	60	+
	61	+{panel}
62	62	public Main(WOContext context) {
63	63	super(context);
64	64	}
	65	+{panel}
65	65
66	66	public WOComponent sayHello() {
	68	+{panel}
67	67	return null;
68	68	}
	71	+{panel}
69	69	}
70	70
71	71	{{/code}}
72	72
73		-=== Connect the Interface to the Logic ===
	76	+=== Connect the Interface to the Logic ===
74	74
75	75	Now you've created the interface and added a variable and method to the underlying Java code, all that we need to do is 'hook-up' the interface to the logic.
76	76	We need to specify that the 'sayHello' method should happen when the button is clicked and that the value for the 'visitorsName' variable should come from the text field. To do this we need to switch back to WebObjects Builder.
...	...	@@ -78,9 +78,10 @@
78	78	Click and drag from the space next to 'visitorsName' in the bottom half of the window to the text field and choose 'value' from the drop-down menu to indicate that you want the 'visitorsName' variable to get its value from the text field.
79	79	Repeat this step to bind the 'value' of the dynamic String to the 'message' variable and the 'action' of the 'Submit' button to the 'sayHello' method in the underlying Java class.
80	80
	84	+
81	81	Once you've hooked up the interface to the logic, the only thing left to do is write a line (or two) of Java code to compose a custom message in response to the click of the button.
82	82
83		-=== Edit the Java Code ===
	87	+=== Edit the Java Code ===
84	84
85	85	Open the 'Main.java' file by double-clicking on it.
86	86	Fill out the details of the sayHello method like the example below. Basically, when this method is executed we want to construct a custom message based on the variable 'visitorsName' which will contain the name of the person we want to greet.
...	...	@@ -88,19 +88,27 @@
88	88	{{code}}
89	89
90	90	public class Main extends WOComponent {
	95	+{panel}
91	91	public String visitorsName;
92	92	public String message;
93		-
	98	+{panel}
	99	+
	100	+{panel}
94	94	public Main(WOContext context) {
95	95	super(context);
96	96	}
	104	+{panel}
97	97
98	98	public WOComponent sayHello() {
	107	+{panel}
99	99	message = "Hi there, " + visitorsName + "!";
100	100	return null;
101	101	}
	111	+{panel}
102	102	}
103	103
104	104	{{/code}}
105	105
106	106	Congratulations - you've just written your first WebObjects application. Make sure you've saved both the Main.wo file in WebObjects Builder and the Main.java file in XCode and you're ready to compile your code and run the application. Click on the 'Build and Go' button in XCode to test your application.
	117	+
	118	+Category:WebObjects