Working With Palettes

A palette is a collection of resources (such as images, static or dynamic HTML elements, and components) that you can drag to your component—items on a palette are reusable. There are several predefined palettes described in this chapter but you can also create your own custom palettes and drag elements from a component to your palette.

Regardless of which palette you use, the steps for adding palette items to your component are the same. Follow these steps to add a palette item to your component:

  1. Choose Window > Palette or select Palette from the toolbar to open the Palette window.

  2. Select the palette you want from the buttons at the top of the Palette window.

    The window title reflects the name of the selected palette.

  3. Drag an element from the palette to your component window at the insertion point.

    The palette item is added to your component.

  4. Use the inspector to configure any attributes—bind them to the variables and actions in your component.

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.

Figure 6-1  The WOExtensions palette
The WOExtensions palette

These are the components that appear on this are:

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.

Figure 6-2  The PremadeElements palette
The PremadeElements palette

These are the components on the palette:

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.

Figure 6-3  The DirectToWeb palette
The DirectToWeb palette

These are the components on the palette:

JavaScript Palette

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

Figure 6-4  The JavaScript palette
The JavaScript palette

These are the components on the palette:

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.

Figure 6-5  Palettes pop-down menu
Palettes pop-down menu

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.

    Figure 6-6  Adding items to palettes
    Adding items to palettes
  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.

Changing Palette Icons

You can change the icon of any palette or item on a palette following these steps:

  1. Open the palette window and select the palette whose icon you want to change.

  2. Make the palette editable.

  3. Drag an image from the file system onto the palette's icon or an item's icon.

    You can use any image file recognized by WebObjects Builder (such as a GIF, TIFF or JPEG files).

  4. Save the palette.

Using Palette Items

The steps for using palette items from your custom palettes are the same as using items from any type of palette. However, you might want to make your palette read only first. If the background of your palette is white, choose Palettes > Make Read Only.