아래 글은 마이크로소프트 기술이사인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 8번째 튜토리얼 Creating a Digg Desktop Application using WPF의 번역본 입니다.

실버라이트 튜토리얼 파트 8: WPF를 이용하여 테스트탑용 Digg 클라이언트 만들기

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

여러분은 Digg 클라이언트 샘플 프로그램의 완성된 소스코드를 여기에서 다운로드 받을 수 있습니다. 저의 실버라이트 2 레퍼런스 페이지를 북마크하면 더 많은 실버라이트 관려 글과 컨텐츠를 볼 수 있습니다.

WPF를 이용하여 테스크탑용 Digg 클라이언트 만들기

이번 마지막 튜토리얼은 이전 7개의 튜토리얼과는 다른 목표가 있습니다. 이번에는 실버라이트 코드를 돌려보지 않는 대신 WPF와 .NET 3.5를 사용할 것입니다. 우리는 브라우저의 실버라이트 플러그인에서 작동하는 Digg 클라이언트 코드를 작성했습니다. 그리고 그것을 재사용해서 윈도우 데스크탑용 응용프로그램을 만들 것입니다.

실버라이트는 .NET 프레임워크의 전체 버전과 호환하는 일부 API를 가지고 있습니다. 그 목표 중에 하나는 일반적인 프로그래밍 모델과 도구를 학습한 개발자가 RIA 웹 응용프로그램, 윈도우 데스크탑 응용프로그램, 오피스 솔루션을 넘나들면서 기술, 코드, 컨텐츠를 재사용 가능하게 하는 것입니다.

아래는 브라우저에서 작동하는 Digg 실버라이트 클라이언트의 코드를 재사용하여 브라우저 밖에서 실행되는 윈도우 데스크탑용 버전을 만드는 단계에 대한 내용입니다.

1단계: WPF 데스크탑 응용프로그램 만들기

VS 2008을 이용하여 WPF 데스크탑 응용프로그램을 만들면서 시작해보겠습니다. "DiggDesktopSample"이라고 이름을 짓겠습니다.

App.xaml과 Window.xaml 이라는 두 개의 파일이 프로젝트 안에 만들어 집니다.

우리가 파트1에서 만든 (App.xaml과 Page.xaml을 가지고 있던) 실버라이트 프로젝트와 비슷한 구조라는 것을 알 수 있습니다..

2단계: Digg 클라이언트 코드를 WPF 응용프로그램에 복사하기

우리가 만들었던 DiggApplication의 실버라이트 코드를 복사해서 "DiggDesktopSample" 윈도우 프로젝트에 붙여넣기 하겠습니다.

현재 베타1에서는 이러한 copy/paste 동작이 수동입니다만 결국은 프로젝트 타입간의 코드 이동을 좀더 자동화할 예정입니다.

3단계: 몇 가지 문제점 수정하기

컴파일을 하기 위해서 Digg 샘플 코드의 2가지를 고쳐야 합니다.

1) 실버라이트 베타1 XAML 스키마 xmlns: URL이 WPF 데스크탑 버전과 다릅니다. 새로운 프로젝트에 복사한 코드가 WPF 스키마라는 것을 알려주기 위해서 XAML 파일을 조금 수정해야 합니다. 이것은 정식버전이 나오기 전에 우리가 향상시켜야 할 기능 중에 하나입니다.

2) <WaterMarkTextBox> 컨트롤을<TextBox>로 변경을 하고 <HyperlinkButton>컨트롤을 <TextBlock>으로 변경해야 합니다. 이 두개의 컨트롤은 아직 WPF에 포함되어 있지 않고 실버라이트 2 베타1에서 새로 추가된 컨트롤입니다. 하지만 이 컨트롤들과 함께 작동하는 다른 어떠한 네트워크, LINQ to XML, 데이터 바인딩 코드도 변경하지 않아도 됩니다.

일단 이렇게 수정을 하면 프로젝트는 깨끗하게 컴파일 됩니다.

4단계: 데스크탑 윈도우에 Digg 클라이언트 올리기

데스크탑 프로젝트에서 프로그램이 시작될 때 로드 되는 기본 윈도우인 Windows1.xaml 파일을 열었습니다.

윈도우의 타이틀을 "Digg Desktop Version"이라고 변경하고 기본 너비와 높이를 변경했습니다.

기존 Digg 실버라이트 프로젝트에 있던 Page.xaml 사용자 정의 컨트롤을 그 윈도우의 루트 컨트롤로 추가했습니다. 이렇게 하면 윈도우가 로드 될 때 윈도우에 보여질 것입니다. 저는 Page 클래스의 어떤한 코드도 변경하지 않았고 컨트롤의 이름도 그대로 사용했습니다. Page 클래스가 UserControl를 상속 받았기 때문에 WPF 윈도우나 컨트롤에 문제없이 올려질 수 있습니다.

마지막으로 수정할 내용은 Digg REST API 서버가 브라우저가 아닌 클라이언트 또는 서버에서의 접근을 알아내서 때때로 접근 거부 응답을 보내기 때문에 발생합니다. 아마도 서비스에 접근하는 자동 스크립트를 막기 위함 일 것입니다. 저는 proxy URL을 통해서 이 문제를 해결했습니다. 코드를 변경하는 것이 아니라 URL만 변경하는 것입니다.

5단계: 프로그램 실행하기

이제 Digg 데스크탑 응용프로그램을 실행 할 수 있습니다. 모든 기능은 실버라이트 버전과 똑같이 작동하고 프로그램도 같은 방식으로 움직입니다.

그리고 리스트에서 스토리를 선택하면 상세정보 사용자 정의 컨트롤이 표시됩니다.

브라우저와 데스크탑 버전 사이에 몇 가지 표면적인 스타일에 다른 점이 있습니다. 이것은 주로 사용자의 운영체제에 설정되어 있는 테마의 글꼴, 색, 스크롤 바와 같은 기본 스타일에 영향을 받기 때문입니다. 반면에 실버라이트는 모든 운영체제에서 사용하는 기본 스타일을 사용하고 있습니다. 만약 데스크탑 버전과 브라우저 버전이 완전히 똑같게 만들고 싶으면 스타일과 컨트롤 템플릿을 더 사용해야 합니다. 그렇지 않으면 데스크탑 버전은 사용자의 운영체제 테마에 맞춰집니다.

요약

우리는 앞으로 실버라이트와 WPF 간에 코드를 공유하는 좀더 자세한 글과 bast practice 가이드라인을 제안할 예정입니다. 저는 여러분이 실버라이트 응용프로그램을 만들 때 배운 기술과 지식이 WPF 프로젝트에 잘 적용될 것이라고 생각합니다. 저희는 솔루션 사이에 코드 재사용을 가능케 하고 컨트롤, 컨텐츠, 코드를 아주 쉽게 공유하게 하는 매우 높은 호환성 확보를 위해서 최선을 다하고 있습니다.

도움이 되었기를 …

스캇

Published Friday, February 22, 2008 5:46 AM by ScottGu