Workshop #2: Replacing a Default Inspector  For this workshop, we'll create a more complex inspector, again building on a custom object from Chapter 2. We'll also see how to use priority values and the canInspectSelection() function to dictate exactly when an inspector will override the default. Sample Project: Custom Horizontal Rule Remember the Custom Horizontal Rule object you created back in Workshop #3 of Chapter 2? This object allows users to set all sorts of attributes, including color , as they insert the <hr> tag. As with the <spacer> object, however, after a user has a colored <hr> in the document, there's no way to use the Property inspector to check, change, or remove the color property. We can't simply add a color button to the default <hr> inspector, because that inspector is hard-coded into Dreamweaver, not written as an extension. We'll have to replace it. Task 1: Create the basic inspector file Start by creating or copying the basic framework for an inspector file. -
If you completed the Mood inspector earlier in this chapter, open mood.htm. If not, create a new file in your text editor and enter the code framework from Listing 6.2. Save the file as Custom HR.htm in the Configuration/Inspectors folder. -
To officially turn the file into an HR inspector, revise the opening comment line like this (new code is in bold): <!tag: HR ,priority:10,selection:within,hline,vline> By assigning a priority of 10 , you guarantee that your inspector will overrule the Dreamweaver default <hr> inspector. Working with this value is discussed later in this workshop. -
Change the <title> of the inspector file, like this: <title> Custom Horizontal Rule Inspector </title> Task 2: Create the layout and form elements This, of course, involves design and technical issues. What do you want your inspector to look like? Because it's replacing the default <hr> inspector, you can adapt the layout of the default, adding and subtracting elements as needed. Figure 6.13 shows the original Dreamweaver <hr> inspector and a proposed layout for your inspector. The new inspector is missing the ID field, and has added a color button and color field. Although the pixel/percent popup menu is present in both of these layouts, if you don't want to code it, you can eliminate it and let the user simply type the percent sign in the width field instead. (Some of the standard Dreamweaver inspectors follow this strategy.) Figure 6.13. The default Dreamweaver <hr> inspector (top) and the revised layout for your new inspector (bottom).  -
Create the layers and form elements for your inspector, following the design shown in Figure 6.13 or one of your own. Figure 6.14 shows the new layout in the Dreamweaver Design view. Listing 6.3 shows the code for the layout. (Remember, it may seem odd, but you won't need a <form> tagjust the tags for the individual form elements.) The icon is created by a file called customhr.gif, saved in the Configuration/Inspectors folder. You can create your own customhr.gif file, or download it from the book's companion web site. You may need to adjust the layer positions from what is shown here. Figure 6.14. The custom <hr> inspector layout, seen in Dreamweaver Design view.  Listing 6.3 The <body> Code for the Custom <hr> Inspector, Showing Its Various Form Fields in a Layered Layout <body> <div id="iconLayer" style="position:absolute; left:3; top:2; width:40px; height:40px; z-index:1"><img src="CustomHR.gif" width="36" height="36"></div> <div id="nameLayer" style="position:absolute; left:44px; top:4px; width:81px; height:50px; z-index:2">Horizontal Rule </div> <div id="widthLayer" style="position:absolute; left:135px; top:-8px; width:121px; height:28px; z-index:9"> <table> <tr> <td>W:</td> <td><input name="width" type="text" size="8" onBlur="setWidth()"></td> </tr> </table> </div> <div id="unitsLayer" style="position:absolute; left:228px; top:5px; width:91px; height:33px; z-index:8"> <select name="units" onChange="setWidth()"> <option selected>pixels</option> <option>percent</option> </select> </div> <div id="heightLayer" style="position:absolute; left:135px; top:14px; width:107px; height:37px; z-index:10"> <table> <tr> <td>H:</td> <td><input name="height" type="text" size="8"></td> </tr> </table> </div> <div id="colorLayer" style="position:absolute; left:320px; top:-3px; width:127px; height:52px; z-index:4"> <input type="mmcolorbutton" name="colorswatch" onChange="setColorField();setColor()"> <input type="text" name="colorfield" size="10" onBlur="setColorSwatch();setColor()"> </div> <div id="alignLayer" style="position:absolute; left:431px; top:3px; width:161px; height:32px; z-index:5"> Align: <select name="alignHR" style="width:100px" onChange="setAlign()"> <option selected>Default</option> <option value="left">Left</option> <option value="center">Center</option> <option value="right">Right</option> </select> </div> <div id="shadeLayer" style="position:absolute; left:461px; top:25px; width:124px; height:29px; z-index:11"> <input name="shade" type="checkbox" value="checkbox" onClick="setShading()">Shading</div> </body> Task 3: Set up the canInspectSelection() function For development purposes, you always want this inspector to come up as the inspector for <hr> tags. To do this, make sure the canInspectSelection() returns true : function canInspectSelection() { return true; } Task 4: Revise the inspectSelection() function An <hr> tag can have all the attributes specified in this inspector, or none of them. For each item, you need to test for the attribute's presence. If an attribute is present, change the form element to reflect its value; if not, set the form field to blank. -
Now that the layout is in layers, it can take some hunting to find form field names . To make them easier to find, put some comment lines at the top of your <script> tag, listing the form fields and what they're used for, as follows (new code is in bold): <script language="JavaScript"> //Form Field Names// //"width" width attribute (numbers only) //"units" pixels/percent popup; [0]=pixels, [1]=percent //"height" size attribute //"colorfield" color text field //"colorswatch" color button //"alignHR" alignment popup; [0]=default //"shade" noshade checkbox //////////////////// [etc] -
Now that your fields are easy to refer to, it's time to start inspecting the selected <hr> object and filling those fields with values. Start by gaining access to the object, revising your inspectSelection() function to look like this: 1 function inspectSelection(){ 2 var myDOM = dw.getDocumentDOM(); 3 var myObject = myDOM.getSelectedNode(); 4 }//end function -
Collect the horizontal rule's height (size), by adding the following code to your function: 1 function inspectSelection(){ 2 var myDOM = dw.getDocumentDOM(); 3 var myObject = myDOM.getSelectedNode(); 4 //set height (size) field 5 if (myObject.getAttribute("size") { 6 findObject("height").value=myObject.size; 7 } else { 8 findObject("height").value=""; 9 }//end if (size) 10 }//end function note Some of the code samples in this and subsequent chapters include line numbers to help identify specific lines in complex functions. The line numbers aren't part of the code they're for your reading reference only. -
The same code structure can be adapted to collect the object's color value for the colorfield and colorswatch form fields. To collect this information, add the following to your code: 1 function inspectSelection(){ 2 var myDOM = dw.getDocumentDOM(); 3 var myObject = myDOM.getSelectedNode(); 4 //set height (size) field 5 if (myObject.getAttribute("size")) { 6 findObject("height").value=myObject.size; 7 } else { 8 findObject("height").value=""; 9 }//end if (size) 10 //set color field and colorbutton 11 if (myObject.getAttribute("color")) { 12 findObject("colorfield").value=myObject.color; 13 findObject("colorswatch").value=myObject.color; 14 } else { 15 findObject("colorfield").value=""; 16 findObject("colorswatch").value=""; 17 }//end if (color) 18 }//end function Note that although the colorswatch field isn't a text field, it collects information as though it were. Note also all the comments being added, including comments identifying the closing curly braces. This code is going to get longyou want to be able to find your way around it! -
The width attribute is also represented by a text field, but has the added complication of the unit value that may be present in the code. A horizontal rule may have a width attribute that looks like either of these two options: <hr width="100"> <hr width="100%"> If the percent sign is present in the width attribute, it must be subtracted from the end of the width value. Its presence or absence can also be used to determine the state of the units popup menu. To handle the possibilities for width , add the following code to your function: 1 function inspectSelection() { [etc] 18 if (myObject.getAttribute("width")) { 19 var myWidth = myObject.width; 20 var myUnits = findObject("units"); 21 //look for the % and set the popup accordingly 22 if (myWidth.search(/%/) >= 0) { 23 myUnits.selectedIndex = 1; 24 //if there's a %, remove it from the value 25 myWidth = myWidth.substring(0,myWidth.length-1); 26 } else { 27 myUnits.selectedIndex = 0; 28 }//end if-else 29 //put the value in the width field 30 findObject("width").value = myWidth; 31 //if there's no width attribute, blank out both form elements 32 } else { 33 findObject("width").value = ""; 34 findObject("units").selectedIndex = 0; 35 }//end if (width) 36 }//end function What's happening in this code? The first conditional, of course, looks for a width attributeif none is present, none of the code here executes. If the width attribute is present, its value is searched for a % character. If that character is present, line 27 sets the units popup to its second listed option (percent) by setting its selectedIndex value to 1; and line 30 puts the width attribute, minus its % , in the width text field. If the % is not present, line 34 sets the units popup to its first option (pixels) and line 33 puts the width attribute value in the width text field. -
Now you need to set the alignment. Because alignment information is stored in a popup menu, setting it is similar to setting the units popup. The strategy is to determine whether the align attribute is present, and what its value is, and use that information to choose a menu option by setting the selectedIndex property. To do this, add the following code to your function: 1 function inspectSelection() { [etc] 36 if (myObject.getAttribute("align")) { 37 var myAlign = findObject("alignHR"); 38 var myValue; 39 //step through possible alignments 40 for (var a=0;a<myAlign.options.length;a++) { 41 myValue = myAlign.options[a].value; 42 //test to see if this is the align attribute's value 43 if (myValue == myObject.align) { 44 //if it is, set the popup menu 45 myAlign.selectedIndex = a; 46 //and stop searching 47 break; 48 }//end if (alignment matches) 49 }//end for loop 50 } else { 51 findObject("alignHR").selectedIndex = 0; 52 } //end if (align) 53} //end function What's happening here? If the align attribute is present (line 36), a for loop (line 40) looks at each of the possible values it can have left , center , right checking each against the actual value of the align attribute (line 43). If the values match, line 45 sets the popup menu to the correct option (by setting its selectedIndex property). Finally, if there is no align attribute (line 50), the popup menu is set to its first option, Default. -
The last attribute to inspect is noshade . Because this attribute is represented by a checkbox, you only have to set its checked value to true or false . The tricky bit here, though, is getting your brain around some backward logic: If the noshade attribute is present, there is no shading, so the checkbox should be off ( false ). If the noshade attribute is not present, the checkbox should be on ( true ), like this: 1 function inspectSelection() { [etc] 53 if (myObject.getAttribute("noshade")) { 54 findObject("shade").checked=false; 55 } else { 56 findObject("shade").checked=true; 57 }//end if (noshade) 58 }//end function -
That's your inspection code! Before proceeding any further, check your inspector out to make sure the inspection process is working correctly. Figure 6.15 shows the Custom HR inspector correctly inspecting a slightly unusual <hr> page element. Figure 6.15. The Custom HR inspector, with form fields correctly filled in based on the attribute values of an <hr> in the user's document.  Task 5: Create local functions and calls so that the inspector can edit the document For this task, you need to create a separate local function for each attribute. Each function will be called using an event handler attached to the relevant form field so that as soon as the user finishes entering information into a field, his document's code will be updated. -
The size text field is the simplest, so start there. If there's a height value in the inspector, your inspector should set the size attribute to match it; if there's no value, the inspector should remove the attribute. To accomplish this, add the following function to your inspector file: function setHeight() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); var myHeight = findObject("height").value; if (myHeight) { myObject.size=myHeight; } else { myObject.removeAttribute("size"); }//end if }//end setHeight() function -
This function should be called every time the user leaves the size text field, so add the following function call to the relevant portion of your <body> section (new code is in bold): <input name="width" type="text" size="8" onBlur="setHeight()" > -
Now create a similar function to handle the colorfield and colorswatch : function setColor() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); var myColor = findObject("colorfield").value; if (myColor) { myObject.color=myColor; } else { myObject.removeAttribute("color"); }//end if }//end setColor() function -
Add a function call to the colorfield form element, like this: <input type="text" name="colorfield" size="10" onBlur="setColor()" > And add a function call to the colorswatch form element, like this: <input type="mmcolorbutton" name="colorswatch" onChange="setColor()" > -
Note that the colorfield and colorswatch don't need to be independently set if you have functions in place so that each automatically updates the other. You created functions like this for the <hr> object in Chapter 2. For the inspector, add the following two reciprocal functions: //call from colorswatch, to update colorfield function setColorField() { findObject("colorfield").value = findObject("colorswatch").value; } //call from colorfield, to update colorswatch function setColorSwatch() { findObject("colorswatch").value = findObject("colorfield").value; } -
Calling these two functions is a little bit different from what you've done before, because both the colorfield and colorswatch form elements already have event handlers attached to them. Instead of adding more event handlers, just add more function calls to the existing handlers. Like this: <input type="mmcolorbutton" name="colorswatch" onChange=" setColorField(); setColor()"> <input type="text" name="colorfield" size="10" onBlur=" setColorSwatch(); setColor()"> -
Now tackle the width attribute. As before, the units popup menu adds a bit of complexity to this function. If the popup menu value is % , a percent sign must be appended to the end of the width value before it's inserted into the document. Accomplish this by adding the following new function to your file: 1 function setWidth() { 2 var myDOM = dw.getDocumentDOM(); 3 var myObject = myDOM.getSelectedNode(); 4 var myWidth = findObject("width").value; 5 var myUnits = findObject("units").selectedIndex; 6 if (myWidth) { 7 if (myUnits == 1) { 8 myWidth+= "%"; 9 }//end if (myUnits) 10 myObject.width = myWidth; 11 } else { 12 myObject.removeAttribute("width"); 13 }//end if (myWidth) 14 }//end setWidth() function Can you see what's happening here? If the width field has a value (line 6), another if statement tests to see whether the units popup is set to its second option, which is percent (line 7). If so, a percent sign is added to the width value (line 8). The width value is then used to create a width attribute for the <hr> tag (line 10). As with other attributes, if the width field is empty, the <hr> width attribute is removed (line 12). -
What form element should activate the setWidth() function? Two elements: the width text field and the units popup menu. After all, the user might want to change his <hr> width from pixels to percent without changing the number of pixels or percentage points. To accommodate this, add the following two function calls to your form elements (new code is in bold): <input name="width" type="text" size="8" onBlur="setWidth()" > <select name="units" onChange="setWidth()" > -
Alignment is next . Because this attribute is collected using a popup menu that is never without a value, the align attribute is slightly trickier to discern. Do it by adding this function to your code: 1 function setAlign() { 2 var myDOM = dw.getDocumentDOM(); 3 var myObject = myDOM.getSelectedNode(); 4 var myIndex = findObject("alignHR").selectedIndex; 5 if (myIndex == 0) { 6 myObject.removeAttribute("align"); 7 }else{ 8 myObject.align = findObject("alignHR").options[myIndex].value; 9 }//end if (myIndex) 10 }//end setAlign() function What's happening here? First, line 4 determines which menu option has been selected, by collecting the selectedIndex value. Then, if the popup menu is set to its first option (Default), the align attribute is removed from the code (line 6). If the menu is set to one of the other options, that option's value is fed into the align attribute (line 8). -
You need to call the setAlign() function every time the user changes the selection in the popup menu. To do this, add the following event handler to the alignHR form element: <select name="alignHR" style="width:100px" onChange="setAlign()" > -
The last attribute to deal with is shading ( noshade ). You must set this attribute differently from the others because it doesn't follow the standard attribute=value format. Instead, the mere presence of the word noshade in the <hr> tag is what creates this attribute. If you just named the attribute and set it ( myObject.noshade )as you've been doing for the other form fields and attributes in this workshopyou would need to give it a value ( myObject.noshade=yes ), and that would create invalid HTML, like this: <hr noshade="yes"> Instead, you need to use string access to append the word noshade to the end of the <hr> code string. To accomplish this, add the following function to your inspector: 1 function setShading() { 2 var myDOM = dw.getDocumentDOM(); 3 var myObject = myDOM.getSelectedNode(); 4 //removing the attribute works as normal 5 if (findObject("shade").checked) { 6 myObject.removeAttribute("noshade"); 7 } else { 8 //adding the attribute is done with string access 9 var myHTML = myObject.outerHTML; 10 var openingString = myHTML.substring(0,myHTML.length-1); 11 myObject.outerHTML = openingString + " noshade>"; 12 }//end if (shade checked) 13 }//end setShading() function Can you see how this function works? If the shade checkbox is checked (line 5), the noshade attribute should be removed (line 6), which is just like removing any normal attribute. If the checkbox is not checked (line 7), the selected <hr> tag is collected as a string (line 9). Its final character, the closing > , is stripped off (line 10); and a longer string ( noshade> ) is put in its place (line 11). -
And, of course, you need to call the setShading() function whenever the user clicks on the checkbox (new code is in bold): <input name="shade" type="checkbox" value="checkbox" onClick="setShading()" > Task 6: Determine priority and refine the canInspectSelection() function Now that you have created an inspector that duplicates much of the functionality of a Dreamweaver default inspector, you need to determine when you want which inspector to be called. The two determining factors in this equation are the priority setting and the canInspectSelection() function. -
You already know that, with a priority setting of 10, your inspector will replace the default. Experiment with lower values to see when the default inspector kicks in. (Remember, you have to quit Dreamweaver between each test because priority values are analyzed only at startup.) You'll discover that any value (110) overrides the default inspector. So it doesn't matter too much which priority level you choose, unless some other custom <hr> inspector is introduced into the mix. -
You may decide, though, that the only reason to use the custom inspector is to access the color property. So maybe the standard inspector should appear unless the horizontal rule in question has a color. This sort of functionality is controlled with the canInspectSelection() function. Rewrite this function to return true only if there is a color property, like this (new code is in bold): function canInspectSelection() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); if (myObject.color) { return true; } else { return false; }//end if }//end function -
Quit and relaunch Dreamweaver. Then try this out! If you create a <hr> with no color property, the traditional inspector appears. As soon as you add a color (you have to do it in Code view, or by using the Modify > Edit Tag command or the Tag inspector), the new inspector appears. Delete the color property, and the old inspector is back. Is this a good division of labor? It depends on how much you like the traditional inspector. What if, for instance, you have a rule with no color, and want to add color? It's easiest to use the Property inspector for this. Therefore, it might be better to leave canInspectSelection() returning true all the time so that this situation doesn't occur. That's all there is to the Custom HR Property inspector. If you've come this far, congratulations again! The API for inspectors is complex, and there are plenty of opportunities to go astray. Listing 6.4 shows the finished code for the Custom HR.htm inspector file. Listing 6.4 Finished Code for Custom HR.htm <! tag:HR,priority:1,selection:within,hline,vline > <html> <head> <title>Horizontal Rule Inspector</title> <script src="_pi_common.js"></script> <script language="JavaScript"> //Form Field Names// //"width" width attribute (numbers only) //"units" pixels/percent popup; [0]=pixels, [1]=percent //"height" size attribute //"colorfield" color text field //"colorswatch" color button //"alignHR" alignment popup; [0]=default //"shade" noshade checkbox //////////////////// function canInspectSelection() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); if (myObject.color) { return true; } else { return false; }//end if }//end function function inspectSelection(){ var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); //set height (size) field if (myObject.getAttribute("size")) { findObject("height").value=myObject.size; } else { findObject("height").value=""; }//end if (size) //set color field and colorbutton if (myObject.getAttribute("color")) { findObject("colorfield").value=myObject.color; findObject("colorswatch").value=myObject.color; } else { findObject("colorfield").value=""; findObject("colorswatch").value=""; }//end if (color) if (myObject.getAttribute("width")) { var myWidth = myObject.width; var myUnits = findObject("units"); //look for the % and set the popup accordingly if (myWidth.search(/%/) >= 0) { myUnits.selectedIndex = 1; //if there's a %, remove it from the value myWidth = myWidth.substring(0,myWidth.length-1); } else { myUnits.selectedIndex = 0; }//end if-else //put the value in the width field findObject("width").value = myWidth; //if there's no width attribute, blank out both form elements } else { findObject("width").value = ""; findObject("units").selectedIndex = 0; }//end if (width) if (myObject.getAttribute("align")) { var myAlign = findObject("alignHR"); var myValue=""; //step through possible alignments for (var a=0;a<myAlign.options.length;a++) { myValue = myAlign.options[a].value; //test to see if this is the align attribute's value if (myValue == myObject.align) { //if it is, set the popup menu myAlign.selectedIndex = a; //and stop searching break; }//end if (alignment matches) }//end for loop } else { findObject("alignHR").selectedIndex = 0; } //end if (align) if (myObject.getAttribute("noshade")) { findObject("shade").checked = false; } else { findObject("shade").checked = true; }//end if (noshade) }//end function function setHeight() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); var myHeight = findObject("height").value; if (myHeight) { myObject.size=myHeight; } else { myObject.removeAttribute("size"); }//end if }//end setHeight() function //call from colorswatch, to update colorfield function setColorField() { findObject("colorfield").value = findObject("colorswatch").value; } //call from colorfield, to update colorswatch function setColorSwatch() { findObject("colorswatch").value = findObject("colorfield").value; } function setColor() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); var myColor = findObject("colorfield").value; if (myColor) { myObject.color=myColor; } else { myObject.removeAttribute("color"); }//end if }//end setColor() function function setWidth() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); var myWidth = findObject("width").value; var myUnits = findObject("units").selectedIndex; if (myWidth) { if (myUnits == 1) { myWidth+= "%"; }//end if (myUnits) myObject.width = myWidth; } else { myObject.removeAttribute("width"); }//end if (myWidth) }//end setWidth() function function setAlign() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); var myIndex = findObject("alignHR").selectedIndex; if (myIndex == 0) { myObject.removeAttribute("align"); }else{ myObject.align = findObject("alignHR").options[myIndex].value; }//end if (myIndex) }//end setAlign() function function setShading() { var myDOM = dw.getDocumentDOM(); var myObject = myDOM.getSelectedNode(); //removing the attribute works as normal if (findObject("shade").checked) { myObject.removeAttribute("noshade"); } else { //adding the attribute is done with string access var myHTML = myObject.outerHTML; var openingString = myHTML.substring(0,myHTML.length-1); myObject.outerHTML = openingString + " noshade>"; }//end if (shade checked) }//end setShading() function </script> </head> <body> <div id="iconLayer" style="position:absolute; left:3; top:2; width:40px; height:40px;  z-index:1"><img src="CustomHR.gif" width="36" height="36"></div> <div id="nameLayer" style="position:absolute; left:44px; top:4px; width:81px; height:50px; z-index:2">Horizontal Rule </div> <div id="widthLayer" style="position:absolute; left:135px; top:-8px; width:121px; height: 28px; z-index:9"> <table> <tr> <td>W:</td> <td><input name="width" type="text" size="8" onBlur="setWidth()"></td> </tr> </table> </div> <div id="unitsLayer" style="position:absolute; left:228px; top:5px; width:91px; height: 33px; z-index:8"> <select name="units" onChange="setWidth()"> <option selected>pixels</option> <option>percent</option> </select> </div> <div id="heightLayer" style="position:absolute; left:135px; top:14px; width:107px; height: 37px; z-index:10"> <table> <tr> <td>H:</td> <td><input name="height" type="text" size="8" onBlur="setHeight()"></td> </tr> </table> </div> <div id="colorLayer" style="position:absolute; left:320px; top:-3px; width:127px; height: 52px; z-index:4"> <input type="mmcolorbutton" name="colorswatch" onChange="setColorField();setColor()"> <input type="text" name="colorfield" size="10" onBlur="setColorSwatch();setColor()"> </div> <div id="alignLayer" style="position:absolute; left:431px; top:3px; width:161px; height: 32px; z-index:5"> Align: <select name="alignHR" style="width:100px" onChange="setAlign()"> <option selected>Default</option> <option value="left">Left</option> <option value="center">Center</option> <option value="right">Right</option> </select> </div> <div id="shadeLayer" style="position:absolute; left:461px; top:25px; width:124px; height: 29px; z-index:11"> <input name="shade" type="checkbox" value="checkbox" onClick="setShading()"> Shading</div> </body> </html>  |
