Dreamweaver MX Extensions

Let's roll up our sleeves and get some practice making inspectors. As usual, as we practice we'll also be building framework files that we can save and build on later.

For most of the practice session, you'll be creating an inspector for a fake HTML tag the <mood> tag, for marking up text that describes a mood. Why a fake tag? Dreamweaver has all the standard HTML and XHTML tags covered already, and you don't want to be getting in its way with your practice. After you learn the ropes of designing and implementing inspectors, you'll practice using priority settings and other methods to override the default Dreamweaver inspectors.

Task 1: Create a bare-bones <mood> inspector

We'll start simply, with only the required elements that an inspector needs: the opening comment line, the canInspectBehavior() function, and some <body> content.

  1. In your text editor, create a new file. Save it in the Configuration/Inspectors folder as mood.htm .

  2. Add the framework inspector code shown in Listing 6.1, changing a few key elements to make this a mood inspector, like this (code altered from the code in Listing 6.1 is shown in bold):

    <! tag: MOOD ,priority:10,selection:within,hline > <html> <head> <title> Mood Inspector </title> <script language="JavaScript"> function canInspectSelection() { return true; } </script> </head> <body> This is the body. </body> </html>

  3. Try it out! Launch Dreamweaver and create a practice document. (If you've been using Dreamweaver to create your inspector file, quit the program and relaunch it.) Using Code and Design view, enter the following tag into the <body> of the practice document:

    <mood>Happy!</mood>

    You have to use Code and Design view for this because the fake tag can only be added in Code view, but you can see the inspector at work only in Design view.

    note

    Because Dreamweaver checks the Inspectors folder for valid Property inspectors when it first starts up, forcing extensions to reload may not cause new inspectors to be recognized. It's safest to quit Dreamweaver, and then relaunch it when adding new inspectors. Reloading extensions is, however, usually sufficient when you're editing an existing inspector.

  4. After you have typed in the tag in Code view, use the tag selector in Design view to select it. Open the Property inspector, if it isn't currently showing. Your custom Property inspector should come up, looking like the one in Figure 6.5.

    Figure 6.5. The <mood> tag being used and inspected in a practice document.

Congratulations! You've made your first (albeit pretty basic) inspector.

Task 2: Add a form and inspectBehavior() function

Our next goal is to get the inspector to display the current value for mood which we'll assume to be the text within the opening and closing <mood> tags. We'll do this by putting a <form> in the <body> section, and using the inspectBehavior() function to collect data from the selection and pass it into the form.

  1. In the mood.htm file, replace the <body> content with a simple form consisting of one text field, like this (new code is in bold):

    <body> <form name="myForm"> What mood are you in? <input type="text" name="myMood"> </form> </body>

  2. In the <head> section, add the following inspectBehavior() function to your <script> tag:

    function inspectSelection() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); if (myObject.nodeType == 1 && myObject.tagName == 'MOOD') { document.myForm.myMood.value = myObject.innerHTML; } else { document.myForm.myMood.value = myObject.data; } }

    What does this code do? In lines 2 and 3, it accesses the currently selected object (presumably this will be the <mood> tag or its child). The conditional statement in line 4 then determines whether the selection is the <mood> tag itself or its child, which must be a text object. If the selection is the <mood> tag, line 6 accesses the tag's innerHTML property, and feeds the value of that property into the myMood text field. If the selection is the text child, line 8 accesses the text object's data property and feeds that property's value into the myMood text field.

    (For the purposes of this exercise, assume that no tag can exist within the <mood> tag, only text. Thus the user 's selection can only be the contained text or the tag itself.)

  3. Try it out! Reload extensions in Dreamweaver (because there's no new inspector being added, you shouldn't need to relaunch), open your practice document, and click inside the <mood> tag.

    Your revised inspector should come up with the current mood showing in its text field, as shown in Figure 6.6. Changing the text in the document should automatically change the text that shows in the inspector. That's half of your inspector's functionality.

    Figure 6.6. The mood inspector, with populated form field. The mood is happy!

Task 3: Add a local function and event handler

None of the API functions allow your inspector to change the document; for that, we need to define a local function. Because the user expects changes to be made as soon as information has been entered into the inspector, we'll call the function with an onBlur event handler attached to the myMood text field. The new function performs actions very similar to those in inspectBehavior() namely, determining whether the tag or its text is the current object, and accessing the data in the text. The only difference is that instead of collecting information from the document and feeding it to the form, the local function must do the opposite .

  1. In the mood.htm file, add a local function to your <script> tag, like this:

    function makeMeHappy() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); if (myObject.nodeType == "1" && myObject.tagName == 'MOOD') { myObject.innerHTML = document.myForm.myMood.value; } else { myObject.data = document.myForm.myMood.value; } }

    Compare this code to the code for the inspectSelection() , and you'll see that it accesses the selected object and sets either the <mood> tag's innerHTML or the text objects' data property to the value found in the myMood text field.

  2. Now add an event handler with a function call to the form code, like this (new code is in bold):

    <body> <form name="myForm"> What mood are you in? <input type="text" name="myMood" onBlur="makeMeHappy()" > </form> </body>

  3. That's it! Reload Dreamweaver extensions, go back to the practice file, and try it out. Everything should look the same as before, but changing the information in the form field changes the <mood> of the document to <mood>Thrilled!</mood> .

Task 4: Re-create the interface using layers

Our <mood> inspector works. Now let's make it look like a real inspector, with layers and an icon.

To start with, you need a 36x36 GIF icon for your <mood> enhancer . The standard icons have some similar features (transparent background, beveled frame around the edge), so you might find it easiest to copy one of the GIF files from the Inspectors folder, delete its icon, and insert your own. You can also download the already made mood.gif file from the companion web site to this book. (The web site also includes inspector_icon.gif, a blank template file with only the beveled frame in place for quickly making your own icons.)

note

See Appendix F, "Contents of the Dreamweaver MX Extensions Book Companion Web Site," for a full list of the contents on the web site.

  1. Get the icon file in whichever way you choose, and save it as mood.gif in the Inspectors folder.

  2. Now add the layers. The hardest part about this step is visualizing what the finished inspector should look like, inside the Property Inspector floating panel. Figure 6.7 shows a diagram of the floating panel framework, with measurements in place.

    Figure 6.7. The Property Inspector floating panel interface, with measurements for calculating layers' absolute positioning.

    Unless you're a true coding fiend, you'll probably find it easiest to do this part of the job in the Dreamweaver Design view. You may want to open existing inspector files and see where their layers are positioned. Figure 6.7 shows some key measurements taken from these other files. Your author likes to use a blank template Property inspector (like the one shown in Figure 6.6) as a tracing image. Figure 6.8 shows a Dreamweaver document with a tracing image in place, along with the left and top offsets to position the tracing image for accurate measurements. (You can download a copy of the template file , blank_ inspector.png , from this book's companion web site.) If you use a tracing image, remember to remove it from your code when you're finished with it.

    Figure 6.8. Using a blank picture of a Property inspector as a tracing image in Dreamweaver.

    note

    To create your own blank inspector, take a screenshot of any of the standard Dreamweaver inspectors and paint out the details in an image-editing program such as Fireworks or Photoshop.

    Figure 6.9 shows a good layers-based layout for the <mood> inspector. You can use the <div> or <span> tags to create your layers.

    Figure 6.9. Creating the mood inspector in the Dreamweaver Design view.

    note

    If you use the Dreamweaver design tools to draw your layers, you may end up with an extra <script> tag containing the MM_reloadPage() function. (This function helps layers draw properly in Netscape; because no browser will ever see your inspector file, however, it's a useless function for you.) To stop this from happening every time you draw a new layer, go to Edit > Preferences > Layers and turn off the Netscape 4 Compatibility option.

  3. Are you finished? Not yet! If you try the revised inspector out now, Dreamweaver gives you an error because it can no longer find the form element in your <body> section. That's because it's in a layer! You need to change how you access the myMood fieldaccessing it not through the <form> but as an object on the page, using Level 1 DOM access.

    Solving this problem could involve some complex scripting, but luckily Macromedia has done all the hard work for you by placing the findObject() function in _pi_common.js for you to access. All you have to do is access the file and call on the function. (Interestingly enough, now that you're not using the form to gain access to the form element, you no longer need the <form> tag at all. The <input> tag functions perfectly well without it.)

    Add a new <script> tag to your <head> section, linking to the JavaScript file:

    <script src="_pi_common.js"></script>

    (This is a relative link to the JS file in the Inspectors folder.)

  4. Next, change all references in your code from document.myForm.myMood.value to findObject("myMood").value , like this (new code is in bold):

    function inspectSelection() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); if (myObject.nodeType == 1 && myObject.tagName == 'MOOD') { findObject("myMood").value = myObject.innerHTML; } else { findObject("myMood").value = myObject.data; } } function makeMeHappy() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); if (myObject.nodeType == 1 && myObject.tagName == 'MOOD') { myObject.innerHTML = findObject("myMood").value ; } else { myObject.data = findObject("myMood").value ; } }

    There you gotry it out! The inspector should work just as well as it did before you introduced the layers, and it looks a lot betterjust like the one in Figure 6.10. The code for the finished <mood> inspector is shown in Listing 6.2.

    Figure 6.10. The completed mood inspector in action.

Listing 6.2 Final Code for mood.htm , Commented for Reference

<! tag:MOOD,priority:10,selection:within,hline > <html> <head> <title>Mood Inspector</title> <! link to this file so findObject() function is available > <script src="_pi_common.js"></script> <script language="JavaScript"> //return true or inspector won't be used function canInspectSelection() { return true; } //determine tag attributes and put them in form fields function inspectSelection() { //access the selected object var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); //if the <mood> tag itself is selected if (myObject.nodeType == 1 && myObject.tagName == 'MOOD') { //set form field to its innerHTML findObject("myMood").value = myObject.innerHTML; //if the text inside the tag is selected } else { //set form field to its data findObject("myMood").value = myObject.data; }//end if } //called when form's text field is changed //to update <mood> tag in document function makeMeHappy() { //access selected object var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); //if <mood> tag itself is selected if (myObject.nodeType == 1 && myObject.tagName == 'MOOD') { //collect info from form and put it in the tag's innerHTML myObject.innerHTML = findObject("myMood").value; //if text inside tag is selected } else { //collect info from form and change the text object's data value myObject.data = findObject("myMood").value; }//end if } </script> </head> <body> <! icon > <div id="iconLayer" ><img src="mood.gif" width="36" height="36"></div> <! name > <div id="nameLayer" >Mood</div> <! label and form field > <div id="inputLayer" > <table width="60"> <tr> <td align="right" nowrap>What mood are you in?</td> <td><input name="myMood" type="text" id="myMood" onBlur="makeMeHappy()"></td> </tr> </table> </div> </body> </html>

note

Sometimes, links to shared files don't work if the JavaScript and HTML portions of the inspector code are in one file. If this happens, Dreamweaver tells you it can't find the findObject() function. To fix the problem, split your inspector into mood.htm and mood.js. The link should then work fine.

Task 5: Create a competing inspector, and play with priorities

You know Dreamweaver doesn't have any other inspectors capable of handling <mood> disorders, so it doesn't matter what priority level you assign your inspector. But with most real tags, there will always be competition. You have to let Dreamweaver know when you want to override the default inspectors to use yours. In this task, you'll experiment by creating your own competing mood inspector.

  1. In your text editor, create another inspector file. Save it in the Inspectors folder as othermood.htm . You don't care if it's functional, just that it looks significantly different from the originalfor this purpose, you can just enter the barebones code shown in Task 1.

  2. In the opening comment line, give the new inspector a priority of 10. Then open the original inspector (mood.htm) and change its priority to 8.

  3. Try it out! Save both files and close them. Then quit Dreamweaver, if it's running, and relaunch it. (Changes in priority won't show up if you just reload extensions.) When you try to inspect a <mood> tag, the new (bare-bones) inspector should appear instead of the old one. That's because the new inspector now has a higher priority.

    Experiment with this all you like. Reverse the priority settings, set them to the same values, change the filenames, and see what happens each time. (Just remember, because you're working with priorities, you'll have to quit Dreamweaver and relaunch it each time you make a change.)

You now know the basics of property inspecting. Now let's put that knowledge to use!

Related

Категории