WOExtensions Palette

The WOExtensions palette, shown in Figure 6-1, contains a number of reusable components provided by the WebObjects Extensions Framework. Read WebObjects Extensions Referencefor a detailed description of all the components in this framework.

Because these components are examples, you can also examine the source code for the WebObjects Extensions Framework, located in /Developer/Examples/JavaWebObjects/Source/JavaWOExtensions. Examining these components is an excellent way to learn more about creating your own reusable components. Since you have the source code, you can also extend these components. Note that some of these components or similar components are used to construct Direct to Web pages.

These are the components that appear on this are:

• WOCollapsibleComponentContent allows you to expand or collapse content, as in a hierarchical view of content similar to the outline view in Cocoa.

• WOAnyField can be used on a query page to filter enterprise objects by an attribute value.

• WOBatchNavigationBar can be used on a list view to control the number of enterprise objects fetched in a batch, and fetch the next and previous batches.

• WOCheckboxMatrix displays a multicolumn array of checkboxes.

• WOCompletionBar displays a progress bar on a page.

• WODictionaryRepetition is similar to WORepetition except iterates a dictionary of key-value pairs.

• WOIFrame is a dynamic element that corresponds to the <iframe> tag. Use WOFrame if you want a regular frame corresponding to the <frame>tag.

• WOKeyValueConditional is similar to WOConditional except that it displays content depending on the value of the parent component's key. This component is used in conjunction with WOTabPanel.

• WOMetaRefresh inserts a refresh tag into your page that instructs the user's browser to display a new page after a specified time interval.

• WORadioButtonMatrix displays a multicolumn array of radio buttons.

• WOSimpleArrayDisplay displays the specified number of objects in an array in a single-column table. If the entire array does not fit in the table, the last item is a hyperlink to a page that displays all the objects.

• WOSimpleArrayDisplay2 displays all the objects in an array in a single-column table. If all the objects do not fit in the table, an inspect button is displayed which links to a page that displays all the objects.

• WOSortOrder uses multiple buttons to allow the user to specify the sort order of objects in a display group—for example, unsorted, ascending, or descending.

• WOSortOrderManyKey is similar to WOSortOrder except that the user can select a destination key to sort by—for example, sort by last name or first name.

• WOTable is a container similar to WORepetition but displays the contents in a multicolumn table. This component is used to display a matrix of checkboxes or radio buttons.

• WOTabPanel displays a tab panel. When the user selects a tab the corresponding panel appears.

• WOToManyRelationship allows the user to edit the destination objects of a to-many relationship.

• WOToOneRelationship allows the user to edit the destination object of a to-one relationship.

PremadeElements Palette

The PremadeElements palette, shown in Figure 6-2, contains some commonly used components built from other elements. For example, elements that you would use in a repetition. This palette is provided for your convenience to reduce repetitive actions when designing your component.

These are the components on the palette:

• Repeated Header is a table that uses repetitions to expand in both the horizontal and vertical directions.

• Repeated Table is a table that uses a repetition to expand in the vertical direction—the first row is a header and the second row is wrapped in a repetition.

• Repeated List is list wrapped in a repetition.

• Repeated Radio Button is a radio button wrapped in a repetition.

• Upload Form is a component containing a WOFileUpload and Submit button.

• Multiple Radio Buttons is a component containing multiple radio buttons.

• WebObjects Logo is a graphic you can add to your webpage.

DirectToWeb Palette

The DirectToWeb palette, shown in Figure 6-3, contains Direct To Web pages. You can use these components in any page as long as your project includes the Direct To Web frameworks.

These are the components on the palette:

• D2WEdit is used to edit a single enterprise object.

• D2WInspect is used to view a single enterprise object.

• D2WList is used to view a collection of enterprise objects, as in a master interface.

• D2WSelect is used to display the selected object, as in a detail interface.

• D2WQuery is used to query or search for enterprise objects.

JavaScript Palette

The JavaScript palette, shown in Figure 6-4, contains all the JavaScript components provided by the WebObjects Extensions Framework.

These are the components on the palette:

• Text Flyover displays a hyperlink containing text that changes color when the user passes the mouse over it.

• Image Flyover displays an active image that changes to another image when the user passes the pointer over it.

• Modal Window displays a hyperlink and when clicked opens a modal panel.

• Alert Panel displays a hyperlink and when clicked opens an alert panel.

• Confirm Panel displays a hyperlink and when clicked opens a confirm panel. The confirm panel displays a message and an OK button. The panel disappears when the user clicks the OK button.

• Validated Field is similar to WOTextField—it needs to be placed in a WOForm—except that the text in the field is validated before the form is submitted.

Custom Palettes

You can create your own custom palettes to store frequently used items, such as forms, tables, or images, and you can load palettes created by third parties. This section explains how to create, add, remove, and edit custom palettes.

Creating Palettes

To create a new palette, choose New from the Palettes pop-down menu at the bottom-left of the Palette window shown in Figure 6-5. The palette appears in the palette window represented by a generic palette icon. Read Changing Palette Icons to change the palette's icon.

Follow these steps to add an item to a palette:

1. If your palette background is grey, choose Palettes > Make Editable to make it editable.

   A newly created palette is editable by default. If the background is white, it is editable. If the background is grey, it is read only. You cannot edit standard palettes.

2. Select the element or elements that you want to add to the palette in the component window.

3. Option-drag the selection in the component window to the editable palette.

   A generic HTML icon appears on the palette labeled "Untitled."

4. You can change the title of the item by selecting its name and typing as show in Figure 6-6.

   

5. Read Changing Palette Iconsto change the item's icon.

You can also add any item from the file system to a palette (including such things as a component, an image, or an EOModel). Follow these steps to add items from the file system:

1. Make your palette editable.

2. Locate the item using the Finder.

3. Drag the item from the Finder onto the palette.

   For example, to add a component to a palette, you drag the .wo folder to the palette.

To remove an item from a palette, simply drag it off the palette while the palette is editable.

When you are done adding items to your palette, choose Palettes > Save, Save As, Save To, or Save All. A sheet appears prompting you for a palette name and location to save it.

To open an existing palette and add it to the Palette window, choose Palettes > Open.

To close or remove a palette from the palettes window, choose Palettes > Close.