최고보다,최선을...

훈스닷넷 익스프레션 블랜드 시삽이신 이은아 시삽님께서 잘 정리 해주셨음!!

제 16회 정기 세미나를 실시합니다. 세미나 신청은 http://www.hoons.kr/Seminar/Join.aspx 에서 해주세요 :)

 지난 5월 16일에 전자신문사와 데브멘토에서 주최한 DTFE 행사의 훈스닷넷 세미나에서 마지막 세션으로 발표했는 포토라이트 만들기가 월간마소 8월호에 실렸네요^^.내용은 발표 내용과 비슷하면, 예제 소스를 통해서 포토라이트와 같은 이미지뷰어를 만들수 있습니다. (실버라이트를 처음 입문하는 개발자 분들에게 도움이 될 만한 자료가 되었으면 합니다.)
PPT자료와 소스는 DTFE2009 훈스닷넷 4세션 PhotoLight에 링크 걸려 있습니다.^^

내용은 아래 링크에서 확인 하실수 있습니다.
http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=33529

월간 마소 8월호에 기재된 내용 입니다. 지난 5월에 포토라이트 발표 내용과 비슷하면, 실버라이트를 처음 입문하는 개발자 분들에게 도움이 될 만한 자료가 되었으면 합니다.
PPT자료와 소스는 DTFE2009 훈스닷넷 4세션 PhotoLight에 링크 걸려 있습니다.^^

---

[스텝바이스텝 | HOONS닷넷과 함께하는 닷넷 인사이드 – 포토라이트(PHOTOLIGHT)편]

 

실전 실버라이트 프로그래밍,

포토라이트(PHOTOLIGHT) 만들기!

 

 실버라이트에 관심을 갖는 개발자, 디자이너들이 계속해서 늘어나고 있는 추세이며, 이를 수용하기 위해 여러 커뮤니티에서 실버라이트 스터디 모임을 진행 중이다. 필자의 경우 훈스닷넷 시삽으로 실버라이트 스터디 모임에도 같이 참석해서 운영해봤다. 대부분의 인원들이 실무에서 실버라이트를 이용한 프로젝트를 진행 중이거나, 진행을 준비하는 인원들이 대다수였다. 이들 몇 분과 이야기를 나눠봤는데, 실무적인 이야기들 뿐이었다. 어떻게 만들어야 할지, 어떻게 진행해야 할 지 등등으로 많이 고민하고 있는 모습을 느낌 수 있었다. 그래서 필자는 포토라이트(PHOTOLIGHT)를 통해서 지금 열심히 실버라이트를 공부하고, 또한 실무에서 어떻게 만들어야 할지 고민하고 있는 분들에게 조금이나마 도움이 되는 자료가 되길 바라면, 포토라이트 만들기를 진행해 보려고 한다.

---

PhotoLight는 간단하게 애기하면 이미지 뷰어라고 할 수 있다. 사용자들이 쉽게 사용 할 수 있고, 사진을 보면서 즐거움을 느낄 수 있게 하는 이미지 뷰어 라고 생각하면 될 것 같다. 필자는 이런 의도로 포토라이트를 기획했음을 알아 주길 바란다. 또한, 실버라이트를 공부하고 있는 많은 개발자들에게 도움이 될만한 자료가 되길 바라기도 한다.

 

 

 포토라이트를 어떻게 만들어 볼까 정말 고민이 많았다. 필자는 개발자라 획기적이고, 창조적인 생각이 팍팍 떠오르지 않는다. 그래서 여러 사이트들을 돌아 다니면서, 좋은 기능들이 있는 사이트들을 체크하고, 사용해 보고 그랬다. 그러던 중 스토리큐(http://www.storyq.net/)사이트를 방문해서 사용해보고, 이 와 비슷한걸 실버라이트로 만들어 봐야겠다 라는 생각이 들어 만들게 되었으며, 그 결과물이 포토라이트인 것이다.

 

ㅁ 디자인 협업

 

 포토라이트의 디자인은 현재 훈스닷넷 익스프레션 시삽으로 활동중인 김선구 시삽님께서 도와주셨다. 다들 아실 것이다. 개발을 할 때 디자이너와의 협업이 중요하다는 것을… 하지만 선구님과 필자는 같은 회사에서 일하는 것도 아니고, 서로 바뿐 스케줄을 줄여서 만드는 거라 커뮤니케이션하는 거 조차도 쉽지 않았다. 그래서 필자는 아래 그림과 같은 방법으로 협업을 해 보기로 결정을 내렸다.

“선 개발 후 디자인”이란 포토라이트에서 사용될 기능들에 대해서 먼저 개발을 해두고, 나중에 디자인을 입히는 것이다. 이렇게 하면 개발자는 디자인을 고려한 개발을 해야 할 것이고, 디자이너는 사용자를 위한 디자인을 해야 할 것이다.

 포토라이트는 우리가 많이 듣던 MVVM + Command 패턴을 이용해서 만들었다. 이는 디자이너와의 협업에서도 정말 편했다. 간단하게 MVVM패턴에 대해 애기하자면, 모델(Model)과 뷰(View)를 독립적이게 놔두고, 그 사이에 뷰모델(ViewModel)를 두어서 View와 바인딩으로 엮어 두고, Command를 이용해서 해당 이벤트를 뷰모델에서 주고 받게 되는 형식이다. Command는 주로 어플리케이션 전역에서 동일하게 받을 수 있는 사용자 제어 명령에 대한 이벤트를 효과적이고, 표준적으로 받기 위한 구현 방법이다. 커맨드는 MVVM처럼 뷰 와 모델이 분리된 환경에서 매우 효과적으로 코드를 짤 수 있게 도와주는 역할을 한다. 여기서 기억할 것은 어플리케이션 전역에서 동일하게 받을 수 있다는 것을 잘 기억해 두길 바란다.

[디자인 입히기 전/후]

 

 위 그림에서 왼쪽은 디자인을 입히기 전의 모습이며, 오른쪽은 디자인을 입힌 모습니다. MVVM패턴으로 만드니깐 View를 변경하는 것도 정말 쉬웠다. 그냥 바인딩만 제대로 걸어두고 Command만 제대로 걸어 주기만 하면 되는 것이다. 그렇게 하니 30분도 안 되서 디자인을 입힐 수 있었다. 이러므로 디자이너와 협업이 편했다 할 수 있겠다.

 이제 본격적으로 포토라이트의 작동 및 구현 코드에 대해서 알아 보도록 하겠다.

[스텝바이스텝 | HOONS닷넷과 함께하는 닷넷 인사이드 – 포토라이트(PHOTOLIGHT)편]

 

실전 실버라이트 프로그래밍,

포토라이트(PHOTOLIGHT) 만들기!

 

---

ㅁ Photo Light 파일업로드 구현

 

파일업로드 어플리케이션 또한 실버라이트로 구현해 봤다. WCF서비스를 이용하니, 다중파일 업로드와 파일업로드 프로그레스바(Progress Bar)를 표시하는데 쉽게 구현 할 수 있었다. 일단 포토라이트에서 파일업로드가 어떤 식으로 작동이 되지는 아래 그림을 통해 순서대로, 간단하게 설명하도록 하겠다.

위 그림에서 노트북으로 표시가 되어 있는 쪽이 클라이언트 PC라고 가정을 하자.

클라이언트는 포토라이트에 파일을 올리기 위해서, 자신이 보유하고 있는 사진을 선택을 할 것이다. 선택이 된 파일은 사용자가 업로드 액션을 주게 될 때, 각 파일 별로 WCF서비스를 호출을 하고, 선택된 파일을 넘겨주게 된다.

WCF서비스에서는 이 파일을 받아서, 파일서버의 해당 루트에 저장을 하게 되는데, 그냥 저장만 시키는 것이 아니라, 쎔네일(Thumbnail) 이미지와 딥줌(DeepZoom)파일들도 만들어 같은 루트 안에 저장을 한다. 이제 대략적으로 포토라이트에서는 어떻게 파일업로드가 되는지 살펴보았으니 이제 실제 구현 코드를 보면서 애기하도록 하겠다

[ 파일업로드 동작 모습 ]

 

위 그림은 포토라이트의 파일업로드 어플리케이션의 모습이며, 프로젝트 구성내용은 아래 그림과 같이 만들어 봤다.

[ 파일업로드 프로젝트 구성 내용 ]

 

위 그림에서 Service References로 FileUploadService가 참조된 것을 볼 수 있을 거이다. 이 Service를 이용해서 파일을 서버에 업로드를 시킬 수 있는 것이다. Service구현에 대해서는 아래에서 다시 애기하기로 하고, 지금은 저 서비스를 통해서 파일을 업로드 한다고만 알고 있기만 하자.

 각 폴더에 들어 있는 클래스들에 대해서 간단하게 애기하자면, Commands폴더에는 위에서 설명한 Command Pattern 내용 되로 파일업로드에 사용 될 Command를 지정해 둔 클래스를 만들어 두었고, Model폴더에는 파일에 대한 데이터클래스와 파일 업로드 프로바이더(Provider) 정의해 두었다. 그리고 View폴더에는 MVVM패턴 내용과 같이 View와 ViewModel를 만들어 넣어 두었다. 그럼 이제 파일 업로드에 관련된 주요 코드를 살펴 보도록 하겠다.

먼저, Command 관련 코드에 대해서 보도록 하자.

 

FileUploadCommands.cs

public class FileUploadCommands : Commands { public static FileUploadCommands Current { get; private set; } public static Command FileChoice { get; private set; }        public static Command FileUpload { get; private set; }   static FileUploadCommands()         {             Current = new FileUploadCommands();         } public FileUploadCommands()         {             FileChoice = CreateCommand("FileChoice");             FileUpload = CreateCommand("FileUpload");         } }

 

코드를 보면 Commands를 상속받고 있는 것을 볼 수 있을 것이다. 이는

HugeFlow.CommandPattern.dll를 참조해야지만 상속받을 수 있으며, 이렇게 상속을 받으면 커맨드(Command) 생성을 할 수있게 된다. 필자는 FileChoice와 FileUpload 두개를 정적으로 생성해 두었다. FileChoice는 파일 선택을 클릭했을때의 커맨드이고, FileUpload는 파일 업로드 클릭했을때의 커맨드이다. 이제 이 커맨드들을 View에서 어떻게 엮어 주고 있는지 코드로 보도록 하겠다.

 

ImagePanelView.xaml

<UserControl x:Class="PhotoLight.FileUploader.ImagePanelView"           …. 중간 생량 … xmlns:Command="clr-namespace:HugeFlow.CommandPattern;assembly=HugeFlow.CommandPattern">   …. 중간 생량 … <Button HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="70" Margin="0,0,5,0" Content="추가" Command:CommandService.Command="FileChoice" Command:CommandService.CommandParameter="Insert" />   <Button HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="70" Margin="0,0,5,0" Content="삭제" Command:CommandService.Command="FileChoice" Command:CommandService.CommandParameter="Delete" />   </UserControl>

 

 위 XAML코드를 보면 먼저 UserControl 엘리먼트(Element)에 CommandPattern 어셈블리를 설정을 해준다. 그래야 XAML코드에서 Command를 엮을 수 있기 때문이다. 필자는 추가버튼과 삭제버튼 컨트롤을 만들어 아까 위에서 지정한 FileChoice라는 커맨드를 엮어 주었다. Command:CommandService.Command에 미리 만들어 두었던 커맨드 이름을 지정해주면 되는 것이다. 그리고 필요에 따라 매개변수(Parameter)도 같이 지정 할 수가 있는데, 이는 Command:CommandService.CommandParameter에 문자로 지정해 줄 수 있다. 필자는 매개변수로 Insert, Delete라고 지정해 주었다. 이제 이 커맨드를 어디서 어떻게 받는지 알아 보자.

 

 

ImagePanelViewModel.cs

public ImagePanelViewModel() { FileUploadCommands.FileChoice.Executed += new EventHandler<HugeFlow.CommandPattern.ExecutedEventArgs>(FileChoice_Executed); FileUploadCommands.FileUpload.Executed += new EventHandler<HugeFlow.CommandPattern.ExecutedEventArgs>(FileUpload_Executed); }

 

ImagePanelViewModel이라는 클래스는 ImagePanelView.xaml의 ViewModel이다. ImagePanelViewModel의 생성자에서 커맨드 이벤트를 생성해 주었다. 위에서도 말했듯 커맨드는 전역에서 사용되어 질수 있으므로 ViewModel에 이벤트를 엮을 수 있다. 이제 커맨드를 어떻게 사용해야 할지 감이 왔을 것이다. 그렇다고 커맨드를 너무 난발하지는 말자. 즉, 무조건 커맨드를 만들지 말자는 애기이다. 예를들면 View에서 Visibility를 Collapsed 또는 Visible 하는데 커맨드까지 만들지 말자는 애기다. 이런건 View에서 형태만 바끼는 것이기에 View쪽에서 처리하는게 좋다. 꼭 이점을 주의해서 커맨드를 사용하길 바란다.

 다음으로 파일업로드 코드를 살펴보도록 하자.

 

UploadAgent.cs

public void UploadFile() {             if (file != null)             {                 byte[] buff = new byte[4 * 4096];                 int readbytes = this.file.FileStream.Read(buff, 0, buff.Length); if (readbytes != 0)                 {                     this.sent += readbytes;                     if (this.sent == this.total)                         isLast = true; FileUploadData filedata = new FileUploadData()                     {                         FileName = file.FileName,                         FileData = buff,                         DataLength = readbytes,                         IsFirst = isFirst,                         IsLast = isLast,                         GroupName = file.GroupName                     };                     client.SaveFileAsync(filedata);                     isFirst = false; file.Uploaded = this.sent;                 }                 else                 {                     file.FileStream.Dispose();                     file.FileStream.Close();                     client.ChannelFactory.Close();                 }             } }

 

UploadFile메소드는 WCF서비스에 파일을 업로드하는 메소드이다. 코드를 보면 파일스트림을 읽어, 이를 쪼개서 서비스에 호출을 하고 있음을 알 수 있다. 서비스 호출후 Completed가 일어나면 에러가 없으면 다시 UploadFile메소드를 호출하여 아직 다올리지 않은 파일스트림이 있는지 체크후 다시 서비스를 호출한다. 이렇게 반복되서 파일업로드 진행바에 값을 계속해서 바꿔주게 되는 것 이다. FileUploadData클래스는 서비스에서 생성한 클래스로 업로드를 요청할 때 매개변수(Parameter) 사용이 된다. 즉, 이 클래스에 업로드파일 정보를 지정한후 SaveFileAsync를 호출하고 이 매개변수로 FileUploadData를 지정하면된다.

 이렇게 해서 간단하게 실버라이트에서 파일 업로드 관련 코드를 알아 보았다. 그럼 이제 WCF서비스에서 어떻게 처리하는지 알아 보도록 하자.

[스텝바이스텝 | HOONS닷넷과 함께하는 닷넷 인사이드 – 포토라이트(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의 대략적인 소스 코드와 작동내용에 대해서 알아 보았다. 필자도 실버라이트관련 회사에서 일은 하고 있지만, 아직 경험이 많지않다. 하지만, 지금까지 나왔던 개발이슈및 실버라이트에서 제공하는 기본적인 컨트롤들을 잘 이용해서 이렇게 멋진 어플리케이션을 만들어 보았다. 지금 실버라이트가 어럽다고 생각하시는 분들이 있다면, 그런 생각은 그냥 잠시 있고, 한번 미친듯이 만들어보고, 또 만들어 보자! 그러면 나중에 자신도 모르게 발전해 가는 모습을 볼수 있을 것이다.

 

 

요즘 회사에서 가끔 Silverlight 설치관련 CS건을 처리하고 있다. 몇일 안됐지만 혹시나 설치문제 때문에 고민하고 있는 사람들에게 유용한 정보가 되길 바란다.(또한 나도 잊어 버리지 않기위해 포스팅한다.크큭)

문제1. 예전에 잘 봤는데 어느순간 실버라이트가 안나오는 경우.

거의 대부분은 실버라이트를 분명히 설치해서 잘 보고 있다가 갑자기 어느순간 부터 안되는 경우가 대부분이 아닐까 생각한다. 모 그렇지 안은 경우도 있지만, 몇일 CS를 해보니깐..아무것도 모르는 클라이언트들은 어느순간 갑자기 실버라이트 동영상이 안나온다고 한다. 이는 실버라이트 2에서 3로 되면서 문제 인듯하다. 이럴 때는 그냥 제어판에서 Silverlight를 찾아서 지웠다가 Silverlight 3로 깔면 된다.

이렇게 다시 깔아서 확인해 보고 되면 다행이다. (단, 실버라이트를 제 설치할때는 모든 띄워져 있는 브라우져는 꺼주길 바란다.)

문제2. 1번 과정을 수행후에도 실버라이트를 설치하라고 나옴.

 분명히 실버라이트를 삭제하고, 브라우져를 다 닫은 상태에서 설치를 했음에도 실버라이트를 제 설치하라는 멘트가 나오는 경우가있다. 이럴 경우에는 인터넷 도구 >> 추가기능관리 >> 추가기능 사용 또는 사용안함을 클릭한다. (또는, 인터넷 옵션 >> 프로그램 >> 추가기능관리 클릭!!) 여기에서 실버라이트를 찾아서 사용 안함으로 되어 있는지 확인을 한다. 사용 안함으로 되어 있을 경우 사용함으로 변경하고 확인을 클릭한다. 이후 브라우져를 닫았다가 다시 열어서 확인하면 될 것이다.

문제3. 실버라이트가 제어판에서 안지워져요.

간혹 제어판에서 프로그램을 지우려고 하는데 안지워지는 경우가 있다. 이럴때는 Windows Installer CleanUp 유틸리티를 이용해서 삭제하면된다. (다운로드) 이는 MS제품에 관련해서 삭제가 가능한 유틸리티이다. 자세한 내용은 링크를 확인 하기 바란다. (단, Vista에서는 잘 작동이 안되는 것같다. XP사용자 대상으로 확인 했을 때는 잘 작동했음.)


설치를 다하고 실행을해 보면 위 그림과 같이 띄워질것이다. 여기서 실버라이트를 찾아서 선택을하고 나면 Remove가 활성화가 될 것이다. 이를 클릭해서 지우면 깔끔하게 지워질 것이다. 이렇게 지워다면 1번 내용과 같이 다시 설치해 보라.

문제4. 실버라이트를 지웠는데...실버라이트 설치시 실버라이트가 설치가 되어 있다고 나오는 경우.

 이는 참 특이한 경우다. 오늘 이런 사용자가 있어서 처리 내용을 기록해본다. 실버라이트가 제어판에서 삭제가 되지 않아 3번 과정을 거쳐서 실버라이트를 삭제를 했다. 이후 1번 과정과 같이 제설치를 시도하는데 설치중에 이미 설치가 되어 있다고 나오는 것이다. 그래서 제어판을 확인 하니 아무데도 실버라이트 설치 흔적을 찾을수 없었다. 이상해서 2번 내용과 같이 추가기능관리를 확인을 해봤다. 그런데 거기에 실버라이트 사용이라 되있는게 아닌가...이상한다..분명히 제거 했는데...제거가 잘못 된것 같다고 생각이 되서, 레지스트리에서 Silverlight를 찾아서 제거후 1번과정으로 재설치하니 해결이 됐다.




이상 내가 경험한 몇가지 처리 방법에 대해 작성해 보았다. 나중에 또 이상한게 있으면 계속 업데이트 하겠다.

참고 링크 :  실버라이트 설치 실패를 해결하는 방법

" 실버라이트 EMBED 태그로 띄우기!! "

 별 의미 없는 내용일수도 있다. 하지만 일전의 나의 경험으로 미루어 봤을 때 나에겐 정말 좋은 정보였던 것 같다. 몇 일전 난 내가 만든 실버라이트 애플리케이션을 어떤 사이트에 올리려고 했는데...그 사이트의 보안상의 이유인지 Object태그가 있으면 그 부분을 삭제 또는 Replace 하는 것 이다. 그래서 안되는 가 보다 하고 포기하려는 순간.. 그 몇 일 전에 내가 올릴 유튜브 동영상은 잘 동작하고 있는 것이 생각났다. 그래서 난 플래시인 유튜브 동영상은 잘되는데 왜 실버라이트는 안될까 해서 Debugbar를 이용해서 유투브동영상은 어떻게 되어 있는지 봤다. 그런데 embed태그 아닌가… 그럼 실버라이트도 embed태그를 이용하면 되지 않을까 해서 나의 테스트는 시작 되었다.

 

ㅁ 테스트 프로젝트 구성

 

 

 

위 코드와 같이 아주아주 간단한 실버라이트 프로젝트를 만들어 봤다. (너무 간단한가^^;;;)

그냥 App에서 InitParams로 넘어온 값을 받아서, Page.xaml안에  TextBlock에게 값을 넘겨줘서 뿌려주는 것이다.

 

ㅁ Object 태그 사용

 

 

 결과 그림 )

일반적으로 사용되는 거라 따로 설명이 필요 없을 것이다.

 

ㅁ embed 태그 사용

 

 

 결과 그림 ) 

Object태그에서는 Param 엘리먼트를 이용해서 값을 지정해 주었는데, Embed태그는 어트리뷰트(Attribute)로 값을 지정해 준다.

 

이렇게 해서 테스트 끝!!

결론 : Embed태그를 이용할 수도 있구나!!

Silverlight Object 태그 알아 보기!!

 

 실버라이트 애플리케이션을 만들고, HTML페이지 또는 여러 기타(aspx, php,asp 기타…) 페이지들에 실버라이트 애플리케이션을 등록하기 위해서는 보통 Object태그를 많이 사용할 것 이다. 그래서 이 강좌를 통해서 실버라이트에서 사용 할 수 있는 여러 Object Element의 구성들에 대해서 알아 보고, 잊어 버리지 않도록 잘 정리 해 보려고 한다. 이는 실버라이트를 배포하는데 도움이 되지 않을까 생각이 든다.

 

 ㅁ Object Element의 구성

 

 실버라이트 애플리케이션을 올리기 위한 Object는 크게 다음과 같은 구성 요소로 이루어진다.

 

Element	attribute	필수 여부	설명
object		필수	실버라이트 애플리케이션을 적재하는 HTML 구성 요소
	data	필수, 고정	반드시 "data:application/x-silverlight-2," 으로 설정해야 함.
	type	필수, 고정	반드시 "application/x-silverlight-2" 으로 설정해야 함.
	width	선택	일반 HTML과 같은 크기 조정. “640”과 같은 pixel 단위 혹은 “100%”와 같은 비율로 조정 가능. 단, 비율일 경우 반드시 object 엘리먼트의 부모 엘리먼트가 크기를 가지고 있어야 함.
	height	선택
param		일부 필수	실버라이트 애플리케이션에 전달할 파라미터를 표현하는 구성 요소. 반드시 object 엘리먼트의 자식 노드로 구성되어야 함.
	name	필수	전달할 파라미터의 이름
	value	필수	전달할 파라미터의 값
HTML elements		선택	실버라이트 플러그인이 설치되지 않았거나 실버라이트를 사용할 수 없는 브라우저에 표시할 대체 HTML 구성 요소. 일반적으로 실버라이트 설치를 유도할 수 있는 배너 및 링크가 포함됨.

 

ㅁ Object에 필요한 Param

 

 실버라이트 애플리케이션을 올리기 위해서는 Object는 다음과 같은 Param 엘리먼트를 자식 노드로 포함할 수 있다.

 

 

l  source
실버라이트 애플리케이션 패키지인 XAP파일의 URL를 설정 한다.

l  minRuntiomeVersion
해당 실버라이트 애플리케이션의 동작이 가능한 최소한의 플러그인 버전 설정 한다.
<param name=”minRuntimeVersion” value=”2.0.31005.0” />

l  autoUpgrade
설치된 실버라이트 플러그인의 버전이 minRuntimeVersion보다 낮을 경우 업그레이드 여부를 묻는 프롬프트를 띄우고 자동으로 최신버전으로 업그레이드 할지 여부 설정 한다.

l  splachScreenSource
XAP 파일을 다운로드 받는 동안 보여줄 디자인 표현한 XAML 파일의 URL 를 설정한다.
(단, URL이 상대 경로일 경우 XAP파일의 위치를 기준으로 함)
<param name=”splashScreenSource” value=”Splash.xaml” />

l  background
플러그인이 차지하는 영역의 배경 색상 설정 한다.
(#AARRGGBB 형식의 8자리 문자열로 입력.)

l  maxFrameRate
실버라이트 런타임이 화면을 1초에 몇 번 렌더링하는지 결정하는 수치 설정 한다.
기본값은 60이며 통상 36이상이면 무난한 품질로 렌더링 된다.
<param name=”maxFrameRate” value=”36” />

l  initParams
실버라이트 애플리케이션에 넘겨줄 파라미터를 Key1=value1,Key2=value2 형식으로 설정한다. (주의 – 공백,특수문자를 포함하는 복잡한 문자열은 URL Encode를 하여 전달하는 것이 좋다.)
<param name=”initParams”
value=”Source=http%3a%2f%2ffoo.com%2f %ed%91%b8.wmv” />

l  allowHtmlPopupWindow
퍼가기 시나리오에서 타 도메인에 올라간(크로스 도메인) 실버라이트 애플리케이션이 HTML의 팝업 윈도를 사용할 수 있는지 여부를 설정한다.

l  enableFramerateCounter
디버깅용 프레임 레이트 측정을 허용할지 여부를 설정한다.

l  enableHtmlAccess
크로스 도메인에서 동작하는 실버라이트 애플리케이션 코드가 HTML DOM에 접근하는 것을 허용할지 여부를 설정한다.

l  onError
실버라이트 애플리케이션에서 핸들링 되지 않은 예외 에러가 발생했을 때 호출할 자바스크립트 함수의 이름을 설정한다.

l  onFullScreenChanged
실버라이트 애플리케이션이 전체화면으로 되거나 보통 화면으로 돌아왔을 때 호출할 자바스크립트 함수의 이름을 설정한다.

l  onLoad
실버라이트 애플리케이션이 로드를 완료했을 때 호출할 자바스크립트 함수의 이름을 설정한다.

l  onResize
실버라이트 애플리케이션을 포함하는 plug-in의 크기가 변했을 때 호출할 자바스크립트 함수의 이름을 설정한다.

l  onSourceDownloadCompleted
source에 설정한 XAP 파일의 다운로드가 완료되었을 때 호출할 자바스크립트 함수의 이름을 설정한다.

l  onSourceDownloadProgress
source에 설정한 XAP 파일의 다운로드 진행율이 변경되었을 때 호출할 자바스크립트 함수의 이름을 설정합니다.

l  windowless
실버라이트 플러그인을 렌더링할 때 윈도를 사용하지 않을지 여부를 설정합니다. Windowless 모드는 기본값이 false이며, 특별한 경우가 아니면 사용하지 않습니다.

실제 사용 코드는 아래와 같다.

Object 태그

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">  <param name="source" value="ClientBin/TestProject01.xap"/>  <param name="onerror" value="onSilverlightError" />  <param name="background" value="white" />  <param name="minRuntimeVersion" value="2.0.31005.0" />  <param name="autoUpgrade" value="true" />  <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">  <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>  </a> </object>

 ( 위 코드는 기본 생성 코드입니다.)

위 코드와 필요에 따라 위에서 알아봤던 엘리먼트를 추가하면 되는 것이다.

HOONS닷넷 UX 세미나를 진행합니다. 내용은 다음과 같습니다.
사전등록 주소: http://www.devmento.co.kr/dtfe/devntech/comm_seminar.jsp