Silverlight를 사용하여 Rich UI 위젯 세트 확장

Silverlight(http://silverlight.org에서 설명되는 브라우저 플러그인)를 기반으로 하는 위젯을 작성할 수 있습니다. Silverlight는 사용자 인터페이스 정의를 위해 XML 통용어 호출 XAML을 사용하고 이벤트 핸들링을 위해 .Net 플랫폼을 사용합니다. JavaScript 코드를 실행하여 브라우저에서 Silverlight 런타임에 액세스할 수 있습니다.

다음 절에서는 다음 컴포넌트로 구성되는 샘플에 대해 설명합니다.
  • Button.egl(외부 유형 정의)
  • Button.js(외부 유형에서 참조되는 새 위젯을 정의하는 JavaScript 코드)
  • canvas.xaml(단추를 그릴 때 캔버스로 사용할 JavaScript용 비어 있는 컨테이너를 정의하는 XAML 파일)
  • Silverlight.html(EGL 생성 JavaScript의 포함 항목을 위한 <script> 태그가 포함됨)
  • SilverDemo.egl(기능에 대한 데모 설명)

Rich UI 프로젝트에서 샘플을 시도할 수 있습니다. 그러나 이 주제는 개념을 증명하기 위한 것이며 EGL 애플리케이션에서 Silverlight를 의미 있게 통합시키려면 더 많은 상세 정보가 필요하다는 점을 참고하십시오.

Silverlight는 Microsoft Corporation의 상표입니다.

Button.egl

Button.egl 파일은 Rich UI 위젯 유형을 확장하는 다음 EGL 외부 유형을 소개합니다.

다음은 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;	  		
   endend