Silverlight는 닷넷플랫폼 뿐만아니라 JS, HTML 기반에서도 넘나들 수 있어 매우 넓은 확장성을 제공한다.
다음 소스는 HTML파일 하나만으로 Silverlight 1로 실시간 시계를 표현한다.
MS에서 제공하는 Silverlight.js 기본 스크립트가 필요하며 시계의 동작 처리부는 캡슐화를 위해 Javascript Class 형식으로 만들었다.
<html>
<head>
<script type="text/javascript" src="Silverlight.js"></script>
</head>
<body>
<div id="silverlightControlHost"></div>
<!-- Define XAML content. -->
<script type="text/xaml" id="xamlContent">
<?xml version="1.0"?>
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<Rectangle Width="220" Height="30" Stroke="#CCCCCC" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFAAAAAA" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Name="tbDate" Canvas.Left="10" Canvas.Top="5" FontSize="15" Foreground="#DD000000" FontFamily="Verdana"/>
</Canvas>
</script>
</body>
</html>
<script type="text/javascript">
//Clock 기능 정의
var Clock = {
content : null,
Load : function(sender, eventArgs) {
Clock.content = sender.content;
Clock.content.findName("tbDate").addEventListener("MouseLeftButtonDown", Clock.handleMouseDown);
Clock.SetDate();
},
handleMouseDown : function (sender, eventArgs) {
alert("http://kuimoani.egloos.com/");
}, SetDate : function() {
var date = new Date();
var year = date.getYear();
var month = (date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1);
var day = date.getDay() < 10 ? "0" + date.getDay() : date.getDay();
var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var min = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var sec = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
var datestring = year + "-" + month + "-" + day + " ";
if(date.getHours() <= 12)
datestring += "AM "
else {
datestring += "PM "
hour -= 12;
hour = hour < 10 ? "0" + hour : hour;
}
datestring += hour + ":" + min + ":" + sec;
Clock.content.findName("tbDate").text = datestring;
setTimeout("Clock.SetDate()", 1000);
}
};
//Clock Silverlight Object 생성
Silverlight.createObjectEx({
source: '#xamlContent',
parentElement:document.getElementById("silverlightControlHost"),
id:'objClock',
properties:{
width:'220',
height:'30',
inplaceInstallPrompt:false,
background:'#FFFFFFAA',
isWindowless:'false',
framerate:'6',
version:'1.0'},
events:{
onError:null,
onLoad:Clock.Load},
initParams:null,
context:null});
</script>
컴파일이 필요없고 HTML 내에서 조작이 가능하므로 현재 개발방식도 나름 편리하지만, Javascript 쌩으로 개발하는것 보다 쉽지도.. 그렇다고 강력한 기능을 제공하고 있지도 않다.
사실상 Silveright(XAML) + Javascript 의 원활한 개발을 하려면 JavaScript Framework(JQuery, Prototype...)을 도입해야하는데, 현재 Silverlight의 기능은 JavaScript Framework + CSS 를 적절히 활용하면 다 구현 가능한 정도 밖에 없다.
기존 알고있는 기술로도 충분히 개발 가능한것을 굳이 Silverlight를 또 공부해 구현할 필요가 있을지는 아이러니다.
하여간 아직은 더욱 가야할 길이 멀기만 하다...
추가로 Silverlight 2는 개발이 더욱 편해지고 기능도 많아졌지만 C#과 VB를 제외한 언어에 대한 유연성은 떨어진것 같다..
SVG에 대한 경계인가? 흠..
이 글과 관련있는 글을 자동검색한 결과입니다 [?]
