Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Making Your Own Behaviors
In this section, you'll get some hands-on experience making your own behaviors. It should go without saying that you need to be able to write and understand the code for a particular JavaScript function and function call before you can turn that code into a behavior.
Exercise 1—Setting 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 Extensions—this 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 2—Making 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.
-
Create (and test) the JavaScript function and function call that you want the behavior to insert.
-
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.
-
Create another HTML test file. Call it resize400_behavior_test.html and save it in your working folder. In the new file, create another simple text link (linking to #), just like the first test file. Don't add any JavaScript to this file.
-
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 that—it isn't going to be the behavior file, so save it in your working folder, not the Development folder. Call it resize400_test.html.
The document head should include a JavaScript function for resizing the window and it also should include a function call from within the body. The code should look like this:
<html>
<head>
<title>Testing Resize Script</title>
<script language="JavaScript">
function resizeTo400() {
window.resizeTo(400,400);
}
</script>
</head>
<body>
<a href="#" onMouseUp=" resizeTo400()">
Click me!</a>
</body>
</html>
TIP
When writing JavaScript functions to be used as behaviors, you don't have to worry about adding the lines of code that will hide the script from older browsers. Dreamweaver will add those lines of code automatically when your behavior is applied.
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):
){kind=link}
<html>
<head>
<title>Resize Window to 400</title>
<script language="JavaScript">
function resizeTo400() {
window.resizeTo(400,400);
}
function behaviorFunction() {
return "resizeTo400";
}
function applyBehavior() {
return "resizeTo400()";
}
</script>
</head>
<body>
<table width="200">
<tr>
<td>This behavior will resize the user's browser window
to 400 pixels wide and 400 pixels high.</td>
</tr>
</table>
</body>
</html>
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>
){kind=link}
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's a JavaScript syntax error in your behaviors file, Dreamweaver will give you an error message as soon as you click the + in the panel. Examine the message and see if you can fix the code.
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.
-
Test the inserted behavior in a browser. In a browser, repeat the test that you performed on the original code back in step 3 in Exercise 2. The JavaScript should work just as well as the code you entered by hand. You've made a behavior!
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.