Working with Objects in Dreamweaver
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
In this article, you'll learn what a well-formed object file looks like, how Dreamweaver processes object files, and how to build your own objects from scratch.
What Are Objects?
An object, in terms of Dreamweaver's API, is an HTML file that contains or uses JavaScript to construct a string of HTML code to insert into the user's document. That string of code can be anything from this:
copyright John Smith, 2000
to this:
<font face= "Georgia, Times, Times New Roman, serif" size="2"> copyright John Smith, 2000</font>
to this:
<table width="200" height="200"border="1">
<tr>
<td align="center" ><font face= "Georgia,
Times, Times New Roman, serif" size="2">copyright John Smith,
2000</font></td>
</tr>
</table>
In other words, it's anything that can validly sit in an HTML document. The code gets inserted wherever the user's cursor is when the object is chosen.
What Files, Where?
If you look inside the Configuration/Objects folder, you'll see several subfolders, the names of which you should recognize as the categories of objects accessible in the Objects panel. Open up one of those folders, such as the Common folder, and you'll see dozens of files that correspond to the individual objects in the Common Objects panel. Each object consists of one to three files, all with the same name but different extensions. These files are listed here:
An HTML file (Table.html, for instance). This is the object file itself, or the file that contains or returns the code to be inserted. This is the only file that must be present to constitute an object.
A JavaScript file (Table.js, for instance). This file contains JavaScript instructions for constructing the code to be inserted, in the form of one or more JavaScript functions, and is called on from the HTML file. This file is optional: It is entirely legal to contain the JavaScript functions in the head section of the object's HTML file instead of saving it to an external file. As experienced scripters know, it can be easier to keep track of and update JavaScripts if the code is in a separate file, but it isn't necessary.
An image file (Table.gif, for instance). This file contains a 16X16 pixel image that Dreamweaver uses to represent the object in the Objects panel. This file is also optional: If there is no image file, Dreamweaver will supply a generic image icon to represent the object in the panel.
Object files must be stored in one of the folders inside the Configuration/Objects folder. The folder in which they're stored determines in which section of the Objects panel they'll appear in.
Structure of a Simple Object File: No Dialog Box
Some objects use dialog boxes to collect user information, and some don't. Those that don't are (not surprisingly) easier to create. Figure 1 shows a simple object file that doesn't call a dialog box.
){kind=link}
Figure 1 The structure of a simple object file, and how it translates into a Dreamweaver object.
The key elements of the file are as follows:
Filename. This becomes the Insert menu entry for the object.
Page title. This becomes the ToolTip that pops up to identify the object in the Objects panel.
objectTag() function. This JavaScript function is the most important element of the object file. The function returns the exact code that you want the object to insert into your document, enclosed in quotes. The objectTag() function is part of the Dreamweaver API, so it doesn't need to be defined. It also doesn't need to be called; Dreamweaver calls it automatically when the object is chosen.
In the example shown in Figure 1, the code returned by the objectTag() function is a simple level 1 heading. Notice how everything between the quote marks, in the return statement, becomes part of the user's document.
Structure of a Fancier Object File with a Dialog Box
More sophisticated objects do more than insert pre-established code; they collect user information and use that information to customize the inserted code. Figure 2 shows the structure of an object file that creates a dialog box to collect user input and then constructs the code to insert based on that input.
){kind=link}
The added element in this kind of object file is the HTML Form, which becomes the dialog box for collecting user input and for customizing the code. Note that the form as written doesn't include a Submit button. Dreamweaver supplies the OK and Cancel buttons automatically. The form needs to have only the fields for collecting data.
In the example shown in Figure 2, the code returned by the objectTag() function is a level 1 heading, but with the content to be determined by the user. Notice how a variable is used in the objectTag() function to collect the form input and pass it along to the return statement.
Figure 2 The structure of a full-featured object file, and how it translates into a Dreamweaver object.