User Guide

Using custom UI controls in extensions 55

The following examples show the Base Property inspector without the DOCTYPE statement, which

improves form-control rendering, and then with the

DOCTYPE statement.

The Base Property inspector as it appears in Design view without the

DOCTYPE statement.

The Base Property inspector as it appears in Design view with the

DOCTYPE statement (and after a few

adjustments to accommodate the new rendering).

Using custom UI controls in extensions

In addition to the standard HTML form elements, Dreamweaver supports custom controls to

help you create flexible, professional-looking interfaces, as described in the following list:

• Editable select lists (also known as combo boxes) that let you combine the functionality of a

select list with that of a text box

• Database controls that facilitate the display of data hierarchies and fields

• Tree controls that organize information into expandable and collapsible nodes

• Color button controls that let you add color picker interfaces to your extensions

Editable select lists

Extension UIs often contain pop-up lists that are defined using the

select tag. In Dreamweaver,

you can make pop-up lists in extensions editable by adding

editable="true" to the select tag.

To set a default value, set the editText attribute and the value that you want the select list to

display.

The following example shows the settings for an editable select list:

<select name="travelOptions" style="width:250px" editable="true"

editText="other (please specify)">

<option value="plane">plane</option>

</select>

When you use select lists in your extensions, check for the presence and value of the editable

attribute. If no value is present, the select list returns the default value of

false, which indicates

that the select list is not editable.