A simple Property inspector example | Developing Extensions for Macromedia Dreamweaver 8

< Day Day Up >

The following Property inspector inspects the MARQUEE tag, which is available only in Microsoft Internet Explorer. The example lets you set the value of the direction attribute in the Property inspector. To set the value of the MARQUEE tag's other attributes, use this example as a model.

You create this extension by performing the following steps:

Creating the user interface
Writing the JavaScript code
Creating the image
Testing the Property inspector

Creating the user interface

You create an HTML file that contains a form, which appears in the Property inspector.

To create the user interface:

1.	Create a new blank file.
2.	As the first line of the file, add the comment that identifies the property inspector, as follows: <!-- tag:MARQUEE,priority:9,selection:exact,vline,hline -->
3.	To specify the document title and the JavaScript file that you will create, add the following after the comment: <HTML> <HEAD> <TITLE>Marquee Inspector</TITLE> <SCRIPT src="/books/4/533/1/html/2/marquee.js"></SCRIPT> </HEAD> <BODY> </BODY> </HTML>
4.	To specify what appears in the Property inspector, add the following between the opening and closing `BODY` tags: <!-- Specify the image that will appear in the Property inspector --> <SPAN STYLE="position:absolute; width:23px; height:17px; z-index:16; left: 3px; top: 2px"> <IMG src="/books/4/533/1/html/2/marquee.png" WIDTH="36" HEIGHT="36" NAME="marqueeImage"> </SPAN> <SPAN STYLE="position:absolute; width:23px; height:17px; z-index:16; left: 44px; top: 5px">Marquee</SPAN> <!-- If your form fields are in different layers, you must create a separate form inside each layer and reference it as shown in the inspectSelection() and setInterjectionTag() functions. --> <SPAN STYLE="position:absolute; z-index:1; left: 125px; top: 3px; width: 431px; height: 32px"> <FORM NAME="topLayerForm"> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD VALIGN="baseline" ALIGN="right">Direction:</TD> <TD VALIGN="baseline" ALIGN="right"> <SELECT NAME="marqDirection" STYLE="width:86" onChange="setMarqueeTag()"> <OPTION VALUE="left">Left</OPTION> <OPTION VALUE="right">Right</OPTION> </SELECT> </TR> </TABLE> </FORM> </SPAN>
5.	Save the file as marquee.htm in the Configuration/Inspectors folder.

Writing the JavaScript code

You need to add JavaScript functions to make sure you can inspect the selection, to inspect the selection, and to enter the appropriate values in the Property inspector.

To write the JavaScript code:

1.	Create a new blank file.
2.	To specify that the Property inspector appears whenever the selection contains the `MARQUEE` tag, add the following function: function canInspectSelection(){ return true; }
3.	To refresh the value of the direction attribute that appears in the text field, add the following function at the end of the file: function inspectSelection(){ // Get the DOM of the current document. var theDOM = dw.getDocumentDOM(); // Get the selected node. var theObj = theDOM.getSelectedNode(); // Get the value of the DIRECTION attribute on the MARQUEE tag. var theDirection = theObj.getAttribute('direction'); // Initialize a variable for the DIRECTION attribute to -1. // This is used to store the menu index that corresponds to // the value of the attribute. // var typeIndex = -1; var directionIndex = -1; // If there was a DIRECTION attribute... if (theDirection){ // If the value of DIRECTION is "left", set typeIndex to 0. if (theDirection.toLowerCase() == "left"){ directionIndex = 0; // If the value of DIRECTION is "right", set typeIndex to 1. }else if (theDirection.toLowerCase() == "right"){ directionIndex = 1; } } // If the value of the DIRECTION attribute was "left" // or "right", choose the corresponding // option from the pop-up menu in the interface. if (directionIndex != -1){ document.topLayer.document.topLayerForm.marqDirection.selectedIndex = directionIndex; } }
4.	To get the current selection and make the text box in the Property inspector display the `direction` attribute's value, add the following function at the end of the file: function setMarqueeTag(){ // Get the DOM of the current document. var theDOM = dw.getDocumentDOM(); // Get the selected node. var theObj = theDOM.getSelectedNode(); // Get the index of the selected option in the pop-up menu // in the interface. var directionIndex = document.topLayer.document.topLayerForm.marqDirection.selectedIndex; // Get the value of the selected option in the pop-up menu // in the interface. var theDirection = document.topLayer.document.topLayerForm.marqDirection. options[directionIndex].value; // Set the value of the direction attribute to theDirection. theObj.setAttribute('direction',theDirection); }
5.	Save the file as marquee.js in the Configuration/Inspectors folder.

Creating the image

You can optionally create the image that appears in the Property inspector.

To create the image:

1.	Create an image that is 36 pixels wide and 36 pixels high.
2.	Save the image as marquee.gif in Configuration/Inspectors. In general, you can save images for Property inspectors in any format that Dreamweaver supports.

Testing the Property inspector

Finally, you can test the Property inspector.

To test the Property inspector:

1.	Restart Dreamweaver.
2.	Create a new HTML page, or open an existing HTML page.
3.	Add the following in the `BODY` section of the page: <MARQUEE></MARQUEE>
4.	Highlight the text you just added. The Property inspector you created for the `MARQUEE` tag appears.
5.	Enter a value for the Direction attribute in the Property inspector. The tag on your page changes to include the direction attribute and the value you entered in the Property inspector.

< Day Day Up >