Silverlight による Rich UI ウィジェット・セットの拡張

Silverlight をベースとするウィジェットを作成できます。Silverlight はブラウザー・プラグインで、http://silverlight.org に説明されています。Silverlight は、ユーザー・インターフェースの定義に XAML と呼ばれる XML の方言を使用し、イベントの処理に .Net プラットフォームを使用します。Silverlight ランタイムにブラウザーからアクセスするには、JavaScript コードを実行します。

次のセクションでは、以下のコンポーネントで構成されるサンプルを説明します。

Rich UI プロジェクトでサンプルを試すことができます。ただし、このトピックは概念検証であり、Silverlight を意味があるように EGL アプリケーションに取り込むにはさらに多くの詳細が必要であることに注意してください。

Silverlight は Microsoft Corporation の商標です。

Button.egl

Button.egl ファイルは、次の EGL 外部型を導入します。このタイプは、Rich UI ウィジェット・タイプを拡張します。

以下に、myPkg という名前の EGL パッケージに入る内容を示します。
package myPkg;

ExternalType Button extends Widget type JavaScriptObject 
   {
      relativePath = "silverlight",
      javaScriptName = "Button",
      includeFile = "silverlight/Silverlight.html"
   }       
   text String
      { @JavaScriptProperty
         { getMethod="getText", setMethod="setText" } };
end

Button.js

Button.js。外部型定義で参照される JavaScript 実装を含みます。JavaScript で、新規ウィジェットを識別し、次の関数を定義します。
  • setText。新規ウィジェットがテキストを DOM ノードに確実に書き込めるようにします。
  • getText。新規ウィジェットが DOM ノードからテキストを確実に取得できるようにします。
  • egl$$update。XAML フラグメントを定義し、onClick イベントの EGL イベント処理を使用可能にします。
以下に、WebContent/silverlight に入る内容を示します。
egl.defineWidget(
   'silverlight', 'Button',   // this class
   'egl.ui.rui', 'Widget',    // the super class
   'div',                     // dom element type name
   {
      "setText" : function( /*String*/ text ) {
         this.text = text;
         this.eze$$update();
      },

      "getText" : function() {
         return this.text;
      },
  	
      "eze$$update" : function() {
         width = Math.max(85, 8 * this.text.length);
         var xamlFragment = 
         '<Canvas Canvas.Left="0" Canvas.Top="0" Width="'+width+'" Height="24" >' + 
         '<Rectangle Canvas.Top="0" Canvas.Left="0" Width="' + width +
         '" Height="24" Fill="#FFFFFFFF" Stroke="#FF000000" StrokeThickness="1" />' +
         '<TextBlock Foreground="#FF000000" Canvas.Left="5" Canvas.Top="2">' + 
         this.text + '</TextBlock>' + '</Canvas>';

         var eglButton = this;

         window.eze$$silverlight_canvasLoaded = function(sender, eventArgs) {
            sender.children.add(sender.getHost().content.createFromXaml(xamlFragment)); 

         var textBlock = sender.children.getItem(0).children.getItem(1);
         var rectangle = sender.children.getItem(0).children.getItem(0);
         var canvas = sender.children.getItem(0).children.getItem(0);

         textBlock.addEventListener("MouseLeftButtonDown", function(sender, eventArgs)
         { 
            rectangle.StrokeThickness = 3;
            var handlers = eglButton.getOnClick();

            // find each EGL eventhandler
            for (var n=0; n<handlers.length; n++) {
               handlers[n]({ widget: eglButton});
               // call it
      				} 			
         });

         textBlock.addEventListener("MouseLeftButtonUp", function(sender, eventArgs){
            rectangle.StrokeThickness = 1;	
         }); 

         textBlock.addEventListener("MouseEnter", function(sender, eventArgs){
            canvas.fill="orange";
         });

         textBlock.addEventListener("MouseLeave", function(sender, eventArgs) {
            canvas.fill="white";
         }); 

         canvas.addEventListener("MouseEnter", function(sender, eventArgs) {
            sender.fill="orange"; 			}); 	        

         canvas.addEventListener("MouseLeave", function(sender, eventArgs) {
            sender.fill="white";
         }); 
      } 		

      try { 			
         Silverlight.createObject( "silverlight/canvas.xaml",
         this.eze$$DOMElement,
         "uniqueID",
         { width: String(width), height: "24", version:'1.0' },
         { onError: 
            function (sender, errorArgs) {
            var errorMsg = "Silverlight Error: ¥n¥n";
                errorMsg += "Error Type:    " + errorArgs.errorType + "¥n";
                errorMsg += "Error Message: " + errorArgs.errorMessage + "¥n";
                errorMsg += "Error Code:    " + errorArgs.errorCode + "¥n";

            switch(errorArgs.errorType) { 
               case "RuntimeError":
                  if (errorArgs.lineNumber != 0) {
                  errorMsg += "Line: " + errorArgs.lineNumber + "¥n";
                  errorMsg += "Position: " +  errorArgs.charPosition + "¥n"; }
                  errorMsg += "MethodName: " + errorArgs.methodName + "¥n";
                  break;
               case "ParserError":
                  errorMsg += "Xaml File:      " + errorArgs.xamlFile + "¥n";
                  errorMsg += "Xml Element:    " + errorArgs.xmlElement    + "¥n";
                  errorMsg += "Xml Attribute:  " + errorArgs.xmlAttribute  + "¥n";
                  errorMsg += "Line:           " + errorArgs.lineNumber    + "¥n";
                  errorMsg += "Position:       " + errorArgs.charPosition  + "¥n";
                  break;
               default:
                   break;
            }

           alert(errorMsg);
         },
         onLoad: null
      },
      null
      );
      egl.setWidth(this.eze$$DOMElement, width);
   } 		
   catch (e) { 
      egl.printError(
         "Silverlight error. Please make sure you included Silverlight.html. ", e); 
   }
} });

canvas.xaml

Canvas.xaml。ボタンをペイントするときにキャンバスとして使用する、Button.js の空のコンテナーが含まれています。

以下に、WebContent/silverlight に入る内容を示します。
<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        Loaded="eze$$silverlight_canvasLoaded">
</Canvas>

Silverlight.html

Silverlight.html。EGL によって生成された JavaScript に組み込むためのスクリプト・タグが含まれた HTML ファイルです。

以下に内容を示します。これは、WebContent/silverlight に入り、セキュリティー警告が含まれています。
<script type="text/javascript" 
        src="http://silverlight.net/samples/1.0/clock/js/Silverlight.js">

SilverDemo.egl

SilverDemo.egl は、ウィジェットの使用方法を例示します。

以下に、myPkg という名前の EGL パッケージに入る内容を示します。

package myPkg;

import com.ibm.egl.rui.widgets.Box;

Handler SilverDemo Type RUIHandler { initialUI = [ui] }

   ui Box { columns=1, backgroundColor="#EEDDEE", width=110, children = 
   [
      new myPkg.Button { margin=5, text="Silverlight", onClick ::= click },
      new dojo.widgets.DojoButton { margin=5, text="Dojo", onClick ::= click },
      new com.ibm.egl.rui.widgets.Button { margin=5, text="EGL", onClick ::= click}]};
	
   function click(e Event in)
      buttonText String = (e.widget as Button).text;
      strlen INT = strLib.characterLen(buttonText);

      if (buttonText[strlen:strlen] == "!")
         buttonText = buttonText[1:strlen-1];
      else
         buttonText = buttonText + "!";
      end

      (e.widget as Button).text = buttonText;	  		
   end
end 

フィードバック