아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2에서 소개된 튜토리얼 중에 첫번째인 Part 1: Creating "Hello World" with Silverlight 2 and VS 2008 번역본 입니다. 본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다.

번역:오일석


실버라이트 튜토리얼 파트 1: VS 2008과 실버라이트 2를 이용한 “Hello World” 만들기

이 글은 실버라이트 2의 베타1을 사용한 Digg 클라이언트를 만드는 방법에 대한 8가지의 튜토리얼의 한 파트입니다. 이 튜토리얼들은 순서대로 읽어야 하며 실버라이트의 핵심 프로그래밍 컨셉을 설명하고 있습니다.

VS 2008을 이용하여 새로운 실버라이트 응용프로그램 만들기

Digg 클라이언트를 만들기 위해서 비주얼 스튜디오 2008의 '파일 - 새프로젝트' 메뉴를 선택하고 새 프로젝트 대화상자에서 "Silverlight Application"을 선택하면서 시작해 보겠습니다. (노트: 여러분은 베타1이 배포되면서 지원될 'Silverlight Tools for VS 2008'을 다운로드하여 설치해야 합니다.)



프로젝트 이름을 "DiggSamle"로 합니다. "OK"버튼을 클릭하면 실버라이트 프로젝트만 생성할 것인지 아니면 실버라이트 프로젝트를 포함한 서버측 ASP.NET 웹 프로젝트도 함께 만들것인지 묻습니다. 이번 예제에서 우리는 실버라이트를 포함하는 ASP.NET 웹 프로젝트도 추가를 하고 그 이름을 "DiggSample_WebServer"라고 하겠습니다. "OK"를 클릭하면 실버라이트 클라이언트 프로젝트와 ASP.NET 웹 프로젝트가 함께 포함된 솔루션이 생성됩니다.



비주얼 스튜디오에서 빌드를 하면 컴파일된 실버라이트 응용프로그램이 자동으로 웹 프로젝트에 복사됩니다. 이 작업에서 수동으로 설정해 줄 것은 없습니다. 비주얼 스튜디오가 만들어준 기본 웹 서버 프로젝트에는 ASP.NET 웹 페이지와 우리가 실버라이트 응용프로그램의 테스트와 실행에 사용할 정적인 HTML페이지가 모두 포함되어 있습니다.


노트: 실버라이트 응용프로그램은 리눅스상의 아파치를 포함하여 어떠한 웹서버에서도 사용이 가능하며 정적인 HTML 파일 또는 PHP, Java, Python, Ruby 등의 서버측에서 만들어지는 페이지에서 호스팅 될 수 있습니다. 이번 Digg 클라이언트에서는 서버측 코드는 작성하지 않을 것입니다. 대신에 실버라이트의 크로스 도메인 네트워킹 기능을 사용하여 Digg 서비스 API에 직접 접근할 것입니다. 제가 ASP.NET 웹 서버 프로젝트를 만든 주된 이유는 자동 배포와 테스트를위한 built-in-web-server를 사용하기 위해서 입니다.

실버라이트 응용프로그램 안에 무엇이 있는지 살펴보기

기본적으로 새로 생성된 실버라이트 프로젝트에는 Page.xaml과 App.xaml 파일, 그리고 그와 연결된 VB, C#, Ruby, Phython 등으로 작성된 코드 비하인드 클래스 파일이 포함됩니다.



XAML 파일은 실버라이트 또는 WPF 응용프로그램에서 UI를 선언적으로 나타내기 위한 XML 텍스트 파일입니다. 또한 XAML은 보다 광범위하게는 닷넷 객체들을 선언적으로 나타낼 수 있습니다.  

App.xaml 파일은 일반적으로 프로그램 전체에서 공통으로 사용하는 브러쉬와 스타일 오브젝트 같은 리소스 선언에 사용됩니다. App.xaml을 위한 코드 비하인드 클래스는 Application_Startup, Application_Exit, Application_UnhandledException 등 응용프로그램 레벨의 이벤트 핸들링에 사용합니다.

Page.xaml 파일은 기본적으로 프로그램이 실행될 때 로드되는 초기 UI 컨트롤 입니다. Page.xaml안에서 우리는 사용자 인터페이스를 정의하기 위한 UI 컨트롤들을 사용할 수 있고, Page 코드 비하인드 클래스 안에서 이벤트를 핸들링 합니다. 이에 대해서는 차차 살펴보겠습니다.

비주얼 스튜디오는 DiggSample 프로젝트를 빌드할 때 기본적으로 코드와 XAML 마크업을 기본 닷넷 어셈블리와 함께 컴파일합니다. 그리고 이미지 또는 우리가 포함하고자 하는 파일들과 같은 정적인 리소스들을 "DiggSample.xap" 파일에 패키징 합니다.



"zap, 잽"이라고 발음하는 ".xap"파일은 클라이언트 다운로드 사이즈를 줄이기 위해서 표준 zip 압축 알고리즘을 사용했습니다. VB 또는 C#으로 만든 "hello world" 닷넷 실버라이트 응용프로그램의 크기는 4KB 정도입니다.

노트: 베타1의 어떤 컨트롤들은 사용할 때 .xap파일 안에서 redisted(?) 되는 어셈블리로 구현되어 있습니다. 이것은 크기를 4KB 기본 크기보다 크게 만들 것입니다. Digg 프로그램에서 사용한 모든 컨트롤은 실버라이트 베타 2 다운로드 패키지와 최종 릴리즈에 포함될 것입니다. 이 의미는 최종 프로그램의 다운로드 크기는 아마도 6-8KB 범위 일 것입니다. 매우 작고 빠를 것입니다.

여러분이 실버라이트 2 응용프로그램을 실행하고 호스팅하려면 표준 HTML 페이지에 <object> 태그를 이용하여 .xzp 파일의 위치를 지정하면 됩니다. 자바스크립트는 필요하지 않습니다. 이 방법은 크로스 브라우저(Safari, Firefox, IE 등)와 크로스 플랫폼(Windows, Mac, Linux등)에서 작동합니다.

우리의 실버라이트 프로그램을 참조하는 <object> 태그가 포함된 테스트용 HTML, ASP.NET 페이지는 프로젝트를 만들 때 자동으로 추가되었습니다.  이 말은 우리는 단지 F5를 눌러 빌드, 실행, 테스트를 할 수 있다는 것입니다.

컨트롤 추가와 이벤트 다루는 방법 배우기

지금까지 우리의 Digg 프로그램은 아무일도 하지 않고 있으며 실행하면 빈 페이지만 보여집니다. 우리는 프로젝트에 있는 Page.xaml 파일을 열어서 컨텐츠를 추가하여 이 상황을 변화시킬수 있습니다.



그리드의 배경을 바꾸고 그 안에 버튼 컨트롤을 선언하면서 시작해 보겠습니다. 코드 비하인드 클래스에서 버튼을 프로그래밍적으로 참조할 수 있도록 버튼의 'x:Name' 속성에 'MyButton'이라고 입력합니다. 그리고 Content, Width, Height 속성을 설정합니다.



프로그램을 실행 했을 때 우리가 만든 버튼은 아래와 같이 페이지의 중앙에 "Push me"라는 텍스트와 함께 표시될 것입니다.



버튼의 행동을 추가하기 위해 "Click"이벤트 핸들러를 추가합니다. 소스뷰에서 이벤트 이름을 입력하여 추가할 수 있습니다.



코드 비하인드 클래스에서 사용할 이벤트 핸들러를 입력받기 위해 대기합니다.



이벤트 핸들러의 메소드 이름을 입력하거나 엔터키를 입력하여 기본 네이밍 규칙을 사용하는 이벤트 핸들러 메소드 이름을 입력할 수 있습니다.



비주얼 스튜디오는 코드 비하인드 클래스 파일에 이벤트 핸들러의 기본 구현 코드를 자동으로 만들어 줍니다. 우리는 이 이벤트 핸들러를 이용하여 버튼이 클릭될 때 버튼의 content 속성을 새로운 메시지로 변경할 수 있습니다.



위와 같이 코드를 변경하고 다시 프로그램을 실행하여 버튼을 클릭하면 이제는 버튼의 content 텍스트가 "Pushed!"로 변경된 것을 볼 수 있습니다.



다음 단계

여러분들은 아직 프로그램이 완성되기까지 해야할 일이 약간 더 남아 있습니다. :-)

다음 단계에서 우리는 프로그램의 전체적인 UI 레이아웃을 잡고 컨트롤을 몇가지 더 배치할 것입니다. 다음 튜토리얼로 점프 하세요: 레이아웃 관리 사용하기 (한글 번역본)

2008년 2월 22일 금요일 오전 4시 57분 ScottGu가 발행함.


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret