ユーザーインターフェイスの作成

プロパティインスペクタに表示されるフォームを含む HTML ファイルを作成します。

ユーザーインターフェイスを作成するには :

  1. 新しい空白のファイルを作成します。
  2. ファイルの最初の行として、次のようなプロパティインスペクタを識別するコメントを追加します。
    <!-- tag:MARQUEE,priority:9,selection:exact,vline,hline -->
    
  3. ドキュメントのタイトルと作成する JavaScript ファイルを指定するために、次のコードをコメントの後に追加します。
    <HTML>
    <HEAD>
    <TITLE>Marquee Inspector</TITLE>
    <SCRIPT src="marquee.js"></SCRIPT>
    </HEAD>
    <BODY>
    
    </BODY>
    </HTML>
    
  4. プロパティインスペクタに表示するものを指定するために、BODY の開始タグと終了タグの間に次のコードを追加します。
    <!-- 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. ファイルに "marquee.htm" という名前を付けて "Configuration/Inspectors" フォルダに保存します。