Silverlight with WEB

Silverlight 어플리케이션이 WEB과 어떤 연관을 가지고 있는지 알아보자.

1. Silverlight Application을 HTML 페이지에 삽입
2. Background, IsWindowless
3. OnLoad, OnError
4. HTML DOM과 상호 작용하기
4.1. Javascript로 Silverlight 코드 사용하기
4.2. Silverlight로 Javascript 코드 사용하기

1. Silverlight Application을 HTML 페이지에 삽입

---

- Silverlight는 브라우저의 플러그인 형태로 만들어졌다. 하지만 배포 방식에 따라 브라우저 별로 각각 다르게 사용된다.

Microsoft Internet Explorer	Active-X
Safari	Webkit
Other	Netscape Plug-in

a. ASP.NET을 이용한 방법

- Visual Studio 2008을 이용해 Silverlight Application을 생성하면 자동으로 생성되는 aspx 페이지에 Silverlight Application이 삽입되어 있는 것을 확인할 수 있다.

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"

    TagPrefix="asp" %>

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightHTML.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />

b. <object> 태그를 사용하여 생성

<object data="data:application/x-silverlight-2,"  type="application/x-silverlight-2" width="100%" height="100%">

<param name="source" value="ClientBin/SilverlightHTML.xap"/>

<param name="onerror" value="onSilverlightError" />

<param name="background" value="white" />

<param name="minRuntimeVersion" value="2.0.31005.0" />

<param name="autoUpgrade" value="true" />

</object>

c. Silverlight.js를 사용하여 생성

- Silverlight SDK에서 제공되는 Silverlight.js 파일을 이용하면 편리하게 Silverlight Application을 생성할 수 있다.

<div id="silverlightControlHost" />

<script language="javascript">

Silverlight.createObjectEx({

source: "ClientBin/SilverlightHTML.xap",

parentElement: document.getElementById("silverlightControlHost"),

id: "mySilverilghtControl",

properties: {

width: "100%",

height: "100%",

version: "2.0"

},

events: {}

});

</script>

2. Background, IsWindowless

---

- Silverlight에서 Background의 속성을 'transparent'로 설정하고 IsWindowless의 속성을 'true'로 설정하면 Silverlight Application의 배경이 설정되지 않는 빈 영역에 HTML의 내용이 그대로 보여진다. (asp.net 페이지에서 사용하는 속성 이름은 PluginBackground, Windowless이다.)

<Canvas Width="200" Height="200">

<Canvas Width="100" Height="100" Canvas.Left="50" Canvas.Top="50" Background="BlueViolet"/>

</Canvas>

<asp:Silverlight PluginBackground="Transparent" Windowless="true" ... />

- Transparent를 통해 실제 HTML 페이지가 보여지는 영역도 Silverlight Application의 영역으로 설정되어 마우스 오른쪽 클릭을 하면 Silverlight 메뉴가 나타난다.

3. OnLoad, OnError

---

- Silverlight 플러그인은 OnLoad와 OnError 이벤트를 가지고 있다.

OnLoad _ Silverlight Application이 로드되자마자 발생하는 이벤트
OnError _ Silverlight Application에서 예외가 처리되지 않은 경우에 발생

OnLoad 이벤트는 UserControl의 생성자가 실행된 이후에 발생한다.

테스트 결과 OnLoad 이벤트에서 Source가 undefined로 전달된다. 따라서 Silverlight Application에 직접 접근하기 위해서는 OnLoad 이벤트에서 전달되는 sender를 사용한다. sender.getHost().content를 통해 접근 가능

4. HTML DOM과 상호 작용 하기

---

- System.Windows.Browser 네임스페이스를 통해 HTML DOM과 상호작용이 가능하다.

4.1과 4.2의 내용은 HTML BROWSER INTEGRATION을 참조