세티의 Lonely Star

원본: http://msdn.microsoft.com/en-us/library/bb404703(VS.95).aspx

본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

안녕하세요. 엘리 입니다.

이번 시간은 Silverlight-기반 응용 프로그램 개발에 대한 주요 기능과 예제 코드를 사용하여 Silverlight 기반 응용 프로그램을 만드는 일반적 절차를 소개하려고 합니다.

이번 시간에는 다음 항목들을 개략적으로 알아보는 시간을 갖습니다.

· 전제 조건

· 응용 프로그램에 Silverlight 통합

· XAML

· 레이아웃

· 컨트롤

· 코드 로직 추가하기

· 동적 언어

· 그래픽

· 미디어와 애니메이션

· 데이터

· 네트워킹

· Silverlight Base Class Library

· 관련 항목

전제 조건

예제 실행에는 Silverlight 2 베타 2 런타임만 설치해도 되지만 우리는 직접 개발을 하는 임무이므로 아래 항목들을 모두 설치하도록 합니다. ^^

· Silverlight 2 베타 2

· Silverlight 2 베타 2 SDK

· Visual Studio 2008 (90일 평가판)

· Visual Studio 2008용 Silverlight Tools 베타 2

Silverlight-기반 응용 프로그램을 만들기 위해 Silverlight 응용 프로그램 만들기의 설명을 참고하시기 바랍니다.

응용 프로그램에 Silverlight 통합

Silverlight-기반 응용 프로그램은 HTML 페이지에서 Silverlight 플러그-인에 의해 로드됩니다. HTML 페이지를 Silverlight 플러그-인으로 전체를 채우거나 페이지의 일부에만 사용할 수도 있습니다. 기본적으로 Visual Studio 프로젝트에서는 페이지의 width와 height 값을 100%로 차지하는 플러그-인을 만들 것입니다. 좀 더 자세한 내용은 Silverlight 플러그-인 예시 (Silverlight 2)를 참고하시기 바랍니다.

응용 프로그램의 일부에만 Silverlight를 적용한다면, Silverlight 코드와 관리되는 코드에서 HTML 페이지로 호출할 수 있습니다. 이를 수행하는 방법의 자세한 사항은 HTML 연결: HTML과 관리되는 코드에서 상호 작용를 참고하시기 바랍니다. ASP.NET 페이지가 있다면, 여러분의 페이지에 MediaPlayer 컨트롤 또는 Silverlight 서버 컨트롤을 포함시킬 수 있습니다. 이에 대해 자세한 정보는 ASP.NET 웹 페이지와 Silverlight 통합을 참고하시기 바랍니다.

XAML

XAML은 Silverlight 기반 응용 프로그램의 UI를 정의하는 선언적 마크업 언어입니다. 새로운 Visual Studio 프로젝트를 만들 때, Page.xaml 파일이 동적으로 만들어집니다. XAML 파일에 XML을 사용하여 특성들을 정의하고 개체를 만들 수 있습니다. XAML에 대한 좀 더 자세한 정보는 XAML 개요 (Silverlight 2)를 참고하세요.

Silverlight 응용 프로그램 추가 창의 옵션을 이 프로젝트 안에 Silverlight를 호스팅할 HTML 테스트 페이지를 동적으로 생성으로 선택하고 Silverlight 프로젝트를 생성합니다. 그리고 Page.xaml 파일을 열어 Grid 엘리먼트 안쪽에 아래 코드를 작성합니다.

Ctrl + F5 키를 눌러 실행하거나 미리보기 창에서 빠르게 아래와 같은 결과를 확인합니다.

UI를 만들기 위해 XAML 파일을 직접 작성하거나 Microsoft Expression Blend를 사용할 수 있습니다. Expression Blend는 Silverlight-기반 응용 프로그램을 만들 수 있는 WYSIWYG 디자인 툴입니다. Expression Blend는 직접 편집할 수 있는 XAML 파일을 생성하고 Expression Blend로 코드-비하인드 파일을 작성하고 이벤트를 연결할 수도 있습니다. 좀 더 자세한 정보는 Microsoft Expression Blend를 사용한 Silverlight 퀵스타트를 참고하시기 바랍니다.

 

레이아웃

Silverlight는 UI 레이아웃에 해당하는 3가지 패널을 제공합니다. 그 중 기본적 패널인 Grid는 가장 확장성이 있는 강력한 레이아웃 패널입니다.

 

컨테이너	설명
Canvas	x,y 공간에 절대적 자식 엘리먼트를 위치시킵니다.
StackPanel	수평이나 수직 스택에 관련 자식 엘리먼트를 위치 시킵니다.
Grid	행과 열에 자식 엘리먼트를 위치 시킵니다.

 

기존의 Page.xaml 파일에 아래 코드를 사용하여 수정합니다. 아래 예제에서 Rectangle 엘리먼트는 grid의 1,1 셀에 위치 되어 있습니다. Grid는 제로-베이스 (0부터 시작하는 인덱스)를 사용하므로 rectangle은 우측 하단 셀에 나타납니다.

 

XAML

<Grid ShowGridLines=”True”>     <Grid.ColumnDefinitions>         <ColumnDefinition/>         <ColumnDefinition/>     </Grid.ColumnDefinitions>     <Grid.RowDefinitions>         <RowDefinitions/>         <RowDefinitions/>     </Grid.RowDefinitions>       <Rectange Fill=”Red” Width=”150” Height=”100” Grid.Column=”1” Grid.Row=”1”/> </Grid>

 

아래 그림은 위 코드가 어떻게 표현되는지 보여줍니다.

레이아웃에 좀 더 자세한 정보는 개체 위치 및 레이아웃 (Silverlight 2)를 참고하시기 바랍니다.

 

컨트롤

Silverlight 컨트롤은 컨텐트나 다른 컨트롤을 호스트하는 것과 상태가 변경되는 디스플레이를 나타내는데 사용합니다. 컨트롤은 Button이나 TextBox같은 사용자 상호 작용이 가능한 엘리먼트에서 DataGrid같은 정보의 복잡한 레이아웃 엘리먼트까지 기능적으로 사용 가능합니다. 모든 컨트롤의 목록은 컨트롤 갤러리에서 보실 수 있습니다.

 

Silverlight는 컨트롤이 어떻게 보여져 영향을 주는 각 컨트롤을 위한 기본 템플릿으로 나타납니다. 그러나 여러분은 모든 컨트롤의 외관과 시각 움직임을 변경하여 사용자 지정 템플릿을 만들 수 있습니다. 좀 더 자세한 정보는 컨트롤 사용자 지정화를 참고하시기 바랍니다.

 

아래 예제는 이 전 예제에서 grid의 0,0 셀에 button 하나를 추가하여 만듭니다.

 

XAML

<Grid ShowGridLines=”True”>     <Grid.ColumnDefinitions>         <ColumnDefinition/>         <ColumnDefinition/>     </Grid.ColumnDefinitions>     <Grid.RowDefinitions>         <RowDefinitions/>         <RowDefinitions/>     </Grid.RowDefinitions>     <Button Height=”25” Width=”100” Grid.Column=”0” Grid.Row=”0”/>     <Rectange Fill=”Red” Width=”150” Height=”100” Grid.Column=”1” Grid.Row=”1”/> </Grid>

 

아래 그림은 위 코드가 어떻게 표현되는지 보여줍니다.

코드 로직 추가하기

기본적으로 여러분의 Visual Studio 프로젝트는 코드 파일 하나를 포함하고 있는데, 코드-비하인드 파일이라 부릅니다. 그 코드 파일은 C#이나 Visual Basic같은 공통 언어 런타임 (CLR)을 통해 Silverlight에 의해 지원되는 관리되는 언어 중 하나입니다. CLR과 Silverlight의 좀 더 자세한 정보는 공통 언어 런타임 개요를 참고하세요.

 

코드-비하인드 파일 이름은 Page.xaml에 해당하는 Page.xaml.cs 같이 생성됩니다.. 코드-비하인드 파일은 XAML 개체에 로직을 적용할 수 있습니다. 코드에 UI 개체를 만들 수 있고 여러분의 시각 엘리먼트 트리에 그것들을 추가할 수 있습니다. 그리고 코드-비하인드 파일에서 (또한 프로젝트에 포함된 어떤 코드 파일에도) 만들어진 클래스는 XAML로부터 액세스될 수 있습니다. 예를 들어, 자신의 컨트롤을 정의하고 그 다음 XAML에 그 인스턴스를 만들 수 있습니다. 좀 더 자세한 정보는 XAML Namescopes (Silverlight 2)와 XAML and Mapping Custom XML Namespace Values (Silverlight 2)를 참고하시기 바랍니다.

 

다음 예제는 파란색 사각형의 색을 변경하는 Click 이벤트 처리기를 추가합니다.

 

XAML에서 Button에 Click 이벤트와 Rectangle에 x:Name 속성을 추가합니다. x:Name은 코드-비하인드 파일에서 rectangle을 참조할 때 사용합니다.

 

XAML

<Button Height=”25” Width=”100” Grid.Column=”0” Grid.Row=”0” Click=”Button_Click”/> <Rectangle x:Name=”rect1” Fill=”Red” Width=”150” Height=”100” Grid.Column=”1” Grid.Row=”1”/>

 

코드-비하인드 파일에서 Click 이벤트 처리기를 정의합니다. 이벤트를 사용하는 것에 대한 좀 더 자세한 정보는 이벤트 개요 (Silverlight 2)를 참고하시기 바랍니다.

 

C#

private void Button_Click(object sender, RoutedEventArgs e) {     rect1.Fill = new SolidColorBrush(Colors.Blue); }

 

아래 그림은 위 코드가 어떻게 표현되는지 보여줍니다.

이 예제 실행

 

동적 언어

Silverlight는 Silverlight-기반 응용 프로그램을 작성하기 위한 파이썬 (Python)과 루비 (Ruby) 같은 동적 언어의 사용자를 가능하게 하는 동적 언어 런타임 (DLR)을 포함합니다. 동적 언어는 어셈블리로 컴파일하지 않는 소스 코드로 패키지화 되어 있고 코드는 실행 때 컴파일 되고 생성될 수 있습니다. 그것들은 확장성, 상호적 개발 형식이 적절합니다. Silverlight는 3개의 동적 언어를 포함합니다: IronPython과 IronRuby, 관리되는 Jscript. 좀 더 자세한 정보는 Silverlight 2 동적 언어를 참고하세요.

 

그래픽

Silverlight는 여러분의 응용 프로그램에 재미있는 기능을 추가하기 위해 많은 옵션을 제공합니다. 여러분은 drawing과 shapes, paths, 복잡한 도형들을 사용할 수 있습니다. 도형으로 정의된 영역은 brushes를 사용함으로서 images나 color gradients, video clips 같은 효과로 채워질 수 있습니다. 좀 더 자세한 정보는 Shapes and Drawing (Silverlight 2), Geometries (Silverlight 2), Brushes (Silverlight 2)를 참고하시기 바랍니다.

 

여러분은 여러분의 응용 프로그램에 이미지와 이미지 효과들을 추가할 수 있습니다. Silverlight는 또한 쉽게 줌을 사용하고 크게 상세한 이미지를 회전을 허용하는 Deep Zoom을 포함합니다. 좀 더 자세한 정보는 이미지 (Silverlight 2)와 Deep Zoom을 참고하시기 바랍니다.

 

아래 예제는 선형 그레디언트 브러쉬로 사각형을 채웁니다.

 

XAML

<Rectangle x:Name=”rect1” Width=”150” Height=”100” Grid.Column=”1”, Grid.Row=”1”>     <Rectangle.Fill>         <LinearGradientBrush>             <GradientStop Offset=”0” Color=”LightBlue”/>             <GradientStop Offset=”0.4” Color=”Blue”/>             <GradientStop Offset=”0.8” Color=”Purple”/>             <GradientStop Offset=”1.0” Color=”Lavender”/>         </LinearGradientBrush>     </Rectangle.Fill> </Rectangle>

 

아래 그림은 위 코드가 어떻게 표현되는지 보여줍니다.

미디어 및 애니메이션

정적 그래픽뿐만 아니라 좀 더 동적이고 상호적인 여러분의 응용 프로그램을 만들기 위해 여러분은 애니메이션과 오디오, 비디오를 추가할 수 있습니다. 좀 더 자세한 정보는 애니메이션 개요 (Silverlight 2)와 오디와  비디오 개요 (Silverlight 2)를 참고하세요.

 

다음 예제는 Stop 버튼이 클릭되기까지 늘었다 줄었다하는 이전 예제로 사각형을 만듭니다.

 

XAML

<Grid ShowGridLine=”True”>     <Grid.ColumnDefinitions>         <ColumnDefinition/>         <ColumnDefinition/>     </Grid.ColumnDefinitions>     <Grid.RowDefinitions>         <RowDefinition/>         <RowDefinition/>     </Grid.RowDefinitions>       <Grid.Resources>         <Storyboard x:Name=”AnimateRectangle”>             <DoubleAnimation Storyboard.TargetName=”rect1”                                 Stroyboard.TargetProperty=”Height” From=”0” To=”100” AutoReverse=”True” Duration=”0:0:02” RepeatBehavior=”Forever”/>             <DoubleAnimation Storyboard.TargetName=”rect1”                                 Stroyboard.TargetProperty=”Width” From=”0” To=”100” AutoReverse=”True” Duration=”0:0:04” RepeatBehavior=”Forever”/>         </Storyboard>     </Grid.Resources>       <Button Height=”25” Width=”100” Grid.Column=”0” Grid.Row=”0” Content=”Stop” Click=”Button_Click”/>     <Rectangle x:Name=”rect1” Width=”150” Height=”100” Grid.Column=”1”  Grid.Row=”1” Loaded=”OnLoaded”>         <Rectangle.Fill>             <LinearGradientBrush>                 <GradientStop Offset=”0” Color=”LightBlue”/>                 <GradientStop Offset=”0.4” Color=”Blue”/>                 <GradientStop Offset=”0.8” Color=”Purple”/>                 <GradientStop Offset=”1.0” Color=”Lavender”/>             </LinearGradientBrush>         </Rectangle.Fill> </Rectangle> <Button Height=”25” Width=”100” Grid.Column=”0” Grid.Row=”1” Content=”Start” Click=”Button_Click_1”/>   </Grid>

 

C#

private void OnLoaded(object sender, RoutedEventArgs e) {     AnimateRectangle.Begin(); }   private void Button_Click(object sender, RoutedEventArgs e) {     AnimateRectangle.Pause(); }   private void Button_Click_1(object sender, RoutedEventArgs e) {     AnimateRectangle.Resume(); }

 

이 예제 실행

 

데이터

많은 Silverlight-기반 응용 프로그램은 데이터와 함께 작동합니다. 여러분은 DataGrid와 ListBox 같은 컨트롤을 사용하여 데이터 셋을 나타낼 수 있습니다. UI를 두기 위해, 여러분은 Data Binding을 사용할 수 있습니다. 여러분의 데이터 개체에 여러분의 UI를 바인딩한다면, 동적으로 개체에 업데이트는 여러분의 UI에 전달됩니다.

 

데이터는 RSS 피드 같은 다양한 소스로부터 여러분의 응용 프로그램으로 나타날 수 있지만 대개 그것은 XML 포맷에 있습니다. Silverlight는 XML 데이터 파싱을 위해 XmlReader와 LINQ를 포함하고 있습니다. LINQ는 여러분이 작게 데이터 조각을 파싱한다면 장점을 가지고 있습니다. 좀 더 자세한 정보는 Silverlight에 XML 데이터 파싱을 참고하세요.

 

네트워킹

Silverlight는 네트워크에서 통신을 위해 몇몇의 기능을 제공합니다. WebClient 클래스는 클라이언트에 다운로드 되는 컨텐트를 처리합니다. 여러분은 또한 Plain XML 메시지를 보내고 받기 위해 WebClient를 사용할 수 있습니다. 또한 여러분의 Silverlight-기반 응용 프로그램은 Windows Communication Foundation (WCF)와 SOAP, ASP.NET AJAX 같은 웹 서비스를 액세스할 수 있습니다. 좀 더 자세한 정보는 네트워킹과 통신을 참고하세요.

 

Silverlight Base Class Library

Silverlight는 문자열 처리와 컬렉션 작업, 예외 처리 같은 핵심 프로그래밍 업무를 위한 .NET Framework 부분 집합으로 나타납니다. 그것은 모든 기본 데이터 형식을 위한 클래스와 예외 처리, 이벤트와 이벤트 처리, 컬렉션, 쓰레딩, 동기화를 포함합니다. 좀 더 자세한 정보는 Silverlight에서 Common Language Runtime 및 Base Library를 참고하세요.

 

참고 항목

검토: Silverlight로 시계 만들기

Silverlight 퀵스타트 문서

Silverlight 아키텍쳐

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight(Tools, Tech.)' 카테고리의 다른 글

[Expression Media] 1. Expression Media란?  (0)	2009/07/04
[엘리의 실버라이트 2.0] Silverlight 시계 만들기 (1)  (2)	2008/10/21
[엘리의 실버라이트 2.0] Silverlight 시작  (6)	2008/10/02
[엘리의 실버라이트 2.0] 관리되는 코드에서 HTML DOM에 액세스  (3)	2008/09/21
[엘리의 실버라이트 2.0] Syndication Feeds 액세스  (0)	2008/09/11
[엘리의 실버라이트 2.0] Plain XML 보내기 • 받기  (0)	2008/09/06

원본: http://silverlight.net/Quickstarts/Remote/ed86e719-0da0-49e1-a9e1-b31f483070d4.aspx

본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

안녕하세요. 엘리입니다.

이번 시간은 RSS 2.0 또는 Atom 1.0과 같은 Syndication 서비스에 액세스할 수 있는 Silverlight 클라이언트를 만들어 보도록 하겠습니다.

사전 준비 사항

- Silverlight 2 베타 2

- Visual Studio 2008 (90일 평가판)

- Visual Studio 2008용 Silverlight Tools 베타 2

- Silverlight SDK 2.0 베타 2

Silverlight 웹 서비스 지원에 대해서 좀 더 자세한 정보는 Silverlight 웹 서비스 예제를 참고하시기 바랍니다.

먼저 Silverlight 클라이언트 응용 프로그램을 만들어 보도록 하겠습니다.

1. Visual Studio 2008을 열어 파일 – 새 프로젝트를 선택합니다. 프로젝트 형식을 Silverlight로 선택하고 Silverlight 응용 프로그램 템플릿을 선택합니다.

2. 프로젝트 이름을 원하는 것으로 입력하시고 확인을 클릭합니다. 저 같은 경우는 EloiSyndication으로 하였습니다.

3. Silvierlight 응용 프로그램 추가 창에서 이 프로젝트 안에 Silverlight를 호스팅할 HTML 테스트 페이지를 동적으로 생성을 선택하고 확인을 클릭합니다.

Silverlight 응용 프로그램에서 Syndication 관련 작업을 위해 System.ServiceModel.Syndication.dll을 참조에 추가합니다.

1. 솔루션 탐색기에서 참조를 마우스 우측 클릭을 하여 참조 추가를 선택합니다.

3. 웹 서비스를 호출하기 위해 WebClient를 만들고 DownloadStringAsync(Uri) 메서드를 호출합니다. 호출하기 원하는 웹 서비스에 파라미터로 URI를 전달합니다.

 

4. 웹 서비스 호출의 결과값을 알기 위해, 웹 클라이언트에 DownloadStringCompleted 이벤트를 사용합니다. 그리고 웹 서비스 결과값을 얻기 위해 DownloadStringCompletedEventArgs의 Result 속성을 사용합니다. 결과값을 추가로 처리하거나 단지 사용자에게 결과값을 보여주기만 할 수도 있습니다. 웹 서비스 호출에 에러가 발생했는지 알기 위해서 이벤트 인수의 Error 속성을 사용합니다.

 

다음 예제는 Digg 웹 서비스에 요청을 보내는 방법과 XML로 응답을 돌려받는 방법에 대해서 보여줄 것입니다. 텍스트 박스에 숫자를 입력하고 버튼을 클릭하면 응답으로 XML을 볼 수 있습니다. Digg 웹 서비스가 다른 도메인에 있더라도 Digg 웹 서비스가 크로스 도메인을 호출을 지원하기 때문에 이 요청은 작동할 것입니다.

 

page.xaml 파일을 열어 아래 코드를 입력합니다.

 

CS

<UserControl x:Class="EloiShowPox.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     FontFamily="맑은 고딕" FontSize="11"     Width="500" Height="600">     <!—UserControl에 border를 설정합니다.--> <Border BorderBrush="Black" BorderThickness="2" >         <StackPanel Orientation="Vertical">             <TextBlock  Margin="5" Text="POX 예제" />             <!—StackPanel에 TextBlock과 TextBox 두 엘리먼트를 수평으로 지정하기 위해 Orientation 속성을 Horizontal로 설정합니다.--> <StackPanel Orientation="Horizontal" Margin="5">                 <TextBlock VerticalAlignment="Center"                    Text="텍스트 박스에 숫자를 입력하세요: (1-4) " />                 <TextBox x:Name="numTextBox" Width="20" />             </StackPanel>             <!—Button_Click 이벤트 핸들러를 설정합니다.--> <Button Width="160" HorizontalAlignment="Left" Margin="5"               Content="웹 서비스에서 응답 받기"                 Click="Button_Click" />             <!—POX가 올 TextBlock 자리입니다.-->             <TextBlock x:Name="resultBlock" Grid.Row="3" TextWrapping="Wrap" />         </StackPanel>     </Border> </UserControl>

 

다음으로는 page.xaml.cs 파일을 열어 아래 코드를 작성합니다.

 

CS

using System; using System.Collections.Generic; using System.Linq; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Net;   namespace EloiShowPox {     public partial class Page : UserControl     {         WebClient client = new WebClient();           public Page()         {             InitializeComponent();             // 이벤트와 핸들러를 지정합니다. client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);         }           private void Button_Click(object sender, RoutedEventArgs e)         {             // numTextBox에 입력한 숫자만큼의 이미지 관련 POX를 가져옵니다. string url1 = "http://services.digg.com/galleryphotos?count=" +                 numTextBox.Text +                 "&appkey=http%3A%2F%2Fwww.silverlight.net";             // DownloadStringAsync(Uri) 메서드를 사용하여 문자열로 요청             client.DownloadStringAsync(new Uri(url1));         }         // DownloadStringCompleted 이벤트 핸들러 void client_DownloadStringCompleted(object sender,             DownloadStringCompletedEventArgs e)         {             // DownloadStringCompletedEventArgs의 Result 속성을 사용하여 TextBlock에 해당 내요을 표시합니다.(POX 메시지나 에러 메시지가 출력되겠지요? ^^) if (e.Error == null)             {                 resultBlock.Text = e.Result;             }               else                 resultBlock.Text = e.Error.Message;         }     } }

 

응용 프로그램을 실행시키면 page.xaml에 작성한 resultBlock 이름으로 지정한 TextBlock에 Digg 웹서비스에서 받은 POX가 표시됩니다. (정상적일 경우 ^^~)

 

참고 사항

WebClient 클래스

이번 시간은 여기까지입니다. 다음 시간에는 Silverlight에서 Syndication Feeds에 액세스하는 것에 대해서 함께 알아보겠습니다. 추석이 다가오네요. 풍성한 추석 보내시고 건강하세요~^^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

8. EloiSplashScreen.js 파일을 열어 기존의 코드를 모두 삭제하고 아래 코드를 코딩합니다. onSourceDownloadProgressChanged 함수는 프로그레스 바를 업데이트하게 됩니다.

9. EloiSplashScreenTestPage.html 파일로 돌아가 EloiSplashScreen.js 파일을 참조하는 코드를 head 태그에 추가합니다.

10. 프로젝트를 빌드하고 컴파일을 확인합니다. EloiSplashScreenTestPage.html 파일이 로드되면 스플래시 스크린이 로드되고 Mission Success 텍스트가 나타날 것입니다.

Mission Success~!!!

다음 시간에는 Silverlight 데이터 컬렉션에 대해서 알아보도록 하겠습니다.

주위에서 감기 얘기가 조금씩 들리네요. 환절기 감기 조심하세요. ^.^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

안녕하세요. 엘리 입니다.

오늘은 지난 시간에 이어 Silverlight 입력 이벤트 핸들러 작성에 대해서 알아보도록 하겠습니다.

입력 이벤트와 라우트된 이벤트, 입력-특화 이벤트 데이터 (Input-Specific Event Data)

이번 시간에는 이전 시간에 소개한 CLR의 관리되는 코드에서 핸들링되는 이벤트와 XAML 파일의 엘리먼트 속성을 이용하여 참조하는 방법, 다른 이벤트 핸들러를 소개할 것입니다. 이전 시간에 만든 핸들러를 수정하여 Silverlight 입력이벤트에 특화된 중요한 두 개념을 설명을 할 것입니다. (입력-특화 이벤트 데이터는 말이 좀 이상할 수 있습니다. 영문을 함께 표기했으니 의미로 파악하시면 좀 더 나을 것 같습니다. ^.^*)

StackPanel에 핸들러 추가하기

1. Page.xaml 파일을 열어서 StackPanel 엘리먼트에 MouseLeftButtonDown 이벤트의 핸들러를 추가합니다. 핸들러 명명은 인텔리센스 항목의 새 이벤트 처리기를 선택하여 LayoutRoot_MouseLeftButtonDown으로 지정된 이름을 사용하세요.

2. Canvas 엘리먼트 뒤에 StackPanel의 자식 엘리먼트로 아래의 엘리먼트를 추가합니다.

3. 다음으로는 사용하는 언어에 따라 Page.xaml.cs 또는 Page.xaml.vb 파일을 열어 LayoutRoot_MouseLeftButtonDown 핸들러에 대한 아래 코드를 추가합니다.

4. 컴파일 후 응용 프로그램을 실행시킵니다. (F5 키 이용하시는 것 기억하고 계시죠? ^^)

Canvas 엘리먼트를 클릭하세요. 이전 시간에 실행했을 때와 같이 컬러가 변경되는 것을 확인하실 수 있습니다.

그러나 이 이벤트는 부모 엘리먼트인 StackPanel에 의해 핸들링 된 것이고 마우스 이벤트 데이터에서 발생한 정보가 TextBlock 엘리먼트에 표시된 것입니다. 이것은 라우트된 이벤트를 잘 설명해주고 있는 좋은 예입니다.

Canvas 엘리먼트에 의해서 이벤트가 발생한 것이지만 부모 엘리먼트인 StackPanel의 핸들러로 전달되어진 것입니다. 루트엘리먼트인 UserControl에 핸들러를 지정해두었다면, 그 이벤트는 또한 UserControl 엘리먼트로 전달되어졌을 것입니다. 위 그림을 보셔도 Canvas1 영역을 클릭했는데 해당 이벤트 결과인 Canvas1 영역의 컬러가 변경도 되었지만 StackPanel의 이벤트 결과인 source와 각 좌표 값이 나타난 것을 볼 수 있습니다.

모든 Silverlight 이벤트가 라우팅 습성을 가지지는 않고 불과 몇몇의 입력 이벤트들만 라우트 습성을 가지고 있습니다. 이런 라우트되는 이벤트들은 UIElement 기본 클래스에 의해서 정의된 것들이고 마우스나 키보드에 의해 발생한 입력 이벤트들입니다. UIElement에 의해 정의된 이벤트에 대해 좀 더 자세히 알고 싶으시면 SDK 참고 문서를 확인하시고 특별히 라우팅 습성을 가진 이벤트들을 주의 깊게 확인해보시기 바랍니다.

LayoutRoot_MouseLeftButtonDown은 이벤트 데이터로부터 Source의 값을 받습니다. 이것이 실제로 이벤트를 발생한 엘리먼트이고 이벤트가 라우팅될 때 이벤트를 처음으로 핸들링하게 됩니다. 그리고 가끔 TextBlock의 텍스트인 “Canvas1”이나 “Canvas2”를 클릭했을 때 Source의 이름이 나타나지 않는 경우가 있습니다. 이런 현상은 현재 TextBlock 엘리먼트에 이름을 주지 않았기 때문에 “Canvas1”이나 “Canvas2”를 클릭했을 때 StackPanel에 이름을 표시하지 않는 것입니다. 그래서 실제로는 StackPanel에 핸들러가 나타나기 전에 라우팅이 일어난 것입니다.

이것은 라우팅된 입력 이벤트의 가치와 목적을 설명하는 것입니다. 여러분이 UI를 만들 때, 기존 컨틀롤과 함께 코드를 만들어가는 경우와 사용자 컨트롤의 조합물을 정의할 때 조합물의 부분으로 핸들러를 작성해야할지 조합물을 포함하고 있는 부모에 대한 코드를 작성해야 할 지는 언제나 명확하지 않습니다. 이벤트 라우팅은 각각의 경우 또는 두 경우 모두 제공합니다.

또한 LayoutRoot_MouseLeftButtonDown은 특별히 이벤트 데이터 (마우스 이벤트가 발생한 곳의 X, Y 좌표를 알려주는 데이터)와 관련된 마우스 이벤트를 가장 유용하게 보여주는 예입니다. 좌표값은 GetPosistion에서 전달 받습니다. GetPosistion은 속성이 아닌 메서드인데, 좌표의 기준이 될 틀을 지정함으로써 관련된 좌표를 쉽게 알 수 있습니다.

전체 Silverlight 영역 내의 좌표를 얻기 위해서는 간단히 GetPosition에 null 값을 주면 됩니다. 그외에 Silverlight 객체 트리에 연결된 어떤 엘리먼트도 지정해줄 수 있습니다. (이 것은 이벤트 라우트 경로에 직접적으로 포함된 객체일 필요는 없습니다.) 인자로 전달되는 대부분 일반적 객체는 이벤트 Source입니다. 그래서 핸들러가 부모 엘리먼트에서 처리되어도 마우스 이벤트가 발생한 객체의 상대적인 위치를 유지할 수 있습니다. 이외에 다른 방법들도 많이 있는데, 연관된 트랜스폼에 대해 정확히 프레임 객체에 대한 참조를 넘길 수도 있습니다.

이벤트 핸들러에서 Handled 사용하기

이벤트 라우팅은 아주 유용하지만 특정 입력 이벤트에만 라우팅되고 그 외에 다른 이벤트 핸들러에는 전달되지 않기를 원하는 경우가 있을 것입니다. 다행히 여러분은 라우팅되는 이전 시점에서 이미 다른 핸들러에 의해 호출되었던 사실을 보고할 수 있는 이벤트 핸들러를 작성할 수 있습니다. 이 것을 하기 위해 이벤트 데이터 내에 Handled의 값을 추가해야 합니다.

다음은 handler 로직에 Handled 추가하는 방법입니다.

1. Page.xaml.cs 또는 Page.xaml.vb 파일을 열어 LayoutRoot_MouseLeftButtonDown 핸들러에 Handled를 true로 설정합니다.

2. 다음으로는 Canvas1_MouseLeftButtonDown 핸들러에 Handled에 true 값을 추가합니다. VisualBasic 예제에서 Canvas2_MouseLeftButtonDown 핸들러를 추가하였다면 동일하게 추가합니다. statusText의 값은 빈 칸으로 둡니다. (statusText에 값 지정 시 어떤 변화가 있는지는 아무 값을 넣어보고 컴파일 후 실행보시기 바랍니다.)

3. 컴파일 후 응용 프로그램을 실행합니다.

Canvas 엘리먼트를 클릭해보세요. 전에 실행했던 것처럼 컬러가 변경됩니다. 그러나 그 이벤트가 부모 엘리먼트인 StackPanel에 의해 핸들링되지는 않는다는 것을 알 수 있습니다. Canvas 핸들러가 실행되어진 후에 어떤 핸들러도 함께 라우팅이 되지 않았습니다. 이는 Handled가 true로 설정을 되었기 때문에 이벤트 라우팅이 이루어지지 않은 것입니다.

WPF (Windows Presentation Foundation)의 라우팅된 이벤트에 대해 잘 알고 있다면, 라우팅된 이벤트 시스템의 특성의 작은 차이점 있다는 것을 알 수 있을 것입니다. WPF에서는 이벤트 데이터를 Handled=true로 설정하면 대부분 핸들러를 호출되지 않게 할 수 있습니다. 그러나 “handleEventsToo” 핸들러는 Handled=true를 설정한 이벤트도 여전히 호출하게됩니다. Silverlight는 이와 비슷한 기술을 지원하지 않습니다. 이벤트 데이터를 Handled=true로 설정한 것은 항상 라우팅되지 않습니다.

키보드 이벤트 

키보드 이벤트도 라우팅된 이벤트입니다. 마우스 포인터 위치 X/Y 좌표 값을 전달하듯이 키보드 이벤트 데이터 키를 누르거나 키에서 손을 뗄 때 키의 특정 값을 전달합니다

키보드 이벤트는 또한 기능 키의 개념을 가지고 있습니다. 대부분 기능 키들은 SHIFT 키 또는 CTRL 키입니다. 일반적으로 다른 키와 동시에 기능 키를 누를 때 키보드 이벤트가 발생을 하게 됩니다.

여러분이 추가한 엘리먼트는 본래부터 포커스를 가지고 있지 않습니다. 탭 순서에 따라 멈출 수 있고 포커스를 얻을 수 있는 UI 컨트롤을 추가하고 싶을 것입니다. 컨트롤은 키보드 이벤트가 발생하기 위해서 포커스 되어져야할 것이지만 키 이벤트는 컨트롤 보다 하위 단계에 정의되어 있습니다. 그래서 panel 같이 포커스를 가질 수 없는 컨트롤이 아닌 것들도 라우팅을 통해 포거스를 핸들링 할 수 있습니다.

다음은 핸들러 로직에 Handled 추가하는 방법입니다.

1. Page.xaml.cs 또는 Page.xaml.vb 파일을 열어 LayoutRoot로 명명된 StackPanel에 KeyDown 이벤트 핸들러를 추가합니다. 인텔리센스를 사용하여 LayoutRoot_KeyDown 핸들러를 추가하여 아래 코드를 코딩합니다.

3. 컴파일 후 응용 프로그램을 실행시킵니다.

브라우저에서 탭 키를 누릅니다. 한 번 탭 키를 누르면 Silverlight 컨텐트 내에 포커스가 있는데, 유일하게 포커스가 가능한 엘리먼트는 버튼입니다. Hello 버튼이 포커스를 가지고 있는 동안 CTRL+G 키를 누르면 부모인 StackPanel로 이벤트가 라우팅 되고 그 핸들러는 statusText를 변경하게 됩니다.

참고 사항

이벤트 개요

마우스 지원

키보드 지원

이 번 시간은 여기까지입니다. 다음 시간에는 Silverlight 응용 프로그램을 다운로드 받을 때 로딩되는 진행 상황 등을 알려주는 임시 (준비) 페이지 만들기에 대해서 알아보겠습니다.