Part8. Web Browser와 Silverlight

하얀전쟁^^ 2009. 6. 29. 13:09

2009. 6. 29. 13:09

ü Silverlight 배포하는 방법

1. Object 태그를 이용한 방법

- Naver에서 보면 “퍼가기”와 같은 기능 구현이 가능하며, 특정 웹 서버의 제약 없이 구동 할 수 있어 Silverlight 배포 추천 방법이라 할 수 있습니다.

2. Silverlight.js의 함수를 이용한 방법

3. ASP.NET의 Silverlight 컨트롤을 이용한 방법

- 3번과 배포 방법은 웹사이트가 닷넷 환경이어야 한다는 제약이 있습니다.

ü Object 태그를 이용한 방법 (알아두면 좋은 것)

1. Object 태그의 필수적인 속성

속성	내용
Id	HTML 안에 포함될 실버라이트 플러그인의 이름
Data	실버라이트를 어떻게 로드할지에 대한 MIME 타입
Type	실버라이트의 버전
Height	실버라이트를 나타낼 높이(픽셀, %, 둘 다 지정가능)
Width	실버라이트를 나타낼 넓이(픽셀, %, 둘 다 지정가능)

2. 속성과 이벤트의 주요 파라미터

파라미터	내용
Source	URI형식으로 나타낸 실버라이트 파일의 주소이고, 기본 값은 null입니다.
onError	실버라이트에서 에러가 발생할 경우 그 에러 내용을 Javascript로 전달하여 보여줍니다.
onResize	실버라이트의 ActalHeight, ActualWidth 속성이 변경될 때 발생하는 이벤트이며, 처음 로드할 때도 발생하지만 Full-Screen 모드로 변경될 때는 발생하지 않습니다.

3. 선택적인 파라미터

파라미터	내용
background	실버라이트가 로드될 때의 배경색으로 기본값은 null입니다.
enableHtmlAccess	HTML DOM에서 실버라이트 개체로의 접근이나 실버라이트에서 HTML 컨텐트로의 접근을 허용할지에 대한 여부로 기본값은 false입니다.
initParams	실버라이트 런타임으로 전달할 초기 설정 문자열로 콤마(,)을 이용해서 여러 개의 문자열을 구분하여 전달 할 수 있습니다.(key1=value1,key2=value2,key3=value3)
maxFrmaerate	1초간 보여줄 프레임 수의 최대치로 기본값은 60입니다. 이 값은 높을수록 사용자 브라우저의 성능을 늦출 수 있고, 또한 낮을수록 애니메이션이 상당히 부자연스러울 수 있습니다.
splashScreenSource	Source 파라미터에서 지정한 파일이 다운로드 되는 동안의 로딩을 보여줄지에 대한 여부입니다.
windowless	HTML과 혼합되어 사용할 수 있는 Windowless 모드를 설정할 지에 대한 여부로 기본 값은 fasle입니다. 이 속성은 MS 원도우에서 동작되는 브라우저에만 작동됩니다.

＊음영 처리된 부분은 기억해 두시는 겟 좋습니다.

4. 추가적인 이벤트 파라미터

파라미터	내용
onLoad	실버라이트가 에러없이 로드되고 모든 내용이 표시될 때 발생하는 이벤트입니다.
onSourceDownloadComplete	Source 파라미터에서 지정한 파일의 다운로드가 완료될 때 발생하는 이벤트입니다.
onSourceDownloadProgressChanged	Source 파라미터에서 지정한 파일의 다운로드가 진행될 떄 발생하는 이벤트입니다.

5. 애니메이션의 진단을 위한 추가 파라미터

- 설정한 속성 외에도 프레임 속도를 브라우저에 보여주거나 렌더링되는 위치를 진단해 보고 싶을 경우 사용합니다. 이 부분에 대해서는 자세히 정리 하지 않겠지만 도움이 될 만한 사이트 주소를 걸어두도록 하겠습니다. (링크)

ü Sample Code

1. initParams을 이용한 데이터 전달하기

- Silverlight 응용 프로그램 빌드 시, 생성되는 TestPage.html의 object태그에 파라미터 추가합니다.

Code

TestPage.html

</a>

</object>

- App.xaml.cs에서 Application_Startup 이벤트에서 해당 값을 가져와서 Page.xaml에서 값 전달 받아, 메시지창 띄우기

Code

App.xaml.cs

private void Application_Startup(object sender, StartupEventArgs e)

{

string strMessage = e.InitParams["message1"] + e.InitParams["message2"];

this.RootVisual = new Page(strMessage);

}

Page.xaml.cs

public Page(string strMessage)

{

InitializeComponent();

MessageBox.Show(strMessage);

}

2. Silverlight에서 HTML 개체에 접근하기

- Silverlight 역시 DOM 방식을 이용하여 HTML 엘리먼트에 접근할 수 있습니다.

- TestPage.html의 Silverlight div 영역 상단에 우선 HTML 개체인 input 엘리먼트를 추가합니다.

Code

TestPage.html

</a>

</object>

</div>

- Page.xaml에서 텍스트 박스와 버튼 컨트롤 추가하고, 버튼 클릭 이벤트에 텍스트 박스의 값을 HTML개체인 input의 value에 넣은 로직을 구현해보겠습니다.

Code

Page.xaml

<UserControl x:Class="DemoSample4.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

</StackPanel>

</UserControl>

Page.xaml.cs

//추가 네임스페이스

using System.Windows.Browser;

private void Button1_Click(object sender, RoutedEventArgs e)

{

//현재 HTML 페이지의 Document 가져오기

HtmlDocument document = HtmlPage.Document;

//GetElementById로 input 개체 접근

HtmlElement element = document.GetElementById("txtDemo");

//GetAttribute로 value 값 가져오기

//element.GetAttribute("value");

//SetAttribute로 value 값 설정하기

element.SetAttribute("value", TextBox1.Text);

}

Result

ð 상단 영역은 HTML 개체이고, 아래는 Silverlight 영역입니다.

ð Silverlight 영역의 텍스트박스에 텍스트 입력 후, 클릭 하시면, HTML 개체의 값이 변경되는 것을 볼 수 있습니다.

3. HTML 엘리먼트의 이벤트 구독하기

- 테스트 페이지에 2번과 같이 Silverlight 영역 상단에 텍스트박스와 버튼 개체를 추가합니다.

Code

TestPage.html

- Page.xaml.cs에서 Page() 생성자에 HTML 개체 이벤트를 로직을 추가합니다.

Code

Page.xaml.cs

public Page()

{

InitializeComponent();

//이벤트 구독

HtmlElement btnElement = HtmlPage.Document.GetElementById("btnDemo");

btnElement.AttachEvent("onclick", new EventHandler<HtmlEventArgs>(this.OnBtnDemoClicked));

}

private void OnBtnDemoClicked(object sender, EventArgs e)

{

HtmlElement txtElement = HtmlPage.Document.GetElementById("txtDemo");

MessageBox.Show(txtElement.GetAttribute("value"));

}

Result

4. Silverlight와 Javascript의 연동

- Silverlight에서 Scriptable 어트리뷰트를 제공해 주며, 어트리뷰트를 선언함으로써 자바스크립트로의 접근을 허용할 수 있습니다.

- Silverlight 응용 프로젝트 생성 후, TestPage.html 파일에 input 엘리먼트를 추가하고, Silverlight Object 태그에 id가 지정되어 있지 않는다면, id를 지정합니다.

Code

<body>

메시지 입력 : <input type="text" id="txtMessage" /><br />

</a>

</object>

</div>

</body>

- Page.xaml에서 받은 텍스트를 보여줄 TextBlock를 선언하고, Page.xaml.cs에서 HTML의 자바스크립트에서 접근할 수 있는 속성과 메서드를 만들겠습니다.

Code

Page.xaml

<UserControl x:Class="DemoSample4.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

</Grid>

</UserControl>

Page.xaml.cs

[ScriptableType]

public partial class Page : UserControl

{

public string message;

public Page()

{

InitializeComponent();

HtmlPage.RegisterScriptableObject("MessageInfo", this);

}

[ScriptableMember()]

public void AlertMessage()

{

txtMessage.Text = "메시지 : " + this.Message;

//자바스크립트 함수 호출하기

//MessageBox.Show("등록되었습니다."); 와 동일함.

HtmlElement alertScript = HtmlPage.Document.CreateElement("script");

alertScript.SetAttribute("text", "alert('등록되었습니다.');");

HtmlPage.Document.DocumentElement.AppendChild(alertScript);

}

[ScriptableMember()]

public string Message

{

get { return message; }

set { message = value; }

}

Description

ð 클래스 속성에 [ScriptableType]를 선언하면, HtmlPage.RegisterScriptableOjbect() 메소드를 통해 모든 공용 속성, 메서드 및 이벤트를 JavaScript 코드에서 사용할 수 있으며, Javascript에서의 접근을 위해 반드시 선언하여야 합니다.

ð 각각의 속성에 선언한 [ScriptableMember()] 어트리뷰트는 HTML스크립트에서 해당 코드에 접근할 수 있도록 허용하기 위해 선언해 주어야 합니다.

- TestPage.html 에서 RegMessage() 스크립트를 작성합니다.

Code

function RegMessage() {

//실버라이트 객체

var host = document.getElementById("silverlightObject");

//사용자 정보 등록

host.content.MessageInfo.Message = document.getElementById("txtMessage").value;

//사용자 메서드 호출

host.content.MessageInfo.AlertMessage();

}

</script>

ð HtmlPage.RegisterScriptableOjbect()에서 선언하였던 Script Key를 통해 JavaScript 코드에서 접근이 가능합니다.

Result

저작자표시 비영리 변경금지

'RIA Platform' 카테고리의 다른 글

WCF Service를 이용한 Silverlight 활용(1) (0)	2009.06.29
Silverlight 참고 사이트 (0)	2009.06.29
Part7. Using Control Templates to Customize a Control's Look and Feel (0)	2009.06.29
Part6. Using User Controls to Implement Master/Detail Scenarios (0)	2009.06.29
Part5. Using the ListBox and DataBinding to Display List Data (0)	2009.06.29

かけがえのない愛

Part8. Web Browser와 Silverlight

'RIA Platform' 카테고리의 다른 글

+ Recent posts

티스토리툴바