Workshop #2: Creating a Simple Object with User Input
In this next workshop, we'll take our object-building skills one level higher, creating an object that uses a form to collect user input. Along the way we'll see how to create a nice layout for the dialog box and how to collect user input and build it into the return statement for the objectTag() function.
Sample Object: Inserting a Netscape Spacer Tag
The <spacer> tag creates a little block of empty white space on a pagea handy item, but one that works only in Netscape Navigator (all versions including 6). Internet Explorer completely ignores this tag. In its admirable effort to encourage users to use only cross-browser, cross-platform HTML code, Dreamweaver has no <spacer> tag in its standard set of objects.
I like to use <spacer> tags for two purposes: First, they are perfect when I design web pages for corporate intranets in which Netscape is the only browser in use; and second, they help Netscape to stabilize layout tables on complex pages. It's a well-known problem that some browsers ( especially Netscape) will sometimes shrink empty table cells, even if those cells have specified width or height attributes, resulting in a distorted page layout. The commonly accepted solution to this problem is to tuck little transparent GIF images throughout layout tables to "prop" cells open . But the same stability can often be achieved, without having to fiddle with spacer images, by inserting <spacer> tags instead.
Creating the Spacer Object
Like any project that involves creating an object, the Netscape <spacer> tag project can be broken down into three main components : determining what code the object will insert, building the object file, and testing and refining. This object is a bit more complex to create than the Centering Table because it requires user input to determine the various attributes of the <spacer> tag. It also includes the additional task of designing the form.
Task 1: Determine the HTML code you want the object to insert
The <spacer> tag takes three properties: type (horizontal, vertical, or block), width , and height . Horizontal spacers have only a width parameter; vertical spacers have only a height parameter; block spacers have both. To make things easy as you start out, assume that your object will create only block spacers; thus, there will always be two parameters to collect from the user ( width and height ). The code you have to insert will look like this:
<spacer type="block" width="?" height="?">
The question marks ( ? ) represent numbers that the user will supply. The form/dialog box will collect those numbers .
Task 2: Design a form to collect user input
As forms go, yours will be simple. It needs two input elements, both of which can be text fields, and a descriptive label for each. Following the Macromedia UI guidelines, this becomes a two-column dialog box with right-aligned labels and left-aligned text fields, as shown in Figure 2.11. For this task, don't worry about coding the formyou just want to know what it's going to look like and what input elements it will include.
Figure 2.11. The desired layout for the Block Spacer object's dialog box.
Task 3: Create a basic object file
When you've created the form, save and close the object file.
Task 4: Add an entry for the object to insertbar.xml
To make sure the new object displays properly in the Insert bar, open insertbar.xml in your text editor and add the following <button/> tag to your Development category:
<button id="DW_Development_BlockSpacer" image="" enabled="" showIf="" file="Development\Block Spacer.htm" />
When you've entered the code (and double-checked for typos!), save and close the file.
Try it out! In Dreamweaver, reload extensions and make sure the Block Spacer object appears in the Insert bar. Create a new document and choose the object. It should create a dialog box like that shown in Figure 2.11 and (regardless of user input into the form) should insert the following line of code into your document:
<spacer type="block" width="50" height="50">
(Note that Dreamweaver doesn't display spacers in Design view. You'll need to check Code view to make sure the proper code has been inserted.) If the object doesn't work, check your code against that shown previously, and troubleshoot until it does.
Task 5: Add form interactivity
Now that you have the object and you have the form, it's time to revise the objectTag() function so that it collects the information the user has entered into the form and uses that information to construct the string of code that it returns.
The most common mistakes in creating objects with dialog boxes are misaligning the quotation marks and not referring to the form field names correctly.
Task 6: Add some spit-and-polish
To tidy up, let's add a few last items. Wherever there's a dialog box that includes text fields, you want it to appear with the first text field active and its contents (if any) selected. To do that, use a local function (one that's not part of the API) that most standard Dreamweaver objects use.
If you test your extensions using Dreamweaver for Windows, you may notice that you don't need the initializeUI() function your object's dialog box opens with the width text field active even without the function. Dreamweaver for Macintosh requires the function to place the focus in the proper text field. Even if you're not developing for any Mac users, though, it's a good idea to get used to the concept of initializing dialog boxes as you open themand initializing the text field focus is also part of the UI requirements for extensions that are submitted to the Dreamweaver Exchange.
Listing 2.5 shows the complete code for the Block Spacer object.
Listing 2.5 Code for the Finished Block Spacer Object, Commented for Reference