開発環境のカスタマイズ 戻る 1 つ上のページに戻る 次へ
開発環境のカスタマイズ



タグ エディタの構築

次の 3 つの作業により、タグ エディタを定義します。

これらの作業のコードの記述方法については、\Extensions\TagDefs\mytag.vtm ファイルを開いてください。次の節では、エディタ ファイルを作成する方法について説明します。

コントロールの定義

このセクションでは、CONTROL と CONTAINER の 2 種類のタグしか使うことができません。CONTROL タグと CONTAINER タグはグラフィック コントロールを表します。CONTAINER タグが他の CONTROL タグを含めることができることを除いて、いずれのタグの定義も同じです。

Panel コントロールは、Label または TextBox のような他の CONTROL タグを含んでいる CONTAINER タグの良いコントロール例です。

次の例を見てください。

<TAG>

    <EDITORLAYOUT HEIGHT=50 WIDTH=200>

        <CONTAINER  NAME="Panel1" TYPE="Panel" WIDTH=150 HEIGHT=50>

            <CONTROL NAME="lblCode" TYPE="label" CAPTION="Code" DOWN=20

                RIGHT=20 WIDTH=70/>

            <CONTROL NAME="txtCode" TYPE="TextBox" ANCHOR="lblCode"

            <CORNER="NE" WIDTH="30"/>

        </CONTAINER>

    </EDITORLAYOUT>

</TAG>

空の MYTAG タグを編集することによって、上記のテンプレート MYTAG.VTM に名前を付けて、テストすることができます。タグ エディタのダイアログ ボックスは次のように表示されます。

この例では、Label および TextBox コントロールが含まれている 1 つの Panel コンテナが表示されます。コンテナとして使用できるのは、一部のコントロールだけです。

CONTROL タグまたは CONTAINER タグによって表されるコントロールは、TYPE 属性によって定義されます。また、WIDTH 属性と HEIGHT 属性によってサイズが決まります。

ANCHOR 属性と CORNER 属性によって、コントロールの配置の基準となる点が決まります。ANCHOR では、すでに配置されているコントロールの名前を指定することができます。CORNER は、配置に使われるアンカー コントロールのコーナーを指定します。可能な選択肢は NE、NW、SE、および SW です。DOWN 属性と RIGHT 属性では、アンカー コントロールからのピクセル オフセットを指定します。

CONTROL タグと CONTAINER タグには、次の属性を使うことができます。

CONTAINER/CONTROL の属性 
TYPE 使用可能なコンテナのタイプは次のとおりです。
  • TabDialog
  • TabPage
  • コントロール/コンテナのパネル タイプ。使用可能なコントロール タイプは次のとおりです。
  • Label
  • TextBox
  • CheckBox
  • RadioGroup
  • DropDown
  • TextArea
  • FontPicker
  • ColorPicker
  • Image
  • FileBrowser
  • SQLTextArea
  • ActiveX
  • ListBox
  • ImageMapTextArea
  • StyleTextBox
  • StyleTextArea
NAME コントロールの名前。
ANCHOR コントロールの配置の基準となるコントロールの名前。省略すると、コントロールはコンテナの左上のコーナーを基準として配置されます (オプション)。
CORNER オフセット位置の計算の基準となる ANCHOR コントロールのコーナー (NW、NE、SW、SE)。既定値は NW (左上のコーナー) です (オプション)。
DOWN アンカー点 (コーナー) から下側へのオフセット (単位はピクセル)。
RIGHT アンカー点 (コーナー) から右側へのオフセット (単位はピクセル)。
WIDTH コントロールの幅。次の 3 つの方法で指定することができます。
  • ピクセル単位 (たとえば、WIDTH=200)。
  • 別のコントロールの名前 (たとえば、WIDTH="SomeControl")。この場合は、指定したコントロールの幅が使われます。コントロールを前もって配置しておく必要があります。
  • 最大値 (WIDTH="MAXIMUM")。コンテナの右側の境界線までコントロールを拡大します。
HEIGHT コントロールの高さ。次の 3 つの方法で指定することができます。
  • ピクセル単位 (例 : HEIGHT=200)。
  • 別のコントロールの名前 (たとえば、HEIGHT ="SomeControl")。この場合は、指定したコントロールの高さが使われます。コントロールを前もって配置しておく必要があります。
  • 最大値 (HEIGHT="MAXIMUM")。コンテナの下側の境界線までコントロールを拡大します。
LFWIDTH ユーザのシステムで大きいフォントの使用が設定されたときに使われるコントロールの幅。
LFHEIGHT ユーザのシステムで大きいフォントの使用が設定されたときに使われるコントロールの高さ。
MAXWIDTHPADDING WIDTH=MAXIMUM とともに使います。コンテナの右の枠線からの間隔をピクセル単位で指定します。
MAXHEIGHTPADDING HEIGHT=MAXIMUM とともに使います。コンテナの下側の枠線からの間隔をピクセル単位で指定します。

ダイアログ ボックスへのタグ データの組み込み

コントロールのレイアウトが終了した後、既存のタグを編集するときに使うエディタ コントロールの組み込み方法を定義する必要があります。この作業は、メイン タグ エディタ テンプレートの ATTRIBUTES ブロック内で行います。

ATTRIBUTES ブロックでは、ATTRIB および EVENT タグを使うことができます。ATTRIB タグは、ダイアログ コントロールにタグの属性値を組み込む方法を定義します。

<ATTRIBUTES>

    <ATTRIB NAME="VALUE" CONTROL="txtName"/>

    <ATTRIB NAME="TITLE" CONTROL="txtTitle"/>

    <ATTRIB NAME="TITLE" CONTROL="txtTitle2"/>

    <ATTRIB NAME="ALT" CONTROL="txtAltText"/>

    <ATTRIB NAME="ALIGN" CONTROL="dropAlign"/>

</ATTRIBUTES>

ATTRIB タグの NAME 属性は属性の名前を指定します。CONTROL 属性は、この CONTROL 属性の値が割り当てられるコントロールを指定します。同じ NAME 属性を持つ複数の ATTRIB タグを指定することができます。1 つの属性値を複数のコントロールに割り当てる必要がある複雑なタグ エディタ ダイアログ ボックスでは、このような ATTRIB タグの指定方法をよく使います。

ATTRIB タグの特殊な変数名

$$TAGBODY -- この特殊なタグ属性名は、コントロールにタグ本文を組み込む必要があるときに使います。このような属性名を使うタグ エディタの例には、HTML タグ TEXTAREA 用のエディタがあります。TEXTAREA タグの本文は、次の ATTRIB タグを使って txtTextAreaContent コントロールに記入されます。

<ATTRIB NAME="$$TAGBODY" CONTROL="txtTextAreaContent"/>

$$TAGSTRING と $$WHOLETAGSTRING -- これらの属性を使うと、開始タグ文字列や、開始タグ、本文、および終了タグを含むタグ全体をコントロールに組み込むことができます。これによって、ActiveX コントロールにタグ全体を渡して、独自の処理を実行したり、特殊なタグ エディタを動作させたりすることができます。

$$EmbeddedCodeString -- タグ内のテキストだけを表します。テキスト ブロックの外側にあるタグ名、区切り文字、および空白は除外されます。

タグの生成

タグ エディタ構築の最終段階は、エディタのコントロールに入力されたデータからタグを生成する方法の定義です。タグ生成ロジックは TAGLAYOUT ブロック内に記述します。このブロックには、最終的なタグ文字列の生成に使われる短いテンプレートを記述します。TAGLAYOUT テンプレート内で使われるマークアップ言語は、本来はウィザード用に設計されているので、Wizard Markup Language (WIZML) と呼ばれています。そのため、すべての WIZML タグは WIZ 接頭辞から始まります。

WIZML の詳細については、該当する節を参照してください。まず、メイン インストール ディレクトリ内の \Extensions\TagDefs\HTML ディレクトリに保存されている既存の HTML タグ エディタの TAGLAYOUT セクションを参照してください。

レイアウト テンプレートに渡される変数

WIZML については別の節で説明していますが、注意事項がいくつかあります。WIZML では、関数だけでなく変数もサポートされています。タグ エディタの各コントロールの値は、同じ名前の変数を使ってテンプレートに渡されます。したがって、colorBGColor という名前の ColorPicker の値は、colorBGColor 変数を使って渡されます。TAGLAYOUT テンプレートでは、このデータを使ってタグ文字列を生成することができます。

<TAGLAYOUT>

    <MYTAG COLOR="$${colorBGColor}">

</TAGLAYOUT>

上記の例は、1 つの属性 COLOR を持つタグの単純なレイアウト テンプレートを示しています。WIZML 変数は、区切り文字 $${} を使って組み込むことに注目してください。ユーザが colorBGColor ColorPicker というカラー セレクタ内で White を選択すると、上記のテンプレートによって次のタグが生成されます。

<MYTAG COLOR="White">

特殊変数

タグ レイアウト テンプレートには、CONTROL 変数だけでなく次のパラメータも渡されます。

OPTIONLowerCaseTags の使用

ユーザの選択に基づいて小文字または大文字でタグを生成するレイアウト テンプレートを作成するには、このパラメータを使います。次の例は、大文字か小文字かのユーザ選択に対応する MYTAG レイアウト テンプレートです。

<TAGLAYOUT>



    <WIZIF OPTIONLowerCaseTags EQ 'true'>

        <mytag color="$${colorBGColor}">

    <WIZELSE>

        <MYTAG COLOR="$${colorBGColor}">

    </WIZIF>



</TAGLAYOUT>

タグのインデントの維持

変数 EDITORTagIndentString には、現在選択されているタグのインデント文字列が格納されます。タブと文字を使って開始タグがインデントされている場合、文字列は対応するタブとスペースの組み合わせで表されます。この変数はタグ属性と、すでにインデントされているタグのタグ本体の内容を正しくインデントするときに使うことができます。

OPTIONLinearLayout の使用

タグの属性を 1 行に並べる方を好む人もいれば、インデントする方を好む人もいます。次の例は、このような基本設定に対応する MYTAG レイアウト テンプレートです。

<TAGLAYOUT>



    <WIZIF OPTIONLinearLayout EQ 'true'>

        <WIZSET Spacer = ' '>

    <WIZELSE>

        <WIZSET Spacer =  Chr(13) & Chr(10) & ' '>

    </WIZIF>



    <MYTAG COLOR="$${clrBGColor}"$${Spacer}FACE="$${fontFace}

        "$${Spacer}SIZE="$${txtSize}">



</TAGLAYOUT>

テンプレートは一般的に、次のように、レイアウト基本設定に基づいてタグを生成します。

1 行で生成 : 



<MYTAG COLOR="White" FACE="Arial" SIZE="10">




改行して生成 : 



<MYTAG COLOR="White" 

    FACE="Arial" 

    SIZE="10">

TAGDATAUnknownAttributes の使用

TagDataUnknownAttributes タグには、元のタグ文字列に含まれている文字列の中で、エディタにサポートされない属性のリストが格納されます。たとえば、HTML タグ INPUT のエディタを作成する場合があります。すべての基本属性の編集機能が備わっていますが、エディタは JavaScript イベント属性 (onCLick= ... など) をサポートしません。編集プロセスでこれらの「未知」の属性を失わないように、エディタ エンジンは元の値とともに未知の属性のリストが格納されている TAGDATAUnknownAttributes 変数を作成します。この変数を使って、生成するタグの最後に、サポートされないすべての属性に「印を付ける」ことができます。

<TAGLAYOUT>

    <MYTAG COLOR="$${colorBGColor}"

    <WIZIF TAGDATAUnknownAttributes  NEQ

    ""> $${TAGDATAUnknownAttributes}</WIZIF>>

</TAGLAYOUT>

タグ <MYTAG COLOR="Blue" onClick="CallThis"> を編集すると、エディタで onClick 属性がサポートされていなくても、上記のテンプレートによって onClick 属性が維持されます。また、このエディタは非常にインテリジェントなので、前の節で説明したユーザのレイアウト基本設定に応じて 1 行の形式またはインデントした形式で未知の属性がリストされます。


Copyright © 2000, Allaire Corporation. All rights reserved. 戻る 1 つ上のページに戻る 次へ