Adobe Extending Dreamweaver CS4 - Manual (Page 88)

82
Chapter 5: User interfaces for extensions
Most extensions are built to receive information from the user through a user interface (UI). For example, if you create
a Property inspector extension for the
marquee tag, you need to create a way for the user to specify attributes like
direction and height. If you plan to submit your extension for Adobe certification, you need to follow the guidelines
that are available within the Extension Manager files on the Adobe Exchange website (
www.adobe.com/go/exchange ).
These guidelines are not intended to limit your creativity. Their purpose is to ensure that certified extensions work
effectively within the Adobe Dreamweaver user interface (UI) and that the extension UI design does not detract from
its functionality.
Extension user interface designing guidelines
Typically, you create an extension to perform a task that users encounter frequently. Certain parts of the task are
repetitive; by creating an extension, you can automate the repetitive actions. Some steps in the task can change, or
specific attributes of the code that the extension processes can change. To receive user inputs for these variable values,
you build a UI.
For example, you might create an extension to update a web catalog. Users periodically need to change values for image
sources, item descriptions, and prices. Although the values change, the procedures for getting these values and
formatting the information for display on the website remain the same. A simple extension can automate the
formatting while letting users manually input the new, updated values for image sources, item descriptions, and prices.
A more robust extension can retrieve these values periodically from a database.
The purpose of your extension UI is to receive information that the user inputs. This information handles the variable
aspects of a repetitive task that the extension performs. Dreamweaver supports HTML and JavaScript form elements
as the basic building blocks for creating extension UI controls and displays the UI using its own HTML renderer.
Therefore, an extension UI can be as simple as an HTML file that contains a two-column table with text descriptions
and form input fields.
When you design an extension, you should determine what variables are necessary and what form elements can best
handle them.
Consider the following basic guidelines when you design an extension UI:
• To name 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 check box 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, you 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