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