Silverlight2009.10.08 18:19
Microsoft Expression Encoder 3 에서는 SDK 가 제공 되는데요.
SDK 문서를 보시면 Get Started 에 Encoder 3 SDK 를 사용하는 방법이 자세히 설명 되 있습니다.

우선 Encoder 3 SDK 를 사용하기 위해서는 Project 에서 References 를 추가 해 주셔야 합니다.
Microsoft.Expression.Encoder
Microsoft.Expression.Encoder.Types
Microsoft.Expression.Encoder.Utilities


이렇게 네 가지 dll을 추가 하셔야 합니다.
(아, 마지막의 WindowBase 는, Encoder.Types 에서 ObservableCollection 을 사용했기 때문에 추가 해 줘야 하고요^^)

헌데, 여기서 문제점을 하나 발견 했는데요.

References 추가를 한 뒤 Get Started 에 나와 있을 법한 짧막한 코드를 실행 해 보니,
References 가 분명히 추가 되 있고, 해당 Path에는 분명히 dll 파일들이 존재 하는데도..
FileNotFoundException 이 나오더군요;;

실행 된 코드는 다음과 같습니다.

static void Main(string[] args)
{
    MediaItem mediaItem = new MediaItem(@"D:\SmoothTest\Butterfly.wmv"); 

    //create job and media item for video to encode
    Job job = new Job();
    job.MediaItems.Add(mediaItem); 

    //set output directory
    job.OutputDirectory = @"D:\SmoothTest\Encode"

    //encode
    job.Encode();
}


이대표님과 같이 열심히 뒤져 봤지만, 저와 같은 증상을 띈 분이 안 계신 것 같더라고요. Encoder 포럼에 질문도 해 보고 했지만 결국 못 찾았는데요.

한 가지 특징적인 것은 이대표님 PC와 제 PC가 동일한 스팩인데다, 64bit 운영체제 라는 점입니다.
그래서, 혹시나 하는 마음에 Virtual PC 를 설치하고, Windows 7 32bit OS를 설치 한 뒤에, VS2008SP1, Expression Encoder 3 를 설치 해서 다시 테스트 해 봤습니다.

그랬더니..

아주 잘 되더군요;;

결국, 잠정적 결론이긴 하지만, Microsoft Expression Encoder 3 SDK 는 64 bit 에서는 올바르게 동작하지 않는 것 같습니다.
Microsoft Expression Encoder 3 SDK 를 사용해서 개발을 하려면 32 bit 운영체제에서 해 보셔야 할 것 같네요 :)


Posted by Min-gu, Kim
Silverlight2009.10.05 15:05

Smooth Streaming 을 서비스 하기 위해서는 IIS 웹서버가 필요합니다. (IIS 버전은 7.0이상)
참고로, 필자의 Test 환경은 Windows Server 2008 R2인데요, IIS 7이상 설치가 가능한 OS면 2008 R2가 아니어도 상관 없습니다.

우선 IIS 웹서버가 구축 되 있다는 가정을 두고, 다음 순서부터 설명 드릴께요.

일단, IIS 웹서버에 IIS Media Services 를 추가적으로 설치 해 주셔야 합니다.

IIS Media Services 설치파일을 다운로드 하시려면, IIS 사이트를 방문하시면 됩니다.


사이트의 우측 상단에 보시면, 위 그림과 같은 링크가 있습니다. 여기서 서버 환경이 x86/ x64인지에 따라 다운로드 하세요.

설치파일 다운로드가 종료되면, 설치파일을 실행 합니다.

End-User License Agreement 를 체크 하신 뒤

Web Playlists, Bit Rate Throttling , Smooth Streaming 세 가지를 모두 선택 하신 후 설치 하시면 됩니다.

Default 로 모두 선택 되 있고, Session Helper 는 선택 되 있지 않은데요~ Smooth Streaming 서비스는 Session Helper 설치 유무와 상관 없이 잘 동작하기 때문에 Default 설정대로 설치하셔도 무방합니다.

이렇게 설치가 완료 되면, 서버 관리자. 혹은, IIS 웹서버 관리자를 띄워서 다음과 같이 Media Services 에 Bit Rate Throttling, Smooth Streaming 이 설치 되 있는지 확인 해 보세요.

그럼 Smooth Streaming 을 위한 준비는 모두 완료 된 것이고요.
Web Site 에서 Smooth Streaming 으로 인코딩 된 소스를 원하시는 폴더에 복사 해 두시면 됩니다.
물론, ism 파일과 ismc 파일도 모두 복사 해 두셔야겠죠 :)

서버 관리자. 혹은, IIS 웹서버 관리자를 띄워서 해당하는 사이트의 Smooth Streaming 인코딩 소스 폴더에서 Smooth Streaming Presentations 아이콘을 클릭해 보시면 Manifest 파일과 함께 Video Bit Rates , Durations 등 Smooth Streaming 인코딩 소스의 정보를 확인 하실 수도 있습니다.


이렇게 셋팅 된 Smooth Streaming 소스는 Silverlight Media Player 에서 AdaptiveStreamingSource 의 ManifestUrl 프로퍼티에 Uri 객체 형식으로 지정하게 되는데요, 이전 포스팅에서 "Smooth Streaming Url" 부분에 사이트 도메인을 포함한 ism 파일 경로와 마지막으로 "/Manifest" 를 덧하시면 됩니다. 특히, 마지막 부분의 "/Manifest" 가 없다면 Media Services 가 올바르게 설치 되 있다 하더라도 Manifest 파일을 로드 하지 못하게 되니 꼭 확인 하셔야 하겠네요 :)


this.Loaded += (s, e) =>
{
    Uri videoUri = new Uri("http://localhost:80/Smooth/winvideo-SL3Effectsa.ism/Manifest", UriKind.Absolute); 

    AdaptiveStreamingSource videoSrc = new AdaptiveStreamingSource()
    {
        MediaElement = SmoothMediaElement,
        ManifestUrl = videoUri
    }; 

    videoSrc.StartPlayback();
};


Posted by Min-gu, Kim
Silverlight2009.09.30 17:13

Silverlight 3 에서는 HD급 고화질의 영상을 끊김 없이 사용자의 환경(CPU, 로컬 네트웍 상태)에 기반하여 최적의 화질을 감상할 수 있는 Smooth Streaming 기술을 선보였습니다. 이전 버전인 Silverlight 2 에서 선보였던 Deepzoom 만큼이나 강력한 이슈가 되고 있는데요. 그래서, Smooth Streaming Media Player를 만드는 방법을 소개하도록 하겠습니다.

(Smooth Streaming 에 관해 더욱 자세히 알고 싶으시다면 Silverlight 사이트에 방문 해 보시기 바랍니다.)

우선, Smooth Streaming 을 이용한 Media Player UI를 구현하기 위해서는 Microsoft Expression Encoder 3 에 새롭게 추가 된 Media Player Templates 에서 SmoothStreaming.dll 과 PlugInMssCtrl.dll 을 추출하셔야 하는데요~

 C:\Program Files (x86)\Microsoft Expression\Encoder 3\Templates\en\

위 경로를 찾아가 보시면 다음과 같이 기본적으로 제공 되는 Templates 가 있습니다.


아무 Template 나 들어가 보시면

SmoothStreaming.xap 파일이 있는 것을 확인 하실 수가 있는데요, SmoothStreaming.xap 파일을 zip로 변경 하신 뒤 압축을 해제하시면, PlugInMssCtrl.dll 과 SmoothStreaming.dll 을 추출 하실 수 있습니다.

귀찮으신 분들을 위해서 다운로드 할 수 있도록 링크해 둘께요 :)

Smooth Streaming Media Player UI 를 구성하기 위해 솔루션을 만드신 후, References 에 PlugInMssCtrl.dll 과 SmoothStreaming.dll 을 추가합니다.

PlugInMssCtrl.dll 에는
Microsoft.Expression.Encoder.PlugInMssCtrl 네임스페이스 안에,
IPlugInMssCore, IPlugInMssOfflineSupport, IPlugInMssStatisiticsGraph 세가지의 인터페이스가 있습니다.
인터페이스 내 정의 된 프로퍼티나 메소드를 보면, StartPlayback, StopPlayback, GetBitratesInKbps, ParseManifest 등 이름만 봐도 무슨 역할을 하게 될 프로퍼티인지 가늠할 수 있는 것들이 많이 있네요 :)
바로 이 인터페이스들은 SmoothStreaming.dll 에서 사용 됐는데요.
SmoothStreaming.dll 에는

ExpressionMediaPlayer
Microsoft.Expression.Encoder.AdaptiveStreaming
Microsoft.Expression.Encoder.AdaptiveStreaming.Utilities
MS.Internal.Expression.Encoder.AdaptiveStreaming.Advertising
MS.Internal.Expression.Encoder.AdaptiveStreaming.Heuristic
MS.Internal.Expression.Encoder.AdaptiveStreaming.Logging
MS.Internal.Expression.Encoder.AdaptiveStreaming.Manifest
MS.Internal.Expression.Encoder.AdaptiveStreaming.Network
MS.Internal.Expression.Encoder.AdaptiveStreaming.Parsing
MS.Internal.Expression.Encoder.AdaptiveStreaming.Url
MS.Internal.Expression.Encoder.AdaptiveStreaming.Utilities
가 있습니다. (헉헉..)
그 중, Microsoft.Expression.Encoder.AdaptiveStreaming 네임스페이스 안에 Smooth Streaming Media Player UI를 구성할 수 있는 AdaptiveStreamingSource 클래스가 있습니다.
위에서 설명 드렸던 Microsoft.Expression.Encoder.PlugInMssCtrl 네임스페이스의
IPlugInMssCore, IPlugInMssOfflineSupport, IPlugInMssStatisiticsGraph 세가지의 인터페이스를 바로 AdaptiveStreamingSource 클래스가 상속을 받아 구현 되 있죠~ :)

아쉽게도, MSDN이나 구글링.. 등등 아무리 찾아봐도 이 AdaptiveStreamingSource 의 라이브러리 문서는 없는 것 같습니다. ^^
고로, 직접 사용 해 보시면서 느끼실 수 밖에 없을 것 같아요~

그럼, 직접 사용 해 보실 수 있도록.. 간단하게 Smooth Streaming Media Player 의 Source 를 연결하고, Play 하는 코드를 적어볼께요.

우선 XAML 에서 Media Player 가 될 엘리먼트는, 이전과 같이 MediaElement 입니다.
그리고, AdaptiveStreamingSource 클래스를 생성하여, MediaElement와 ManifestUrl (Smooth Streaming 으로 인코딩 된 결과물의 위치)을 설정하신 뒤, StartPlayback 메소드를 통하여 미디어를 재생 하실 수 있습니다.

this
.Loaded += (s, e) =>
{
    Uri videoUri = new Uri("Smooth Streaming Url", UriKind.Absolute);

    AdaptiveStreamingSource videoSrc = new AdaptiveStreamingSource()
    {
        MediaElement = SmoothMediaElement,
        ManifestUrl = videoUri
    };

    videoSrc.StartPlayback();
};


또한, AdaptiveStreamingSource를 보시면, Bit rate 의 변화를 나타내는 엘리먼트를 프로퍼티로 갖고 있는데요.
StatisticsGraph 프로퍼티 입니다. 이 프로퍼티의 타입은 UIElement 이기 때문에 원하시는 Layout Panel에 Add 하시면 사용자의 환경 변화에 따라 달라지는 Bit rate 그래프를 보실 수 있습니다.

또한, 이 Bit rate 를 실무에 적용하시게 된다면.. Poor 한 디자인 덕분에 새로 만들어야 할 사항이 오는데요.
그런 경우, AdaptiveStreamingSource의 PlayBitrateChange 등의 이벤트나 GetBitratesInKbps 등의 메소드를 적절하게 이용하셔야 할 듯 합니다.

저도 기회가 되면, AdaptiveStreamingSource 의 모든 맴버를 분석해서 다시 포스팅 하도록 할께요 :)
우선, 다음 번에는 Smooth Streaming 인코딩 방법과 IIS7에서의 Smooth Streaming 셋팅을 포스팅 하도록 하겠습니다.
Posted by Min-gu, Kim
기타2009.09.29 11:36

안녕하세요. 오늘은, Silverlight 기술 포스팅이 아닙니다.
얼마전 성황리에 마친 REMIX09에 제가 스피커로 참여했었는데요, 뒤 늦은 후기를 남기려고 해요.

이번 REMIX09 에는, MS의 키노트. 그리고, 잠시 휴식시간을 가진 뒤 Silverlight3, Expression, Web Platform 세 가지 트랙으로 나뉘어 진했됐습니다. 그 중, Silverlight3 에서 두 번째 세션을 제가 진행하게 됐습니다.


또한, 저희 Silverlight Korea 커뮤니티에서도, 부스 운영을 했는데요.
인디님과 승미님께서는 Silverlight Korea 티셔츠를 배포하기 위해 열심히 포장하고 계시네요. 간단한 Silverlight 퀴즈도 만드는 등 모두 열심히셨네요. 

저희 Silverlight Korea 스티커 인데요.. 아침부터 패러다임님께서 혼자 가위질 해 주셨어요. +_+
모두들 이른 시각(10시)부터 나오셔서 부스운영에 힘써 주셨습니다.

모두들 열심히 부스운영에 필요한 준비를 하고 계시는데.. 저는 가운데서 이렇게 세션 진행을 위한 발표자료 점검을 하고 있었습니다. ^^;;

점점 시간이 다가오고.. 스피커들도 준비를 시작하는데요. 우선, 장비 리허설부터 진행 했습니다.
MS의 박중석 대리님께서 저와 길버트님의 장비 리허설에 각별히 신경을 써주셨어요 :)
이번에 알았는데, 제 노트북의 그래픽카드가 1280x768을 지원하지 않더라고요. 그래서, 어쩔 수 없이 발표자료는 16:9 사이즈 기본 템플릿에서 4:3으로 바꿨고요.(양쪽 사이드가 잘린다고 해서..) 데모는 약간 떨림이 있더라도 강행할 수 밖에 없었습니다.

저는 이번 REMIX 행사 처럼 큰 규모의 행사에서 스피커로 진행하는 게 처음이었는데요, 그래서 인지 너무나도 떨렸답니다. 덕분에, 제 세션에 주어진 50분이란 시간 중에 초반 10~15분 정도는 "시...실버라.아..이...트으..." 거진 이 정도 수준으로 발표를 진행했었죠;; 아직도 생각하면 민망합니다. ㅠ.ㅠ 그래도, 제가 만든 데모를 시연할 차례가 오니, 조금씩 안정이 되더군요 :) 개발자는 개발자 인가 봅니다. 생각해보니, 제 코드를 본 뒤 안심(?)이 됐던 듯 하네요..ㅎ

아 참.! 다들 아시겠지만.. 이번 REMIX09행사에서는 Live Smooth Streaming 으로 Silverlight 3 트랙을 생중계 했었는데요. 휴즈플로우에서 UI를 구성해 주셨다고 하네요. 지금도 REMIX09 홈페이지를 가보시면 Silverlight 3 트랙 영상을 감상하실 수가 있습니다. 아직 못 보신 분들은 한 번 찾아가셔서 감상해 보세요.

http://www.visitmix.co.kr/live

REMIX 같은 큰 행사에서 스피커로 참여하게 되 너무나 감격스러운 하루였지만, 역시나 아쉬움이 남네요.
하지만, 다음 번 세미나엔 더욱 자신감을 갖게 되는 계기가 된 것 같습니다. ^^
Silverlight Korea 커뮤니티 부스도 순조롭게 잘 운영되고, 행사가 끝난 뒤 운영진분들과 함께 모임을 가졌는데요.
모두들 기분 좋게 마무리 하시는 것 같아서 정말 좋았습니다. 저 또한, 아쉬움을 뒤로 하고 즐거운 마음으로 다시 정진하도록 하겠습니다. 화이팅 :)

'기타' 카테고리의 다른 글

블로그 스킨 제작 중!  (0) 2012.08.03
QR Code 만들어 봤어요!  (0) 2010.08.27
블로그 개편 했습니다.  (0) 2010.07.30
REMIX09 스피커로 참여하다.  (2) 2009.09.29
2009 Elite Model Look Korea  (0) 2009.08.21
Posted by Min-gu, Kim
Silverlight2009.09.03 12:11

이번 포스팅은 Out-of-Broswer 를 Debugging 하는 간단한 Tip입니다. :D

Out of Browser 를 염두하고 개발을 하시다 보면, 디버깅이 안 되서 답답한 경우가 있을 것입니다.
저 또한, Out of Browser 를 테스트 하면서 디버깅이 안 되, 추측만 했었는데요.

자세히 찾아보니, OOB 도 디버깅 할 수 있는 방법이 있네요.

우선, 프로젝트 속성에서 Debug 탭을 선택 하신 후, Start Action에서 Installed out-of-browser application 을 선택 합니다.



그 다음, 실버라이트 프로젝트를 우 클릭 하신 뒤, Set as StartUp Project를 선택 하여 스타트 프로젝트로 설정하면 됩니다.


이렇게 설정하셨다면, Out-of-Browser 를 Debugging 하실 수 있습니다. :)

Posted by Min-gu, Kim
Silverlight2009.07.28 11:39

 안녕하세요.

 지난 10일 Silverlight 3 RTW (정식버전)이 런칭 되면서, Deepzoom Composer 도 함께 새 버전이 나왔는데요. 새로운 Deepzoom Composer 를 열심히 분석 해 본 결과, 놀라운 기능(Sildershow, Navigation, Hyperlink)이 추가 된 것 처럼 보이지만, 실상 Export 해 보면 지난 버전과 크게 차이나는 게 없고, scene.xml 이란 파일이 생성되는데 도통 어떻게 써먹는 것인지도 모르겠더라고요. 그래서 미 완성된 버전이라 생각하고 차후 버전을 기다려 왔습니다.
 헌데, 지난 22일 차후 버전이 드디어 나왔더군요!! +_+

New Deepzoom 다운로드

 우선, 놀랍고 쉽게 구현 할 수 있는 Sildershow, Menu, Hyperlink 세 가지 기능에 관해 설명 드리겠습니다.
 

 새 버전의 Deepzoom Composer에서 Compose 메뉴를 가보시면, Laysers 좌측에 새로 생긴 Slidershow, Menu, Internal Links, External Links 메뉴가 생겼습니다. 각각은 Slidershow, Menu, Hyperlink 를 디자인 할 수 있도록 지원합니다. :D

Slidershow

 Slidershow 의 경우에는,
Layers 에서 Image를 선택해서 Slidershow에 Drag and Drop으로 추가를 하시는데요, 이 때 순서를 정하시는 대로 Slidershow 를 실행하게 됩니다.

 물론, Slidershow 내에서 추가 된 Image의 순서를 마찬가지로 Drag and Drop으로 변경 하실 수 있습니다.

 나중에 Export 하게 되면, Slidershow가 기능이 추가 됩니다. +_+




















Menu

 Menu 도 Slidershow와 마찬가지로 Layers 에서 메뉴가 될.. (정확히는 메뉴를 Click시 보여지게 될 Image) Image를 Drag and Drop으로 추가 하실 수 있습니다.























 또,  Menu 를 디자인 하기 위해 상단에 7가지 기능을 제공 하는 버튼이 있습니다.
 마우스 우클릭을 통해서, 메뉴 이름을 수정할 수도 있습니다.

 저는 이 기능들을 이용해서 메뉴를 이렇게 수정하였습니다.

Hyperlink
Internal Links
Internal Links 는 MultiScaleImage 내에서 SubImage를 선택했을 경우, 다른 SubImage로 이동할 수 있도록 하는 기능을 디자인 할 수 있게 합니다.

 Layers 에서 Internal link 될 이미지를 선택 하신 후, Drag and Drop을 통해 Internal links 에 추가 하시면, Direct Link 팝업 창이 뜨는데요, 여기서 Link 될 이미지를 선택하시면 됩니다.

Internal link를 디자인 하게 되면, 좌측의 이미지처럼, Hyperlink 이미지와 Hyperlink 이미지를 선택 시, Link 될 이미지가 보이게 됩니다.

우클릭을 통해서 Link를 수정하시거나 삭제하실 수 있습니다.












External Links

External Links 는 MultiScaleImage 내에서 SubImage를 선택했을 경우, 새 브라우저를 띄워 지정된 URL로 이동하거나 하는 기능을 디자인 할 수 있게 합니다.

 Layers 에서 External link 될 이미지를 선택 하신 후, Drag and Drop을 통해 External links 에 추가 하시면, External Links Management 팝업 창이 뜨는데요, 여기서 Name, URL, Description을 입력하시면 됩니다.
Name : External link 명
URL : External link 될 사이트 URL
Description : 입력 시 External Image에서 Tooltip 표시

모든 디자인이 완료 되셨다면, Export 하셔서 결과물을 확인 하실 수 있습니다.
 Export 에서도 몇가지 추가 된 사항이 있는데요, Templates 를 보시면, Deep Zoom Navigation (Default) 가 있습니다. 이것을 선택 하신 후, 하단에 추가된 Preview 버튼을 클릭 하시면 바로 결과물을 확인 하실 수도 있습니다 :D

샘플
Posted by Min-gu, Kim
Silverlight2009.07.20 16:00

 최근에 업데이트 된 Blend 3 RC에는 기본적으로 Behavior class 8가지(ChangePropertyAction, ControlStoryboardAction, FluideBahavior, GoToStateAction, HyperlinkAction, MouseDragElementBehavior, PlaySoundAction, RemoveElementAction) 를 제공합니다.
 


  8가지 Behavior 는 정확히 표현하자면, Behavior와 Action으로 명명 되 있는데요. Behavior는 System.Windows.Interativity의 Behavior 클래스를 상속받아 구현 한 것이고, Action은 System.Windows.Interactivity의 TriggerAction이나 TargetedTriggerAction등을 상속받아 구현 된 것입니다.

 그럼 각각의 Behavior의 사용 방법을 간략하게 소개 하도록 하겠습니다.

TargetedTriggerAction
- Trigger에 의해서 실행 되는 Action을 지정. Action의 대상을 지정할 수 있습니다.

ChangePropertyAction - Trigger에 의해서 Target의 Property를 변경 하는 Action.
- TargetName :  Property가 변결 될 Target
- PropertyName : 변경 할 Property 선택
- Value : 변경 될 Property 값 설정
- Animation Properties : 1) Duration : Properties 의 값이 변경되는 시간을 설정
                                   2) Ease : Properties의 값이 변경 될 때의 Easing Animation 설정.

GoToStateAction - Trigger에 의해서 Target의 VisualState를 원하는 State로 변경하는 Action.
- TargetName : State가 변경 될 Target
- StateName : 변경 될 State 지정

RemoveElementAction - Trigger에 의해서 지정된 Dependency Object를 제거하는 Action.
- TargetName : 제거될 Dependency Object 선택.

TriggerAction
- Trigger에 의해서 실행 되는 Action을 지정.

ControlStoryboardAction - Trigger에 의해서 선택 된 Storyboard 를 컨트롤(Play, Pause, Stop 등) 하는 Action.
- ControlStoaryboardOption : 컨트롤 될 Storyboard의 기능을 지정합니다. ex) Play, Pause, Stop 등
- Storyboard1 : 컨트롤 될 Storyboard를 지정합니다.

HyperlinkAction - Trigger에 의해서 지정된 Uri 로 이동하는 Action.
- NavigateUri : 이동 될 Uri 지정
- TargetWindow : 새창(_blank)을 띄울 것인지 현재 페이지에서 바로 이동(_self)할 것인지 등을 선택.

PlaySoundAction - Trigger에 의해서 지정된 Audio를 재생하는 Action.
- Source : 재생 될 Audio 선택 (mp3, asf, asx, wma, wmv 지원)
- Volumn : 볼륨의 크기 지정.

Behavior
- Attached 된 Dependency object의 동작을 지정합니다.

FluidMoveBehavior - Attached 된 Dependency Object는 Silverlight App. 첫 로드시나, Resize 등에 의해서 Dependency Object가 위치하는 곳이 변경 됐을때 유동적으로 움직이게 됩니다.
- Duration : 움직이는 시간 설정
- EaseX : Dependency Object가 위치하는 X좌표로의 이동시 Easing Animation을 지정합니다.
- EaseY : Dependency Object가 위치하는 Y좌표로의 이동시 Easing Animation을 지정합니다.

MouseDragElementBehavior - Attached 된 Dependency Object는 마우스로 드래그 할 수 있는 동작을 하게 됩니다.

[Sample]
위 8가지 Behavior 직접 구현 된 Sample입니다.

[Sample Code]
위 예제의 샘플입니다. Behavior를 사용했으니, Blend에서만 열어보심 되겠네요 :D

Posted by Min-gu, Kim
Silverlight2009.07.10 13:04

 Silverlight 3 Beta 버전에서 새롭게 지원 가능해진 Out of Browser 기능이 생겼습니다. (Out of Browser 란 Browser 밖에서 Silverlight 를 실행 할 수 있도록 배포하는 기능을 말합니다.) Beta 때 Out of Browser 기능을 실행 해 보신 분은 아시겠지만, AppManifest.xml 파일의 주석부분을 제거하고, 몇 가지 설정 사항을 입력하면 됐었죠.

<AppManifest.xml>

<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
    <Deployment.Parts>
    </Deployment.Parts>
    <!-- Uncomment the markup and update the fields below to make your application offline enabled
    <Deployment.ApplicationIdentity>
        <ApplicationIdentity
            ShortName="Out of Browser Silverlight Application"
            Title="Window Title of Your Silverlight Application">
            <ApplicationIdentity.Blurb>Description of your Silverlight application</ApplicationIdentity.Blurb>
        </ApplicationIdentity>
    </Deployment.ApplicationIdentity>
    -->
</Deployment>


 이번에 발표 된 Silverlight 3 RTM 에서는 Out of Browser 를 설정하는 방법이 조금 변경 됐습니다.

Out-of-Browser 설정
 우선, Browser 밖에서 실행 될 Silverlight App. 을 만듭니다. 그리고, Silverlight App. Project 의 Properties를 선택하시면, Silverlight build options 에 Enable running application out of the browser 체크 박스가 있고, 체크 하시면, Out-of-Browser Settings... 버튼이 활성으로 변경 됩니다.



Out-of-Browser 버튼을 클릭 후 Out-of_Browser의 속성을 입력하시면 됩니다.


Window Title : Out-of-Browser를 통해 인스톨 될 Silverlight App.(이하, Silverlight App.)의 Title
Width : Silverlight App.의 가로 Size(픽셀)
Height : Silverlight App.의 세로 Size(픽셀)
Shortcut name : 바탕화면의 Silverlight App. 단축 아이콘의 Name
Download description : Out-of-Browser를 통해 인스톨 시 Silverlight App.에 관한 설명.
Icon : 각 사이즈 별 아이콘을 선택하여 빠른실행, 바탕화면, Silverlight App. 아이콘 등을 설정.
User GPU Acceleration : GPU 가속을 사용할 것인지 선택

이렇게 설정 해 주시기만 하면, Out-of-Browser 가 준비 된 것입니다. 참고로, Out-of-Browser 설정을 입력하시게 되면, 프로젝트의 Properties 에 OutOfBrowserSettings.xml 파일이 추가 됩니다.

<OutOfBrowserSettings ShortName="Silverlight3Test Application" EnableGPUAcceleration="False" ShowInstallMenuItem="True">
  <OutOfBrowserSettings.Blurb>Silverlight3Test Application on your desktop; at home, at work or on the go.</OutOfBrowserSettings.Blurb>
  <OutOfBrowserSettings.WindowSettings>
    <WindowSettings Title="Silverlight3Test Application" Height="400" Width="600" />
  </OutOfBrowserSettings.WindowSettings>
  <OutOfBrowserSettings.Icons />
</OutOfBrowserSettings>



Out-of-Browser 설치
브라우저 상에서 마우스 우클릭시 유저의 PC 에 인스톨 할 것인지 선택 할 수 있는 메뉴가 나옵니다. 혹은, Browser 상에서 Button 등의 엘리먼트의 이벤트로 설치 할 수 있도록 하려면 이벤트가 구현 된 함수에 다음과 같은 코드를 입력하면 설치가 진행 됩니다.

this.btnInstall.Click += (s, e) =>
{
    Application.Current.Install();
};


<Out-of-Browser 미 설정시>



<Out-of-Browser 설정시>



그럼 Out-of-Browser를 통해 Silverligt App.를 설치 해 보겠습니다.
[이 컴퓨터에 Silverlight3Test Application 설치...]를 클릭하시면, 응용 프로그램 설치 창이 뜹니다.

그리고, 설치 될 Silverlight App. 를 실행 할 수 있는 바로 가기의 위치를 체크 하신 후 확인 하시면 됩니다.

<바탕 화면>



<시작 메뉴>



다음은, Silverlight App을 Web Browser에서 실행한 화면과 Out-of-Browser에서 실행 한 화면입니다.

<Browser>



<Out-of-Browser>




Out-of-Browser 를 통해 설치 된 Silverlight App.는 Web Browser와 Out-of-Browser 상에서 마우스 우클릭- 이 응용 프로그램 제거.. 메뉴를 통해서 삭제 하실 수 있습니다.

<Browser>



<Out-of-Browser>

Posted by Min-gu, Kim
Silverlight2009.06.30 18:45
간단한 팁 입니다.

 Silverlight 3 에 새롭게 추가 된 ChildWindow 를 쓰다보면, X 버튼을 없애고 싶을 때가 생깁니다. X 버튼이란 ChildWindow 최우측 상단에 있는 컨트롤로, X버튼을 클릭 시 ChildWindow 가 닫히게 되죠. 이런 경우엔 사용자의 입력 (OK or Cancel)에 대한 확인을 할 수 없게 됩니다.

 그래서 X 버튼을 없애는 방법을 구현 해 보겠습니다.

 X 버튼을 없애는 방법은 ChildWindow 가 컨트롤이라는 것을 이용하게 되는 것이죠. 컨트롤이기 때문에 ControlTemplate 를 재정의 해서 X 버튼의 Visible을 Collapsed 로 변경하거나, 아예 삭제하시면 됩니다.

2009/06/16 - [Style] - ControlTemplate 정의하기

 (예전에 포스팅 했던 ControlTemplate 정의하기를 보시면 조금이나마 도움이 되실거라 생각합니다. ^^;)

우선, ChildWindow를 Blend 3 Preview에서 엽니다.


그 다음, Objects and Timeline 에서 Objects의 최 상위인 ChildWindow를 선택 하신 후, ControlTemplate 를 수정할 수 있도록 Edit Control Parts (Template)를 선택하여, Template Style을 하나 생성합니다.


이렇게 Template Style을 생성하게 되면, Objects and Timeline 에 ChildWindow 컨트롤의 Template 구조가 나오죠. 여기서 X 버튼 즉, CloseButton 을 찾아서 Visible 속성을 Collapsed로 변경하시거나, 삭제 해 주시면 됩니다.


이렇게 작업하시고 저장하시면, X 버튼이 없는 ChildWindow 가 만들어지게 됩니다. :D

<Capture>

Posted by Min-gu, Kim
Silverlight2009.06.30 16:00
 Silverlight 3 에는 ChildWindow 가 추가 됐습니다.

 ChildWindow 는 Winform 등의 Dialog창과 비슷한데요. 주로, 새로운 Dialog창을 띄워 사용자의 입력을 확인하거나, 사용자에게 경고 또는 공지를 알리는 창입니다.

 우선, ChildWindow 를 사용하기 위해선 Silverlight 3가 설치 되 있어야 합니다. (VS2008 SP1 설치와 VS2008 SP1용 Silverlight 3 개발도구가 설치 되 있어야 합니다.)

  Silverlight 프로젝트에서 ChildWindow 를 생성하려면 Add New Item 에서 Silverlight Child Window 를 선택 하신 후 ChildWindow를 명명한 뒤 Add 하시면 됩니다.

저는 TestChildWindow.cs 라고 명명 했습니다.

 그럼 생성 된 TestChildWindow.cs 를 한 번 살펴 보겠습니다.
<controls:ChildWindow x:Class="ChildWindowTest.TestChildWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
           Width="400" Height="300"
           Title="TestChildWindow">
    <Grid x:Name="LayoutRoot" Margin="2">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />
        <Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
    </Grid>
</controls:ChildWindow>

System.Windows.Contols 네임스페이스가 추가 되 있네요. ChildWindow가 System.Windows.Controls 에 있나 봅니다^^;
그리고, 레이아웃도 일정한 폼으로 정해져 있는데요, 이는 Blend 3 Preview 에서 열어보시면 확인 하실 수 있습니다.

비하인드 코드도 살펴보죠.
public partial class TestChildWindow : ChildWindow
{
    public TestChildWindow()
    {
        InitializeComponent();
    } 

    private void OKButton_Click(object sender, RoutedEventArgs e)
    {
        this.DialogResult = true;
    } 

    private void CancelButton_Click(object sender, RoutedEventArgs e)
    {
        this.DialogResult = false;
    }
}


기본적으로 OK, Cancel 버튼의 이벤트가 구현 되 있네요.
여기서 유념해 보실 사항은, OK, Cancel 버튼 각각은 DialogResult Property의 값을 할당 할 뿐 아무 코드도 추가 되 있지 않다는 것입니다. 이렇게 되 있는데도 ChildWindow를 띄워 동작을 해 보시게 되면, OK, Cancel 버튼 클릭 시 ChildWindow 가 닫히게 됩니다. 이는 ChildWindow 의 DialogResult Property에 값을 할당하면 Closing -> Closed 순으로 ChildWindow 가 닫힌다는 것을 반증하는 것이죠.

그럼, 말씀 드렸던 ChildWindow를 어떻게 띄우는 지 살펴 보겠습니다.
TestChildWindow t = new TestChildWindow();
t.Show();
(너무 쉬운가요? ㅎ)

 MessageBox에 비해 ChildWindow가 가지는 장점은, ChildWindow 의 XAML 내용을 보시면 짐작하시겠지만, 바로 개발자의 마음대로 Content 를 구성할 수 있다는 것입니다. 또한, DialogResult 값으로 사용자의 입력(OK, Cancel)을 ChildWindow를 띄운 MainPage에서 확인 할 수 있다는 것이죠.

 ChildWindow에 DialogResult Property 가 사용자의 입력을 확인 할 수 있는 Property 입니다.(Nullable Boolean) 한 가지, 유의하실 점은 Property 값을 사용하는 시점을 명확하게 해야 한다는 것인데요, Silverlight 에서는 모든 동작이 비동기로 이뤄지기 때문에 DialogResult Property 의 값을 아무곳에서나 사용하게 되면 값이 없거나, 사용자의 입력과 상관 없는 값을 가지고 있을 수 있겠죠.

 그래서, ChildWindow의 Closed 이벤트가 일어나는 시점의 DialogResult 값을 사용하시면 됩니다.
TestChildWindow t = new TestChildWindow();
t.Show();
t.Closed += (s2, e2) =>
{
    bool? result = t.DialogResult;

    if (result != null)
    {
        if((bool)result)
        {
            this.myTextBlock.Text = "Nice to meet you.";
        }
        else
        {
            this.myTextBlock.Text = "Who are you?";
        }
    }
};


 위 코드와 같이 구현하게 되면, 정확히 ChildWindow 가 사용자의 입력에 의해 닫히고, 그 때의 DialogResult 값을 확인 할 수 있게 되는 것이죠 :D (ChildWindow 는 여러모로 활용도가 높은 컨트롤임에도 불구하고, 사용하기 참 쉽네요^^)

<Sample>


Posted by Min-gu, Kim

티스토리 툴바