Edit a WO Component

Let's go ahead and edit the default Main.wo WO Component that is in this project.

1. Right-click/Ctrl-click on Main.wo in Package Explorer and select "WOLips Tools" => "Open WO". Alternative ways of opening the Component Editor include: Opening the Java file for a WO, Opening the HTML template for a WO, Opening the WOD file for a WO, and Opening the API file for a WO.

2. The main editor area of your screen will now change to the Component Editor. Notice at the bottom of the editor area there are several tabs: "Component", "Preview", and "API". These correspond to the different views of a WO Component. The first tab shows you a split view with the HTML source on top and the WOD file on the bottom, the second tab a visual preview of the component, and the last view shows the API Editor where you can edit your bindings and validations. The accompanying "Java" file is available via the "Related" pane. You can quickly switch between the "Java" editor and the WOComponent editor (including each of its tabs) by using the hotkeys cmd-option-1, cmd-option-2, cmd-option-3, cmd-option-4, and cmd-option-5 (for "Java", "Component.HTML", "Component.WOD", "Preview", and "API" respectively).

Click on the "Component" tab and in the HTML area add a <webobject name = "ApplicationName"></webobject> reference and File=>Save (Cmd-S) the HTML template.

3. By saving, you notify the incremental compiler to validate any changes that you have made. If you switch to the Problems view in the bottom layout area of Eclipse, you will see there is now a warning telling you that your HTML template references an element that isn't defined in your WOD file.

4. Click in the bottom editor of the Component editor to edit the WOD file and fix that error. In this case, let's define a new element named "ApplicationName" of type "WOString". You can just type it out if you want, but that would be boring. Let's instead take advantage of WOD Editor's completion abilities.

The default code completion key in Eclipse is Ctrl-Space. If you have Spotlight on this key, you can either switch spotlight or change the key binding in Eclipse (changing the Eclipse key binding is left as an exercise for the reader ).

At each point in the WOD editor, it can propose to you a set of possibly completion options. If you click into the view and press Ctrl-Space, the first thing you can choose is an element name. WOD editor looks at your HTML template and finds the list of available element names that you have not yet referenced in the WOD file and offers them to you. In this case, there is only one, so it will automatically fill in the entire name for you.

Now type the ':'. For completing the element type, you must type at least one character first (this is because without at least one character to restrict the search on, the list of proposals would be huge). Let's make it a "WOString", so we'll type "W<Ctrl-Space>" and the proposal box appears showing you all of the possibilities. You can continue to type and it will narrow down the list of matches, or you can select one from the list.

Add the { and } to complete the element definition and then go ahead and save the WOD file. Again the incremental compiler kicks in and now you have a different error. You have now defined an ApplicationName element in the WOD file, but you'll notice that WOString has a required binding named "value" that you haven't bound yet.

5. If you position your cursor inside the curly braces in your WOD file and press Ctrl-Space, WOD Editor will present you with a list of possible bindings which includes the binding list defined in the appropriate API files along with all of the settable fields and methods in the class. In this case we want "value", so type or select it from the list.

Now type '=' and press Ctrl-Space again, and you'll now receive a list of possible binding values. This list is comprised of all of the "gettable" fields in your WO Component (in this case, Main.java). Select application, then press '.' and Ctrl-Space again. This now presents all of the gettable fields and methods of the application class. Select "name" from the list, add a ';' at the end, and Save. You'll notice you no longer have any syntax errors in the Problems view.

6. Now switch to the "Java" editor of the Component (cmd-option-1) and lets add a new method. Call it "now()" and have it return an NSTimestamp of the current date.

7. Now switch back to the "Component" tab, go to the HTML view and add a <webobject name = "Now"></webobject> entry.
 8. Click in the WOD editor view below the ApplicationName definition, and type:

1. <Ctrl-Space> (which fills in "Now")
2. : W<Ctrl-Space>, select WOString
3. {<enter>
4. <tab><Ctrl-Space>, select "value"
5. = <Ctrl-Space>, select "now"
6. ;<enter>
7. <Ctrl-Space>, select "dateformat"
8. = <Ctrl-Space>, select "%m/%d/%Y"
9. ;<enter>
10. }

9. Save.

10. You have now successfully added two webobject references to your Main component along with a new method that returns the current date. You'll now test these changes in the next tutorial on how to Run or Debug a WO Application.