Workshop 1: Creating a Simple Behavior

Workshop #1: Creating a Simple Behavior

It might take a bit of thought to wrap your brain around this, but you're about to write a JavaScript that instructs Dreamweaver to write some JavaScript in the user's document. Why would you want to do this? You (as an author) write behaviors for scripting tasks that you (as a user ) need repeatedly, but don't want to have to manually script over and over again. You also might want to write behaviors to share with your less scripting-savvy colleagues so that they can put them in their documents with the click of a + button. Are there any bits of JavaScript you find yourself always entering by hand, either because Dreamweaver doesn't provide them or because you don't like the way the Dreamweaver versions are scripted? Do you always end up using Dreamweaver behaviors and then tweaking the code by hand to make it just the way you want it? If so, you should start making your own behaviors.

Sample Behavior: Adding "Back" and "Forward" Controls to a Document

With a short chunk of JavaScript, web page creators can put text links or buttons on their pages that will navigate through the visitor's browser history, mimicking the functionality of the browser's Back and Forward buttons . Why would someone want to do this? It can be a nice added element in a web site's navigation controls, and it doesn't rely on the visitor using the browser's built-in controls.

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

Because the API for behaviors contains so many required and optional elements, creating even a fairly simple behavior like this one involves many tasks: creating and testing the JavaScript code to insert, building the basic behavior file, collecting and processing user input, revising and testing. This workshop takes you through each of those tasks. Complex tasks are broken down into steps for you.

Task 1: Create the JavaScript code insert

A behavior is only as good as the JavaScript it inserts . Our first task, therefore, is to create the properly formatted function and function call that you want the behavior to insert. We'll do this in a test file.

In your text editor or in Dreamweaver, create two new files. Call them fwd_test.html and back_test.html , and be sure each contains the basic HTML framework code. Because these are test files and not extension files, you don't want to make them part of your Dreamweaver configurationdon't save them in the Configuration folder! Instead, save them in your Working folder.
In fwd_test.htm, create two text links. One should say Start and should be linked to back_test.htm. The other should say Forward , and should be linked to the pound sign ( # ). The first link is just to get the test started; the second link will hold the function call for your JavaScript control. Figure 3.11 shows what fwd_test.htm should look like at this point.

Figure 3.11. The fwd_test.htm test file, with links in place.
Still in fwd_test.html, add a <script> tag and a JavaScript function to the document <head> that will navigate forward in the browser history. The code should look like this:
```
 <script language="JavaScript">  function goThere(page) {        window.history.go(page);  }  </script> 
```
This function uses the page parameter to determine which direction it should send the browser.
Now, add a function call to the Forward link, passing it the proper parameter. Your code for the two links should now look like this (the new event handler and function call is shown in bold):
```
 <p><a href="back_test.html">Start.</a></p>  <p><a href="#"  onMouseUp= "goThere(1);"  >Forward</a></p> 
```
Open back_test.htm. In this file, create one text link: It should say Back , and it should be linked to the pound sign ( # ).
In the <head> section of back_test.htm, add the same <script> tag and JavaScript function you added to the other file. (You can copy and paste it, or type it from scratch.)
Add a function call to the Back link, passing it the proper parameter, like this (event handler and function call are in bold):
```
 <p><a href="#"  onMouseUp= "goThere(-1);"  >Back</a></p> 
```
Figure 3.12 shows what the back_text.htm file should look like at this point.

Figure 3.12. The back_test.htm file with links and JavaScript function and function call in place.
Save both files and try them out in a browser. If you start from fwd_test.htm by clicking the Start link, you should then be able to use the Back and Forward links to hop back and forth between the two pages. If the scripts don't work as expected, of course, troubleshoot and tweak them until they do.

note

If you're an expert JavaScript writer and are used to having lots of choices in how you structure your scripts, you might be asking yourself a few questions here. Why did you create a generic function and pass it different parameters each time, instead of creating two different functions? And why did you link to # and use an event handler instead of linking directly to "javascript: goThere(1);" ? Why did you need to use a function at all for such a short line of code? You could have written <a href="javascript: window.history(-1); ">Back</a> . You did it this way because Dreamweaver applies these restrictions when you turn this script into a behavior. All behaviors create generic functions and usercustomizable function calls.

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.

In your text editor, open the behavior framework file you created in the practice session. Save it in your Actions/Development folder as

Back or Forward.htm .
Change the <title> to whatever you want to appear in the + menu Go Back/Forward works fine, unless you'd rather see something else show up there.
Replace the defined functionthe entire myBehavior() statementwith the function you created in Task 1:
```
 function goThere(page) {        window.history.go(page);  } 
```
Change the behaviorFunction() function to point to your new defined function name :
```
 function behaviorFunction() {       return "  goThere  ";  } 
```
Change the applyBehavior() function to use the new function call (without using any user input just yet):
```
 function applyBehavior() {       return "  goThere(-1)  ";  } 
```
For now, you can leave the <body> contents as they are. You will add a form as soon as you know the behavior will basically work.
Save the file and close it. If Dreamweaver is running, quit and relaunch.
In Dreamweaver, create a new document to use as a test file. Because you'll be using this file throughout this workshop, save it in your Working folder as test.htm .
In test.htm, enter a simple text link, such as the words click me , linked to # . With this text link selected, try to apply the Go Back/Forward behavior. You should be able to choose the behavior and apply it. If everything got inserted correctly, the <script> tag in the document's <head> and the <a> tag surrounding your text link should look exactly like the corresponding elements in fwd_test.htm. Figure 3.13 shows what the test document should look like with the behavior correctly inserted.

Figure 3.13. The test.htm test document with its simple text link, showing the Go Back/Forward behavior applied.

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.

graphics/03fig14.gif

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&nbsp;</td>      <td nowrap align="left">        <input type="radio" name="direction" value="1">  Forward&nbsp;</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.

First, create a variable to hold the 1 or -1 value, like this (new code is in bold):

 function applyBehavior() {  var whichWay;  return "goThere(  "+whichWay+"  )";  }

Determine which radio button has been selected and assign a 1 or -1 to whichWay based on this:

 function applyBehavior() {  var whichWay;  if (document.myForm.direction[1].checked) {   whichWay = 1;   } else {   whichWay = -1;   }  return "goThere("+whichWay+")";  }

When this code is in place, reload extensions in Dreamweaver and try it out. (You shouldn't need to quit and relaunch because the behavior isn't new, only altered .) Open test.htm and select the click me link you created in the previous step. Use the button in the Behaviors panel to remove the Go Back/Forward behavior, and then apply the behavior again.

This time, the behavior inserts a function call that passes a parameter of -1 if you choose the Back radio button, or it passes a parameter of 1 if you choose the Forward radio button.
If you really want to see the behavior in action, you can even set up a full test. Just repeat "Task 1: Create the JavaScript code insert" to create a fwd_test.htm and back_test.htm file. But instead of adding the JavaScript code by hand, apply the behavior to the links in each document.

note

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

 <html>  <head>  <! title becomes actions menu item name >  <title>Go Back/Forward</title>  <script language="JavaScript">  //this is the function the behavior will insert into the user's document  function goThere(page) {        window.history.go(page);  }  //this returns the name of the function to be inserted, minus its only parentheses  function behaviorFunction() {        return "goThere";  }  //this returns the function call, which will be inserted as part of the user's selected  object  function applyBehavior() {  var whichWay;  //this if-statement sets the variable based on which radio button has been selected  if (document.myForm.direction[1].checked) {        whichWay = 1;        } else {        whichWay = -1;        }  //this statement constructs the function call  return "goThere("+whichWay+")";  }  </script>  </head>  <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&nbsp;</td>       <td nowrap align="left">         <input type="radio" name="direction" value="1">  Forward&nbsp;</td>   </tr>  </table>  </form>  </body>  </html>