Rich-UI-Widgetgruppe mit Silverlight erweitern

Sie können Widgets schreiben, die auf Silverlight, einem Browser-Plug-in, basieren. Informationen dazu finden Sie unter http://silverlight.org. Silverlight verwendet einen XML-Dialekt mit dem Namen XAML zur Definition von Benutzerschnittstellen und verarbeitet Ereignisse mithilfe der .Net-Plattform. Sie können auf die Silverlight-Laufzeit über den Browser zugreifen, indem Sie JavaScript-Code ausführen.

In den nachfolgenden Abschnitten wird ein Beispiel beschrieben, das aus den folgenden Komponenten besteht:

Sie können das Beispiel in einem Rich-UI-Projekt ausprobieren. Beachten Sie dabei jedoch, dass dieser Abschnitt nur als Konzeptnachweis zu verstehen ist und das wesentlich mehr Details erforderlich sind, um Silverlight sinnvoll in Ihre EGL-Anwendungen einzubinden.

Silverlight ist eine Marke der Microsoft Corporation.

Button.egl

Die Datei Button.egl führt den folgenden externen EGL-Typ ein, der den Rich-UI-Widgettyp erweitert.

Das folgende Beispiel zeigt den Inhalt der Datei, der zu einem Paket mit dem Namen myPkg gehört:
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

Die Datei 'Button.js' enthält die JavaScript-Implementierung, die in der Definition des externen Typs referenziert wird. Das JavaScript gibt das neue Widget an und definiert die folgenden Funktionen:
  • setText stellt sicher, dass das neue Widget Text in den DOM-Knoten schreiben kann.
  • getText stellt sicher, dass das neue Widget Text aus dem DOM-Knoten abrufen kann.
  • egl$$update definiert ein XAML-Fragment und aktiviert die EGL-Ereignisverarbeitung für das onClick-Ereignis.
Das folgende Beispiel zeigt den Inhalt von WebContent/silverlight:
egl.defineWidget(
   'silverlight', 'Button',   // Diese Klasse
   'egl.ui.rui', 'Widget',    // Die Superklasse
   'div',                     // Name des DOM-Elementtyps
   {
      "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();

            // Alle EGL-Ereignishandler suchen
            for (var n=0; n<handlers.length; n++) {
               handlers[n]({ widget: eglButton});
               // Ereignishandler aufrufen
      				} 			
         });

         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

Die Datei 'canvas.xaml' enthält einen leeren Container, der von Button.js als Erstellungsbereich beim Zeichnen einer Schaltfläche verwendet wird.

Das folgende Beispiel zeigt den Inhalt von WebContent/silverlight:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        Loaded="eze$$silverlight_canvasLoaded">
</Canvas>

Silverlight.html

Die Datei Silverlight.html ist eine HTML-Datei, die einen Script-Tag zum Einschluss in den von EGL generierten JavaScript-Code enthält.

Das folgende Beispiel zeigt den Inhalt von WebContent/silverlight und enthält eine Sicherheitswarnung:
<script type="text/javascript" 
        src="http://silverlight.net/samples/1.0/clock/js/Silverlight.js">

SilverDemo.egl

Die Datei 'SilverDemo.egl' demonstriert die Verwendung des Widgets.

Das folgende Beispiel zeigt den Inhalt der Datei, der zum Paket mit dem Namen myPkg gehört:

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 

Feedback