Rich UI ウィジェット・セットの拡張

新規ウィジェット・タイプの作成には、EGL あるいは、JavaScript を使用できます。

Rich UI ウィジェット

Rich UI ウィジェットは EGL で作成され、RUIWidget タイプです (具体的には、egl.ui.rui.RUIWidget)。多くの場合、行う必要があるのは、以下のことのみです。
  • プロパティー tagName に HTML タグ名を指定します。あるいは、宣言済みウィジェットをプロパティー targetWidget に指定します。この場合は、次の記述が当てはまります。
    • 参照するウィジェットのタイプのベースとなっている HTML タグが、定義するウィジェット・タイプのベースとなります。
    • 参照するウィジェットの名前を使用して、そのウィジェットのタイプ用に定義された関数およびプロパティーにアクセスできます。

    tagNametargetWidget の両方を指定すると、後者が適用されます。

  • 後述のセクションでリストされている一部またはすべてのプロパティーを指定します。
  • on-construction 関数を指定し、この関数で CSS クラス名を設定します。
  • 他のウィジェットから機能をビルドします。
以下に、H3 定義の概略を示します。これには、import ステートメントは必要ありません。
Handler H3 type RUIWidget{tagName = "h3", onConstructionFunction = start,
   @VEWidget{
				category = "New Widgets",
				template = "my.package.H3{ text=¥"The Heading Text¥" }",
				smallIcon = "icons/h3small.gif",
				largeIcon = "icons/h3large.gif" 	}}

   text String  { @EGLProperty { getMethod=getText, setMethod=setText }, 
                  @VEProperty{}};
   function start()
      class = "EglRuiH3";
   end

   function setText(textIn String in)
      text = textIn;
      this.innerText = textIn;
   end

   function getText() returns (String)
      return (text);
   end
end
この定義が指定されると、H3 タイプをベースとするウィジェットを作成できます。例えば、次の宣言では、H3 ウィジェットがネスト化されたボックスを作成します。
ui Box { children = [ 
            new H3 { text = "Summary" }
       	]};  	

外部型ウィジェット

外部型ウィジェットを作成するには、カスタム JavaScript を作成するか、または特殊な JavaScript ライブラリーにアクセスします。

JavaScript に基づいて新規 Rich UI ウィジェットを作成するには、次のようにします。
  1. ウィジェットのコードを格納する JavaScript ファイルを作成します。 次の引数を指定して egl.defineWidget を起動します。
    • カスタム JavaScript が常駐するパッケージの名前。パッケージ名は必須で、大/小文字の区別があり、その JavaScript を含む WebContent サブフォルダーを識別します。

      最初のサブフォルダーの下のすべてのサブフォルダーについて、スラッシュの代わりにドットを使用します。例えば、JavaScript がフォルダー WebContent/myPkg/test にある場合、packageName 値は myPkg.test です。

    • ウィジェット・クラスの名前 (Button など)。クラス名は、作成する外部型の名前です。
    • 親ウィジェットのための EGL 外部型のパッケージ名。 独自の外部型を拡張することもありますが、ほとんどの場合、親のタイプはウィジェットで、これがユーザーに指定されて、他の EGL 外部型ウィジェットの基礎となります。親のタイプがウィジェットの場合、パッケージ名は egl.ui.rui です。
    • 親ウィジェットのための EGL 外部型の名前 (Widget など)。
    • 新規ウィジェットの DOM 要素のタグ名 (button など)。
    次に例を示します。
    egl.defineWidget( 'egl.rui.widgets', 'Button',
                      'egl.rui.widgets', 'Widget',
                      'button', { } );
  2. 中括弧 ( { } ) 内に、次に示す概略を反映するために、関数間をコンマで区切って、JavaScript 関数を定義します。
    "functionName" : function(/*parameters*/)
    { //JavaScript Source }
    以下に例を示します。
    "getSelected" : function() {
       return this.check.checked;
    },
    "setSelected" : function(value) {
       this.check.checked = value;
    },
    "toString" : function() {
       return "[CheckBox, text=¥""+this.egl$$DOMElement.innerHTML+"¥"]";
    }
  3. 各ウィジェットで、起動する JavaScript ランタイムについて、次の関数を指定できます。
    • 関数 constructor は、新規ウィジェット・インスタンスが作成されるたびに起動され、例えば、データの初期化にこの関数を使用できます。
    • 関数 egl$$initializeDOMElement は、ウィジェットの HTML エレメントが作成されるたびに起動され、例えば、エレメントに初期プロパティーを設定するためにこの関数を使用できます。
    • 関数 childrenChanged は、アプリケーション開発者が新規ウィジェットの children プロパティー (ある場合) を更新するたびに起動されます。

    各ウィジェットには this.egl$$DOMElement と呼ばれるフィールドもあります。このフィールドは、ウィジェット用に作成された HTML エレメント (または最上位 HTML エレメント) を表します。

  4. EGL ソース・ファイルに、egl.ui.rui.Widget または既存のウィジェットから拡張される EGL 外部型を作成します。外部型には、ステレオタイプの JavaScriptObject が必要です (『JavaScript の外部型』を参照)。

    外部型を作成する場合、次のセクションでリストされている一部またはすべてのプロパティーを指定します。

ウィジェット・セット拡張のための EGL のプロパティー


フィードバック