Understanding Dreamweaver Behaviors

As the development of your web pages continues, it's likely that you'll want to add feature functionality beyond just the simple hyperlinks. The good news is that JavaScript offers you a whole range of new options that supplement those offered by standard HTML. So what if you're not a scripting guru who can create functions and arrays in your sleep? Dreamweaver is going to do most of the work for you and even write the necessary code to add options such as opening external browser windows, validating forms, and even checking to see whether the visitor has a specific browser plug-in installed.

Just sit back and you'll see how easy it is to make Dreamweaver behaviors spice up your web applications!

JavaScript and Dreamweaver

Oh sure, I said that you wouldn't have to understand any JavaScript and the first subsection I jump into is called "JavaScript and Dreamweaver." Great trick, eh? Actually, before we start exploring the snippets and behaviors that come with Dreamweaver, I thought it would be a good idea to give a brief background on JavaScript because it is the language that Dreamweaver uses to generate behaviors. If the thought of learning anything about a scripting language is completely revolting, go ahead and skip on to the next section. If, however, you want to learn a little more about JavaScript and how it relates to Dreamweaver, read on.

JavaScript is one of the more popular client-side scripting languages in use today. Don't confuse JavaScript with its big brother Javawhich is a full-blown object-oriented language. Although they share similar syntax, JavaScript is essentially a stripped-down version of Java that is much easier to write and implement because it doesn't have to be compiled prior to execution. In addition, because it is a client-side language, the machine rendering the code in the browser is the one that does all the work.

Unless you really want to get into developing your own scripts, it's likely that you'll take advantage of the predefined functions that are built into JavaScript. For instance, if you wanted to open a new browser window, you could use the JavaScript function

Window.Open()

If you want to close that same browser, you could use the function

Window.Close()

These are just a couple of examples of the many built-in functions that JavaScript offers and, as I mentioned before, Dreamweaver makes it very easy for you to access some of the more common functions through the JavaScript snippets and behaviors.

Using JavaScript Snippets

Although Chapter 24, "Working Efficiently in Dreamweaver," already covered snippets, it's worth spending a minute to take a closer look at the JavaScript snippets that are included in the Snippets panel. To view the JavaScript snippets, open the Snippets panel by choosing Window, Snippets and then expand the JavaScript folder (see Figure 28.1)

Figure 28.1. The Snippets panel with the JavaScript folder expanded.

As you can see, Macromedia has provided quite a few JavaScript code snippets that can be used for everything from mathematical calculations to reading cookies.

I highly recommend that you take some time to go through these folders and see what types of scripts are available for use in your pages. Doing so could save you the time and hassle of building your own script, only to discover that Macromedia had already provided you with everything you needed.

Tip

One of the snippets I use most frequently is the Starter Function snippet located in the starter script folder. This snippet places the bare necessities of a JavaScript function in the page and saves me the hassle of typing it every time I need to create a function. It also saves me from typos, to which I am prone.

Just as was discussed in Chapter 24, after you find a snippet that you want to use, it's extremely easy to apply it to your page. Just place your cursor on the code line where you would like the snippet inserted, and then double-click on the appropriate snippet and the code is added to your page. If areas of the code need to be customized, they are indicated as such. Figure 28.2 shows the Starter Function applied to the head section of the page code.

Figure 28.2. The Starter Function snippet has been added to the code.

Applying Behaviors

If you're still unsure about your ability to add JavaScript functionality to your pages, let's make it even easier. What if I told you that you could add JavaScript to your pages and never have to write a line of code? Sound good? Well, Dreamweaver's behaviors do exactly that.

Dreamweaver behaviors are accessed via the Behaviors panel and represent some of the most commonly used scripts applied to web pages. The Behaviors panel (see Figure 28.3) enables you to track and organize those behaviors that are already applied to your pages and apply new behaviors to the page.

Figure 28.3. The Behaviors panel helps you track the behaviors that have been applied to your page.

To apply a behavior to your page, click the plus sign on the panel and choose the appropriate behavior from the menu. Some behaviors require that a specific object be selected before the behavior can be applied, such as the Control Shockwave or Flash behavior. Logically, Dreamweaver applies this behavior only to Shockwave (Director) or Flash movies.

Other behaviors are grouped into categories such as the Set Text behaviors, shown in Figure 28.4, which enable you to choose between setting the text of a frame, layer, text field, or the status bar.

Figure 28.4. Some behaviors are logically grouped by their function.

Table 28.1 gives a brief overview of the Dreamweaver behaviors.

Table 28.1. Dreamweaver Behaviors

Name	What It Does
Call JavaScript	Enables you to call a custom JavaScript function such as Window.Open() or Window.Close(). When using the behavior, you need to know the appropriate placement of the code.
Change Property	Enables you to change the various attributes of layers, forms, text areas, images, and several other objects. When it is applied, you need to select the property to be altered and choose a new value for it.
Check Browser	Enables you to determine what browser and version visitors are using and redirect them appropriately. This is very handy if you build sites that are based on layers and want to redirect visitors with older browsers to a table-based version of your site instead.
Check Plugin	Checks to see whether a specific plug-in is installed on the visitor's machine. Enables you to designate where the visitor should be sent if the plug-in is found and an alternative location if the plug-in is not located. The behavior enables you to check for Flash, Shockwave, LiveAudio, QuickTime, and the Windows Media Player plug-ins.
Control Shockwave or Flash Drag Layer	Enables the visitor to stop or play Shockwave or Flash movies. Enables you to add interactivity to your pages by allowing visitors to drag layers around the page. This behavior is restricted to use on layers.
Go to URL	Opens a new URL in the existing browser window or in a new window. Commonly used with the onLoad behavior to do an auto-redirect for pages that have been moved to a new location.
Hide Pop-Up Menu	Hides a pop-up menu, usually used with the onMouseOut event handler.
Jump Menu	Creates a form-based menu on which visitors can click and access files, documents, and other websites.
Jump Menu Go	Activates the selection within the Jump menu.
Open Browser Window	Opens a new browser window, taking parameters such as the URL that should be displayed in the window, the size of the window, and the name of the new window.
Play Sound	Plays a sound file when the designated event handler occurs.
Pop-up Message	Opens a pop-up dialog box, also referred to as an alert box, and enables you to specify what information is presented in the box.
Preload Images	Enables you to specify that certain images should be preloaded before the visitor can view the page. This behavior slows the load time of the page slightly, but ensures that graphics are correctly loaded and cached before the user interacts with them. This is extremely important in the case of rollover buttons.
Set Nav Bar Image	Enables you to create a navigation image using the up, over, down, and while down states.
Set Text of Frame	Indicates what text should be displayed in a specified frame.
Set Text of Layer	Indicates what text should be displayed in a specified layer.
Set Text of Status Bar	Indicates what text should be displayed in the status bar.
Set Text of Text Field	Indicates what text should be displayed in a specified text field.
Show Pop-Up Menu	Creates a pop-up menu that is primarily used for navigation.
Show-Hide Layers	Makes an existing layer visible or invisible.
Swap Image	Changes the specific image to have a new source value. This behavior is most commonly coupled with the Swap Image Restore behavior to create rollover effects.
Swap Image Restore	Restores the image to its original source.
Go to Timeline Frame	Works in conjunction with JavaScript timelines and moves to a specific frame in the timeline.
Play Timeline	Starts a JavaScript timeline.
Stop Timeline	Stops a JavaScript timeline.
Validate Form	Enables you to verify that certain form fields have been completed and, in some cases, are of a particular type.

After they are applied to the page, these behaviors are assigned an event handler that indicates when they should be triggered. If the default handler is not the one that you want, you can adjust it via the drop-down menu in the leftmost column of the Behaviors panel. The states that are available are

• OnBlurtriggers the event when a form field loses focus, meaning that the cursor is no longer in the field.

• OnClicktriggers the event when the user clicks on the object.

• OnDblClicktriggers the event when the user double-clicks on the object.

• OnFocustriggers the event when a form field gains focus by being clicked on or tabbed to.

• OnKeyDownTRiggers the event one time when a key on the keyboard is depressed.

• OnKeyPresstriggers the event continuously when a key on the keyboard is depressed.

• OnKeyUptriggers the event when a key on the keyboard is released.

• OnMouseDownTRiggers the event when any mouse button is depressed.

• OnMouseMoveTRiggers the event when the mouse is moved in any direction.

• OnMouseOuttriggers the event when the mouse cursor is moved off of the target object.

• OnMousOverTRiggers the event when the mouse cursor is moved over the target object.

• OnMouseUpTRiggers the event when any mouse button is released.

After you have applied behaviors to your page, you may determine in the future that a behavior is no longer necessary. To remove a behavior from your page, click the minus sign in the Behaviors panel to remove it from the page.

Tip

Using the minus sign is truly the only safe way to fully remove a behavior. Deleting objects that have behaviors assigned to them without first deleting the behavior can result in orphaned code being left in your pages, so be sure to use the minus sign.