Making Your Own Behaviors
Exercise 1Setting Up Shop
Start by getting your working space in order. Create a custom behaviors folder for storing your exercise behaviors, and you'll learn a few of the quirks of reloading extensions when working with behaviors.
Make sure that Dreamweaver is running. One of the goals of this exercise is to see how behavior extensions reload.
Find and open the Configuration/Behaviors/Actions folder on your hard drive. Minimize or hide Dreamweaver, if necessary, so that you have access to your desktop.
Create a custom behaviors folder. In the Actions folder, create a new folder. Call it Development. Leave the folder empty for now.
In Dreamweaver, reload extensions. Ctrl/Opt-click the triangle at the top of the Objects panel, and choose Reload Extensionsthis is the same procedure you would follow when working with objects.
In the Behavior panel, access the behaviors list and look for a new submenu. Click the + sign in the inspector to open the behaviors list. A new folder should result in a new submenu appearing in the list.
Quit Dreamweaver and relaunch it. Then look again for the submenu. This time, your submenu should appear. Of course, it will be an empty submenu because the Development folder is empty. But your new behaviors will appear there. Every time you add a new behavior, you must quit and relaunch; when you modify an existing behavior, you can reload extensions without quitting.
Probably, however, you won't see any new Development submenu. Why not? Reloading extensions does not cause Dreamweaver to recognize new or renamed files or folders in the Actions folder; it recognizes only modifications within files. To get Dreamweaver to see the new submenu, you'll have to do it the old-fashioned way: Quit the program and launch again.
Exercise 2Making a Simple Behavior
A simple behavior is one that doesn't require arguments to be passed from the function call to the function, and that, therefore, doesn't need a form to collect user input. The simple behavior that you'll create in this exercise is a script that automatically resizes the browser window to a certain size.
Create and edit the exercise files in your favorite text editor or in Dreamweaver's Code Inspector. Save the behavior file into the Development folder created in the previous exercise. Save the test files in your working folder.
Test your behavior in a browser (or two). Open the test file in a browser and click on the test link. The window should resize.
Create a basic behavior file, with all structural elements in place. Create a new HTML file. This will be the behavior file, so save it in the Development folder in the Actions folder. Call it Resize400.html.
Relaunch Dreamweaver. If Dreamweaver is currently running, quit the program. Then launch the program again so that the new behavior loads.
Open the new test file in Dreamweaver and apply your new behavior. When the file is open in Dreamweaver, try to apply your behavior the same way you'd apply any behavior, by selecting the linked text and clicking the + in the Behavior panel. The new behavior should now appear in the behaviors list, under the Development submenu, as shown in Figure 4. The dialog box shown in Figure 4 should appear when you choose the behavior.
The first step in creating a successful behavior is writing and testing a stable, functional script for the behavior to insert into a user document. This file is where you will do just thatit isn't going to be the behavior file, so save it in your working folder, not the Development folder. Call it resize400_test.html.
If there's a problem, go back to the code and do some troubleshooting until the window resizes. The script needs to work before the behavior that inserts it will work. For best results, of course, try the behavior in several major browsers before declaring it "well-behaved."
Start by entering the framework code, as shown in Figure 2. Then, add your newly devised function and function call in the appropriate places. Your final code should look like this (elements that have been customized from the basic framework are shown in bold):
Your code for the new file should look like this:
<html> <head> <title>Testing Resize Behavior</title> </head> <body> <a href="#">Click me!</a> </body> </html>
Figure 4 The various interface elements for the Resize Window behavior: the behaviors list, with Development submenu and behavior's menu entry, and the resulting dialog box.
If there are no syntax errors, you'll be allowed to choose and apply your behavior. But this doesn't mean that the code was inserted correctly. Follow these steps to check to see if the code was inserted correctly:
Examine the file's HTML source code to see if the script got properly inserted. Open Dreamweaver's Code Inspector and take a look at the code. It should look the same as the code you entered yourself, back in step 1 in Exercise 2.
If it doesn't look the same, you'll need to do some troubleshooting. Look for the differences between the inserted code and the original, hand-entered code. Then examine your behavior file. Find out how the two correlate, and adjust the behavior file. Then try the behavior again.