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="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 ID="image" STYLE="position:absolute; width:23px; height:17px; ¬ z-index:16; left: 3px; top: 2px"> <IMG SRC="marquee.png" WIDTH="36" HEIGHT="36" NAME="marqueeImage"></SPAN> <SPAN ID="label" 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 ID="topLayer" 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.