아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 다섯 번째인 Using the ListBox and DataBinding to Display List Data의 번역본 입니다. 본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다. 아직 남은 3개의 튜토리얼에 대한 번역이 계속 진행되고 있습니다.

실버라이트 튜토리얼 파트 5: 리스트박스와 데이터바인딩를 사용하여 데이터 표시하기

이 글은 실버라이트 2의 베타1을 사용한 Digg 클라이언트를 만드는 방법에 대한 8가지의 튜토리얼의 다섯 번째 파트입니다. 이 튜토리얼들은 순서대로 읽어야 하며 실버라이트의 핵심 프로그래밍 개념을 설명하고 있습니다.

리스트 박스와 데이터 바인딩을 사용하여 Digg 스토리 표시하기

지금까지 우리는 Digg 스토리를 표시하기 위해서 데이터 그리드컨트롤을 사용했습니다. 그 방법은 컨텐츠를 컬럼 형식으로 표시하기를 원할 때 좋습니다. Digg 클라이언트를 위해 우리는 아마도 그 모양을 약간 바꾸고 싶어하고 스토리들을 데이터그리드 보다는 리스트처럼 보이기를 원할 것입니다. 좋은 소식은 그렇게 하기가 쉽다는 것이고 코드를 바꾸지 않아도 된다는 것입니다.

데이터그리드 컨트롤을 <ListBox> 컨트롤로 대체하는 것부터 시작하겠습니다. 컨트롤 이름은 이전과 같은 이름("StoriesList")을 쓰겠습니다.



프로그램을 다시 실행시켜 검색을 해보면 리스트박스는 아래처럼 표시될 것입니다.



우리는 의문이 생깁니다. 왜 각 아이템이 "DiggSample.DiggStory"일까? 원인은 DiggStory 오브젝트를 리스트박스에 바인딩 할 때 기본적으로 ToString()이 호출되기 때문입니다. DiggStory 오브젝트의 "Title" 속성을 표시하려면 리스트박스의 "DisplayMemberPath" 속성을 설정해야 합니다.



이렇게 하면 리스트박스에 제목이 표시됩니다.



한번에 여러 개의 값이 표시되게 하거나 각 아이템의 레이아웃을 커스터마이징 하길 원한다면 리스트박스 컨트롤의 ItemTemplate를 오버라이드하거나 커스텀 데이터템플릿(DataTemplate)를 사용할 수 있습니다. 데이터템플릿 속에 각 DiggStory 오브젝트가 어떻게 표시될 지 설정할 수 있습니다.

예를 들어, 데이터템플릿을 이용하여 DiggStory의 제목과 NumDiggs 값을 동시에 표시하고 싶으면 아래와 같이 합니다.



데이터템플릿을 이용하여 DiggStory 오브젝트에서 원하는 public 속성을 데이터바인딩 시킬 수 있습니다. 위에서 본 두 개의 TextBlock 컨트롤처럼 {Binding PropertyName}을 어떻게 사용했는지 살펴보세요.

위에서 데이터템플릿을 사용하면 우리의 ListBox는 아이템들을 아래처럼 표시할 것입니다.



한걸음 더 나아가서 데이터템플릿을 아래처럼 변경해 보겠습니다. 이 데이터템플릿은 두 스택패널을 사용합니다. 하나는 수평방향으로 열 아이템을 쌓아 올리고 다른 하나는 수직방향으로 텍스트블럭을 쌓아 올립니다.



위의 데이터템플릿은 아래 스크릿샷처럼 아이템들을 표시합니다.



App.xaml에 아래 템플릿을 정의합니다. DiggPanel에서 LinearGradientBrush를 사용하여 쓸만한 노란 그라데이션 배경을 어떻게 만드는지 보세요.



리스트박스에 대한 중요한 한가지는 비록 아이템들이 커스터마이징을 해도 여전히 아이템을 선택하거나 마우스가 위로 올라갈 때 효과를 자동으로 지원한다는 것입니다. 마우스를 사용할 때나 키보드의 위/아래 방향키, home/end키를 사용할 때 모두 지원합니다.



또한 리스트박스는 full flow 크기변환을 지원합니다. 그리고 필요할 때는 컨텐츠의 자동 스크롤링을 지원합니다. 윈도우가 작아졌을 때 수평 스크롤바가 어떻게 나타나는지 살펴보세요.



다음 단계

우리는 데이터 표시방식을 리스트 형태로 바꿨고 컨텐츠 리스트를 정리했습니다.

이제 이 프로그램에서 마지막 남은 기능을 완성합시다. 그리고 사용자가 리스트 한 개를 선택했을 때 그 스토리에 대한 자세한 내용을 볼 수 있도록 하는 master/detail 작업흐름을 구현해 보겠습니다. 다음 단계인 Using User Controls to Implement Master/Detail Scenarios (한글 번역본)로 넘어가겠습니다.

Published Friday, February 22, 2008 5:51 AM by ScottGu


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret

아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 네 번째인 Using Style Elements to Better Encapsulate Look and Feel의 번역본 입니다. 본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다. 아직 남은 4개의 튜토리얼에 대한 번역이 계속 진행되고 있습니다.

실버라이트 튜토리얼 파트 4: 보다 나은 캡슐화 된 룩앤필(Look and Feel)을 위한 Style Elements 사용하기

이 글은 실버라이트 2의 베타1을 사용한 Digg 클라이언트를 만드는 방법에 대한 8가지의 튜토리얼의 네 번째 파트입니다. 이 튜토리얼들은 순서대로 읽어야 하며 실버라이트의 핵심 프로그래밍 개념을 설명하고 있습니다.

보다 나은 캡슐화 된 룩앤필(Look and Feel)을 위한 Style Elements 사용하기

WPF와 실버라이트는 컨트롤의 속성을 재사용 가능한 자원으로 캡슐화 시킬 수 있는 스타일 메커니즘을 지원합니다. 우리는 페이지로부터 분리된 파일에 이러한 스타일 선언을 저장할 수 있고 프로그램에서 여러 페이지나 컨트롤에 걸쳐 재사용 할 수 있습니다. 이것은 기본 커스터마이징 시나리오를 수행할 때 HTML에 CSS를 사용하는 것과 개념적으로 유사합니다.

노트: Color, Font, Size, Margins와 같은 기본 속성을 설정하는 것 외에도 WPF와 실버라이트에서의 스타일은 대단히 풍부한 스킨화와 컨트롤 구조의 개선을 가능케 만드는 컨트롤 템플릿을 정의하고 재사용하는데 사용 가능합니다. 그리고 오늘날 CSS와 HTML이 하지 못하는 커스터마이징 시나리오를 지원합니다. 이것에 대해서는 이 튜토리얼 시리즈의 파트 7에서 다루겠습니다.

Digg 클라이언트 프로그램을 위해 프로젝트의 App.xaml 파일 속에 스타일 선언을 정의하겠습니다. 이것은 프로그램 내의 모든 페이지와 컨트롤에서 재사용 가능하게 만듭니다.



Digg 페이지의 <Border> 컨트롤과 <TextBlock> 컨트롤을 위한 스타일 캡슐화를 시작해보겠습니다.





우리는 위에서 미리 인라인으로 선언해 놓은 <Border>와 <TextBlock> 설정을 캡슐화 하는 스타일 요소 2개를 아래와 같이 App.xaml 파일 속에 만들 수 있습니다.



어떻게 각 스타일에 유일한 키값을 부여하고 있는지 보세요. 그런 다음 <Border>와 <TextBlock> 컨트롤이 이 키를 가지고 스타일을 참조하도록 수정할 수 있습니다. 우리는 XAML의 "markup extensions" 기능을 사용하여 그렇게 만들 수 있습니다. Markup Extensions는 우리가 설정하려는 것에 대한 리터럴 값이 없을 때 사용됩니다. 이 기능을 사용하는 다른 예는 데이터 바인딩 표현법이 있습니다.



게다가 아래와 같이 Page.xaml 파일에 있는 다른 컨트롤들까지 수정 했습니다.



이러한 방법으로 스타일을 캡슐화 하는 것은 개발자가 응용프로그램의 기본 기능을 만드는데 좀더 집중하게 만들고 다른 컨트롤이나 페이지에서 스타일을 재사용 가능하게 합니다.

노트: 베타1에서 알아야 할 한가지는 우리가 스타일 이름과 속성 선언에 오타가 있다는 에러 메시지가 분명하지 않다는 것입니다. 예외를 발생 시키지만 어떤 것이 틀렸는지 말해주지는 않습니다. 이것은 베타2에서 개선될 것입니다. 스타일이 로딩될 때 발생하는 에러 메시지를 보는 동안에는 글자들을 잘 살펴보셔야 합니다.

다음 단계

이제 우리는 스타일 참조를 통해서 우리의 Page.xaml 파일의 마크업을 정리했습니다. 다음단계로 가서 스토리 데이터의 모양을 좀 더 커스터마이징 해 봅시다.

다음 튜토리얼 Using the ListBox and Databinding to Display List Data (한글 번역본)로 이동하겠습니다.

Published Friday, February 22, 2008 5:53 AM by ScottGu



WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret

아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2에서 소개된 튜토리얼 중에 세번째인 Using Networking to Retrieve Data and Populate a DataGrid 번역본 입니다. 본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다. 아직 남은 5개의 튜토리얼에 대한 번역이 계속 진행되고 있습니다.

실버라이트 튜토리얼 파트 3: 네트워킹을 이용하여 데이터를 가져와서 데이터그리드에 뿌리기

이 글은 실버라이트 2의 베타1을 사용한 Digg 클라이언트를 만드는 방법에 대한 8가지의 튜토리얼의 세 번째 파트입니다. 이 튜토리얼들은 순서대로 읽어야 하며 실버라이트의 핵심 프로그래밍 개념을 설명하고 있습니다.

네트워킹을 사용하여 Digg 스토리 가져오기

실버라이트 2는 실버라이트 클라이언트가 원격의 REST, SOAP/WS*, RSS, JSON, XML HTTP 서비스를 사용 가능하게 하는 빌트인 네트워킹 API를 가지고 있습니다. 또한 실버라이트 2는 HTTP 프로토콜을 이용하지 않고도 (채팅 서버와 같은 시나리오를 위해서) 통신할 수 있는 빌트인 소켓 API를 포함하고 있습니다.

크로스 도메인 네트워크 접근

실버라이트 2 응용프로그램은 네트워크 호출이 필요할 때 항상 "origin" 서버로부터 호출을 받을 수 있습니다. 이 의미는 응용프로그램을 다운로드 받은 같은 도메인의 URL을 호출할 수 있다는 것입니다. 또한 선택적으로 원격의 웹 서버에 클라이언트가 크로스 도메인 호출을 해도 좋다는 XML 정책 파일을 가지고 있을 때 크로스 도메인 호출을 할 수 있습니다. 실버라이트 응용프로그램이 다운로드 된 도메인과 다른 도메인의 URL을 호출할 수 있다는 말입니다.

서버 관리자가 어떤 클라이언트의 접근을 가능하게 할지 미리 관리 할 수 있게 하는 XML 정책 파일 포멧이 있습니다. 또한 플래시 크로스 도메인 정책 파일 포멧도 받아들입니다. 이 의미는 여러분이 플래시 클라이언트를 위해 웹 상에 열어놓은 크로스 도메인 접근이 가능한 원격의 REST, SOAP/WS*, RSS, JSON, XML 엔드포인트를 실버라이트 2에서 호출 가능하다는 얘기 입니다.

Digg.com은 HTTP를 통해서 제공하는 매우 쓸만한 Digg API를 가지고 있습니다. Digg.com은 Flash를 위한 크로스 도메인 정책 파일을 가지고 있기 때문에 Digg 클라이언트 응용프로그램에서 직접 API를 호출할 수 있습니다. Digg.com API에 접근하기 위해서 우리의 웹 서버를 통해서 터널을 만들 필요가 없습니다.

Digg.com의 Topic Feed API

우리는 사용자들이 이 프로그램을 사용하여 검색어를 입력(예를 들어 "Programming")하고 검색 버튼을 눌러 Digg.com으로부터 검색어와 관련된 스토리를 가져올 수 있게 하고 싶습니다.



Digg.com의 List Stories REST API Feed API를 이용해 보겠습니다. API는 URL을 통해서 매개변수를 전달 받은 다음 (예를 들어 GET /stories/topic/programming) 검색어와 관련된 Digg 스토리의 결과를 XML로 받습니다. 여기를 클릭하여 XML이 어떻게 생겼는지 보시기 바랍니다.

System.Net.WebClient를 사용하여 Digg REST Feed를 비동기 호출하기

검색 버튼을 클릭할 때 "Click" 이벤트를 핸들링 합니다. WaterMarkTextBox 컨트롤에서 검색하려는 검색어 문자열을 가져와서 관련된 XML 결과를 받기 위한 Digg 네트워크 호출을 초기화 합니다.

실버라이트는 System.Net 네임스페이스에 WebClient 헬퍼 클래스를 포함 합니다. (이것은 닷넷 프레임워크에도 포함되어 있습니다.) 우리는 이 클래스를 이용하여 URL로부터 비동기적으로 컨텐츠를 다운로드 받을 수 있습니다. Digg 스토리를 비동기적으로 다운로드 받는 것의 장점은 원격 서버로부터 응답을 기다리는 동안 UI가 응답이 없거나 차단되지 않을 것입니다. 이것은 매우 자연스러운 사용자 경험을 제공할 것입니다.

WebClient 클래스로 비동기 방식 다운로드를 하려면 요청된 컨텐츠가 다운로드 될 때 호출되는 "DownloadStringCompleted" 이벤트 핸들러 메소드를 등록하고 다운로드를 시작하기 위해서 WebClient.DownloadStringAsync(url) 메소드를 호출 하기만 하면 됩니다.



그리고 위의 코드에서 보듯이 사용자가 원하는 주제에 대한 Digg 스토리를 포함한 XML 데이터의 문자열을 비동기 적으로 가져올 수 있습니다.

LINQ to XML을 사용하여 스토리 클래스에 Digg XML 스토리 파싱하기

지금까지 Digg 스토리의 XML 데이터를 얻었습니다. 다음 단계에서는 데이터를 바인딩 시킬 "DiggStory" 오브젝트 속에 그것을 파싱하고 변환할 것입니다.

이를 위해서는 우선 Digg로부터 받은 XML 컨텐츠에 맵핑할 속성들을 가진 "DiggStory" 클래스를 정의해야 합니다. 새로운 C# 기능인 "automatic properties" 이용할 수 있습니다.



실버라이트 2에 들어있는 LINQ와 Digg로 부터 받은 XML 문서를 쉽게 파싱하고 필터링 할 수 있는 LINQ to XML (실버라이트 응용프로그램에 포함될 수 있는 추가 라이브러리)을 이용할 수 있습니다. 그리고 아래 코드를 사용하여 "DiggStory" 오브젝트의 시퀀스로 변환할 수 있습니다.



위에서 보듯이 앞으로 작업할 강력한 형식의 DiggStory 오브젝트 가지게 되었습니다.

데이터그리드 컨트롤에 Digg 스토리를 표시하기

Digg 스토리를 표시하기 위해서 새로운 실버라이트 데이터그리드 컨트롤을 사용하겠습니다. 이를 위해서 실버라이트 데이터 컨트롤 어셈블리를 참조해야 하고 데이터그리드 컨트롤 선언으로 페이지에 남아 있는 "Todo" 텍스트를 바꿔야 합니다.



데이터그리드는 명시적으로 컬럼 선언을 설정하고 타입을 표시할 수 있습니다. 다른 방법으로는 데이터그리드의 "AutoGenerateColumns" 속성을 true로 설정하여 바인딩 할 오브젝트의 스키마를 바탕으로 데이터원본 리플렉션(reflection)을 통하여 디폴트 컬럼을 만들게 하는 방법이 있습니다.

검색 버튼을 클릭했을 때 Digg로부터 받은 결과를 데이터 그리드의 "ItemSource"에 프로그램적으로 바인딩 시키기 위해 코드 비하인드 클래스를 수정해 보겠습니다.



이제 프로그램을 실행시키고 검색을 하면 Digg로부터 가져온 스토리 데이터 리스트를 보게 될 것입니다.



실버라이트 데이터그리드 컨트롤은 읽고 쓰기가 가능한 다이렉트 에디팅, 선택, 스크롤링, 컬럼의 크기변경 등 클라이언트 측에서 사용하는 그리드 컨트롤에서 기대하는 기본 기능을 모두 제공합니다. 데이터그리드를 포함하고 있는 컨테이너가 동적으로 늘어나고 줄어들어도 컨테이너를 채우는 자동 레이아웃 기능을 제공합니다. 또한 데이터그리드는 훌륭한 템플릿 모델을 제공하고 있어서 컬럼 데이터의 표시와 편집 방법을 모두 커스터마이징 할 수 있습니다. 데이터그리드의 사용법에 대해서는 조만간 더 포스팅을 하겠습니다.

다음 단계

이제 우리는 Digg.com에서 Digg 스토리를 가져올 수 있고 프로그램에 스토리 데이터를 표시할 수 있습니다. 다음 단계는 Page.xaml 로 되돌아가서 우리가 지금까지 사용해 온 인라인 스타일 선언을 제거해 보겠습니다.

다음 튜토리얼 Using Style Elements to Better Encapsulate Look and Feel (한글 번역본)로 이동하겠습니다.

Published Friday, February 22, 2008 5:54 AM by ScottGu


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret
Adobe Photoship Express Screenshot

Adobe Photoship Express


Adobe Premiere Express 에 관한 글에 이어서 이번에는 Adobe Photoshop Express 입니다.

기존 내 컴퓨터에 패키지로 설치가 되고 실행되던 응용프로그램들이 점차 웹으로 옮겨가고 있습니다. 저는 Google Docs의 Spreadsheet 서비스를 아주 유용하게 잘 사용하고 있어요. 용도는 용돈기입장. 파일을 들고 다닐 필요가 없어서 어디서든 용돈의 사용 내역을 업데이트 하는 용도로 잘 사용하고 있습니다. 물론 Microsoft의 Excel 과 비교할 때 기능이 많이 부족하고 사용이 불편하긴 하지만 특정 용도에는 아주 쓸만 합니다.  

Adobe Photoshop Express 도 마찮가지로 우리가 잘아는 Photoshop을 웹으로 옮겨놓은 서비스 입니다. 아직 데모 적용된 사이트가 없어서 직접 해볼 수는 없지만 스크린샷과 데모 동영상으로 그 기능을 확인해 볼 수 있습니다. 아래 데모 영상은 Adobe MAX 2007 Developer Conference에서 Geoff Baum (Adobe Product Manager)에 의해서 발표된 내용입니다.



단순한 기능 쉬운 사용법 때문에 사용자들이 거부감 없이 사용할 것 같습니다.

WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret

Top Banana

Microsoft Silverlight 2008. 2. 22. 00:27
세상은 한방향으로 갑니다.

어제 포스팅 했던 Adobe Premiere Express에 대항하는 Silverlight 프로젝트가 있습니다.
MIX07에서 소개되었던 Metaliq 사에서 만들고 있는 Code Name 'Top Banana'. 실버라이트 1.1으로 개발했고 아직 공개는 되지 않은 상태입니다. 데모영상도 보시고 개발자 인터뷰도 보세요.
Adobe Premiere Express보다 점도 Visual 합니다. 9개의 비디오를 한꺼번에 플레이해서 보거나 긴영상을 잘라서 편집하는 등의 기능이 보이구요. 무슨작업을 하던 화려하고 새로운 UI가 볼만 하네요.

사용자 삽입 이미지

Top Banana



WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret

Adobe Premiere Express

Adobe Flash 2008. 2. 21. 18:51

사용자 삽입 이미지


Adobe Premiere Express 는 웹에서 플래시 기반의 컨텐츠 저작도구 입니다. Adobe Premiere Express가 적용된 웹사이트에 접속을 해서 동영상, 사진, 애니메이션, 변환효과 등을 이용하여 사용자가 배치하고 자르고 변환효과를 적용하고 섞어서 최종적으로 동영상을 만들어 냅니다. Adobe Premiere Pro 가 훌륭한 영상제작용 응용프로그램인 것처럼 Adobe Premiere Express도 웹에서 경험할 수 있는 매우 간단한 영상저작용 툴입니다. 윈도우 XP나 Vista에 기본으로 들어있는 Movie Maker, 애플 맥 OSX에 들어 있는 iMovie 와 비교를 할 수 있겠습니다. 하지만 웹이라는 것이지요.

적용된 사이트 구경한번 하러 가시죠.

MTV Video Remixer 는 유명한 가수의 뮤직 비디오을 만들어 낼수 있네요. 가수별로 되어 있고 필요한 비디오 클립과 사진들이 제공되어서 타이틀 넣고 전환효과도 넣고 ... 재미있네요. 로그인 없이 사용해볼수 있으니 한번 해보세요. 이 사이트는 사용자가 평균 머무르는 시간이 15분이라고 합니다. 저도 한 15분정도 머무른 것 같네요. 그럴만 하죠. 무엇보다도 사용법이 단순하고 기능도 간단해서 맘에들어요. 전문가용이 아니라면 이렇게 단순한 조작과 간단한 기능으로 만들어야 한다고 생각합니다.

photobucket 은 기본적으로 사진과 비디오를 공유하는 UCC 사이트입니다. 사진과 비디오를 업로드하고 공개를 하기전에 Adobe Premiere Express를 통해서 편집하여 다른 사람들과 공유하는 사이트 입니다. 제가 샘플로 만든 슬라이드 쇼를 보세요. 샘플 비디오도 만들었습니다. 지금 PC에 사진과 동영상이 없어서 없어 보입니다만 ... 제대로 한번 만들어 보고 싶어지네요.
다른 UCC 사이트에 영상을 올리려면 Movie Maker 등으로 내 PC에서 편집을 하고 타이틀을 붙여서 WMV로 만들고 그것을 다시 UCC사이트에 업로드 했습니다. Adobe Premiere Express를 이용하면 그 과정 모두를 웹상으로 할 수가 있겠네요. 훌륭합니다.

Adobe Premiere Express를 사이트에 적용하려면 Adobe와 파트너쉽을 맺어야 하나 봅니다. 어떻게 개발이되고 구성이 되는지 상당히 궁금한데요. 당장은 해볼 것이 없네요. 아쉽습니다.

제가 진행하고 있는 프로젝트에 쓰면 좋은 효과가 있을 것 같은데요. 그럴 기회가 있을지 모르겠습니다.


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret