Wiki source code of Create a new WO Component
Version 17.2 by David Holt on 2023/11/13 11:55
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{info title="Short video showing new component editor"}} | ||
| 2 | * [[How to use Component Editor>>url:http://www.wocommunity.org/podcasts/Component_Editor_Howto.mov||shape="rect"]] | ||
| 3 | {{/info}} | ||
| 4 | |||
| 5 | Let's add a new WO Component to our project. | ||
| 6 | |||
| 7 | ~1. Right-Click/Ctrl-Click on the project and select "New" => "WOComponent" | ||
| 8 | |||
| 9 | [[image:attach:Picture 25.png]] | ||
| 10 | |||
| 11 | ---- | ||
| 12 | |||
| 13 | 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. | ||
| 14 | |||
| 15 | [[image:attach:Picture 26.png]] | ||
| 16 | |||
| 17 | ---- | ||
| 18 | |||
| 19 | 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. | ||
| 20 | |||
| 21 | [[image:attach:Picture 27.png]] | ||
| 22 | |||
| 23 | ---- | ||
| 24 | |||
| 25 | 4. Switch to the "Java" tab and add the "greeting" method as defined in the picture below and save. | ||
| 26 | |||
| 27 | [[image:attach:Picture 28.png]] | ||
| 28 | |||
| 29 | ---- | ||
| 30 | |||
| 31 | 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. | ||
| 32 | |||
| 33 | [[image:attach:Picture 29.png]] | ||
| 34 | |||
| 35 | ---- | ||
| 36 | |||
| 37 | 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). | ||
| 38 | |||
| 39 | [[image:attach:Picture 30.png]] | ||
| 40 | |||
| 41 | ---- | ||
| 42 | |||
| 43 | 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. | ||
| 44 | |||
| 45 | (Note: I found no need to stop/start. It worked fine – Lachlan Deck 8 Jan 2007). | ||
| 46 | |||
| 47 | [[image:attach:Picture 31.png]] | ||
| 48 | |||
| 49 | ---- | ||
| 50 | |||
| 51 | 8. Continue on to see how to [[doc:documentation.Add a Framework Dependency]] to your project. |