세티의 Lonely Star

앞에서 언급했듯이 Expression Media를 이용하면 전문가가 아니어도 매우 간단한 작업만으로 원하는 형태의 문서를 만들어 낼 수 있습니다.

본 실습을 위해 먼저 Expression Media를 설치해야 합니다. Try 버전은 다음의 주소에서 다운로드 받을 수 있습니다. (EM 다운로드 받기 : http://www.microsoft.com/downloads/details.aspx?FamilyId=CD359E7D-FD27-4901-BAFF-6D564CFBD700&displaylang=en )

다운로드가 완료되면 설치 후 EM을 실행합니다.
평가판 이기에 계속 버튼을 클릭하고 진행합니다.

이제 몇 가지 이미지를 추가해서 웹 문서 형태의 포토 갤러리를 생성해 보겠습니다.
로컬 컴퓨터에 있는 이미지 몇 장을 선택합니다.

선택한 이미지를 Expression Media에 끌어다 놓습니다.
아래의 이미지 처럼 작업 영역에 사용할 미디어 파일이 추가되어 있는 것을 확인할 수 있습니다.

Expression Media 상단 메뉴에서 "만들기"를 선택하고 HTML 갤러리를 선택합니다.

그러면 HTML 옵션창이 활성화 됩니다.
테마탭의 사이트 제목란에 적당한 이름을 적어 줍니다.
그리고 바로 아래에 있는 테마 선택상자에서 원하는 테마를 선택합니다. 저는 '깔끔'을 선택 했습니다.
다음으로 인덱스 테이블이나 축소판 그림 그리고 미디어를 원하는대로 선택합니다.


설정 탭에서는 출력되는 문서 속성을 설정합니다.
문서의 확장명을 무엇으로 할 것인지 동영상이 포함되어 있는지 등을 선택합니다.
그 다음 왼쪽 하단에 있는 옵션 버튼을 클릭하여 저장할 이름을 결정합니다.

서버 탭에서는 FTP 설정을 통해 원격 저장을 가능하게 해줍니다.
설정이 모두 끝났으면 만들기 버튼을 선택합니다.

문서가 생성될 적절한 폴더를 선택하고 확인 버튼을 클릭합니다.

아래의 그림과 같은 웹 사이트가 생성되었습니다.

화면의 쎔네일 이미지를 클릭해 봅니다.
그러면 큰 이미지를 가지고 있는 페이지로 전환되고, 큰 이미지를 보여주는 화면에서 다른 화면으로의 이동이 쉽도록 상단에 네비게이션이 제공되는 것을 확인할 수 잇습니다.

전에 이런 간단한 형태의 문서를 만들 때는 웹 문서를 만드는데 필요한 기술을 알아야지만 원하는 결과물을 만들어 낼수 있었습니다. 그러나 Expression Media는 Rich한 웹 문서를 전문적인 기술이 없어도 너무나 쉽게 만들어 줍니다.

문서가 생성된 디렉토리를 보면1개의 HTML 파일과 3개의 폴더를 확인할 수 있습니다.
index.htm은 생성된 문서이고, assets 폴더에는 자바스크립트 파일과 네비게이션에 필요한 이미지 아이콘들이 포함되어 있습니다. preview 폴더에는 웹 갤러리가 생성될 때 메인 페이지에 노출될 썸네일 이미지가 생성되어 있습니다. Source 폴더에는 큰 이미지를 보여주는 웹 문서와 원본 이미지가 포함되어 있습니다.


사용자 입맛에 맞게 꾸밀려면 약간의 작업이 필요하겠지만 그럴 필요없이 테마만으로 충분하다면 단지 사진 몇장 드래그와 버튼 몇개 클릭만으로 웹 갤러리를 만드는 Expression Media의 기능이 매우 만족스럽습니다.

[참고]
1. OMSS, http://silverlight.net/Learn/videocat.aspx?cat=6
2. Expression Media Help Guide

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

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

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

10월 8일에 Microsoft UX/RIA Partner Workshop에 참석했었습니다. 파트너는 아니지만 그냥 Silverlight에 관심 있는 개발자 입장으로요. ^^; REMIX08에서도 거론되고 Silverlight의 좋은 기능으로 많이 소개되었던 II7-Bit Rate Throttling (UXKOREA), 쉽게 구현할 수 있는 미디어 플레이어 (훈스닷넷), Cross Domain 설정, Silverlight Deep Zoom 기능 등 여러 기능들이 소개되었습니다. 각 기능들에 대해서 링크를 걸어두었으니 관심을 가지시고 읽어 보시기 바랍니다. Deep Zoom 소개는 영어로 소개하지만 영상도 있으니 가볍게 동영상을 보셔도 좋을 것 같습니다. ^^

 

세미나 후기라도 써보려고 오래된 똑딱이 디카도 가져가서 사진도 찍고 그랬는데 벌써 10월 말이니…-ㅅ-; 마지막에 경품을 받지 못해서 그런가 봅니다. 속으로는 ‘오~오~오~ 드뎌 경품 추첨이다.’ 라고 기대는 매번 하는데…표정은 티 안내고 앉아 있지만. ㅋㅋ 이번에도 아쉬움을 갖고 돌아왔습니다.

 

이번 시간에는 Expression Blend를 이용하여 간단한 Silverlight 시계를 만들어 보겠습니다. 먼저 개발을 위해 아래 파일들을 설치하시기 바랍니다. (Silverlight 다운로드 페이지)

 

- Microsoft Silverlight 2

- Visual Studio 2008 (평가판)

- Microsoft Silverlight Tools for Visual Studio 2008 SP1

- Microsoft Expression Blend 2.5

 

우선 아래 그림과 같이 시계의 표면 및 이음 홈, 테두리, 그림자를 포함한 그래픽을 디자인해보겠습니다.

아래 절차를 따라 Expression Blend에서 새 프로젝트를 만듭니다.

 

1. Expression Blend를 실행합니다.

2. 메뉴의 파일, 새 프로젝트를 차례로 클릭하여 새 프로젝트 대화 상자를 띄웁니다.

3. 이름 상자에 원하는 Silverlight 애플리케이션 이름을 입력합니다.

4. 언어 상자에 Visual C#을 선택합니다.

5. Silverlight 2 애플리케이션을 선택하고 확인을 클릭합니다.

 

여기서 F5키를 한번 눌러볼까요? 이걸 누르면 브라우저 창이 하나 열리면서 웹 페이지가 열립니다.

이 때 확인하실 것이 하나 있습니다. 제가 현재 Silverlight 2 RTW를 설치해놓고 Expression Blend June Preview 버전을 사용하고 있는데, 필요한 Silverlight 버전은 베타 2 버전입니다. 저와 같은 환경을 가지고 있으시면 이전 버전의 파일을 삭제하시고 베타 2 버전을 설치하시기 바랍니다. 살짝 귀찮긴 하네요~^^;

Silverlight 2 애플리케이션 새 프로젝트를 만들었고 다음으로는 시계의 그림자 부분을 디자인해보겠습니다.

 

1. Blend의 도구 상자에서 타원 (Ellipse)을 선택합니다. (처음은 사각형만 보이지만 마우스를 길게 클릭하거나 오른쪽 마우스 버튼을 클릭하면 다른 도구도 추가로 표시됩니다.)

2. 하얀 캔버스에 타원을 드래그 & 드롭을 하여 대략 330픽셀 너비와 높이의 원을 그립니다.

3. Blend 우측 상단에 속성 탭을 선택하여 Fill을 선택합니다. 단색 브러시를 확인한 후 검정색으로 채우고 Opacity를 30%로 변경합니다. ②, ④번은 싱크되어 있습니다. ④번에 black으로 입력하시면 16진수 값으로 변경이 되고 ②번 Fill 부분도 함께 변경이 됩니다. (아래 그림 참고)

4. 개체 및 타임라인 창에서 타원 이름을 shadowEllipse로 변경합니다.

이제 그림자는 완료하였습니다. 아주 간단하지요? 그럼 다음으로 시계 테두리를 그려 보겠습니다.

 

1. 그림자 원 shadowEllipse를 복사하여 동일한 크기의 원을 하나 더 만듭니다. shadowEllipse를 선택하여 CTRL+C와 CTRL+V (copy & paste)합니다. 이 원의 이름은 outerRimEllipse로 지정합니다.

2. 테두리 원에는 그라데이션을 지정합니다. 먼저 개체 및 타임라인 창에서 outerRimEllipse를 선택합니다. 모양 창에서 Opacity는 100%로 지정하고 브러시 창에서 Fill을 선택하고 그라데이션 브러시를 선택합니다.

3. 좌에서 우로 그라데이션 방향을 변경합니다. 먼저 도구 상자에서 브러시 변형을 선택합니다.

   그리고 타원에 생긴 화살표를 드래그 & 드롭하여 그라이데이션 방향을 설정합니다.

4. 그라데이션 좌측 지점 색상을 #FFE4E5F4로 변경하고 우측 지점 색상을 #FFC0C0C0로 변경합니다.

5. 테두리 원 outerRimEllipse를 선택 도구를 사용하여 우측 상단으로 조금 이동하여 그림자 원을 살짝 보이게 합니다.

   다음은 현재 까지의 그림입니다.

다음은 이음 홈을 만들어 보겠습니다. 이음 홈은 테두리 보다 좀 작을 뿐이지 디자인하는 방법은 비슷합니다.

 

1. 테두리 원 outerRimEllipse를 선택하고 CTRL+C, CTRL+V하여 동일한 원을 추가합니다. 이름은 bevelEllipse로 변경합니다.

 

2. 개체 및 타임라인 창에서 bevelEllipse를 선택하고 속성 탭을 열어 290 픽셀 정도로 outerRimEllipse보다 작게 크기를 변경합니다.

3. outerRimEllipse의 복사본이라 bevelEllipse 그라데이션이 적용되어 있을 것입니다. bevelEllipse의 좌측 지점을 #FF2F2F32, 우측 지점 색상을 #FFE4E5F4로 변경합니다.

이제 서서히 뭔가가 되어 가는 것 같네요. ^^ 다음은 bevelEllipse를 이용하여 시게 표면을 만들어 보겠습니다.

 

1. bevelEllipse의 복사본을 만들고 새로운 이름으로 faceEllipse로 지정합니다.

2. faceEllipse를 선택하고 bevelEllipse보다 좀 작은 270 픽셀 정도로 크기를 변경합니다.

3. faceEllipse의 색상을 단색 브러시를 이용하여 검정색으로 변경합니다. 그럼 아래와 같은 그림입니다.

다음은 시계 바늘들을 고정하는 중앙 원을 만들어 보겠습니다. 이게 없으면 바늘이 굴러 댕길 겁니다. -ㅅ-;

 

1. 도구 상자에서 타원 도구를 선택하고 시계 표면 (faceEllipse)에 원을 하나 그립니다.

2. 새로운 원의 이름을 centerEllipse로 변경합니다.

3. centerEllipse의 너비와 높이를 30으로 설정합니다.

4. stroke thickness를 8로 설정하고 stroke를 원하는 색상으로 설정합니다.

5. centerEllipse 원을 faceEllipse 정중앙 (정준하 아님~;;)에 위치시키기 위해 개체 및 브라우저 창에서 faceEllipse를 선택한 후 정중앙을 확인하고 centerEllipse를 이동시킵니다.

다음은 시계 바늘들을 만들어 보겠습니다.

 

1. 도구 상자에서 사각형 도구를 선택합니다.

2. 먼저 초침을 만듭니다. 세 개 침 중에 가장 얇게 하고 원하는 색상으로 설정합니다. 방향은 12시를 향하게 하고 StrokeThickness를 5로 설정하고. 이름은 secondHand로 변경합니다.

하얀색 점 이동 시 정중앙으로 설정이 잘 되지 않으면 CTRL+= 키 또는 메뉴 보기, 확대를 사용하여 좀 더 세밀하게 이동 시켜 보시기 바랍니다.

 

3. 분침도 마찬가지로 초침의 2단계를 따라하여 만듭니다.

4. 시침도 동일하게 만들고 분침보다 StrokeThickness와 길이를 좀 더 길게 만듭니다.

 

세 개 바늘 모두 12방향을 향하고 있을 테니 바늘 위치를 조정하면 아래와 같은 그림일 것입니다.

다음 시간에는 RotateTransform을 사용하여 이번 시간에 만든 시계를 실제로 작동해보도록 하겠습니다. 비가 오니 이제 정말 시원해질 것 같습니다. 환절기 감기 조심하세요. ^.^

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

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

원본: 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

 

참고: 응용 프로그램을 구축하기 위해 Visual Studio 2008을 사용하고 있다는 것으로 가정합니다. MSBuild를 사용하여 Visual Studio 없이도 Silverlight-기반 응용 프로그램을 만들 수 있습니다. 좀 더 자세한 정보는 Silverlight 응용 프로그램 어셈블리 개발을 참고하세요.

 

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 엘리먼트 안쪽에 아래 코드를 작성합니다.

 

XAML

<Rectangle Fill=”Red” Width=”150” Height=”100”/>

 

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/323aac2f-14cc-4dd8-bb40-fa2cb3c2e522.aspx

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

 

이번 시간에는 서버와의 통신 없이 관리되는 코드 (.cs 파일)을 이용해서 HTML Document Object Model (DOM)에 동적으로 액세스할 수 있는 방법을 설명합니다.

 

사전 준비 사항

- Silverlight 2 베타 2

- Visual Studio 2008 (90일 평가판)

- Visual Studio 2008용 Silverlight Tools 베타 2

 

Test 페이지에 HTML 엘리먼트 추가하기

먼저, 생성할 테스트 페이지에 버튼 및 텍스트 박스, 등의 HTML 엘리먼트를 추가할 것입니다.

 

1. Visual C#의 Silverlight 응용 프로그램 프로젝트 하나를 만듭니다. 솔루션에 컨트롤을 호스팅할 새 웹 추가 옵션이 선택되어진 것을 확인합니다. 저는 프로젝트 이름을 EloiHtmlDom으로 설정하였습니다. (참고: Silverlight 응용 프로그램 만들기)

 

2. 시작 페이지를 HTML 테스트 페이지로 설정하고 소스뷰를 엽니다.

시작 페이지 설정은 EloiHtmlDomWeb의 마우스 우측 클릭하여 속성 페이지 – 시작 옵션에서 변경 가능하며 간단히 HTML 테스트 파일에 마우스 우측 클릭하여 시작 페이지로 설정으로도 변경 가능합니다.

                                                          속성 페이지에서 설정하는 화면

                                                           시작 페이지로 설정을 이용한 설정

3. <object> 태그를 찾아 height 속성을 “100%”에서 “10%”로 변경합니다.

 

4. </iframe> 태그 뒤에 다음 HTML 코드를 추가합니다. 이 코드에는 두 개의 버튼과 텍스트 박스 세 개를 포함하고 있습니다.

 

<div id=”basic1”>    <h3> Silverlight 관리되는 코드로 HTML 버튼 다루기</h3>    <hr />    <strong>첫 번째 텍스트 박스의 텍스트를 두 번째 텍스트 박스에 대문자로 변경</strong><br />    <label>여기에 텍스트를 입력하세요:</label>&nbsp;    <input type=”text” id=”txtInput” disabled=”disabled” size=”35” />&nbsp;    <button type=”button” id=”btnUCtxt”>대문자 처리</button>    <br /><br />    <label>처리 결과:</label>    <input type=”text” id=”txtOutput” size=”60” /> </div> <br /><br /> <div id=”basic2”>    <button type=”button” id=”btnGetProperties”>속성 가져오기</button><br />    <input type=”text” id=”txtOutputProperties” size=”60” /> </div>

 

5. 응용 프로그램을 실행 시키면(ctrl + F5 키를 이용하여 디버깅을 사용하지 않고 실행 시킵니다.) 대문자 처리 버튼과 속성 가져오기 버튼, 텍스트 박스 3개를 볼 수 있습니다. 먼저 첫 번째 텍스트 박스 에 대해서 다루려고 합니다. 현재 value는 없고 disabled 상태입니다. 

관리되는 클래스에서 HTML 페이지 연결하기

관리되는 클래스에서 HTML 페이지에 연결하기 위해 먼저 Page 생성자에서 참조를 초기화 합니다.

 

1. 코드 비하인드 파일을 (Page.xaml.cs) 열어 Page 클래스를 찾습니다.

2. using 키워드를 사용하여 System.Windows.Browser 네임스페이스를 추가합니다.

3. HtmlDocument 타입의 클래스 레벨 _doc 변수를 선언합니다.

4. Page 생성자의 _doc 변수를 초기화합니다.

 

현재 HTML 페이지의 인스턴스로 _doc 변수를 사용합니다.

 

namespace EloiHtmlDom {     Public partial class Page : UserControl     {         private HtmlDocument _doc;         public Page()         {             InitializeComponent();             _doc = HtmlPage.Document;

‘

HTML DOM 속성에 액세스하기

다음은 첫 번 째 txtInput 텍스트 박스의 속성을 동적으로 속성을 변경해보도록 하겠습니다.

 

1. Page 생성자의 끝 부분에 다음 코드를 추가합니다.

 

HTML document object의 GetElementById 메서드를 사용해서 disabled 상태를 변경하고 새로운 값을 설정합니다.

CS

// Return for all pages except those ending in TestPage.html if (_doc.DocumentUri.AbsoluteUri.EndsWith(“TestPage.html”) != true)     return;   _doc.GetElementById(“txtInput”).SetProperty(“disabled”, false); _doc.GetElementById(“txtInput”).SetAttribute(“value”, “This is set from managed code.”);

 

2. 응용 프로그램을 실행 시킵니다.

txtInput 텍스트 박스에는 “This text is set from managed code.”가 나타날 것입니다. 그리고 입력 가능하게 되었습니다.

HTML DOM 엘리먼트의 이벤트 처리

HTML DOM 엘리먼트의 이벤트를 처리할 이벤트 핸들러를 추가합니다.

 

1. Page 생성자의 끝 부분에 아래 코드를 추가하여 대문자 처리 버튼의 onclick 이벤트의 이벤트 핸들러를 추가합니다.

 

  btnUCtxt 엘리먼트에 참조를 btnUC 인스턴스 변수에 대입하고 btnUC 변수를 사용하여 버튼의 onclick 이벤트에 이벤트 핸들러를 추가합니다.

 

CS

// Add event handler for Uppercase Text button. HtmlElement btnUC = _doc.GetElementById(“btnUCtxt”); btnUC.AttachEvent(“onclick” new EventHandler<HtmlEventArgs>(this.OnUCtextClicked));

 

2. 대문자 처리 버튼의 onclick 이벤트의 OnUCtextClicked라는 이벤트 핸들러를 작성합니다.

3. 이벤트 핸들러에서 HTML 엘리먼트의 속성을 읽거나 씁니다.

예를 들어, 다음의 OnUCtextClicked 이벤트 핸들러에서 SetAttribute와 GetAttribute 메서드는 속성 값을 쓰고 읽기위해 txtInput과 txtOutput 엘리먼트에서 사용됩니다. txtInput 엘리먼트에 입력된 텍스는 대문자로 변환되고 txtOutput 엘리먼트의 value 속성에 할당됩니다.

 

CS

void OnUCtextClicked(object sender, HtmlEventArgs e) {     HtmlElement input = _doc.GetElementById(“txtInput”);     HtmlElement output = _doc.GetElementById(“txtOutput”);     output.SetAttribute(“value”, input.GetAttribute(“value”).ToUpper()); }

 

4. 응용 프로그램을 실행하고 대문자 처리 버튼을 클릭합니다.

HTML DOM에서 메서드 호출하기

마지막으로 HTML DOM에서 메서드를 호출합니다.

 

1. Page 생성자의 끝 부분에 아래 코드를 추가하여 속성 가져오기 버튼의 onclick 이벤트의 이벤트 핸들러를 추가합니다.

 

첫 번째 버튼과 마찬가지로 btnGetProperites 엘리먼트 참조를 btnPropGet 인스턴스 변수에 대입하고 속성 가져오기 버튼의 onclick 이벤트의 이벤트 핸들러를 추가합니다.

 

CS

// Add event handler for Get Properties button. HtmlElement btnPropGet = _doc.GetElementById(“btnGetProperties”); btnPropGet.AttachEvent(“onclick”, new EventHandler<HtmlEventArgs>(this.OnGetPropClicked));

 

2. 속성 가져오기 버튼의 OnGetPropClicked라는 onclick 이벤트 핸들러를 작성합니다.

3. 이벤트 핸들러에서 호출하려는 메서드의 HTML 엘리먼트에 동적 참조를 얻고 메서드를 호출합니다.

.

예를들어, 다음 OnGetPropClicked 이벤트 핸들러는 현재 페이지의 포트번호와 쿠키 상태, URI (Uniform Resource Identifier)를 나타낼 HtmlPage 개체를 사용하는 방법을 보여줍니다.

 

CS

void OnGetPropClicked(object sender, HtmlEventArgs e) {     string outputText = “”;     // _doc 선언한 곳 밑에 아래 주석과 같이 _count 변수를 초기화합니다.     // private int _count = 0; _count++;       switch (_count % 3)     {         case 0:             outputText = “DocumentUri.AbsolutePath: “ + HtmlPage.Document.DocumentUri.AbsolutePath;             break;           case 1:             outputText = “Cookies Enabled: “ + HtmlPage.BrowserInformation.CookiesEnabled.ToString()             break;           case 2:             outputText = “Port: “ + HtmlPage.Document.DocumentUri.Port.ToString();             break; } _doc.GetElementById(“txtOutputProperties”).SetAttribute(“value”, outputText); }

 

4. 응용 프로그램을 실행하고 속성 가져오기 버튼을 여러 번 클릭합니다.

버튼을 클릭할 때마다 txtOutputProperties 엘리먼트는 페이지의 URI와 쿠키 사용 가능 여부, URI를 위한 포트 번호 중 하나를 나타납니다.

지금까지 관리되는 코드에서 (.cs 파일) HTML DOM에 액세스하는 것에 대해서 알아보았습니다.
행복한 하루 보내세요~^.^

EloiHtmlDomTestPage.html

Page.xaml.cs

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

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

원본: 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. 솔루션 탐색기에서 참조를 마우스 우측 클릭을 하여 참조 추가를 선택합니다.

2. 참조 추가 창의 .NET 탭에서 System.ServiceModel.Syndication을 선택하고 확인을 클릭합니다.

3. 아래 코드를 Page.xaml.cs 파일에 추가합니다.

 

using System.ServiceModel.Syndication; using System.Xml;

 

다음은 syndication feed 요청을 위한 HTTP request를 만듭니다.

 

1. 먼저 이 컨트롤에서 액세스하기 원하는 syndification feed 하나를 찾아 그 주소를 메모해둡니다. 이 예제에서는 http://www.setisigns.net/rss를 사용하겠습니다. 크로스 도메인을 가능하기 위해 feed를 호스팅하는 도메인의 루트에 Clientaccesspolicy.xml이나 Crossdomain.xml 파일을 위치 시켜야합니다.

(예: http://www.setisigns.net/Clientaccesspolicy.xml, http://www.setisigns.net/Crossdomain.xml)

 

Clientaccesspolicy.xml

<?xml version=”1.0” encoding=”utf-8”?> <access-policy>     <cross-domain-access>         <policy>     <allow-from http-request-headers=”*”>         <domain uri=”*”/>     </allow-from>     <grant-to>         <resource path=”/” include-subpaths=”true”/>     </grant-to> </policy> </cross-domain-access> </access-policy>

 

Crossdomain.xml

<?xml version=”1.0”?> <!DOCTYPE cross-domain-policy SYSTEM  “http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd”> <cross-domain-policy>     <allow-http-request-headers-from domain=”* “ headers=”*” /> </cross-domain-policy>

 

 

2. Page.xaml.cs 파일을 열어 Page() 메서드 안에 받고자 하는 syndication feed uri를 설정하여 HTTP request를 만듭니다. 좀 전에 메모해둔 feed 주소를 사용합니다.

 

HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(new Uri(“http://www.setisigns.net/rss”));

 

3. 비동기 HTTP request를 만들고 콜백을 등록합니다.

 

request.BeginGetRespone(new AsyncCallback(responseHandler), request);

 

4. 위 코드를 포함한 Page 메서드는 아래와 같습니다.

 

public Page() {     // Required to initialize variables     InitializeComponent();     HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(new Uri(“http://www.setisigns.net/rss”));     request.BeginGetResponse(new AsyncCallback(responseHandler), request); }

 

다음은 스트림에 대한 XMLReader를 받고 SyndicationFeed 클래스 인스턴스를 만듭니다.

 

1. responseHandler 콜백 함수에서 HTTP response를 받습니다.

 

void responseHandler(IAsyncResult asyncResult) {     HttpWebRequest request = (HttpWebRequest)asyncResult.AsyncState;     HttpWebResponse respone = (HttpWebResponse)request.EndGetResponse(asyncResult); }

 

2. responseHandler에 스트림을 받는 XML 리더를 만들고 SyndicationFeed 클래스 안에 그 리더를 로드합니다.

 

XmlReader reader = XmlReader.Create(response.GetResponseStream()); SyndicationFeed feed = SyndicationFeed.Load(reader);

 

이제 SyndicationFeed를 사용하여 실제 syndication feed의 출력 부분의 코드를 작성합니다.

 

1. Page.xaml 파일을 열어 Grid안에 TextBlock을 추가합니다.

 

<TextBlock x:Name=”feedContent” />

 

2. SyndicationFeed 개체가 생성되고 각 SyndicationItem 개체에 액세스하는 Items 컬렉션으로 루프를 돌립니다. 이 예제는 제목과 TextBox 컨트롤에 각 항목의 날짜를 추가합니다.

 

foreach (SyndicationItem item in feed.Items) {     feedContent.Text += “* “ + item.Title.Text + Enviroment.NewLine;     feedContent.Text == “ Published on: “ + item.PublishDate + Enviroment.NewLine; }

 

3. 비동기 요청 콜백 함수는 아래와 같습니다.

 

void responseHandler(IAsyncResult asyncResult) {     HttpWebRequest request = (HttpWebRequest)asyncResult.AsyncState;     HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(asyncResult);       XmlReader reader = XmlReader.Create(response.GetResponseStream());     SyndicationFeed feed = SyndicationFeed.Load(reader);       Foreach (SyndicationItem item in feed.Items)     {         feedContent.Text += “* “ + item.Title.Text + Enviroment.NewLine;         feedContent.Text += “  Published on: “ + item.PublishDate + Enviroment.NewLine; } }

 

4. 이제 Ctrl + F5를 눌러 브라우저에서 feed 리스트를 확인하시기 바랍니다.

 

즐거운 추석 연휴 보내시고 맛있는 것도 많이 드세요. ^^ 고향에 내려가시는 분들은 오고 가시는 길 많이 힘드시겠지만 가족들과의 만남이 더 뜻 깊을 거라 믿습니다.

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

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

원본: http://silverlight.net/Quickstarts/Remote/UsingREST.aspx

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

 

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

이번 시간에는 HTTP 전송을 사용하여 Plain XML 메시지 (Plain Old XML 또는 POX 메시지라고도 부릅니다.)를 받는 방법에 대해서 알아보도록 하겠습니다.

 

POX 메시지는 SOAP으로 포장되지 않은 순수 XML 데이터로 이루어져 있고 SOAP 기반의 프로토콜을 지원하지 않는 여러 종류의 클라이언트 (예: 웹 브라우저)에서 주고 받게 됩니다. SOAP과 WS-* 외에 HTTP를 사용하여 통신할 때 POX는 데이터를 전달받는 좋은 방법입니다.

 

그럼 바로 예제를 보도록 하겠습니다. 아래 예제는 WebClient 클래스를 사용하여 웹 서비스에 액세스합니다. 웹 서비스와 Silverlight 기반 응용 프로그램이 같은 도메인상에서 호스팅되면 웹 서비스와 Silverlight 기반 응용 프로그램을 원활히 사용할 수 있습니다. 웹 서비스와 통신하는 Silverlight 기반 응용 프로그램을 만들 때 Silverlight 컨트롤은 웹 서버로부터 서비스되는 웹 페이지 내에서 호스팅 되어야 합니다. 파일 시스템 (예: HTML 테스트 페이지)에서 웹 서비스와 통신을 하게 되면 보안 예외가 발생할 것입니다.

 

참고 현재 WebClient 클래스는 크로스 도메인을 지원하지 않습니다. 현재 릴리스된 WebClient는 같은 서버에서 웹 서비스와 Silverlight 기반의 응용 프로그램이 호스팅되어야 합니다. 웹 서비스와 Silverlight 기반 응용 프로그램이 다른 도메인에서 호스팅되고 있으면 웹 서비스에 크로스 도메인이 가능하게 XML Policy 파일이 있어야 합니다. 좀 더 자세한 정보는 MSDN에서 How to: Make a Service Available Across Domain Boundaries를 참고하시기 바랍니다.

 

다음은 XML로 결과가 리턴되는 웹 서비스에 액세스하는 방법에 대해서 소개합니다.

 

1. Silverlight 프로젝트 하나를 만듭니다. Silverlight 응용 프로그램 추가 창에서 솔루션에 컨트롤을 호스팅할  새 웹 추가를 선택합니다. 이 프로젝트 안에 Silverlight를 호스팅할 HTML 테스트 페이지를 동적으로 생성 옵션을 선택하면 보안 관련 예외 발생이 일어납니다. (참고: Silverlight 응용 프로그램 만들기)

 

2. Silverlight 프로젝트에서 System.Net 어셈블리에 참조를 가지고 있는 확인합니다.

그리고 웹 서비스를 호출하기 위해 System.Net의 클래스들이 필요하므로 Page.xaml.cs 파일에서 System.Net 네임스페이스가 추가되었는지 확인합니다.

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 대한민국 라이선스에 따라 이용하실 수 있습니다.

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

[엘리의 실버라이트 2.0] 관리되는 코드에서 HTML DOM에 액세스  (3)	2008/09/21
[엘리의 실버라이트 2.0] Syndication Feeds 액세스  (0)	2008/09/11
[엘리의 실버라이트 2.0] Plain XML 보내기 • 받기  (0)	2008/09/06
[엘리의 실버라이트 2.0] 스플래시 스크린 만들기  (0)	2008/08/25
[엘리의 실버라이트 2.0] Silverlight 입력 이벤트 핸들러 작성 (2)  (0)	2008/08/19
[엘리의 실버라이트 2.0] Silverlight 입력 이벤트 핸들러 작성 (1)  (2)	2008/08/12

원글출처 : http://silverlight.net/Quickstarts/BuildUi/SplashScreen.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

안녕하세요 엘리 입니다.

이 번 시간에는 Silverlight 기반 응용 프로그램이 로드되기 전에 나타나는 스플래시 스크린 (Splash Screen) 대해서 알아보겠습니다.

 

여러분이 Silverlight 응용 프로그램이 포함된 웹 페이지에 접근을 하게 될 때 XAML을 참조하는 어셈블리나 패키지가 브라우저에 배포됩니다. 이 때 배포되는 패키지 용량이 클 경우 아무런 알림 없이 사용자들을 기다리게 한다면 그 사이트를 떠나는 사람이 적지 않을 것입니다. 이럴 때 다운로드 되는 동안 그 진행률을 보여주게 되면 좀 더 나은 사용자 경험을 제공할 수 있을 것입니다. 아래 그림이 스플래시 스크린입니다. 용어가 생소할지 모르지만 그림으로 보니 확실히 어떤 것인지 아시겠지요? 

사전 준비 사항

- Silverlight 2 베타 2

- Visual Studio 2008 (90일 평가판)

- Visual Studio 2008용 Silverlight Tools 베타 2

 

1.1 알파 버전 이후 스플래시 스크린이 변화된 점

스플래시 스크린 모델은 Silverlight 1.1 알파 버전 이후로 변경된 점이 있습니다. 현재는 스플래시 스크린이 플러그인 API에 빌트인 되었고 스플래시 스크린을 사용을 위해 별도의 페이지를 만들 필요 없이 스플래시 스크린이 기본적으로 제공되기도 합니다. 대신에 스플래시 스크린 소스와 패키기 기본 소스는 각각 분리되어 있고 진행은 플러그인에 의해 자동적으로 조정됩니다.

 

Silverlight 2 베타 2와 동일한 점도 있습니다. Silverlight 기반 응용 프로그램이 관리되는 프로그래밍 모델을 사용하고 있음에도 관리되지 않는 프로그래밍 모델인 JavaScript와 연동이 되어 여전히 사용하고 있다는 점입니다. 다운로드가 완료되고 패키지가 로드되어서 Silverlight 응용 프로그램이 사용 가능할 때 일반적으로 관리되지 않는 프로그래밍 모델에서 관리되는 프로그래밍 모델로 바뀌고 응용 프로그램이 실행되는 동안 여전히 관리되는 프로그램으로 유지됩니다.

 

다운로드 진행과 완료 이벤트

실버라이트 스플래시 스크린은 Silverlight 플러그인에서 제공하는 3가지 속성을 사용합니다.

 

splashscreensource: 패키지 (소스)가 다운로드 되는 동안 보여줄 XAML 페이지의 URI

onsourcedownloadpregresschanged: 소스가 다운로드 되는 동안 지속적으로 호출될 JavaScript 이벤트 핸들러 참조. 이 이벤트는 전체 다운로드의 약 0.5% 정도까지 나눌 정도로 아주 많이 발생합니다.

onsourcedownloadcomplete: 소스가 다운로드될 때 한 번 호출될 JavaScript 이벤트 핸들러 참조.

 

기본 제공 스플래시 스크린

기본 제공되는 스플래시 스크린은 패키지 다운로드 시간이 지정된 한계 시간인 500 ms를 넘어서면 나타나게 됩니다. 기본 애니메이션을 보여줄 XAML과 초기화 순서는 실버라이트 플러그인에 하드 코딩 되어있습니다.

 

기본 스플래시 스크린을 사용하지 않고 개별적으로 만들어 사용하려면 HTML 파일의 OBJECT 태그에 정의되어 있는 Silverlight 플러그인의 splashScreenSource 파라미터 값을 사용해야 합니다. 이 것은 조금 후에 좀 더 자세히 알아보도록 하겠습니다. 또는 Silverlight.js 파일을 사용한다면 CreateObject / CreateObjectEx 함수를 호출하는 부분에 splashScreenSource 파라미터 값을 지정하면 됩니다.

 

프로젝트 파일 설정하기

이러한 종류의 프로젝트를 설정하는 방법은 여러 가지가 있지만 여기선 기본적인 Silverlight 프로젝트를 사용하도록 하겠습니다. 스플래시 스크린 테스트를 위해 응용 프로그램 용량을 크게 할 필요가 있습니다. 용량이 적다면 스플래시 스크린을 보지 못하고 바로 Silverlight 응용 프로그램만 보게 될 것입니다. 그럼 기본으로 제공되는 스플래시 스크린을 구경해보겠습니다. ^^

 

1. 먼저 EloiSplashScreen이라는 새 프로젝트를 하나 만듭니다.

 

중요 다운로드되는 진행 상황을 보기 위해서는 기본 디버깅 옵션인 상태로 솔루션에 컨트롤을 호스팅할 새 웹 추가를 선택하셔야 합니다. HTML 페이지 동적 생성 옵션을 선택하면 너무 빠르게 파일이 다운로드되어 스플래시 스크린을 볼 수 없게 됩니다.

 

 

2. 스플래시 스크린 테스트를 위해 용량이 큰 패키지를 만들어야 합니다. 실제로는 참조하지 않고 단지 용량이 큰 리소스 파일을 어셈블리에 추가시킵니다. 이 파일들은 패키지에 포함되지 않습니다. 아래와 같이 이 파일들을 추가 – 기존 항목을 사용하여 프로젝트에 추가시킵니다. 최소한 5 MB를 초과하도록 합니다. 저는 mp3 파일 추가시켰습니다. ^.^ 

 참고로 저는 처음에 EloiSplashScreenWeb에 파일을 추가해서 수 십 분 동안 스플래시 스크린을 보질 못했습니다. 별의 별 생각이 다 들면서…’이거 버그 아냐?’ -ㅅ- ‘정말 기본으로 제공되는게 있긴 한거야?’ ‘빨리 보고 싶단 말이야’ 하면서…ㅋㅋ 그리고 EloiSplashScreenWeb에 추가를 하면 아래 나올 속성 창에 빌드 작업 속성이 나타나질 않습니다. -ㅅ-

 

그럼 정확히 파일을 추가하셨다면 해당 파일 빌드 작업 (Build Action) 속성을 포함 리소스 (Embedded Resource)로 지정합니다.  

3. 패키지 다운로드가 완료되었는지 확인하기 위해 간단히 TextBlock같은 UI 엘리먼트를 page.xaml 파일에 추가하도록 합니다. 

 4. 프로젝트를 빌드하고 컴파일을 확인합니다. 그러면 아래와 같은 기본 스플래시 스크린을 볼 수 있습니다.

로드 후엔 TextBlock에 추가한 Mission Success 텍스트가 나타납니다.

기본으로 제공되는 화면도 예쁘네요. ^^ 그렇지만 좀 더 아름답고 개성을 살린 사용자 지정 스플래시 스크린을 만들어 보도록 하겠습니다. 예제가 기본 제공되는 화면보다 괜찮을런지는 모르겠네요. -ㅅ-

 

사용자 지정 스플래시 스크린 추가하기

이 번엔 사용자 지정 스플래시 스크린을 추가하기 위해 EloiSplashScreen 프로젝트가 아니라 EloiSplashScreenWeb 프로젝트를 변경할 것입니다. 이 것은 스플래시 스크린를 위한 XAML 페이지가 패키지 외부에 있어야 하기 때문입니다. 그러나 패키지가 자체가 다운로드 되는 동안 유효하지 않을 수 있습니다.

 

그럼 사용자 지정 스플래시 스크린을 추가하는 방법을 자세히 알아보도록 하겠습니다.

 

1. 솔루션 탐색기에서 EloiSplashScreenWeb을 마우스 우측 버튼을 이용하여 속성 페이지를 선택합니다. 시작 옵션에서 시작 페이지를 EloiSplashScreenTestPage.aspx에서 EloiSplashScreenTestPage.html로 변경합니다. 직접 텍스트를 변경해도 되고 우측 버튼을 이용하여 시작할 페이지를 직접 선택하셔도 됩니다.

 

2. 계속해서 마우스 우측 버튼을 이용하여 EloiSplashScreenWeb을 선택하여 새 항목 추가를 선택합니다. 템플릿 창에서 Silverlight Jscript 페이지를 선택하고 이름을 EloiSplashScreen.xaml로 변경하고 추가 버튼을 클릭합니다.

 

3. EloiSplashScreen.xaml 파일을 열어 기존 코드를 모두 지우고 아래 코드를 코딩합니다. 코드 내용이 좀 길게 느껴질 수 있지만 직접 코딩을 해보시기 바랍니다. 직접 코딩을 함으로써 조금 더 생각을 할 수 있고 사소한 오타로 오류가 발생해도 실제 멋진 Silverlight 응용 프로그램을 만들 때에 현재의 작은 오류 해결이 큰 도움을 줄 것입니다. ^^

  

<Canvas         xmlns="http://schemas.microsoft.com/client/2007"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         x:Name="parentCanvas"         Width="850"         Height="600"         Background="OldLace"         >   <Canvas Canvas.Top="228.834" Canvas.Left="246.329" Width="357" Height="31.379">     <Rectangle Width="27.545" Height="1" x:Name="uxProgress" Canvas.Top="29.545" Canvas.Left="1.4">     <Rectangle.RenderTransform>       <TransformGroup>         <ScaleTransform x:Name="uxProgressBar" ScaleX="1" ScaleY="0"/>         <SkewTransform AngleX="0" AngleY="0"/>         <RotateTransform Angle="270"/>         <TranslateTransform X="0" Y="0"/>       </TransformGroup>     </Rectangle.RenderTransform>     <Rectangle.Fill>       <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">         <GradientStop Color="#FFFFFFFF" Offset="1"/>         <GradientStop Color="#FFFFFFFF" Offset="0"/>         <GradientStop Color="#FF2975D0" Offset="0.28"/>         <GradientStop Color="#FF2975D0" Offset="0.72"/>       </LinearGradientBrush>     </Rectangle.Fill>   </Rectangle>     <TextBlock x:Name="uxStatus" Height="25" Canvas.Left="125" Text="Loading..." TextWrapping="Wrap" Canvas.Top="4.16"/>     <Path Width="356.85" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>   <Path Width="1.662" Height="29.03" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0.48" Canvas.Left="0.2" Data="M360,168 L360,0" Opacity="0.35" />     <Path Width="357.84" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="29" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>   <Path Width="358.85" Height="1" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Top="30" Data="M0,170.5 L356.84209,170.5" Opacity="0.25"/>   <Path Width="1.662" Height="30" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Left="356.01" Data="M360,168 L360,0" Opacity="0.35" Canvas.Top="-0.498"/>   <Path Width="1" Height="31" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Left="357.333" Data="M360,168 L360,0" Opacity="0.245" Canvas.Top="-0.498" />       </Canvas> </Canvas>

 

4. EloiSplashScreenTestPage.html 파일에서 아래 코드를 찾습니다.

<object data="data:application/x-silverlight," type="application/x-silverlight-2-b1" ... (object 태그는 Silverlight 플러그인을 지정합니다.) object 태그 하위 param 태그를 아래와 같이 변경합니다.

<param name="source" value="ClientBin/SplashScreenSource.xap"/>

à

<param name="source" value="SplashScreenSource.xap"/>

파일을 저장하고 현재 파일은 계속 열어둡니다.

 

5. 솔루션 탐색기에서 EloiSplashScreen.xap 파일을 드래그하여 EloiSplashScreenWeb의 루트로 이동시킵니다.

 

6. 계속해서 EloiSplashScreenTestPage.html 파일에서 object 태그 하위에 아래 param 태그를 추가합니다. 이 태그들은 위에서 설명한 3가지 속성들입니다. 위로 이동하셔서 다시 한 번 내용을 확인해보시기 바랍니다.

  

<param name="splashscreensource" value="EloiSplashScreen.xaml"/> <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

 

7. 두 번 째 param 태그는 JavaScript 이벤트 핸들러를 참조합니다. 솔루션 탐색기에서 EloiSplashScreen.xaml 파일의 + 버튼을 클릭하여 하위 EloiSplashScreen.js 파일을 확인합니다. (이 js 파일은 EloiSplashScreen.xaml 파일을 생성할 때 함께 생성된 파일입니다.)

 

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

 

function onSourceDownloadProgressChanged(sender, eventArgs) { sender.findName("uxStatus").Text =  "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%"; sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356; }

 

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

 

<script type="text/javascript" src="EloiSplashScreen.js"></script>

 

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

 

Mission Success~!!!

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

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

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

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

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

[엘리의 실버라이트 2.0] Syndication Feeds 액세스  (0)	2008/09/11
[엘리의 실버라이트 2.0] Plain XML 보내기 • 받기  (0)	2008/09/06
[엘리의 실버라이트 2.0] 스플래시 스크린 만들기  (0)	2008/08/25
[엘리의 실버라이트 2.0] Silverlight 입력 이벤트 핸들러 작성 (2)  (0)	2008/08/19
[엘리의 실버라이트 2.0] Silverlight 입력 이벤트 핸들러 작성 (1)  (2)	2008/08/12
[세티의 실버라이트] 15. 미디어  (0)	2008/08/11

원글출처 : http://silverlight.net/quickstarts/blend_quickstart/part5_working_with_media.aspx 본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

안녕하세요. ^^
모두 휴가는 잘 다녀오셨는지 궁금합니다.

음... 전 아직 휴가를 갔다오지 못했습니다. 바뻐서 그랬던 것은 아니구요. 휴가 때 밖으로 나가면 꽤 번잡하잖아요? ㅎㅎ 전 그게 싫어서 좀 한가할 때 갈려고 기회를 엿보고 있는 중입니다. ^^

그나저나 날씨가 요즘 너무 더워요..헥헥. 무더운 날씨에 지치지 않을려고 이것저것 막 챙겨먹고는 있는데 그것들이 체력 보강으로 이어지진 않고, 뱃살로 이어지고 있습니다. 이일을 어찌해야 좋을지 막막한 요즘입니다. ^^;

늘어나는 뱃살과 먹는 것의 즐거움을 알아버린 세티지만 무더운 더위에 지치지 않고 글을 쓸수 있는 즐거움도 함께 가져갈려고 노력하고 있습니다.^^*

아무튼 힘내서 이번 시간에는 Blend2.5를 이용한 미디어 플레이어 만들기를 해보겠습니다.

먼저 미디어 플레이어를 만들기 위해서 WMV 동영상 파일이 하나 있어야 합니다.
WMV파일 구하러 검색하는 것도 일인데 그냥 아래의 주소에서 편하게 다운로드 받으시면 됩니다.^^
http://www.microsoft.com/windows/windowsmedia/musicandvideo/hdvideo/contentshowcase.aspx

위에서 다운로드 받은 동영상을 이제 추가해야 합니다. 어디에 추가하냐구요?

미디어 플레이어를 만들기 위해 새로운 프로젝트를 하나 생성할까 합니다.
새로운 미디어 플레이어를 위한 프로젝트의 이름을 MediaPlayer 라고 하겠습니다.

프로젝트를 생성하셨다면 이제 Canvas 가 필요합니다.
Object and Timeline에서 Canvas 객체를 추가합니다.
자. 다 만드셨죠? 그럼 이제 동영상을 추가해 보겠습니다.

동영상은 솔루션 탐색기에 필요한 동영상 리소스를 추가하고, 캔버스 객체에 마우스로 드래그해서 옮겨 놓으면 됩니다. 동영상 파일의 추가는 아래의 그림처럼 마우스로 동영상을 드래그 해서 놓아도 되고, Blend 2.5 상단 메뉴에 있는 Project를 선택한 후 Add Existing Item...이라는 메뉴를 선택해서 등록해도 됩니다.

이것도 귀찮다면 단축키 Ctrl + I 를 이용하면 됩니다.^^

미디어 파일을 추가하고 나면 아래의 이미지 처럼 Project 판넬에 추가된 영상이 표시됩니다.(이미지도 이것과 같은 방법으로 추가할 수 있습니다.)

다음으로 지난 포스트에서 생성했던 버튼 컨트롤을 추가합니다.
Play, Stop, Pause 버튼을 빌드하고 나면 프로젝트가 있는 하위 bin 폴더에 dll 파일이 생성되어 있습니다.
그것을 참조추가하여 버튼 컨트롤을 사용할 수 있습니다.
참조추가 하는 방법은 아래의 그림처럼 하시면 됩니다.



이제 추가된 dll에서 가져올 사용자 컨트롤이 모두 있는지 확인해보겠습니다.
아래의 첨부된 이미지에서 처럼 자산 라이브러리[ >> ]를 클릭하면 모든 사용자 컨트롤이 확인 가능합니다.

확인된 버튼 사용자 컨트롤을 더블 클릭을 하여 모두 추가합니다.

이제 미디어 플레이어를 만들기 위한 기본적인 준비가 완료되었습니다.

여기서 우리가 한가지 알아야 할 것이 있는데요. 현재는 하나의 프로젝트 내에 캔버스, 버튼 사용자 컨트롤, 동영상 파일과 같은 것들이 모두 각각의 객체의 형태로 존재하고 있습니다.

미디어플레이어에서는 이것들을 하나의 유닛으로 만들어야 할 필요가 있습니다.
그래서 캔버스 아래에 모든 객체들을 묶어 놓아야 합니다. 그러기 위해선 이것들을 그룹화 시켜야 합니다.
그룹화 하는 방법은 아래의 그림처럼 Group Into(그룹으로 묶기)로 합니다.


아래의 그림은 그룹화가 잘 되었을 때 보여지는 ArtBoard의 캡쳐 이미지 입니다.

이제 버튼 컨트롤에 따라 영상이 움직이도록 할 차례 입니다.
미디어를 추가하면 자동으로 MediaElement 엘리먼트가 생성됩니다. 그리고 MediaElement는 동영상의 플레이 스타일을 Auto로 가지게 됩니다. 우리는 여기서 버튼을 클릭했을 때 동영상이 플레이되도록 할 것이므로 MediaElement에 하나의 속성을 추가할 것입니다.

아래의 그림에서 처럼 MediaElement에 LoadedBehavior 속성값으로 Stop을 설정합니다.

원래 원문을 살펴보면 MediaElement의 AutoPlay의 속성값으로 False를 넣으라고 되어 있는데 Blend 2.5에서 해당 속성을 찾을 수 없었습니다.
자아. 아무튼 계속 진행합니다.
이제 각각의 버튼 사용자 컨트롤에 이벤트를 연결해야 합니다. 마우스의 왼쪽 버튼이 해당 버튼을 클릭하였을 때 동작하는 이벤트의 이름을 MouseLeftButtonDown 속성값에 넣어줍니다. 아래의 그림 처럼 말이지요.


자 이제 C# 파일에 이벤트 메서드를 추가만 해주면 끝나게 됩니다.


이제 미디어 플레이어 실행을 위한 준비가 모두 마무리 되었습니다.
F5키를 클릭하여 미디어의 동작 여부를 확인하는 부분은 각자 개인에게 맡기겠습니다.

이상으로 Blend 2.5를 이용한 실버라이트 애플리케이션 개발에 대해 간략하게 알아보았습니다.
좋은 하루 되십시오.^^

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

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

원글출처 : http://silverlight.net/Quickstarts/Start/18660837-4a10-462b-bf6e-723b36748ec3.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.


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

올 해 여름도 태풍이 조용히 지나가질 않는군요.

가족들, 주위 분들 태풍 피해가 없는지 걱정입니다. 피해 없이 모든 분들이 즐거운 여름 되시길 진심으로 바랍니다.

이 번 시간은 VisualStudio에 있는 Silverlight 디자이너 미리보기 창에 대한 설명입니다.

XAML 파일을 편집하면 바로 미리보기 창에서 수정한 부분이 적용이 되어 나타나게 됩니다.

이는 파일을 저장하지 않아도 솔루션을 빌드하지 않아도 적용됩니다. (단, 코드 오류 시 적용되지 않습니다.)

위 코드는 Silverlight 응용 프로그램 만들기 시간에 만든 Page.xaml 파일입니다.
저와 같은 이름으로 솔루션을 만드셨다면 Visual Studio 2008을 실행한 후 EloiSilverlightApp 솔루션 내 Page.xaml 파일을 열어 보시기 바랍니다.

그 후 위 코드에서 빨간 상자로 하이라이트 된 부분을 각각 Width는 100으로 Height는 50으로 Background는 RoyalBlue로 변경해보도록 하겠습니다.

미리보기 창을 보면 위와 같이 크기와 색이 변경된 것을 확인하실 수 있습니다.
참고로 처음 코드는 Width는 400, Height는 300, Background는 White였습니다. ^.^

그럼 좀 더 자세히 Silverlight 미리보기 창 기능에 대해서 알아보겠습니다.

Silverlight 미리보기 창
Visual Studio 2008 용 Silverlight Tools 베타 2는 Silverlight 2 베타 2 응용 프로그램 생성을 위한 도구입니다. Visual Studio 2008의 Silverlight 미리보기 창은 WPF 디자이너 기능 일부를 가지고 있습니다.

 

지원 기능

다음은 Silverlight 2 베타 2 프로젝트의 Silverlight 미리보기 창에서 지원되는 기능들입니다.

 

1. 모든 XAML 편집 기능: 인텔리센스와 XAML 포맷팅 기능은 WPF 형식 대신 Silverlight 2 베타 2 형식이 표시된다는 것을 제외하고 WPF 디자이너의 XAML 편집 기능과 같습니다.

2. 읽기 전용 위지윅 (WYSIWYG) 미리보기 기능: 실행 전 미리보기 작업이 가능하고 확대, 축소가 가능합니다.

3. 분리된 미리보기 창과 XAML 코드 창

4. Silverlight 2 베타 2 컨트롤과 해당 아이콘들 도구 상자에 표시:  Silverlight 2 베타 2 컨트롤들은 도구 상자 탭에 마우스 오버 시 플라이 아웃 되어 알파벳 순으로 표시됩니다.

5. 도구 상자 컨트롤 XAML 코드 창으로 드래그 앤 드롭 기능: 컨트롤 추가 시 참조와 XML 네임스페이스가 자동으로 추가됩니다.

6. XAML 코드 편집 시 문서 개요 창과 태그 검색 기능: 문서 개요 창(CTRL+ALT+T)은 XAML 코드의 구조를 보여주고 검색 기능(CTRL+F)은 코드 내 문자를 검색합니다.

(메뉴 바 보기 - 문서 개요를 클릭하셔도 됩니다.)

7. .cs 또는 .vb 코드와 xaml 코드 상호 연동 기능

8. XAML 코드 창과 다른 WPF 사이 자동 업데이트 기능

9. 디자이너 컴포넌트 지원 기능

10. 에러 목록 창에 에러 표시 기능: XAML 코드가 에러가 있으면 올바른 코드 입력 전까지 마지막으로 나타난 화면이 표시되고 알림 메시지가 표시됩니다.

알림 메시지 내용:
(디자이너를 업데이트하려면 우선 문서에 있는 오류를 수정해야 합니다. 오류 목록을 열려면 여기를 클릭하십시오.)

11. 미리보기 창 위치 조정 기능: XAML 코드 창을 기준하여 가로 분할 (기본 설정), 세로 분할이 가능하며 창을 축소할 수도 있습니다.

차례대로 세로 분할, 가로 분할 (기본 설정), 창 축소 아이콘

미 지원 기능
다음은 Silverlight 2 베타 2 프로젝트에서 Silverlight 디자이너 미리보기 창에서 지원되지 않는 기능들입니다.

 

1. 미리보기 창에서 편집 불가: 도구 상자에서 컨트롤의 선택 및 이동, 항목 추가 기능은 지원되지 않습니다.

2. 속성 창 미 지원: 속성을 편집할 수 없습니다.

3. 전역화 (국제화) 기능 미 지원: 전역화 (globalization)에 대해서 자세히 알고 싶으시면 아래 링크를 참고하시기 바랍니다.
http://msdn.microsoft.com/ko-kr/library/ms227427(VS.80).aspx 

4. 리소스 동적 새로 고침 기능 미 지원: 리소스가 변경되면 재 빌드 전까지 XAML 코드는 새로 고침 되지 않습니다.


참고 사항
    Silverlight 개발 시작하기

이 번 시간은 여기 까지입니다.
7월도 끝나가네요. 비 피해 없이 여름 건강하게 보내시기 바랍니다.
음식 조심하시고 맛 있는 음식 많이 드시구요. ^________^

다음 시간에는 개체 브라우저 어셈블리 탐색에 대해서 알아보겠습니다.

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

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

원글출처 : http://silverlight.net/quickstarts/blend_quickstart/part4_duplicate_objects.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.


이번 강좌에서 우리는 play, pause, stop 과 같은 미디어 플레이어에 필요한 버튼을 만들어 보겠습니다.

앞의 강좌에서 사용했던 버튼을 이용해서 우리는 마우스오버나 클릭과 같은 행위에 응답하는 버튼을 생성할 것 입니다. 이전에 만들어 두었던 버튼을 이용하고자 한다면 Make Control...을 이용해서 간단하게 선택할 수 있습니다.

저는 새롭게 만들어 보겠습니다.^^
먼저 사용자 컨트롤을 하나 생성합니다.
그리고 Rectangle객체를 선택하고, 그려 넣습니다.

Rectangle 객체의 모서리를 마우스로 잡고 그림처럼 화살표 방향으로 이동합니다.
그러면 모서리가 둥글게 처리 됩니다.

이제 버튼 모양이 만들어 졌습니다.

버튼에 보기 좋게 배경색을 넣겠습니다. 앞의 강좌에서도 설명했지만 그레데이션을 선택하고, 팔레트에서 두 개의 포인트를 이용하여 색상을 선택합니다.


그러면 위의 그림과 같은 버튼이 만들어지게 됩니다.
이렇게 만들어진 객체를 복사해서 새로운 버튼으로 만들겠습니다.

먼저 제일 상단 메뉴에 보면 Tool 이라는 것이 보일 것 입니다. 그곳에서 Make Control... 을 선택합니다.
그러면 다이얼로그 상자가 열리면서 컨트롤의 이름을 넣으라고 합니다.
저는 그곳에 btn_play 라는 이름을 넣었습니다.
이름을 넣고 OK를 클릭하면 솔루션 탐색기에 btn_play.xaml 파일이 생성된 것을 확인할 수 있습니다.

이제 플레이 모양을 넣기 위해 Pen 을 선택합니다.
Pen을 선택하고 그림을 그릴려고 했더니.. 오우~ 제가 Artboard를 400%로 해놓고 작업을 했었네요.^^;
100%로 축소 했더니 버튼이 콩알만 합니다. 그래서 이것을 확대할 필요가 생겼습니다.

그래서 확대 했습니다. 확대하고 나니깐 아까 모서리 둥글게 처리한게 거의 보이지 않네요.^^;
그래서 다시 모서리를 둥글게 처리 했습니다. 그랬더니 버튼 아래로 하얀 그리드가 보이네요.
그래서 아래의 그림처럼 화살표 방향으로 하얀 그리드를 마우스로 드래그 했습니다.
그랬더니 버튼까지 같이 늘어나네요. 이런 낭패가...ㅎㅎ


다시 버튼 객체를 선택하고 하얀 그리드 안에 알맞게 맞춰 넣습니다.

위에서 선택한 Pen 을 이용하여 3개 의 점을 찍었더니 삼각형이 그려졌습니다.
그런데 삼각형이 똑바르게 그려지지 않았네요.^^;
그래서 이것을 보정하고자 합니다.

Pen을 이용해서 그림을 그릴 경우 직선이나 포인트가 원하는 위치에 제대로 찍히지 않아서 원하는 모양이 나오지 않을 경우에는 아래 그림처럼 Direct Selectcion 메뉴를 이용해서 그것을 보정할 수 있습니다.
아래의 그림은 Direct Selection을 이용해서 삼각형 모양을 변형시켜 본 예 입니다.
여러분도 아래의 그림처럼 포인트를 잡고 노란 화살표 방향으로 포인트를 이동시켜 보시기 바랍니다. ^^

버튼이 너무 작아서 똑바로 그릴려고 해도 잘 되었는지 확인하기 힘드네요~
그래서 Artboard 를 400%로 확대했습니다. 우와~ 댑따 잘보이는군요.ㅋ


삼각형을 잘 그렸으나 Rectangle 객체 위에 올바르게 놓여진 것 같지는 않습니다.
그래서 Expression Blend 2.5의 왼쪽에 있는 Toolbox에서 Selection을 선택하고, Rectangle객체를 선택해서 원하는 곳으로 약간 자리 이동했습니다.
자아. 이렇게 해서 play 버튼을 만들어 보았습니다.
미디어 플레이어에는 단지 play 버튼만 존재하는 것이 아니므로 다른 버튼도 만들어 보겠습니다.
기존에 이미 만들어 놓은 버튼이 있으므로 역시 복사해서 사용하도록 하겠습니다.

앞에서는 그냥 생성해서 사용했으므로 컨트롤을 복사하는 방법에 대해 조금 자세하게 설명해 보겠습니다.
먼저 왼쪽의 Object and TimeLines에서 LayoutRoot 를 선택하고 상단메뉴에서 Tool을 선택하고 Make Control...을 선택합니다.

그러면 아래의 그림처럼 다이얼로그 상자가 열립니다. 가운데 Name 부분에 버튼 컨트롤의 이름을 입력합니다.
저는 아래의 그림처럼 이름을 btn_pause로 정했습니다.

그리고 다시 Rectangle 객체를 이용해서 일시정지 마크를 만들어서 넣었습니다.
이후 작업은 위에 설명한 것과 동일합니다.


아래의 정지 버튼도 위와 동일한 방법으로 생성합니다.
그럼 이제 원하는 버튼이 모두 생성되었겠죠? ^^


다음 시간에는 위에서 생성한 버튼을 이용하여 아주 간단한 미디어 플레이어를 만들어 보겠습니다.

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

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

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

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