Skip to Content

Changes for page Create a new WO Component

Last modified by Kieran Kelleher on 2007/12/21 14:09
From version 4.1
edited by Mike Schrag
on 2005/09/26 00:13
Change comment: There is no comment for this version
To version 6.1
edited by David Holt
on 2007/12/21 14:09
Change comment: Added link to Pascal's Component editor intro movie

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.mschrag
1 +XWiki.dholt
Content
... ... @@ -1,59 +1,53 @@
1 +{{info title="Short video showing new component editor"}}
2 +
3 + * [How to use Component Editor|http://www.wocommunity.org/podcasts/Component_Editor_Howto.mov]
4 +
5 +{{/info}}
6 +
1 1  Let's add a new WO Component to our project.
2 2  
3 -1. Right-Click/Ctrl-Click on the project and select "New" => "WOComponent"
4 -\\\\[[image:Picture 25.png]]
5 -\\
9 +~1. Right-Click/Ctrl-Click on the project and select "New" => "WOComponent"
6 6  
11 +[[image:Picture 25.png]]
12 +
7 7  ----
8 8  
9 -\\
15 +2. The "New WebObjects Component" dialog opens. The only required field is the WOComponent name. Let's just use the default "MyComponent" as the component name. I generally deselect "Create body tag" and "Create api file", but you can leave them if you'd like. Click "Finish" to continue.
10 10  
11 -1. The "New WebObjects Component" dialog opens. The only required field is the WOComponent name. Let's just use the default "MyComponent" as the component name. I generally deselect "Create body tag" and "Create api file", but you can leave them if you'd like. Click "Finish" to continue.
12 -\\\\[[image:Picture 26.png]]
13 -\\
17 +[[image:Picture 26.png]]
14 14  
15 15  ----
16 16  
17 -\\
21 +3. You should now have a new MyComponent.java in your source folder, a MyComponent.wo folder at the project root (or whereever you decide to add the component), a wod, woo, html, and optional api file, and the Component Editor should now open to show your new component.
18 18  
19 -1. You should now have a new MyComponent.java in your source folder, a MyComponent.wo folder at the project root (or whereever you decide to add the component), a wod, woo, html, and optional api file, and the Component Editor should now open to show your new component.
20 -\\\\[[image:Picture 27.png]]
21 -\\
23 +[[image:Picture 27.png]]
22 22  
23 23  ----
24 24  
25 -\\
27 +4. Switch to the "Java" tab and add the "greeting" method as defined in the picture below and save.
26 26  
27 -1. Switch to the "Java" tab and add the "greeting" method as defined in the picture below and save.
28 -\\\\[[image:Picture 28.png]]
29 -\\
29 +[[image:Picture 28.png]]
30 30  
31 31  ----
32 32  
33 -\\
33 +5. Now switch to the "Component" tab, add a <webobject> tag in the HTML and save, then the WOD definition and save. Note that you must save each of the editors individually for changes to be visible ~-~- even in the split view. If your file is unsaved, you will see a "**" next to the filename in the tab at the top of the editor.**
34 34  
35 -1. Now switch to the "Component" tab, add a <webobject> tag in the HTML and save, then the WOD definition and save. Note that you must save each of the editors individually for changes to be visible ~-~- even in the split view. If your file is unsaved, you will see a "**" next to the filename in the tab at the top of the editor.
36 -\\\\[[image:Picture 29.png]]
37 -\\**
35 +[[image:Picture 29.png]]
38 38  
39 39  ----
40 40  
41 -\\
39 +6. Now switch to your Main.wo Component Editor "Component" tab and add a <webobject> tag named "Greeting" and save. Switch to the WOD editor and add a Greeting element that is of type "MyComponent" (you'll notice that code completion now shows MyComponent in the list, because it is a subclass of WOElement).
42 42  
43 -1. Now switch to your Main.wo Component Editor "Component" tab and add a <webobject> tag named "Greeting" and save. Switch to the WOD editor and add a Greeting element that is of type "MyComponent" (you'll notice that code completion now shows MyComponent in the list, because it is a subclass of WOElement).
44 -\\\\[[image:Picture 30.png]]
45 -\\
41 +[[image:Picture 30.png]]
46 46  
47 47  ----
48 48  
49 -\\
45 +7. Adding a new Java file technically is not a violation of Hot Code Replacement, however, WO seems to not like a new HTML template appearing in your bundle that it doesn't know about. So go ahead and stop your app if it's running and then re-debug it (from the previous instructions). You should now have a "Hello!" in Main.wo is generated by the embedded MyComponent component.
50 50  
51 -1. Adding a new Java file technically is not a violation of Hot Code Replacement, however, WO seems to not like a new HTML template appearing in your bundle that it doesn't know about. So go ahead and stop your app if it's running and then re-debug it (from the previous instructions). You should now have a "Hello!" in Main.wo is generated by the embedded MyComponent component.
52 -\\\\[[image:Picture 31.png]]
53 -\\
47 +(Note: I found no need to stop/start. It worked fine ~-~- Lachlan Deck 8 Jan 2007).
54 54  
49 +[[image:Picture 31.png]]
50 +
55 55  ----
56 56  
57 -\\
58 -
59 -1. Continue on to see how to [[Add a Framework Dependency]] to your project.
53 +8. Continue on to see how to [[documentation:Add a Framework Dependency]] to your project.