Workshop #1: Creating a Simple Behavior
Sample Behavior: Adding "Back" and "Forward" Controls to a Document
In this workshop, you create a behavior that causes Dreamweaver to add a Back or Forward link to a piece of text or an image. The behavior includes a dialog box that asks which way the link should goback or forward. Nice and simple, eh?
Creating the Back/Forward Behavior
Task 2: Insert the code into a behavior file framework
Okay, the script works. It's structured as a function and function call. It's time to turn this puppy into a Dreamweaver behavior.
Task 3: Create a form to collect user input
Of course, if you always want the behavior to send the browser back to the previously visited page, you don't need a form. But you want your behavior to be a little more versatile than that, allowing the user to specify for each instance of the behavior whether it should send the browser window back or forward. This requires adding a form. Because the user needs to choose only between back and forward, the form needs to contain only a few text labels and a pair of radio buttons. The completed form might look something like the one shown in Figure 3.14.
Figure 3.14. The desired layout for the Go Back/Forward behavior's dialog box.
To create the form, open the Back or Forward.htm behavior file in your text editor and change its <body> code to look like this:
<body> <form name="myForm"> <table> <tr> <td nowrap colspan="2">Direction to go:</td> </tr> <tr valign="baseline"> <td nowrap align="left"> <input type="radio" name="direction" value="-1" checked>Back </td> <td nowrap align="left"> <input type="radio" name="direction" value="1"> Forward </td> </tr> </table> </form> </body>
Task 4: Rewrite the applyBehavior() function so that it builds the function call from user input
The applyBehavior() function, like the objectTag() function in the last chapter, must return a string of code that will be inserted in the user's document. Any user input collected from the behavior's dialog box must be built into this code string by concatenation ( putting variables and text strings together, like you did to create object code in the previous chapter). For the Go Back/Forward behavior, the function call must include either 1 or - 1 , depending on whether the user selects the top or bottom radio button.
If you open either fwd_test.htm or back_test.htm in Dreamweaver and select one of the back or forward text links, the Behaviors panel will tell you that this link has the Go Back/Forward behavior applied to it. Even though you coded these files by hand, you used the same function name and structure (the goThere() function with one passed parameter) in the hand-coded version as you later used in creating the behavior. This causes Dreamweaver to interpret the function as an instance of the behavior.
If you've come this far, you've created a completely functional behavior. Congratulations! Listing 3.2 shows the final code for the Go Back/Forward behavior.
Listing 3.2 Code for the Finished Go Back/Forward Behavior, with Comments Added for Reference