Working with Behaviors

Team-Fly

---

	Macromedia® DreamWeaver® MX Unleashed By Matthew Pizzi, Zak Ruvalcaba
	Table of Contents
	Chapter 20.  Extending Dreamweaver MX

---

In the previous chapter you became familiar with some of the prewritten JavaScript capabilities that Dreamweaver MX offers. You were able to manipulate your application to include client-side logic that was already developed for you. But what if you need to accomplish a task that isn't on the list of preinstalled behaviors? Would you be out of luck? The answer is no!

Because of Dreamweaver MX's customizable behaviors list, behaviors can be created and removed just as easily as they are added to your workspace. You know how to use behaviors and may even know a little about how they work, but understanding how to create custom behaviors lies first in understanding what a behavior is and what it is composed of.

A behavior is a chunk of code that gets inserted into your working environment when you select it from the Behaviors panel list. Instead of adding plain HTML code, a behavior generally inserts JavaScript code, complete with an event and a resulting action.

TIP

An event is what causes the action to happen. For instance, when you click a form's Submit button, you expect the results to be sent to a specific location. The event for the button press could be called an onClick event.

Behaviors are composed of API procedures and functions, which, in essence, allow you to insert exactly what you want into your workspace.

TIP

API stands for Application Programming Interface. They are the building blocks for programs, and they are what developers program against in almost all software development environments.

From your experience with behaviors thus far, you should surmise that behaviors do the following:

• Behaviors create two chunks of code a function that performs the action you have created and a function call from the object that you have inserted.

• Behaviors generally allow you to edit them by double-clicking the Behaviors panel. You'll notice that when you double-click in the Behaviors panel, the original values that you inserted still appear.

• Behaviors should allow you to choose their event handler when making the function call.

Understanding Behaviors

Like most software applications, Dreamweaver MX has a standard procedure for how it handles plug-ins. In this case, Dreamweaver MX is handling much more than a simple plug-in; it's handling code that you write and customize for multiple people to use. Imagine the complexity. In this case, however, it's not all that complex if you can remember some basic elements that compose the location and structure of a typical Dreamweaver MX behavior:

• The File For the most part, behaviors consist of an HTML page as the user interface and an external .js file that contains the code that is to be processed. It is completely possible to develop everything within one HTML page.

• Location Behaviors reside in the Actions folder, which resides within the Dreamweaver MX directory. The full path usually reads: C:\Program Files\Macromedia\Dreamweaver MX\Configuration\Behaviors\Actions. If you navigate within the directory, you will notice that the names of the files resemble the names of the behaviors within the behaviors list. Adding a folder in the directory creates a submenu within the behavior list. Figure 20.5 shows the comparison between the files in the directory and the behaviors within the behaviors list.

  Figure 20.5. The Actions folder contains all the behaviors that are exposed within the behaviors list.

  

• Page Title The page title is the name of the behavior as it appears in the behaviors list.

• Defined Function The defined function is the code that will be inserted into your document.

• BehaviorFunction() function The behaviorFunction() function is part of the Dreamweaver API and is required typically just below the defined function. The behaviorFunction() function simply returns the name of the defined function without the parentheses.

• applyBehavior() function Also part of the Dreamweaver API, the applyBehavior() function returns the name of the function that is to be inserted into the workspace environment.

• User Interface The user interface is what the person selecting the behavior will see when selecting the behavior from the list. Typically, when creating custom behaviors, you would want people to enter some sort of value that is in turn passed on to the defined function. The UI resides within the <body> tag of the HTML page.

The Simple Resizer Behavior

To understand how a behavior works is to illustrate how they are written. The key elements that make up a behavior have been introduced to you, now it's just a matter of putting them together.

Begin by navigating to the Dreamweaver MX Behaviors folder and create a new folder called Custom Behaviors, as shown in Figure 20.6. Remember, by creating a folder within the Actions folder, you are effectively creating a submenu to store other behaviors within the behavior list.

Figure 20.6. Create a new folder called Custom Behaviors within the Actions folder.

1. Open Dreamweaver MX and create a new HTML file. Immediately save it into the Custom Behaviors folder and call it window resizer. The result is shown in Figure 20.7.

   Figure 20.7. Save the HTML file within the new Custom Behaviors folder.

   

   NOTE

   If you had Dreamweaver MX open while you created the folder, it will not appear in the behaviors list until you restart the application.

2. Change the code within the <title> tag to read window resizer. Remember, this is the name as it will appear within the behaviors list. The code should resemble the following:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html> <head> <title>Window Resizer</title> </head> <body> </body> </html> 

3. Add script blocks within the <head> tag.

4. Next, add the defined function for the window resizer. Name it resizeWindow. The riseTo method of the Window object will be used along with the width and height values that it accepts as parameters.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html> <head> <title>Window Resizer</title> <script language="JavaScript> function resizeWindow() { window.resizeTo(200,200); } </script> </head> <body> </body> </html> 

5. Now add the behaviorFunction() and the applyBehavior() functions, returning the name of the resizeWindow() function in both cases. Remember that the behaviorFunction() function does not return the "()" at the end of the function name.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html> <head> <title>Window Resizer</title> <script language="JavaScript"> function resizeWindow() { window.resizeTo(200,200); } function behaviorFunction() { return "resizeWindow"; } function applyBehavior() { return "resizeWindow()"; } </script> </head> <body></body> </html> 

6. Now that the logic of the behavior has been taken care of, you are ready to begin on the UI. In this case, you will create a simple dialog box that will display to users, letting them know what is happening.

   TIP

   OK and Cancel buttons are automatically inserted by Dreamweaver; you simply need to supply the content.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html> <head> <title>Window Resizer</title> <script language="JavaScript"> function resizeWindow() { window.resizeTo(200,200); } function behaviorFunction() { return "resizeWindow"; } function applyBehavior() { return "resizeWindow()"; } </script> </head> <body> <table width="200"><tr><td>This behavior will resize the browser window.</td></tr></table> </body> </html> 

7. You've created your first behavior! Now save the file as sample.htm and close it. Open a new HTML file and add a link as you normally would. The result should look similar to Figure 20.8.

   Figure 20.8. Create a new HTML file and insert a link.

   

8. Restart Dreamweaver MX so that your behavior's list will reload, and open up sample.htm again.

9. Highlight the new link and apply the Window Resizer behavior to it as shown in Figure 20.9.

   Figure 20.9. Apply the new Window Resizer behavior to your link.

   

10. After you have added your new behavior, examine the code by switching to code view. Figure 20.10 shows how the function was added to the <head> tag. An event handler was also added to your link that calls the function.

    Figure 20.10. Dreamweaver MX adds the JavaScript code for you.

    

11. Save sample.htm again and try it in the browser.

The Advanced Resizer Behavior

Aside from the basics that we have covered so far, your behaviors can accept input from your users. Up until this point, the behavior did no more than resize the browser window to the values that you provided to it. But what if you wanted to change it so that the user could enter their own values to change the browser window size? This could be accomplished by following these steps:

1. First change the UI to accept input from a standard HTML text box:

    <body>  <form name="resizeForm"> <table width="200"> <tr><td colspan="2">What do you want to resize the browser window to:</td></tr> <tr><td>Width:</td><td><input type="text" name="width" size="10"></td></tr> <tr><td>Height:</td><td><input type="text" name="height" size="10"></td></tr> </table> </form> </body> 

2. Second, change the applyBehavior() function to accept the two text field values and return a concatenated value for width and height:

    function applyBehavior() { var width = document.resizeForm.width.value; var height = document.resizeForm.width.value; return "resizeWindow(" + width + ", " + height + ")"; } 

3. Now, modify the defined function so that it accepts the two values as parameters: width and height.

    function resizeWindow(width, height) { window.resizeTo(width, height); } 

4. Save the behavior and restart Dreamweaver MX. Reopen sample.htm and delete the behavior that it currently has and reapply it. Notice this time you are asked to type in the values for the resizer. Figure 20.11 shows the dialog box that will appear.

   Figure 20.11. The UI that you created should appear, allowing you to input values for the resizer.

   

Advanced Behavior Functions

Aside from the basic elements that are required for the behavior to work, you can also include optional functions to enhance the usability of your behaviors. Listed below are a few of them:

• initializeUI() function Adding this function to the head of your behavior causes the cursor to land inside of a text box that you specify. It also makes sure that the dialog box is selected when it is called from the panel list. You are free to do anything you want within this function, although the code below is typical for what you may see:

   function initializeUI() { document.resizeForm.width.focus(); document.resizeForm.width.select(); } 

  For usability purposes it is always a good idea to add this function, especially when working with form elements within a behavior file.

  NOTE

  You will also need to add the onLoad event to the body tag for the function to be called: <body onLoad="initializeUI()">.

  
  

• canAcceptBehavior() function Aside from being able to gray out specific events that you do not want the user to be able to use, you can also use this function to specify which event should be used as the default. The following function can be added to your script to default the event to onMouseUp rather than onClick:

   function canAcceptBehavior() { return("onMouseUp"); } 

• inspectBehavior() function If you've been working with the newly created behavior, you will have noticed that when you double-click the behavior within the Behaviors panel, it doesn't remember the values that you entered. It forces you to reenter the values. The inspectBehavior() function can be added to solve this problem:

   function inspectBehavior(resizeFunctionCall) { var argArray = new Array; argArray = extractArgs(resizeFunctionCall); document.resizeForm.width.value = argArray[1]; document.resizeForm.height.value = argArray[2]; } 

  Just after the closing script tag, place a link to the shared string.js file. The string.js file contains functions that are needed for the behavior to function appropriately.

   <script src="/books/4/291/1/html/2/../../../Shared/MM/Scripts/CMN/string.js"></script>  

• Notice how the values of the text boxes within the UI are placed into an array. This is how Dreamweaver MX stores the values that you have entered.

TIP

The Configuration/Shared folder contains helpful scripts that you can use when working with extensions. The string.js is one of those scripts that comes in handy when working with strings.

Working with .JS Files

If you look inside the Actions folder again, you will notice that your file is the only one without an accompanying .js file. This is done to separate the client logic from your UI, resulting in cleaner code that is easier to maintain. To create a new .js file for your new behavior, follow these steps:

1. Cut all the script content out of the head of your file, as shown in Fig 20.12. Be careful not to cut the link to the string.js file.

   Figure 20.12. Cut out all the script content.

   

2. Create a new file by selecting New from the File menu.

3. Select Basic Page and JavaScript.

4. Paste your code in and delete the script tags.

5. Make sure to save the file in the same location as your HTM file.

6. In the HTM file, add the following line:

    <script src="/books/4/291/1/html/2/Window Resizer.js"></script>  

7. Save the behaviors file and restart Dreamweaver MX.

---

Team-Fly

Top