| Part of Macromedia's customization initiative are objects. Objects are HTML files that use JavaScript to insert a string of HTML code into the user's workspace. As you may have already noticed, Dreamweaver MX comes installed with a host of predeveloped objects, completely ready for you to take advantage of. Everything ranging from tables to frames, forms to head content, and scripts to characters, objects make adding code to your workspace as easy as clicking a button. That code can be anything from this: ©Copyright Zak Ruvalcaba, 2002 to this: <font face="arial" size="3">©Copyright Zak Ruvalcaba, 2002</font> Anything that can be constructed using HTML can be customized through the use of an object. Understanding Objects As previously mentioned, Dreamweaver MX comes preinstalled with ready-to-use objects. Those objects, like most of Dreamweaver MX's configuration files, are located within the Configuration folder of the program directory. Within that folder you can navigate to and open the Objects folder. As shown in Figure 20.1, the Objects folder contains a list of subfolders corresponding to the specific tab within the Objects panel. Figure 20.1. The Objects folder contains all the objects as they relate to the Objects panel.
As you add folders, more tabs are added to the Objects panel. Within the sections are three files that compose the structure of an object. They are: The HTML file The HTML file is the front end for what the object will do. It contains all the code that the object will insert into the user's workspace. The JavaScript file The JavaScript file contains all the client logic that the HTML page will use when the button is pressed from the Objects panel. It is optional to use the JavaScript file because the code could be contained within the <head> tag of the HTML file. A separate JavaScript file is always easier to maintain in the long run. The Image file The Image file is a standard GIF image that you can customize and place within your Custom Objects folder. The GIF image is typically named the same as the HTML and JavaScript file and is what appears under the tab in the Objects panel. A default GIF image (generic.gif, located in the root of the Objects folder) is available for you to customize using your favorite image editor. Figure 20.2 shows the Text folder along with the three files that correspond to each object. Figure 20.2. Opening the Text folder reveals the three files that belong to each object.
Dreamweaver MX objects range from fairly simple to complex. You can make it so that when users click the Object button, it inserts plain HTML text, or you can make it so that when users click the Object button, it prompts them with a dialog box allowing them to input data. Either way, objects streamline the way you interface with the IDE. TIP An integrated development environment (IDE) is a programming environment that has been created as an application program, typically consisting of a code editor, a debugger, and an interface builder.
Objects are composed of five key elements; they are The Files Generally, objects consist of an HTML page, an image file, and an external .js file that contains all the client logic. It is completely possible to combine the HTML page with the .js file into one HTML page. This is the preferred method. Location Objects reside in their corresponding folder within the Objects folder. Depending on which tab you want your object in, you simply move all the files to that folder. Page Title The page title is the name of the object as it appears when your mouse rolls over the corresponding image. objectTag() function The objectTag() function returns the value of what is to be inserted into the page. User Interface The user interface (UI) resides within the <body> tag of the object and generally uses a <form> tag along with a textbox control to capture user input. The Simple <sup> Tag Object Now that you have a basic understanding of how objects are constructed, let's put that idea to work by creating a simple object that inserts the <sup> tag into your code. If you've worked with special characters (the copyright symbol, for instance), you know that whenever they are inserted, they always end up looking like part of the text rather than superscripted to the top of the line. To alleviate that problem, a simple object could be created. Follow these steps: -
Begin by making a copy of generic.gif (located in the root of the Objects folder) and place it into the Text folder. Rename the GIF sup.gif. NOTE The <sup> tag is a text-level formatting element and is the reason why it is placed into the Text folder. -
Next create a new HTML document in Dreamweaver and write the following code: <html> <head> <title>SUP</title> <script language="JavaScript"> function objectTag() { return "<sup></sup>"; } </script> </head> <body> </body> </html> -
Save the file into the Text folder, naming it sup.htm. -
Navigate to the Text tab and select your new object. Figure 20.3 shows how in code view the object will insert the correct tags that you specified within the objectTag() function. Figure 20.3. Selecting the new object will insert the appropriate tags.
NOTE Restarting Dreamweaver MX forces the Object panel to reload all its objects. If you make any changes to any of the objects, you must restart Dreamweaver MX before the changes will take effect.
The Advanced <sup> Tag Object After you've gotten past the excitement of creating your first object, you'll quickly find that the object does no more than insert a simple tag into the body of the document. Even if you wanted to place some text within that tag, it would still be necessary to switch to code view and type it in; by that time, the whole tag could have been written. The power behind customized objects lies in the fact that they can receive user input. By simply modifying the body tag to contain some HTML code that defines the UI, this can be accomplished: -
Open sup.htm and rewrite the <body> tag to contain the following code: <body> <form name="supForm"> <p>What text would you like to Superscript?</p> <p><input type="text" size="3" name="supText"></p> </form> </body> -
Next, modify the objectTag() function so that it concatenates the value of the text box to the opening and closing <sup> tags: function objectTag() { var supText = document.supForm.supText.value; return '<sup>' + supText + '</sup>'; } -
Save the file again, and close and then restart Dreamweaver MX. -
Select the sup object again to produce a result similar to that shown in Figure 20.4. Figure 20.4. Selecting the new object launches a dialog box allowing you to enter custom text to superscript.
| 
