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.
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.
Die Datei Button.egl führt den folgenden externen EGL-Typ ein, der den Rich-UI-Widgettyp erweitert.
package myPkg;
ExternalType Button extends Widget type JavaScriptObject
{
relativePath = "silverlight",
javaScriptName = "Button",
includeFile = "silverlight/Silverlight.html"
}
text String
{ @JavaScriptProperty
{ getMethod="getText", setMethod="setText" } };
end
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);
}
} });
Die Datei 'canvas.xaml' enthält einen leeren Container, der von Button.js als Erstellungsbereich beim Zeichnen einer Schaltfläche verwendet wird.
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
Loaded="eze$$silverlight_canvasLoaded">
</Canvas>
Die Datei Silverlight.html ist eine HTML-Datei, die einen Script-Tag zum Einschluss in den von EGL generierten JavaScript-Code enthält.
<script type="text/javascript"
src="http://silverlight.net/samples/1.0/clock/js/Silverlight.js">
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