User Guide
54 Chapter 3: User Interfaces for Extensions
Consider the following basic guidelines when you design an extension UI:
• If you want a name for your extension, place the name in the title tag of your HTML file.
Dreamweaver displays the name in the extension title bar.
• Keep text labels on the left side of your UI, aligned right, with text boxes on the right side,
aligned left. This arrangement lets the user’s eyes easily locate the beginning of any text box.
Minimal text can follow the text box as explanation or units of measure.
• Keep checkbox and radio button labels on the right side of your UI, aligned left.
• For readable code, assign logical names to your text boxes. If you use Dreamweaver to create
your extension UI, you can use the Property inspector or the Quick Tag Editor
to assign names
to the fields.
In a typical scenario, after you create the UI, test the extension code to see that it properly
performs the following UI-related tasks:
• Getting the values from the text boxes
• Setting default values for the text boxes or gathering values from the selection
• Applying changes to the user document
Dreamweaver HTML rendering control
For versions through Dreamweaver 4, Dreamweaver rendered more space around form controls
than do Microsoft Internet Explorer and Netscape Navigator. Form controls in extension UIs are
rendered with extra space around them because Dreamweaver uses its HTML rendering engine to
display extension UIs.
Macromedia has improved form-control rendering to more closely match the browsers. To take
advantage of the rendering improvements, you must use one of three new
DOCTYPE statements in
your extension files, as shown in the following example:
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog">
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine5.0//floater">
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine5.0//pi">
In most cases, DOCTYPE statements must go on the first line of a document. However, to avoid
conflicts with extension-specific directives that, in previous versions, were required to be on the
first line of a file (such as the comment at the top of a Property inspector file, or the
MENU-
LOCATION=NONE
directive in a command), DOCTYPE statements and directives can now be in any
order as long as they appear before the opening
html tag.
In addition to letting you make extension UIs more closely match the built-in dialog boxes and
panels, the new
DOCTYPE statements also let you view your extensions in the Dreamweaver Design
view so that you can see them as they would appear when viewed by users.