Dreamweaver MX Extensions

Workshop #3: Inspecting the Set Properties Behavior

Now that you know all about inspecting behaviors, you can add that functionality to your Set Page Properties behavior.

Task 1: Link to dwscripts .js

In your text editor, open Set Page Properties.htm. You should already have a <script> tag in the head section, linking to Set Page Properties.js. Now add another one, like this (new code is in bold):

<script src="Set Page Properties.js"></script> <script src="../../../Shared/Common/Scripts/dwscripts.js"></script>

With this code in place, save the file and close it.

Task 2: Add the inspectBehavior() function

Now that the main behavior file has been linked to string.js, your behavior has access to dwscripts.extractArgs() . This includes your JS file, Set Page Properties.js.

1. Open Set Page Properties.js. Add the framework code for the inspectBehavior() function to the bottom of the file, using dwscripts.extractArgs() :

   function inspectBehavior(fnCall) { var argArray = new Array; argArray = dwscripts.extractArgs(fnCall); }

   Remember, the fnCall parameter will be passed to this function automatically. For the Set Page Properties behavior, that function call will be a string that looks something like this:

   setProperties('black','white','red,'green','blue');

   By putting the code shown here into the inspectBehavior() function, you're passing this text string to dwscripts.extractArgs() . What you'll get back is an array of values, which you're collecting into argArray . The elements of argArray will look something like this:

   argArray[0] = setProperties argArray[1] = 'black' argArray[2] = 'white' argArray[3] = 'red' argArray[4] = 'green' argArray[5] = 'blue'

2. After you have argArray at your disposal, the hard work of inspecting this behavior is done! All that remains is feeding the right array element into the right form field. Remember the order in which you told the setProperties() function to collect its parameters when you defined it:

   function setProperties(bg,fg,links,vlinks,alinks)

   For your function call, then, argArray[1] is bg , argArray[2] is fg , and so forth. Therefore, you can add the following lines to your function to finish it off (new code is in bold):

   function inspectBehavior(fnCall) { var argArray = new Array; argArray = dwscripts.extractArgs(fnCall); document.myForm.bg_button.value = argArray[1]; document.myForm.bg_label.value = argArray[1]; document.myForm.fg_button.value = argArray[2]; document.myForm.fg_label.value = argArray[2]; document.myForm.link_button.value = argArray[3]; document.myForm.link_label.value = argArray[3]; document.myForm.vlink_button.value = argArray[4]; document.myForm.vlink_label.value = argArray[4]; document.myForm.alink_button.value = argArray[5]; document.myForm.alink_label.value = argArray[5]; }

   (Note that because you had a color button and a color text field, each representing the same color property, each argument is being fed into two fields.)

3. Try it out. In Dreamweaver, reload extensions. Then open your test file, property_test2.htm. Select the text link so that the Set Page Properties behavior appears in the Behaviors panel. Double-click the behavior to open its dialog box. If your code is all entered correctly, the dialog box will open with form fields filled in. If you have any problems with your code, either the information won't appear properly or Dreamweaver will report a JavaScript error. Troubleshoot until it works.

note

What if it doesn't work? You know the drill. Check for typing mistakes. Read any error messages carefully . The most common problem in a big script like this (aside from good old typos) is incorrect references to form fields and variables . Make sure you haven't started calling something in your script by a name that doesn't exist.