Workshop 1: Creating a Simple Object

Workshop #1: Creating a Simple Object

The purpose of creating objects is to make your work life a little easier. An object that inserts My object inserted this text into every document certainly isn't going to do that! But is there any little chunk of coding that you find yourself adding repeatedly that you want to insert with the click of a mouse? For this workshop, you create an object that doesn't require any form input, but uses the principles you learned in the practice tasks to insert a useful piece of code into a document. If you have some code in mind that you want to insert, feel free to use your own. Or, you can follow the sample code here and insert an object that I find quite helpful.

Sample Object: Inserting a Single-Celled Centering Table

For one reason or another, I find myself creating single-celled tables every so often. A one-celled table, set to 100% width and 100% height, with the cell alignment set to center its contents horizontally and vertically, and placed on an empty page with a picture or chunk of text inside it, is a lovely way to create a vertically and horizontally centered layout. I use this kind of table to create splash screens, little announcement windowsall sorts of things. And to create it, I always have to spend several minutes using the Dreamweaver Table object. I have to set all the options in the Insert Table dialog box, then add the height dimension from the Property inspector, and then select the cell and set its alignment properties. What a perfect opportunity for a simple object!

Creating the Table Object

Creating the object involves several main tasks: deciding what code you want it to insert, putting that code into an object file, testing, and refining. This workshop takes you through each of those tasks. Each task has been broken down into numbered steps to help you through them.

Task 1: Create the HTML code you want to insert

The first step in creating any object is to figure outand, ideally , to create and even testexactly what code you want it to insert. Especially with code that's more extensive than a few words or characters , it's important to have it typed out in a temporary file for you, ready to insert into the object file when the time comes.

If you don't mind doing a little bit of typing, launch your text editor, create a new file, and type the following code:

 <table width="100%" height="100%" cellpadding="0" cellspacing="0"  border="0">        <tr>             <td align="center" valign="middle">&nbsp;</td>        </tr>  </table>

After you've done that, you're done with this task. Leave this file open and go on to Task 2.

If you'd rather let Dreamweaver do the typing for you, launch Dreamweaver and follow these steps:

Create a new document, and then go to Design view.
Using the Insert bar, insert a table. When the Insert Table dialog box appears, choose to create a table with 1 row and 1 column, with cellpadding, cellspacing, the border all set to 0, and width set to 100%. Click OK to insert the table and close the dialog box.
When the table has been inserted, use the Property inspector to set its height to 100%.
Click inside the table's one cell and use the Property inspector to set its horizontal alignment to center and its vertical alignment to middle.
Go to Code view. There's the code for your table! That's what your new object will insert. Leave this file open and go on to Task 2.

Task 2: Put that code into an object file framework

The next step in creating the simple object is to fit that ideal code into the return statement of an objectTag() function, inside an object file.

In your text editor, open My Object.htm and save it in your Configuration/ Objects/Development folder as Centering Table.htm .
Change the <title> to Centering Table .
Go back to the file containing your table code (either in your text editor or in Dreamweaver Code view). Before you can put this code in the objectTag() function, it must have all hard returns removed. Revise the code so that it looks like this ( indicates soft-wrapping):
```
 <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td  align="center" valign="middle"> &nbsp;</td></tr></table> 
```
note

The printed page can fit only a limited number of characters on each line. Throughout the printed code samples in this book, code that should be typed on one line may have to be shown here wrapped onto two or more lines. Whenever it might not be obvious that the wrapped code line is part of the line above it, the symbol is used to indicate that this is only soft-wrapping and you should not reproduce it in your code.
When you're sure your code is hard-return free, select it and Edit > Copy.
Go back to the new Centering Table.htm object file you just created. From the objectTag() function, delete the return statement and replace it with a new, shorter statement that looks like this:
```
 function objectTag() {  return '  ';  } 
```
Note that the statement now includes two single quotes (not double quotes).
Place the cursor between the two single quotes and Edit > Paste your table code. (Can you see why you surrounded the return statement with single quotes? Because the code contains double quotes. Double quotes can't be nested inside other double quotes in JavaScript.) Your objectTag() function should now look like this (newly pasted code in bold):
```
 function objectTag() {  return '  <table width="100%" height="100%" cellpadding="0"   cellspacing="0" border="0"><tr><td align="center"   valign="middle">&nbsp;</td></tr></table>  ';  } 
```
Finally, because there's no reason for this object to include a dialog box, select the <form> tag and its contents and delete them.
When you've finished, save and close the object file.

Listing 2.4 shows the final code for the Centering Table object.

Listing 2.4 Final code for Centering Table.htm

 <html>  <head>  <!the title will become the ToolTip>  <title>Centering Table</title>  <script language="JavaScript">  //this function is called automatically  function objectTag() {  //this code will be inserted  return '<table width="100%" height="100%" cellpadding="0"  cellspacing="0" border="0"><tr><td align="center"  valign="middle">&nbsp;</td></tr></table>';  }  </script>  </head>  <body>  </body>  </html>

Task 3: Add an entry for the object to insertbar.xml

To make sure your object appears properly in the Insert bar, you need to add an entry for it in the insertbar.xml file. Just follow these steps:

In your text editor, open insertbar.xml.
Find the code for the Development category you created earlier.

Revise the entry to look like this:

 <category id="DW_Insertbar_Development" folder="Development">       <button id="DW_Development_MyObject"               image=""               enabled=""               showIf=""               file="Development\My Object.htm" />  <button id="DW_Development_CenterTable"   image=""   enabled=""   showIf=""   file="Development\Centering Table.html" />  </category>

When you're done, save and close the file.

Task 4: Test and troubleshoot the new object

It's time for the rubber to meet the road! Are you ready? In Dreamweaver, reload extensions and open a new file.

Check out the Insert bar and make sure your new object appears there. It should show up as a button called Centering Table. If no button shows up, double-check your entry in insertbar.xml. Are there any typos? Did you spell the filename correctly?
Click the object to insert a centering table. If the object works, Dreamweaver will insert a lovely centering table in your test file. If Dreamweaver gives you a JavaScript syntax error when you click the object, you probably have a typo in your objectTag() functionor you may not have removed all of the hard returns from your table code. Read the Dreamweaver error message carefully and examine your object file to find and fix the problem. If you don't get an error message, but you also don't get a centering table, check your test page in Code view to see whether the object inserted any code at all, or just the wrong code. Accidentally deleting one of the double quotes inside the objectTag() return statement, for instance, or one of the <> characters, may have turned your inserted code into invalid code. Go back to your object file and tweak the return statement as needed.
If you encountered problems and adjusted the object file, reload extensions in Dreamweaver and try again. Keep doing this until the object works correctly.

Task 5: Create an icon for the object

As discussed earlier in the chapter, objects can use GIF images as icons for display in the Insert bar. Objects without associated GIF files (like the Centering Table object) display as names only. Adding a custom icon to an object involves making (or borrowing ) an 18x18-pixel GIF image and saving it in the Objects folder, and updating insertbar.xml so that it associates the GIF with the object.

The centering table is just a variation on the table object, so why not use (and maybe adapt) the table icon? In the Configuration/Objects folder, open the Common folder and find the files for the table object.
Make a copy of Table.gif and put it in your Development folder. Rename it Centering Table.gif .
(optional) If you have access to a graphics program and know a little bit about painting pixels, you can customize this icon to really look like a centering table. Open Centering Table.gif in your favorite graphics editor. Zoom in close to see how the icon creates an illusion of a 3D table with just a few colored pixels.
Using the tools in your graphics program, paint over the center row and column lines so the new icon looks like a one-cell table. (Most graphics programs offer a pencil tool that is perfect for this job when set to paint one pixel at a time.) All done! Figure 2.9 shows a before-and-after shot of the altered graphic.

Figure 2.9. The standard table object icon (left), and the altered version for the Centering Table object (right).
To make sure Dreamweaver recognizes your new image, open insertbar.xml in your text editor. Change the code for the Centering Table's <button/> tag to look like this (new code is in bold):
```
 <button id="DW_Development_CenterTable"             image="  Development\Centering Table.gif  "             enabled=""             showIf=""             file="Development\Centering Table.html" /> 
```
note

The companion Web site for this book has icon files for all objects created in this chapter. (See Appendix F for more information about the Web site contents.)
When you're all done, reload extensions in Dreamweaver and see how your new icon looks in the Insert bar. Figure 2.10 shows the finished result.

Figure 2.10. The Centering Table object in the Insert bar, represented by a custom icon.