글 작성자: 써니루루
출처 : http://www.zdnet.co.kr/builder/dev/web/0,39031700,39160544,00.htm


이하 내용은 출처에서 부분 발췌한 내용입니다.





새로운 언어를 배울 때 언제나 등장하는 것이 바로 ‘Hello World’를 출력하는 예제일 것이다. 실제로 이 예제를 만들어 봄으로써 실버라이트의 개발 환경을 느껴보자. 실버라이트를 개발하는데 있어 여기에서는 1.1 알파 버전을 사용할 것이다. 1.0 버전 버전은 닷넷 프레임워크를 아직 지원하지 않기 때문에 다양한 기능을 보여주기에는 부족한 점이 있다.

1.1 알파 버전은 http://msdn2.microsoft.com/en-us/asp.net/bb187452.aspx에서 다운로드 받아서 설치하면 된다. 웹 페이지에 접속하면 다음과 같은 프로그램들 목록이 표시된다.

• Microsoft Silverlight 1.1 Alpha.브라우저 플러그 인
• Microsoft Silverlight 1.1 Alpha Software Development Kit(SDK)개발 툴 킷
• Microsoft Expression Blend 2 PreviewXAML 디자인을 위한 디자인 툴
• Microsoft Visual Studio Code Name "Orcas" Beta 1.비주얼 스튜디오 차기 버전인 Orcas Beta1 버전
• Microsoft Silverlight Tools Alpha for Visual Studio Code Name "Orcas" Beta 1.Orcas Beta1 버전에서 실버라이트를 개발하기 위한 프로젝트 템플릿

설치할 프로그램이 많은 편이다. 이 프로그램들은 모두 무료로 다운로드 받을 수 있으므로 전부다 다운로드 받아서 설치를 한다.

먼저 C# 기반의 실버라이트 응용 프로그램을 만들어 보자. 비주얼 스튜디오를 실행하고 새 프로젝트에서 C# 밑에 있는 실버라이트 프로젝트를 선택한다.

<화면 2> 실버라이트 프로젝트 선택하는 화면

프로젝트를 생성하면 <화면3>과 같은 프로젝트가 만들어 진다.

<화면 3> C# 기반의 실버라이트 프로젝트

화면을 표시하는 페이지는 TestPage.html이다. 기존의 MS 방식대로라면 확장자를 htm으로 사용하겠지만, html을 사용한 것으로 봐서는 크로스 브라우저를 지향하려는 의도가 엿보인다. TestPage.html 코드를 보면 별다른 코드가 없다.

 <리스트 1> TestPage.html의 일부


<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="TestPage.html.js"></script>
...

<body onload="document.getElementById('SilverlightControl').focus()">
<div id="SilverlightControlHost" >
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>



실버라이트의 런타임 자체도 액티브X 컨트롤로 만들어져 있는데, 작년에 이올라스 패치 문제가 있었듯이 한 파일 안에서 같이 실행하면 액티브X 컨트롤이 활성화되지 않는 탓에 별도의 파일로 분리하는 것이 좋다. Silverlight.js 파일은 모든 브라우저에서 실버라이트가 동작하도록 만들어 놓은 자바스크립트 라이브러리다. TestPage.html.js는 Silverlight.js에 있는 실버라이트 생성 컨트롤을 호출하면서 XAML 파일을 연동시켜주는 역할을 한다.

 <리스트 2> TestPage.html.js


function createSilverlight()
{
Sys.Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "0.95",
enableHtmlAccess: true
},
events: {}
});
}


Page.xaml 파일을 보면 단순히 Canvas 하나를 그리는 구문만이 존재 한다.

 <리스트 3> Page.xaml


<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="HelloWorld_CS.Page;assembly=ClientBin/HelloWorld_CS.dll"
Width="640"
Height="480"
Background="White"
>
</Canvas>



이 구문에서 x:Class라는 부분이 바로 닷넷 프로그래밍 모델로 만든 어셈블리를 연동하는 부분이다. 클래스명과 경로를 적어주어야 한다. DLL로 만든 클래스의 네임스페이스와 이름을 표기하고 실제 DLL 파일의 경로를 적어 준다. Loaded에는 초기에 로드 되면서 호출할 메소드 이름을 적어준다.

디자이너는 이 XAML 파일을 수정하고 개발자는 이 XAML에 연동된 파일(여기에서는 xaml.cs)을 각각 수정하면 된다.

 <리스트 4> Page.xaml.cs


namespace HelloWorld_CS
{
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
}
}
}



현재까지는 각각의 코드가 아무런 일도 하지 않는다. 이제 익스프레션 블랜드를 이용해서 Hello World! 텍스트 박스 하나를 그려보자. <화면 4>처럼 비주얼 스튜디오에서 바로 블랜드를 호출할 수 있다.

<화면 4> Blend를 여는 메뉴

<화면 5> Hello World! 텍스트 박스를 추가한 모습

<화면 5>를 보면 Hello World! 텍스트 박스를 추가한 모습을 볼 수 있다. 블랜드에서는 비주얼 스튜디오와 마찬가지로 옆에 프로젝트 리스트가 나오며 블랜드에서 아예 프로젝트를 새로 만들 수도 있다. 이러한 기능은 개발자와 디자이너가 보다 긴밀하고 효과적인 협업을 할 수 있도록 만들어진 기능이라고 할 수 있다.

<화면 6> 블랜드에서 프로젝트 만들기

이제 저장을 하고 비주얼 스튜디오로 돌아와서 실행을 하면 Hello World! 텍스트가 잘 나올 것이다. 단 아직 한글 지원이 미비한 관계로 블랜드에서 언어 관련 코드는 삭제해 주어야만 한다.

 <리스트 5> Page.xaml에 Hello World! 텍스트 박스 추가한 결과


<화면 7> Hello World!를 실행한 화면

이번에는 디자이너 부분이 아닌 개발자 부분에서 코드를 수정해 보자. 위의 TextBlock에 이름을 다음과 같이 지정한다.

<TextBlock x:Name="block" Width="156" Height="37" Canvas.Left="133" Canvas.Top="23" TextWrapping="Wrap">
Hello World!
<TextBlock>

이를 Page.xaml.cs 코드에서 다음과 같이 수정해 보자.

block.Text = "Welcome to the Silverlight";

즉, Page_Loaded 이벤트에서 block이라는 이름의 TextBlock의 내용을 바꾸었다. 이를 실행해 보면 Hello World!에서 ‘Welcom to the Silverlight’로 바뀐 것을 볼 수 있을 것이다.
이번에는 IronPython을 이용해서 똑같은 결과물을 만들어 보자. 위의 Page.xaml에서 동적언어에 대한 내용을 <리스트 6>과 같이 추가한다.

 <리스트 6> 동적언어 지원을 위한 Page.xaml


<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640"
Height="480"
Background="White"
>
<x:Code Source="Page.xaml.py" Type="text/ironpython" />
<TextBlock Loaded="OnLoad" x:Name="block" Width="156" Height="37" Canvas.Left="133"
Canvas.Top="23" TextWrapping="Wrap">
Hello World!
</TextBlock>
</Canvas>



이번에는 닷넷 프레임워크 어셈블리가 필요 없으므로 x:Class도 선언할 필요가 없다. 대신 x:Code라는 태그를 통해서 동적언어를 설정한다. 기능은 앞의 예제와 동일하게 텍스트의 내용을 바꾼다.

 <리스트 7> Page.xaml.py


def OnLoad(sender, e):
block.Text = "Welcome to the Silverlight"



결과를 보면 파이썬으로 만들어도 동일한 결과를 볼 수 있다. 그렇다면 ASP.NET처럼 이러한 관리코드나 동적코드는 서버 사이드에서 실행되는 것일까? 우리가 어떤 버튼을 클릭하면 서버에 가서 그 이벤트를 처리하고 결과를 돌려주는 방식일까? 그것은 아니다. 실버라이트는 어셈블리나 동적언어 코드를 직접 클라이언트에 모두 로딩 한다. 따라서 서버에 특정 네트워크 통신을 따로 하지 않는 이상 라운드 트립은 없다.

티스토리툴바