Rich UI または外部型ウィジェットを作成する場合、複合プロパティー @VEWidget を指定できます。
EGL エディターは、ワークスペース内の任意の @VEWidget プロパティーの詳細情報を使用して、パレットの更新時にパレットにエントリーを追加します。パレットを更新するには、「設計」サーフェスの「パレットの更新」をクリックします。『「設計」サーフェスでのツールの使用』を参照してください。
@VEWidget プロパティーには、以下のフィールドがあります。
- category (STRING 型)
- パレット内の、ウィジェットがリストされるカテゴリー。カテゴリーはアルファベット順にリストされます。
カテゴリーが存在しない場合は、指定した名前で新規カテゴリーが作成されます。カテゴリーは、Rich UI ボタンと Dojo ボタンなど、同じ名前のウィジェットを区別するために特に有用です。
- description (STRING 型)
- パレットで、ユーザーがウィジェット項目にカーソルを移動したときに表示される説明です。
- displayName (STRING 型)
- パレットで、ウィジェット名です。名前はカテゴリー内のアルファベット順に
リストされます。
デフォルト値は、外部型と RUIWidget 型のハンドラーのいずれかの名前です。
- template (STRING 型)
- ウィジェット名 (セミコロンは除く) に続く、ウィジェット・タイプ宣言のパーツ。この例では、エラーを避けるために必要であるため、宣言に値の設定ブロックが含まれています。宣言の例を以下に示します。
myH3 my.package.H3{ text="The Heading Text" };
必要な場合に限り、EGL システム・コードに、ウィジェット・タイプの指定と修飾子 (
my.package など) の組み込みを行わせるには、テンプレート・ストリングを
typeName 変数で開始します。
以下に例を示します。
template = "${typeName}{}"
次に、先述のウィジェット・タイプと宣言を受け取るハンドラーが同じパッケージに含まれると想定した場合の関連する宣言を示します。
myH3 H3{};
以下に別の例を示します。
template = "${typeName}{ text=¥"The Heading Text¥" }"
関連する宣言の例を以下に示します。
myH3 H3{ text="The Heading Text" };
- smallIcon (STRING 型)
- パレットに表示可能な小さいアイコンを含む gif ファイルのパス。このパスは、プロジェクト・ディレクトリーを基準としています。例えば、プロジェクトが com.egl の場合、前にリストした gif ファイルは com.egl/icons にあります。
- largeIcon (STRING 型)
- パレットに表示可能な大きいアイコンを含む gif ファイルのパス。このパスは、プロジェクト・ディレクトリーを基準としています。例えば、プロジェクトが com.egl の場合、前にリストした gif ファイルは com.egl/icons にあります。
- container (@VEContainer 型)
- 以下のように container フィールドを指定してください。
container{@VEContainer{}}
container が指定されていると、以下の影響があります。
- 実行時に、そのウィジェットは他のウィジェットを含むことができます。
- 開発時に、EGL デベロッパーは、他のウィジェットを定義中のウィジェットにドラッグ・アンド・ドロップできます。
- そのウィジェットは children という名前のフィールドを含まねばなりません。
children フィールドは、Widget[] 型である
必要があり、そのフィールドの @EGLProperty プロパティー
を後述のように定義する必要があります。
さらに、
@VEWidget を
使用すると
「プロパティー」ビューに表示する RUIWidget プロパティーおよびイベント (外部型プロパティーおよびイベントも含む) を指定できます。
例えば、
backgroundColor の表示エントリーは RUIWidget 型のすべてのハンドラーに提供されています (いいかえれば、外部型によって規定されるウィジェットでさえ対象)。ただし、定義中のウィジェットで
backgroundColor が適切でない
場合があります。以下に、フィルタリングしない場合であればデフォルトで表示されるプロパティーおよびイベントをフィルタリングする
@VEWidget プロパティー・フィールドを示します。
- eventFilter (STRING[])
- eventFilterType の値に依存し、表示に組み込むか除外するイベント名の配列です (例えば、["onClick", "OnScroll"])。
- eventFilterType (INT 型)
- 次のいずれかの値です (整数または関連付けられた定数)。
- ruiLib.EXCLUDE_ALL では、RUIWidget (egl.ui.rui.RUIWidget 型) に定義されているすべてのイベントが除外され、さらに外部型であれば Widget (egl.ui.rui.Widget 型) に定義されているすべてのイベントが除外されます。この場合は、eventFilter の値はすべて無視されます。
- ruiLib.EXCLUDE_ALL_EXCEPT では、eventFilter の値に指定されているイベントを除き、RUIWidget および Widget に定義されているすべてのイベントが除外されます。
- ruiLib.INCLUDE_ALL では、RUIWidget および Widget に定義されているすべてのイベントが組み込まれます。この場合は、eventFilter の値は無視されます。
- ruiLib.INCLUDE_ALL_EXCEPT では、eventFilter の値に指定されているイベントを除き、RUIWidget および Widget に定義されているすべてのイベントが組み込まれます。
- propertyFilter (STRING[])
- propertyFilterType の値に依存し、表示に組み込むか除外するプロパティー名の配列です (例えば、["font", "fontSize"])。
- propertyFilterType (INT 型)
- 次のいずれかの値です (整数または関連付けられた定数)。
- ruiLib.EXCLUDE_ALL では、RUIWidget (egl.ui.rui.RUIWidget 型) に定義されているすべてのプロパティーが除外され、さらに外部型であれば Widget (egl.ui.rui.Widget 型) に定義されているすべてのプロパティーが除外されます。この場合は、propertyFilter の値はすべて無視されます。
- ruiLib.EXCLUDE_ALL_EXCEPT では、propertyFilter の値に指定されているプロパティーを除き、RUIWidget および Widget に定義されているすべてのプロパティーが除外されます。
- ruiLib.INCLUDE_ALL では、RUIWidget および Widget に定義されているすべてのイベントが組み込まれます。この場合は、propertyFilter の値は無視されます。
- ruiLib.INCLUDE_ALL_EXCEPT では、propertyFilter の値に指定されているイベントを除き、RUIWidget および Widget に定義されているすべてのイベントが組み込まれます。
次に、表示されるイベント・タイプが
onScroll と
onChange のみで、表示されるプロパティーが
color と
backgroundColor のみである外部型の例を示します。
ExternalType DojoButton extends DojoBase type JavaScriptObject {
relativePath = "dojo/widgets",
javaScriptName = "DojoButton",
includeFile = "dojo/widgets/dojobutton.html",
@VEWidget{
category = "Dojo",
template = "dojo.widgets.DojoButton { text = ¥"Button¥" }",
displayName = "Button",
smallIcon = "icons/ctool16/dijit_button_pal16.gif",
largeIcon = "",
propertyFilterType = ruiLib.EXCLUDE_ALL_EXCEPT,
propertyFilter = ["color", "backgroundColor"],
eventFilterType = ruiLib.EXCLUDE_ALL_EXCEPT,
eventFilterType = ["onScroll", "onChange"]
}