|
지난 5월 16일에 전자신문사와 데브멘토에서 주최한 DTFE 행사의 훈스닷넷 세미나에서 마지막 세션으로 발표했는 포토라이트 만들기가 월간마소 8월호에 실렸네요^^.내용은 발표 내용과 비슷하면, 예제 소스를 통해서 포토라이트와 같은 이미지뷰어를 만들수 있습니다. (실버라이트를 처음 입문하는 개발자 분들에게 도움이 될 만한 자료가 되었으면 합니다.)
PPT자료와 소스는 DTFE2009 훈스닷넷 4세션 PhotoLight에 링크 걸려 있습니다.^^
실전 실버라이트 프로그래밍,
포토라이트(PHOTOLIGHT) 만들기!
ㅁ Photo Light 동작과 구현
코드를 살펴보기 앞서 PhotoLight에서 어떻게 데이터를 주고 받는지, 간단하게 짚고 넘어가도록 하겠다. (아래 그림을 참고하자)
위 그림에서 보면 역시 마찬가지로 노트북이 있다. 이는 클라이언트 PC라고 생각하자. 이 PC 옆에는 키가 있는 것을 볼수 있을 것이다. 이는 데이터의 키라고 생각하면 되겠다. PhotoLight에서도 WCF서비스를 이용한다. 해당 키를 WCF서비스에 넘기면, WCF서비스는 DBServer에 데이터를 요청한후 해당 데이터를 실버라이트 어플리케이션에 보내주는 형식이다.
[ 포토라이트 프로젝트 구성 내용 ]
위 그림은 PhotoLight의 프로젝트 구성 모습이다. 파일업로드 프로젝트과 비슷한 구성임을 알수 있을 것이다.그럼 PhotoLight에서 주요 코드를 살펴 보도록 하겠다.
먼저, ScriptManager클래스부터 보도록 하자. ScriptManager는 외부에서 스크립트(Script)함수를 통해 데이터 키를 넘겨 받게되면, ScriptManager에서는 데이터 키가 변경되었음을 알려주는 역할을 담당한다.
|
ScriptManager.cs |
|
public class ScriptManager { public event EventHandler PhotoKeyChanged; private String _ptKey; [ScriptableMember] public String PTKey { get { return _ptKey; } set { _ptKey = value; if (PhotoKeyChanged != null) PhotoKeyChanged(this, EventArgs.Empty); } } public ScriptManager() { HtmlPage.RegisterScriptableObject("PhotoLight", this); } } |
다들 아시겠지만 자바스크립트를 통해서 실버라이트 함수를 호출하기 위해서는
HtmlPage.RegisterScriptableObject 함수에 스크립트 가능한 액세스 기능을 위해 관리되는 개체를 등록을 하며, 스크립트에서 특정 함수에 접근하기 위해서는 ScriptableMember라는 어트리뷰트를 붙여주어야한다. PhotoLight에서는 PTKey라는 메소드를 스크립트에서 접근할수 있도록 지정해 주었는데 이는 키값이 바뀔때마다 PhotoKeyChanged라는 이벤트를 호출해 주게 되는 것 이다. 이 이벤트를 받는 쪽에서는 해당 키값으로 WCF서비스를 호출을 해서 데이터를 받아오게 된다.
-> [ WCF서비스 활용 Tip ]
보통 WCF서비스에서 데이터클래스를 생성을하면 DataContract 어트리뷰트와 DataMember 어트리뷰트를 붙어서 사용했을 것이다. 이렇게 해야 직렬화(Serialization)가능해저, 실버라이트 어플리케이션에서 받을수 있기때문이며, 서비스 에러도 필할수 있기 때문 일거다. 그러나 .NET Framework3.5 SP1를 서버에 설치하면, DataContract등의 직렬화 관련 선언없이도 모든 C# Object를 Remoting Type으로 제공할 수 있다. 이는 .NET Framework3.5 SP1에 WCF관련해서 기능이 추가 되었기 때문이다.
위 그림은 .NET Framework3.5 SP1설치 전의 코드와 설치후 의 코드를 비교해 둔 것 이다.
ㅁ 애니매이션 주기
PhotoLight에서는 슬라이드보기라는 기능이 있는데… 이는 여러장의 사진을 자동으로 한장한장 넘겨 주면서 보여주는 기능이다. PhotoLight에서는 샘플하게 이 기능을 구현해 보았다.
|
ShowControl.xaml |
|
<UserControl x:Class="PhotoLight.ShowControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <UserControl.Resources> <Storyboard x:Name="ImageClose"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ImageControl" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Name="ImageOpen"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ImageControl" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Grid x:Name="LayoutRoot"> <Image HorizontalAlignment="Stretch" Stretch="Uniform" x:Name="ImageControl" /> </Grid> </UserControl> |
ShowControl라는 유저컨트롤을 보시면 두개의 스토리보드(Storyboard)가 있는 것을 확인 할수 있을 것이다. 이 두개의 스토리보드는 간단한 애니매이션을 정의하고 있는데, 이는
Image 컨트롤의 Opacity를 0으로 했다, 1로 하는 역할을 한다. 그래서 데이터가 변경될 때 마다 이미지의 Opacity값을 조절해서 기존이미지는 사라지고, 새로운 이미지는 부드럽게 나타나게 애니메이션으로 작성해 봤다.
[ 포토라이트 전체 작동 모습 ]
위 그림은 PhotoLight의 모습이다. 애니매이션이 작동되는 모습과 실제 동작되는 모습을 보고 싶은 분들은 http://temp.happydong214.com 으로 오시면 볼 수 있을 것이다. 이는 필자가 개인적으로 집에서 돌리고 있는 것이다.그래서 사정에 따라 닫힐수도 있다.
지금 까지 PhotoLight의 대략적인 소스 코드와 작동내용에 대해서 알아 보았다. 필자도 실버라이트관련 회사에서 일은 하고 있지만, 아직 경험이 많지않다. 하지만, 지금까지 나왔던 개발이슈및 실버라이트에서 제공하는 기본적인 컨트롤들을 잘 이용해서 이렇게 멋진 어플리케이션을 만들어 보았다. 지금 실버라이트가 어럽다고 생각하시는 분들이 있다면, 그런 생각은 그냥 잠시 있고, 한번 미친듯이 만들어보고, 또 만들어 보자! 그러면 나중에 자신도 모르게 발전해 가는 모습을 볼수 있을 것이다.
|
- 참고 자료 1. http://www.pluralsight.com/community/blogs/aaron/archive/2008/05/13/50934.aspx 2. http://hoons.kr/Board.aspx?Name=sivlerlighttip&Mode=2&BoardIdx=19560&Key=Title&Value=MV 3. http://hoons.kr/Board.aspx?Name=sivlerlighttip&Mode=2&BoardIdx=19561&Key=Title&Value=MV 4. http://hoons.kr/Lecture/LectureView.aspx?BoardIdx=18394&kind=43 |
