Working with Behaviors in Dreamweaver
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Ah, behaviors! This is where the glitz comes in, all those neat little prewritten JavaScripts that Dreamweaver allows you to add to your web pages at the click of a button. Believe it or not, basic behaviors are only slightly more complicated than objects to create—though, as always, the more you know about JavaScript, the better (and more spectacular) your results will be.
What Are Behaviors?
A behavior, like an object, is a snippet of code that gets inserted into a Dreamweaver document when the user chooses one from the behaviors list. Instead of adding HTML code to the document (like an object), however, a behavior adds JavaScript code.
Behaviors are constructed the same way objects are: Dreamweaver API procedures and functions enable you to return the exact string of code that you want inserted into your document.
For a variety of reasons, however, behaviors are inherently more complex than objects, as noted in the following list:
A behavior inserts two pieces of code—a function (in the document head) and a function call (in the body section, wherever the cursor is when the behavior is chosen).
Preferably, a behavior should be editable after it has been inserted, by double-clicking it in the Behavior panel. (To edit objects after they've been inserted, you use the Property Inspector. Although it is possible to create a custom Property Inspector, it's not a task for the faint of heart.)
Preferably, a behavior should specify which event handlers can be used in the function call; it should be inaccessible in the behaviors list (grayed out) if the current selection is inappropriate.
NOTE
Dreamweaver behaviors always insert JavaScript code into the document in the form of a generic function, defined in the head section, and a customized function call, defined in the body.
What Files, Where?
Like objects, each behavior consists of an HTML file (the behavior file), which either contains JavaScript code or is linked to an external JS file. Behavior files are stored in the Configuration/Behaviors/Actions folder. Like the Objects folder, the Actions folder can contain folders inside itself; each folder corresponds to a submenu within the behaviors list. Again like the Objects folder, any new folder added to the Actions folder will result in a new submenu in the behaviors list (see Figure 1).
){kind=link}
Figure 1 The Actions folder, showing its subfolders, and the corresponding submenus in the Behavior panel's behavior list.
Structure of a Simple Behavior File
Like object files, behavior files have their own required structure, and Dreamweaver has a set procedure for dealing with them. Figure 2 shows the framework code of a basic behavior file, containing only the required elements.
){kind=link}
Figure 2 The code framework required for a basic behavior file.
The key elements of the file are listed here:
-
Page title. This becomes the name of the behavior as it appears in the behaviors list.
-
Defined function. This is the JavaScript function that the behavior will insert in the head section of the user's document. It will be inserted exactly as coded here. This function must have a unique name. No other defined function in the entire Actions folder can use this name.
-
behaviorFunction() function. This JavaScript function, part of the Dreamweaver API, must return the name of the function defined previously (without the ending parentheses). This function is called automatically when the behavior is chosen and, therefore, does not need to be called in the behavior file.
-
applyBehavior() function. This function, also part of the Dreamweaver API, must return the exact code of the function call as it will be inserted into the user's document. In a more complex behavior that requires arguments to be passed to the function, those arguments must be included in the return statement. This function is called automatically when the behavior is chosen and, therefore, does not need to be called in the behavior file.
-
<body> tag elements. Any code in the body section of the file will appear in a dialog box when the behavior is chosen. All behaviors automatically call up dialog boxes. If the behavior requires user input, create a form (as with object files). If the behavior requires no user input (as in the example here), some content must be placed in the body, or an empty dialog box will appear.
In the example shown in Figure 2, the function returned is a simple pop-up alert. Notice how the function and function call appear in the user's document, exactly as presented in the code.
Structure of a Fancier Behavior with a Dialog Box and Other Refinements
The behavior shown previously contains all the necessary elements and will work properly. However, it is unusually simple (requiring no user input and passing no arguments from the function call to the function), and it is missing several key enhancements (such as control over the event handler used and features that will allow the behavior to be edited in the future). Figure 3 shows the code for a more full-featured behavior, complete with all these (optional) features.
){kind=link}
Figure 3 The code framework for a full-featured behavior file.
In addition to the elements listed, the key elements in this more full-featured behavior are as follows:
HTML form. As with object files, the form becomes the dialog box for collecting user input. In behavior files, the form is used to collect arguments for the function call to pass to the main function.
-
Link to script.js file. This link gives you access to several utility functions for handling strings; one of these functions, the extractArgs() function, is extremely useful in coding the otherwise complex inspectBehavior() function (listed later).
-
canAcceptBehavior() function. This function, part of the API, returns either true, false, or a list of one or more default event handlers. In more advanced files than the one shown here, this function can also determine what kind of object the user has selected in the document, and whether that object is acceptable for applying this behavior. If the function returns false, the behavior will appear grayed out in the behaviors list. This function is called automatically.
-
inspectBehavior(functionCall) function. Also part of the API, this function must be used to collect information from a behavior that has already been applied and to repopulate the behavior's dialog box for editing. This function makes it possible for the user to open the Behavior panel, double-click an existing behavior, and be presented with a dialog box that contains the current settings for that behavior. The function is called automatically. Dreamweaver automatically passes the behavior's function call, as a string, to the function.
-
initializeUI() function. This function, which is not part of the API, does the same thing in behavior files as it does in object files: It places the cursor in a certain field of the dialog box and selects any contents for easier text entry. This function must be called using the onLoad event handler in the <body> tag.
In the example shown in Figure 3, the code returned by the defined function is a pop-up alert message, but with the content to be determined by the user. Notice that the defined function itself remains generic; the input collected by the form is used to add an argument to the function call.