Silverlight 1.1 바로 시작하기

Silverlight 개발의 기초
준비 사항

Silverlight 개발 환경
먼저 개발에 필요한 환경을 갖춰야겠죠?
현재 Silverlight은 자바스크립트만으로 컨트롤이 가능한 1.0 beta 버전과 매니지드 코드 즉, CLR환경과 통합되는 1.1 alpha 버전으로 나누어져 있습니다. 여기에서는 1.1 alpha를 기준하겠습니다.

필요한 모든 파일은 http://msdn2.microsoft.com/en-us/asp.net/bb187452.aspx 여기에서 다운받을 수 있어요.

먼저 실제 개발에 필요한 툴. 다음으로 디자인에 필요한 툴. 마지막으로 Silverlight SDK인데요, QuickStarts에 있는 내용과 샘플이 대부분입니다. 개발시 최소한 모든 개발 툴과 Expression Blend는 있어야 편합니다.
그 외에 illustrator나 플래쉬 SWF파일을 XAML로 변환해주는 툴들도 있으니 참고하세요.

Silverlight를 시작하기 전에
먼저 Silverlight가 도대체 뭐 하는 넘인가부터 알아야겠죠? 하지만 이 주제는 너무나 일반적이고 다른 곳에서 더 잘 정리되어 있으니 굳이 여기에서 다시 얘기하지 않는 게 좋을 것 같습니다.

Silverlight 개발을 시작하기 전에 먼저 아래의 내용들을 둘러보세요.
  • Silverlight 및 XAML에 대한 전반적인 소개
    http://msdn.microsoft.com/msdnmag/issues/07/06/Silverlight/Default.aspx?loc=ko
    여기에서 Silverlight와 XAML에 대한 소개 부분만 읽어보시면 돼요.
  • WPF 및 XAML 다루는 예제
    http://hoons.kr, http://visumuri.net 같은 커뮤니티의 WPF 강좌에서 XAML을 다루는 방법을 익혀두시는 게 좋아요. Silverlight에서 지원하는 엘리먼트가 적긴 하지만 기본적인 사용방법은 크게 차이 나지 않으니 도움이 될 거에요.
  • Silverlight 공식 QuickStarts 페이지
    http://silverlight.net/quickstarts/managed.aspx
    이 글의 기반이 되는 공식 페이지입니다. 미리 얘기 드리자면 이 글은 이 페이지의 내용을 기반으로 제가 나름대로 편집하고 추가한 거에요. 대부분 HowTo형식으로 작성되어 있으니 따라 하는데 별다른 어려움은 없으니 이 페이지를 닫고 이걸로 공부하시는 것도 좋은 방법이죠.
  • Silverlight MSDN 페이지
    http://msdn2.microsoft.com/en-us/library/bb188743.aspx
    MS 기술 개발자라면 자연스럽게 사용해야 할 MSDN입니다. 아직 Silverlight 1.1(with .NET)은 개체 레퍼런스가 나와있지 않은데요 기본적으로 Javascript 버전과 개체의 이름과 내용은 거의 동일하므로 Javascript 버전을 참고해야 할거에요.
사전 지식
Silverlight는 워낙 고수준의 추상화가 잘 되어 있는데다가 Visual Studio의 막강한 IDE덕분에 쉽게 접근할 수 있다고 생각해요.
하지만 기본적으로 HTML/Javascript/XML에 대해 개념 정도는 파악하고 있어야겠고요, 매니지드 코드를 다루기 위해 C#(혹은 VB)를 어느 정도는 다룰 수 있어야 해요. 이 글에서는 말 그대로 곧바로 시작하기 위해 이런 기반 기술에 대한 설명은 최대한 줄일 생각이에요.

Silverlight 1.1 프로젝트 구성

기본 프로젝트 템플릿 구성
앞서 말한 개발 환경을 갖추고 Visual Studio codename "Orcas"(이하 Orcas)를 실행하고 새 프로젝트를 선택해보면 Silverlight 프로젝트 템플릿이 보입니다. 현재 Silverlight 1.1에서 지원하는 CLR은 C#과 VB.NET이 있는데요, 앞으로의 모든 내용은 C#을 기준으로 합니다. 긴말 할 필요 없이 만들어 볼까요?

Howto:1-1. 새 Silverlight 프로젝트 만들기
1. Orcas를 실행합니다.
2. 메뉴에서 File->New->Project를 선택하거나 Ctrl+Shift+N를 눌러 새 프로젝트를 선택합니다.
3. 새 프로젝트 다이얼로그 박스에서 Project types를 Visual C#->Silverlight로 선택하고 Templates에서 Silverlight Project를 선택한 후 [OK]를 누릅니다.
사용자 삽입 이미지


프로젝트를 생성한 후 우측 상단에 있는 솔루션 익스플로러를 보면 다음과 같은 파일로 구성되어 있습니다.
 
  • TestPage.html
    Silverlight 애플리케이션을 테스트하기 위한 HTML 파일로 브라우저에서 최초로 실행되는 엔트리 포인트의 역할을 합니다. 일반적으로 Silverlight 페이지를 호스팅할 HTML 파일은 Silverlight.js와 Silverlight 페이지를 생성하는 자바 스크립트 파일을 포함하며 Silverlight 페이지는 보통 임의의 DIV 태그 안에 호스팅됩니다.
  • TestPage.html.js
    Silverlight 페이지를 생성하기 위한 createSilverlight 메소드를 제공하는 자바 스크립트 파일입니다. 내부적으로 Silverlight.js에서 제공하는 createObject 혹은 createObjectEx 메소드를 사용하여 지정된 XAML 파일 및 설정으로 Silverlight 페이지를 생성합니다. 이 메소드의 내용은 애플리케이션마다 변경될 수 있으므로 각 Silverlight 애플리케이션마다 고유한 스크립트 파일을 생성합니다.
  • Silverlight.js
    Silverlight 컨트롤을 생성하여 HTML 페이지로 호스팅하기 위한 자바 스크립트 파일입니다. 이 파일은 모든 프로젝트에서 공통으로 사용되므로 사이트의 특정 위치에 놓고 include 하여 사용하는 게 좋습니다.
  • Page.xaml
    createSilverlight 메소드 호출을 통해 HTML 페이지에 호스팅될 Silverlight 컨텐츠입니다. 이 마크업의 루트 엘리먼트는 반드시 xmlns 어트리뷰트로 올바른 네임스페이스를 지정해줘야 합니다. 일반적으로 Silverlight 페이지의 루트 엘리먼트는 다른 개체를 담을 수 있는 Canvas를 사용합니다. Silverlight 애플리케이션이 매니지드 코드를 사용하므로 루트 엘리먼트는 반드시 x:Class 어트리뷰트를 포함해야 합니다. 나중에 설명하겠지만 x:Class 어트리뷰트는 코드-비하인드에서 사용될 클래스 명을 식별하는데 사용됩니다.
Silverlight 1.1은 매니지드 코드를 사용하며 위의 XAML 파일을 핸들링하는 코드-비하인드 파일을 포함합니다.
  • Page.xaml.cs (또는 .vb)
    이 파일은 런타임에 이벤트를 핸들링하는 매니지드 코드를 제공하며 반드시 Page.xaml에서 정의된 x:Class와 동일한 이름의 partial 클래스를 정의해야 합니다. 이 매니지드 코드는 외부로 배포할 필요가 없으며 마크업에서 정의된 assembly만 배포하면 됩니다.
페이지 추가하기
필요에 따라 한 HTML 페이지 내에 여러 개의 Silverlight 컨트롤을 호스팅하거나 호스팅된 Silverlight 페이지내에서 다른 Silverlight 페이지로 내비게이팅할 수 있을 것입니다.
Howto:1-2. 새 Silverlight 페이지 추가하기
1. 메뉴에서 Project->Add New Item을 선택하거나 Ctrl+Shift+A를 눌러 새 아이템을 선택합니다.
2. 새 아이템 다이얼로그 박스에서 Silverlight Page를 선택하고 [OK]를 누릅니다.
사용자 삽입 이미지

추가된 Silverlight 페이지는 마찬가지로 마크업과 코드-비하인드로 구성되어 있으며 마크업의 루트 엘리먼트에서 정의한 x:Class 어트리뷰트와 동일한 이름의 클래스가 코드-비하인드에 정의되어 있습니다.

이렇게 추가된 Silverlight 페이지는 하나의 HTML에서 관리할 수도 있지만 다른 HTML 페이지를 생성하여 HTML레벨에서 내비게이팅할 수도 있습니다. 만약 HTML 페이지를 임의로 추가한다면 템플릿이 만들어준 .html과 .js처럼 적절한 코드를 사용하여 Silverlight 페이지를 로드해야 하겠죠.

Hello Silverlight!

시작부터 동영상 플레이어!?
보통 어떤 언어를 시작할 땐 항상 Hello, world 류의 텍스트 출력을 해보기 마련인데요, Silverlight이 얼마나 직관적으로 코드를 작성할 수 있는지 보여드리기 위해 곧바로 간단한 웹 동영상 플레이어를 만들어 보겠습니다. 흔히 백문이 불여일타라는 말을 많이 쓰지만 Silverlight은 정말로 그 효과가 크지요. 지금 바로 해보세요!

Howto:1-3. 간단한 웹 동영상 플레이어 예제
1. 새 Silverlight 프로젝트 생성합니다.
2. 아래의 코드를 각각 입력합니다. (Page.xaml과 Page.xaml.cs)
3. Ctrl+Shift+B 또는 F6을 눌러 빌드하고 F5를 눌러 실행합니다.

Code: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="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll"
   
Width="800"
   
Height="600"
   
Background="White"
   
>
    <
TextBlock Text="Hello Silverlight!" FontSize="30" />
    <
MediaElement x:Name="moviePlayer" Width="800" Height="600" Source="Silverlight.wmv" AutoPlay="False" MediaEnded="OnMediaEnded" />
    <
TextBlock Canvas.Left="0" Canvas.Top="620" Text="Play" MouseLeftButtonDown="OnPlay" />
    <
TextBlock Canvas.Left="50" Canvas.Top="620" Text="Stop" MouseLeftButtonDown="OnStop" />
    <
TextBlock Canvas.Left="100" Canvas.Top="620" Text="Pause" MouseLeftButtonDown="OnPause" />
</
Canvas>

Code:Page.xaml.cs (코드 길이상 using 구문은 표시하지 않았습니다.)
namespace SilverlightProject1
{
    public partial class Page : Canvas
   
{
   
    public void Page_Loaded(object o, EventArgs e)
        {
           
// Required to initialize variables
           
InitializeComponent();
        }

       
void OnMediaEnded(object sender, EventArgs e)
        {
           
// 미디어 플레이가 끝났을 때 Stop을 눌러 처음부터 재생할 수 있도록 합니다.
           
moviePlayer.Stop();
        }

       
void OnPlay(object sender, MouseEventArgs e)
        {
            moviePlayer.Play();
        }

       
void OnStop(object sender, MouseEventArgs e)
        {
            moviePlayer.Stop();
        }

       
void OnPause(object sender, MouseEventArgs e)
        {
            moviePlayer.Pause();
        }
    }
}

주요 코드의 구성
상세한 코드를 보기 전에 마크업인 XAML과 코드-비하인드인 CS 코드 파일의 관계를 살펴보죠. XAML은 HTML과 같이 구성 요소 즉, 엘리먼트 들을 태그로 표현하고 태그 내의 어트리뷰트로 구성 요소들의 속성을 나타냅니다. 템플릿 구성에서 언급했던 것처럼 마크업의 루트 엘리먼트(여기에서는 Canvas)는 반드시 x:Class 어트리뷰트를 포함해야 하며, 코드-비하인드에서 바인딩할 클래스와 네임스페이스 및 어셈블리를 정의합니다.

코드-비하인드를 살펴보면 x:Class 어트리뷰트에서 정의한대로 SilverlightProject1 이란 네임스페이스내에 Page 클래스를 정의하고 있습니다. x:Class 어트리뷰트의 정의 중에 assembly=ClientBin/SilverlightProject1.dll 이란 구문으로 어셈블리 경로를 지정하는데요, 여기서 지정된 어셈블리는 코드-비하인드가 컴파일 된 결과물입니다. 이것은 웹 사이트에 소스 코드를 배포하지 않고 오직 컴파일된 바이너리 파일만 있으면 된다는 걸 말합니다. 즉, 마크업에는 일반적인 UI 요소를 구성하고 공개되지만 내부적인 비지니스 로직은 코드-비하인드로 말 그대로 숨길 수 있다는 것을 의미합니다. 이 부분에 대해서는 아래에서 다시 얘기하겠습니다.

상세한 코드를 보죠.
루트 엘리먼트인 Canvas는 일종의 컨테이너로 다른 엘리먼트들을 포함합니다. Canvas내에는 TextBlock 엘리먼트를 사용하여 화면에 표시할 문자열을 지정하였고 MediaElement 엘리먼트를 사용해 동영상을 재생할 영역을 지정하였습니다. Orcas의 IDE에서 이 코드들을 입력할 경우 현재 상황에서 입력이 가능한 요소들만 인텔리센스로 표시되기 때문에 매우 경쾌하게 코딩할 수 있습니다.

각 엘리먼트의 어트리뷰트들도 매우 직관적인 이름을 가지고 있어서 이 예제에서 사용된 것들은 굳이 설명이 필요 없을 정도입니다. 몇 가지 중요한 어트리뷰트들만 짚어보죠.

모든 엘리먼트에 공통적으로 사용가능한 x:Name은 코드-비하인드에서 직접 사용할 수 있는 개체의 이름을 정의합니다. 엘리먼트의 이름을 지정함으로써 x:Class에서 정의한 클래스 내에서 멤버 변수처럼 사용할 수 있습니다. 다음 그림을 보면 마크업에서 정의한 x:Name으로 코드-비하인드에서 마치 멤버 변수인 것처럼 심지어 인텔리센스도 지원한다는 걸 확인할 수 있습니다.


어트리뷰트로 이벤트 핸들러를 지정할 수도 있습니다. 예제에서 MediaElement의 MediaEnded와 TextBlock의 MouseLeftButtonDown이 바로 해당 이벤트에 대한 핸들러의 이름을 지정하고 있습니다. 이벤트 역시 매우 직관적인 이름인데요, MediaEnded는 미디어 재생이 끝났을 때를 의미하고 MouseLeftButtonDown은 마우스 왼쪽 버튼이 눌렸을 때를 말한다는 걸 설명할 필요는 없을 겁니다.

이렇게 마크업에서 지정한 이벤트 핸들러는 코드-비하인드에서 반드시 구현해야 합니다. Silverlight에서 모든 엘리먼트의 이벤트는 두개의 파라미터로 전달되는데 여기에 대한 설명은 따로 좀 더 상세하게 알아보겠습니다.

우선 예제를 살펴보면 어트리뷰트에서 지정한 이름과 일치하는 멤버 함수들을 볼 수 있습니다. 여기에서 해당 이벤트에 대한 비지니스 로직 코드를 구현하면 되는 거죠. 각 코드들 역시 따로 주석이 필요치 않을 정도로 간단하고 직관적입니다.
주의
MediaElement는 현재 동영상으로 WMV 포맷과 음악으로 MP3, WAV 포맷만을 지원합니다. 따라서 서비스 전에 필요한 파일을 인코딩할 필요가 있는데요, Microsoft는 이러한 인코딩을 위한 툴로 Expression MediaEncoder를 내놓았습니다. 현재 Preview 상태로 평가판을 180일간 사용할 수 있으니 미리 테스트 해보시는 것도 좋을 것 같네요. 이 외에도 전문적인 인코딩을 위한 서버 제품들도 준비되어 있는데 http://uxkorea.net/blog_post_54.aspx 이곳을 참고하시기 바랍니다.



자동으로 생성되는 코드
아마 예리하신 분이라면 Page 클래스 첫줄에 있는 Page_Loaded 멤버 함수와 InitializeComponent 메소드 호출을 눈여겨 봤을 겁니다. Page_Loaded는 Silverlight 페이지가 HTML에 로드될 때 발생하는 이벤트 핸들러로써 Silverlight.js에 의해 호출됩니다. 여기에서 이 클래스의 멤버 변수 등을 초기화할 수 있습니다.

그런데, InitializeComponent 메소드는 어떤 역할일까요? 결론부터 말하자면 말 그대로 XAML 페이지에 있는 컴포넌트들을 초기화하는 메소드입니다. 그럼 이 메소드는 어디에서 정의되어 있을까요? 분명히 이 메소드는 프로젝트 내의 어디에도 보이지 않습니다. 혹시나 하고 부모 클래스인 Canvas 클래스를 뒤져봐도 이런 메소드는 정의되어있지 않습니다. 바로 이 메소드는 컴파일러가 자동으로 생성해주는 코드에서 구현되고 있습니다. 컴파일러는 마크업의 x:Class로 정의된 엘리먼트를 코드-비하인드에서 사용될 개체로 자동으로 생성하여 개발자의 귀찮은 코딩을 덜어주는 거죠. 이 코드는 obj\Release(또는 Debug) 폴더아래에 파일명.g.cs(또는 .vb)라는 이름으로 자동으로 생성됩니다. 이것은 XAML과 매니지드 코드와의 컴파일 과정에서 일어나는 일인데 전에 포스팅한 http://gongdo.tistory.com/74을 참고하세요. 이 글에서는 WPF의 컴파일에 대해 언급하지만 WPF와 Silverlight는 기본적인 구동 방식이 같으므로 이해하는데 문제가 없을 거라 생각합니다.

배포하기

Silverlight는 웹 기반 기술입니다. 물론 테스트는 로컬에서 하겠지만 제대로 하려면 웹서버 등을 갖춰야 하죠. 어쨌든 웹 상에서 작성한 Silverlight 애플리케이션의 배포는 단순히 .xaml.cs 등의 매니지드 코드로 작성한 소스 코드는 제외하고 컴파일된 어셈블리만 포함하면 됩니다. 위의 예제의 경우 예를 들어 http://gongdosoft.com/example 이란 URL로 배포하고 싶다면 다음과 같은 구조를 갖는게 일반적일 것입니다.
Silverlight 배포 예제
+WebRoot


+Include


-Silverlight.js


+Example


+ClientBin


-SilverlightProject1.dll


-Page.xaml


-TestPage.html


-TestPage.html.js


-Silverlight인트로.wmv



예제 코드에서는 Silverlight.js를 모든 다른 파일과 같은 장소에 둔 걸로 가정하였지만 위의 배포 예제에서는 좀 더 일반적인 방법으로 Silverlight.js를 최상위 Include 경로로 옮겨봤습니다. 물론 코드는 약간 수정을 해야겠죠.

중요한 것은 중요한 비지니스 로직이 포함된 .cs 파일 즉, 코드-비하인드 파일은 포함하지 말고 컴파일된 어셈블리만을 포함하는 것입니다. 코드-비하인드는 말 그대로 숨겨두세요.

참고

개체 브라우저
아직 Silverlight 1.1에 대한 MSDN 레퍼런스가 나와있지 않아서 어떤 클래스에 어떤 멤버들이 있는지 한눈에 보기 어렵습니다. 하지만 Silverlight의 개체들은 그 이름이 매우 설명적이기 때문에 개체 브라우저(Object Browser)에서 그 구성도를 보는 것 만으로도 클래스의 역할을 이해하는데 도움이 됩니다.
림}
Howto:1-4. 개체 브라우저 보는 방법
1. 프로젝트를 연 상태에서 메뉴에서 View->Object Browser를 선택하거나 Ctrl+W,J를 누릅니다.
2. 또는 우측의 솔루션 익스플로러의 Reference 항목에서 원하는 어셈블리를 더블 클릭합니다.

레퍼런스 및 정보 찾기
앞서 말한 것처럼 아직 Silverlight 1.1의 레퍼런스가 없으므로 Javascript 버전의 레퍼런스를 참고해야 합니다. 예를 들어 TextBlock에 대한 레퍼런스는 http://msdn2.microsoft.com/en-us/library/bb188394.aspx 에서 확인할 수 있습니다.

비록 영문이고 Javascript 버전이긴 하지만 Silverlight에 대한 기초를 더 공부하고 싶다면 http://msdn2.microsoft.com/en-us/library/bb404770.aspx 여기를 참고하시길 바랍니다.

역시 영문이지만 Silverlight 포럼도 도움이 된....다고 얘기드리고 싶지만 여긴 아직 검색도 안되네요. http://silverlight.net/forums/Default.aspx 네, 검색이 안되니 필요한 정보를 찾기가 좀 어렵습니다. 차라리 구글에서 검색하는게 훨씬 빠를지도 몰라요.

계속해서 영문이지만(...) http://silverlight.net/blogs/silverlightcommunity/ 여기에 개발자들의 포스팅이 트랙백되고 있습니다.

그리고! 바로 http://gongto.tistory.com 에서도 질문과 의견을 환영합니다!

참고로 위의 예제 프로젝트를 첨부했으니 한번 테스트해보세요. 아무리 간단하더라도 남이 만든걸 테스트하는 것도 중요한 것 같아요.
마지막으로 간단하게 만들어본 Silverlight 인트로 영상. 역시 못써먹을 것 같아서 올립니다. -_-


http://gongdo.tistory.com/attachment/cfile23.uf@25763B455878F5540B571D.avi 여기서 다운로드도 가능해요.
신고
Posted by gongdo


티스토리 툴바