Basics of Behaviors

[ LiB ]

The basic mechanics of using Dreamweaver behaviors are simplealthough, as usual, the more you know about what's happening behind the scenes when you apply that Swap Image or other behavior, the better off you'll be.

How Behaviors Work: JavaScript and HTML

HTML was originally designed for scientists and researchers to put their documents in an electronic format that could be shared and viewed over a wide range of computers. Therefore, it is primarily designed to display static text with a simple, basic structure. The current state of the web has stretched HTML way beyond the purpose for which it was designed. The rising needs of early web developers created a demand to extend the basic functionality and interactivity of the Web. JavaScript was developed and incorporated into HTML to satisfy this demand.

What is JavaScript?

JavaScript is a scripting language loosely based on the Java programming language. A scripting language , by definition, is not self-executable. This means that it is a set of instructions that are read and executed by another programin this case, the browser. This is in contrast to Java, which is a compiled language. This means that the code is compiled or packaged into a self-contained program that can be run by itself.

Because it is a scripting language, you do not need a special program with which to write the script. Scripting languages can and are written as text files. The browser reads the script and executes the functions it finds there.

Working with Events and Actions

A Dreamweaver behavior, like most JavaScript interactions, consists of an event and an action. When the user clicks something, that's an event.

That event (clicking) triggers an action such as a new window opening, a sound playing, or a picture changing.

The browser is on the alert, constantly watching for events. When the browser detects an event, it looks to see if there's an event handler that contains a series of instructions for handling that event. Those instructions are the action (a window popping open , a sound playing, and so forth.)

An action is made up of one or more scripting statements that are do statements, imperatives that commanddo this, do that, then do the other thing! When an action might get performed more than once on a page, it's more efficient to combine all of those imperative statements into a single unit called a function. A function is a recipe for action. When there are functions involved, the event handler doesn't have to say, "Do this; do that; do the other thing." The event handler can simply say, "Go find this function and perform the actions it specifies."

Working with Behaviors in Dreamweaver

The central headquarters for working with behaviors is the Behaviors panel (Window > Behaviors). In previous versions of Dreamweaver, it was its own panel, but new to Dreamweaver MX 2004, it's an integrated part of the Tag Inspector (see Figure 13.1)because, of course, the panel displays only behaviors that are attached to the current selection.

Figure 13.1. The Behaviors panel, now an integrated part of the Tag Inspector.

Choosing Where to Attach a Behavior

To attach a behavior to any page element, you must first select an element that can have behaviors attached to it. This includes links (text or image), images, form elements, and the body of the page itself.

Images and Links

Images and linksthe img and a tags, to be specificrespond to being clicked on or rolled over, so attach a behavior to this kind of object when you want the user to be able to trigger it with a mouse-click or by a movement of the mouse. Image rollovers and status bar changes are popular behaviors for these objects.

Null links, or links that don't go anywhere , are often used to trigger behaviors. A null link has a pound sign (#) or the keyword javascript:; as its href value. To create a null link in Dreamweaver, enter one of these values in the Link field of the Property Inspector. The javascript:; link involves more typing, but is preferable because the # link can cause minor browser problems. For more information on null links, see the section on "Using Links for JavaScript" in Chapter 6, "Links and Navigation."

Form Elements

Form elements, such as input , select , and submit tags, can respond to being clicked on or to having data entered into them. Attach a behavior to this kind of object when you want it to be triggered by the user entering text in a text field, choosing from a drop-down menu, pressing a Submit button, and so on. The Form Validation behavior can be attached to a Submit button so that it executes when the form is submitted.

The Page Body

The page itself, represented by the body tag, can respond to being loaded or unloaded, to the window being resized, and to other page-related or window- related events. Attach a behavior to the body when you want it to execute automatically as the page loads or unloads. Preloading images, checking for plug-ins, and checking browser versions are generally actions that occur when the page loads.

To select the body tag, either click in an empty area of the Document window to deselect everything else, or go to the Tag Selector and click the body tag indicator there.

Attaching the Behavior

When you have the desired element selected, go to the Behaviors panel. Double-check the panel's title bar, which should be displaying the tag that you want your behavior attached to ( body , a , img , and so on). Click the + button to access the Actions list. This list displays all behavior actions installed on your computer. Those that are inappropriate for your current selection and document are grayed-out. You can't choose the Validate Form behavior, for instance, if there's no form in the current document.

Choose an action from the list, and that behavior's dialog box opens. All behaviors display dialog boxes. Fill in any required options and click OK to close the dialog box; the behavior is applied.

After the behavior has been applied, it shows up in the list of behaviors whenever this page element is selected.

Choosing Event Handlers

When you apply a behavior, Dreamweaver assigns a default event to trigger the actionusually onMouseOver for images, onLoad for pages, and so forth. You can change this triggering event by clicking it in the Behaviors panel to access a list of possible events.

Be aware, though, that not all browsers support all events. Older browsers, for instance, respond only to onMouseOver events for images and text. To tell Dreamweaver what events to display, you need to tell it what browser you're targeting. Do this by clicking the + button to access the Actions list and choosing Show Events For (see Figure 13.2). Pick a browser setting from the submenu here.

Figure 13.2. Choosing a target browser group to use when determining behavior events.

In general, the number of events available goes up as the browser version goes up. The safest choice that still gives you a variety of events is 4.0 and Later Browsers.

To make sure you're using events that are supported by the browsers your audience will be using, be sure to pay attention to any warnings Dreamweaver's Browser Check errors list, accessible from the Document toolbar. For more on browser checking, see the section "Checking Against Target Browsers" in Chapter 3, "Creating and Working with Documents."

Inspecting and Editing Behaviors

Whenever you select an item in the Document window, any behaviors that have been applied to it appear in the Behaviors panel. One item can have multiple behaviors applied to it, even triggered by the same event handler. Event handlers appear in the panel in alphabetical order, although they won't execute that way. (Even though onMouseOut is alphabetically before onMouseOver , the mouseout event can't logically happen before the mouseover event.)

If more than one behavior is triggered by the same event, the actions portion of the panel indicates the order in which the actions will occur. Use the up and down arrows at the top of the panel to rearrange them.

To delete a behavior, select it and press the button at the top of the panel.

To change any of the behavior's settings, double-click the name of the behavior or the little gear icon next to it. This opens the dialog box associated with that behavior, ready for inspection or editing.

[ LiB ]