Setting Dynamic and Static Properties

The pop-up menu in the upper-left corner of an element inspector is used to switch between generic, static, and dynamic properties. This menu may be disabled if an element does not have static properties.

For example, choose Forms > WOForm to create a form element, and choose Forms > WOTextArea to insert a text area element in the form element as shown in Figure 2-4.

Click inspector on the toolbar to open the inspector for the dynamic text area element. The WOText Binding Inspector displays the attributes that you can bind for this element as shown in Figure 2-5.

If you choose Static Inspector from the pop-up menu, the Text Area Inspector appears as shown in Figure 2-6. This is the same inspector you would see for a static text area element (<textarea>) and allows you to set its HTML properties (such as the COLS and ROWS properties). You can also add bindings to the dynamic inspector to set HTML properties. (The static inspector is provided for your convenience only.)

Choose Dynamic Inspector from the pop-up menu to switch back to the WOText Binding Inspector.

Making Elements Dynamic or Static

A static element has a Make Dynamic button in the lower-left corner that converts it to the corresponding dynamic element. For example, if you click the Make Dynamic button in an Anchor Inspector window, the selected element is converted to a WOHyperlink dynamic element. Similarly, a concrete dynamic element has a Make Static button in its inspector that converts it to its HTML counterpart.

The following table shows the dynamic counterparts for each of the static HTML elements shown:

If you convert a static element to its dynamic counterpart by clicking Make Dynamic and no direct counterpart exists, the element becomes a WOGenericElement whose element name is the HTML tag for the static element. Read Generic WebObjects Elementsfor more information on generic elements.

Selecting Elements in Layout Mode

There are several operations you can perform in WebObjects Builder that require you to select an element, such as copying, deleting, inspecting, or wrapping elements (placing one element inside another).

You select text elements in the graphical view in Layout mode as you would in most text-editing applications: by dragging, by double-clicking words, by triple-clicking lines, or by Shift-clicking to make a multiple selection. The selected text appears highlighted.

Some elements, such as text fields and text areas, can be selected simply by clicking them.

Other elements, such as tables, require you to click outside the element and then drag across the element in order to select it.

To select a range of elements, drag across them, or press the Shift key while clicking at the end of the range.

In Layout mode, you can use the path view to verify your selection or to select the parent element. The selected element appears highlighted at the end of the path. You select elements and their containing elements by clicking the HTML tag corresponding to the parent element. The selected element is highlighted in the graphical view.

For example, if you want to select a particular row in a table, click anywhere in the row and the path view displays the enclosing elements as show in Figure 2-7. Click the <td> tag to select the entire cell or the <tr> tag in the path view to select the entire row.

Read Editing Tables for more tips on selecting table parts

Editing Text in Layout Mode

If you choose New from the File menu to create a new web component, the cursor appears in the upper-left corner of the graphical view in Layout mode. If you begin typing text directly into this pane, the text appears in the default font and size. Here are some convenient keyboard shortcuts for editing text:

• Press Shift-Return to insert a line break, <br> tag.

• Press Return to insert a paragraph element, <p>tag.

You use the Format menu to format the selected text. If there is no selection, the format changes apply to any text typed at the insertion point. Items in the Format menu have direct HTML equivalents. You can switch to Source mode to check the formating changes you make to the HTML file, and switch to preview mode to see the effect of those changes.

The following Format > Font submenu items make these HTML edits:

• Choose Show Fonts, select a font from the list, and click Apply to change the font of the current selection—wrap the selection with a Font element, <font>.

• Choose Bold to change the style to bold—wrap the selection with a bold element, <b>.

• Choose Italic to change the style to italic—wrap the selection with an italic element, <i>.

• Choose Underline to change the style to underline—wrap the selection with an underline element, <u>.

• Choose Typewriter to change the style to typewriter (fixed-width font)—wrap the selection with a typewriter element, <tt>.

The Format > Alignment submenu items allow you to center or justify text by setting the align property of the enclosing paragraph. For example, if you choose Format > Alignment > Center when the insertion point is on a paragraph element, the paragraph element's align property is set to center.

The Format > Size submenu items change the font size of selected text—wraps the selection with a font element and sets the font element's size property to the selected size. For example, if you select some text and choose Format > Size > 6, the selection is wrapped with a font element with the size set to 6. In the HTML source, <font size="6"> is inserted before the selection and </font> is inserted after the selection.

The Format > Table submenu is used to format tables. Read Editing Tables for details on using tables.

The Format > Frame submenu is used to format frames. Read Editing Frames for details on using frames.

Choose Window > Show Colors to open the Colors window and change the color of the selection—wrap the selection with a font element and set the color property. The colors can also be applied to entire pages and hyperlinks.

Choose Format > Indent to indent the selection—wrap the current selection with a block quote element, <blockquote>. Select Format > Outdent to move indented text to the left—remove the enclosing block quote element.

Using Contextual Menus

Most elements displayed in the graphical and path views in Layout mode have contextual menus that are displayed when you Control-click the elements or a selection. The contextual menus are element specific. For example, the contextual menu of a table allows you to split cells and add or remove columns and rows as discussed in Editing Tables. Container elements have menu items for deleting and unwrapping their contents.

Objects in the object browser also have contextual menus that are accessed by Control-clicking the object. These contextual menus are discussed in Binding Dynamic Elements.

Changing the Appearance of the Graphical Editor

You can also change the appearance of the graphical editor by changing the preferences. For example, you can turn on table tags in the graphical view to make it easier to bind dynamic elements in tables or wrap table cells or rows with a repetition as discussed in Wrapping Table Rows and Cells With Repetitions. To turn on the table tags, open the Preferences window, click the Layout button, and select tables from the "Show inline graphical tags for" options.

Selecting Elements in Source Mode

You select text elements in the HTML source editor as you would in most text-editing applications: by dragging, by double-clicking words, or by Shift-clicking to make a multiple selection. Selected text appears highlighted.

When you triple-click a tag in the HTML source editor, you select the tag, the matching tag, and the HTML in between. For example, if you triple-click <title> in a new page, WebObjects Builder selects <title>, </title>, and the "Page Title" text. You can also drag a tag after it has been selected to move the entire section of HTML source to a new location.

The bottom pane in Source mode displays your component's declarations file (a .wod file). This file stores the binding information when you bind variables and methods to your dynamic elements. Editing is enabled in this window but normally, you don't edit this file directly. Read Binding Elements for how to bind elements in Layout mode.

Changing the Appearance of the HTML Source Editor

WebObjects Builder automatically inserts necessary elements such as <html>, <head> and <body> for you. However, the HTML source file is not an ordinary HTML file. It can contain static, dynamic, concrete, and abstract elements specific to WebObjects. To distinguish these different types of elements, you can change the colors of the tags and text in Source mode using the Preferences window as follows:

1. Choose WebObjects Builder > Preferences.

2. Click Source.

   The Source preferences pane appears as show in Figure 2-8.

   

3. Select Enable Syntax Coloring to turn on the colors in Source mode.

   The default colors appear in the HTML source editor.

4. Set the desired colors for the tags and text by clicking the specific color wells for each tag.

5. If you want to turn off the colors, deselect Enable Syntax Coloring.

   The HTML in the source editor appears in black text with a white background.

Similarly, use the "Background color" colorwell to change the background color in the HTML source editor. You can also choose a different font and font size from the "Source view font" pop-up menu.

Reformatting HTML

To reformat HTML entered in the HTML source editor, choose Format > Reformat HTML. This menu item is enabled only in Source mode. Choosing this menu item reformats the HTML source for your component using HTML preferences you can change, such as number of spaces per tab.

To change Source mode preferences, open the Preferences window and click the Source button. The HTML preferences are in the HTML Generation box, as shown in Figure 2-8, and allow you to highlight changes, pretty-print changes, and specify tabs or spaces for indentation.

Changing the Appearance of the WOD Text Editor

You can also change the appearance of declarations in the .wod file that appear in the lower pane in Source mode. Typically, you do not edit the .wod file directly, but you might want to format it differently and change the order of declarations. Open the Preferences window and click the Source button. The .wod file preferences are in the Dynamic Element Definitions box, shown in Figure 2-8, and allow you to select a format style and sort order.

Creating Tables

Follow these steps to create a table:

1. Select Table from the Static menu to add a table at the insertion point.

   The New Table panel appears allowing you to configure the table before you insert it as shown in Figure 2-9.

   

2. Use the Dimensions fields to change the number of rows or columns in the table.

   You can add rows and columns later but its more convenient to to use the New Table panel. When you are done entering the dimensions, the Preview pane in the New Table panel shows approximately what your table looks like.

3. Optionally, select a unit for the width (pixels or percent) in the Width pop-up menu, and enter the table width in the Width text field. Similarly, set the table height.

4. To add a caption to the table, select "Use captions", and set the location of the caption by clicking either "At bottom", "At top" or Unspecified.

   If you select "Unspecified" then the user browser decides where to put the caption.

5. To change the table's border, spacing (corresponding to the HTML cellspacing table property), and padding (corresponding to the HTML cellpadding table property), enter the appropriate sizes (in pixels) in the Layout fields.

6. To add a header to the table, click the checkbox labeled "First row cells are header cells."

   The first row cells are wrapped in an HTML <th> tag instead of a <td> tag, which causes the cells to appear in bold in most browsers.

7. To create a table whose contents depend on a repetition, click the checkbox marked "Second row is wrapped in a WORepetition."

   The Preview pane renders the repeated row in blue. See Using Abstract Dynamic Elements for more information on repetitions.

8. Click OK to insert the table; otherwise click Cancel.

The PremadeElements palette contains some common tables that are wrapped in repetitions—tables that can expand in both the horizontal and vertical directions. Read PremadeElements Palette for details on these tables.

Selecting Table Parts in the Graphical View

Typically, you select a cell, row, or multiple parts of a table and open the inspector to edit its properties. For example, you might select a cell and use the inspector to change the cell's width or height. In the graphical view, you can use a combination of the mouse and keyboard to select and create table parts:

• To begin entering content in a cell, click the cell and enter the content.

• To add content to a cell, type text in the cell or add elements—for example, select an element from one of the toolbar menus.

• To move to the cell to the right, or to the first cell on the next row (if you are in the rightmost column), press Tab.

• To create a new row when you are at the end of a table, press Tab.

• To move backwards through a table (for example, select the cell to the left), press Shift-Tab.

• To move to the cell at the end of the table when you are at the beginning of a table, press Shift-Tab.

• To make a contiguous multiple cell selection, click in a cell and drag across adjacent cells, or select a cell and Shift-click another cell.

• To make a noncontiguous multiple cell selection, Command-click multiple cells as shown in Figure 2-10.

  

Selecting Table Parts in the Path View

It may be more convenient to use the path view to select table parts for editing. An HTML table (a <table> tag) is a hierarchical structure that contains rows (<tr> tags). Rows in turn contain cells (<th> or <td> tags). When you select a cell, the path view shows the path from the cell up to the page (a <body> tag). You can inspect any element in the path by clicking its tag in the path view. For example, if you select a table cell, you can inspect the cell by clicking the <td> tag, the row by clicking the <tr> tag, or the table by clicking the <table> tag.

Figure 2-11 shows a table in graphical view with the cell tag, <td>, selected in the path view.

Selecting Rows and Tables

Selecting all the cells in a row or table is not the same as selecting the row or table. You need to make selections in both the graphical and path views to select an entire row or table.

• To select a row, select one or more cells in a row and click the <tr> element in the path view, as shown in Figure 2-12.

  

• To select a table, select one or more cells or rows in the table and click the <table> element in the path view, as shown in Figure 2-13.

  

Editing Tables

There are several ways to edit tables: split and merge cells, add and delete columns, and add and delete rows. These actions are the same whether you choose a menu item or click a button to execute them.

• The most convenient method is to select a table, row or cell and use the control buttons on the Inspector, show in Figure 2-14, to edit the table.

  

• Otherwise, you can select a table, row, or cell and use the contextual menu to edit the table (Control-click the element to open the contextual menu).

• Finally, you can choose an item from the Format > Tables menu to change the structure of a table as shown in Figure 2-15.

  

The table editing commands below are in the Format > Table menu.

• To split a cell, select it and choose Split Cell Vertically to split it vertically. Choose Split Cell Horizontally to split it horizontally.

• To merge multiple cells, select a contiguous region of cells and choose Merge Cells. This menu item isn't enabled unless the selected cells make up a group that could logically be merged into one cell.

• To delete a row, select the row you want to delete (or a cell within that row) and choose Delete Row.

• To delete a column, select a cell within the column you want to delete and choose Delete Column.

• To add a row, select a cell or row and choose Add Row Above to add a row above your selection. Choose Add Row Below to add a row below your selection.

• To add a column, select a cell and choose Add Column Before to add a column to the left of your selection. Choose Add Column After to add a column to the right of your selection.

• To add multiple rows or columns, choose Add Rows / Columns. The Add Rows / Columns panel appears as shown in Figure 2-16. Select row(s) or column(s), enter the number of rows or columns, select above or below for rows and before or after for columns (when you select column(s) the radio button labels on the right change from above and below to before and after). Click OK.

  

You modify other properties of a table or part of a table by selecting it and opening the Table, Table Row, or the Table Data Inspector. For example, read Resizing Tables and Cells for how to change the size of cells and rows.

Wrapping Rows and Cells

You can wrap a row or cell with an abstract dynamic element such as a conditional or repetition. You use a conditional if you want to optionally display a row or cell. You use a repetition if the content of a table is dynamic.

To wrap an abstract dynamic element around a selected row or cell, select the row or cell, and add a dynamic element. For example, select a row and choose WORepetition from the Dynamic menu. A row or cell that is wrapped appears highlighted. If you click in the row or cell, the dynamic element appears highlighted in the path view, too.

See Using Abstract Dynamic Elements for more information on configuring conditionals and repetitions.

Resizing Tables and Cells

By default, the size of an HTML table is determined by the contents of the table's cells. If you type text (or insert other elements) inside a table cell, the cell's width expands as necessary to fit the data. The width of any column, therefore, will be the width of the widest cell in the column.

In WebObjects Builder, a cell does not resize until you finish editing the cell and either move to another cell or move out of the table. To update the cell immediately, press the Escape key.

Use the inspector to set the size of a cell or table directly:

• To set the width or height of a table, select the table and open the Table Inspector as shown in Figure 2-17. Enter the table size in the Width and Height text fields.

  

• To set the width or height of a cell, select the cell and open the Table Data Inspector. Read Selecting Table Parts in the Path View for how to select a cell. Figure 2-18 shows what the inspector looks like. Enter the cell size in the Width and Height text fields.

  

Setting Row and Cell Alignments

Use the inspector to set the row and cell alignment properties as follows:

1. Select the row or cell—for example, click in a cell and select the <td> tag in the path view.

2. Open the inspector—for example, click Inspector on the toolbar.

   The Table Data Inspector appears if a cell is selected (see Figure 2-18), and the Table Row Inspector appears if a row is selected (see Figure 2-19). Both inspectors contain the same controls for setting the alignment.

3. To set the horizontal alignment, choose left, center, or right from the "Horizontal align" pop-up menu.

   If the value is unset, the browser determines the horizontal alignment.

4. To set the vertical alignment, choose top, middle, bottom, or baseline from the "Vertical align" pop-up menu.

   If the value is unset, the browser determines the vertical alignment.

Setting Other Table Properties

Use the Table Inspector, shown in Figure 2-17, to set remaining table properties, such as the background color, border thickness, spacing, and padding properties. You can also choose to include a caption with your table.

Setting Other Cell Properties

Use the Table Data Inspector, shown in Figure 2-18, to set remaining cell properties, such as the background color of a cell and whether or not a cell is a header cell.

Setting Other Row Properties

Use the Table Row Inspector, shown in Figure 2-19, to set remaining row properties such as the background color of all cells in a row.