아래 글은 마이크로소프트 기술이사인 스캇 구슬리의 블로그에 게시된 Silverlight2 Beta2 Released 라는 글의 번역본입니다. 실버라이트2 베타2의 변경사항에 대한 내용이 간략하게 표현되어 있고 특히 익스프레션 블렌드를 사용하여 컨트롤 템플릿을 만들고 수정하는 방법에 대한 내용이 좋습니다. 실버라이트 베타2를 공부하시는 대한민국의 모든 분들에게 아래 번역글이 도움이 되었으면 합니다. ^^

실버라이트2 베타2 출시
 
오늘 실버라이트2 베타2가 출시되었습니다. 여러분은 실버라이트2 베타2와 비주얼 스튜디오와 익스프레션 브랜드를 지원하는 툴을 여기에서 다운로드 받을 수 있습니다.
 
베타2 는 아래 소개할 많은 기능들이 추가되었습니다. 하지만 여전히 10초안에 설치 할 수 있는 4.6MB의 다운로드 크기를 유지하고 있습니다. 실버라이트의 작동을 위해서 .NET 프레임워크나 그 외 다른 어떠한 소프트웨어도 필요하지 않으며 모든 기능은 맥과 윈도우의 크로스 브라우저 환경에서 작동합니다. 또한 문라이트(Moonlight 2)를 통해서 리눅스를 지원할 예정입니다.
 
실버라이트2 베타2부터 상업용 응용프로그램에서 사용 및 배포할 수 있는 고라이브 라이센스(go-live license)를 지원합니다. 베타2와 최종 릴리즈 사이에 약간의 API 변경이 있을 예정이기 때문에 여러분이 베타2로 작성하는 응용프로그램들은 최종 릴리즈가 나왔을 때 약간의 업데이트가 필요할 것입니다. 하지만 제 생각에는 이런 변화들은 직관적이며 상대적으로 쉬울 것이기 때문에 지금 바로 상용 프로젝트를 계획하고 시작하셔도 될 것입니다.
 
베타2 응용프로그램 개발을 위해 VS 2008 Tools for Silverlight와 Expression Blend 2.5 June Preview를 다운로드 받아서 사용하세요. 두 가지 모두 여기에서 다운로드 받을 수 있습니다. VS 2008 Tools for Silverlight는 VS 2008과 VS 2008 SP1 beta에서 모두 작동합니다.
 
UI와 컨트롤 개선사항
 
실버라이트2 베타2는 UI와 컨트롤에서 여러 가지 변화가 있습니다.
 
빌트인 컨트롤 추가
 
베타1에서는 겨우 몇 개의 컨트롤만 실버라이트 코어 플러그인 에 포함이 되어 있었습니다. 버튼(Button), 리스트박스(ListBox), 슬라이더(Slider) 등 대부분의 컨트롤들이 다른 어셈블리에 들어있었고 프로그램에 따로 참조를 시켜야 했습니다. 이것은 다운로드 해야 할 크기를 늘리는 결과를 초래했죠. 베타2에서부터는 30개 이상의 기본 컨트롤이 실버라이트 코어에 포함되어 플러그 인과 함께 설치됩니다. 이 의미는 기본 컨트롤을 사용하는 프로그램도 3kb 정도의 작은 크기로 만들 수 있어 실버라이트 응용프로그램의 다운로드 크기를 줄이고 빠른 시작을 할 수 있게 만듭니다.
 
실버라이트2 셋업에 포함되어 설치되는 기본 컨트롤에 더하여 추가적으로 여러분의 실버라이트 응용프로그램에서 참조로 사용할 수 있는 추가 어셈블리로 구현된 상위레벨의 컨트롤들을 이번 주에 출시할 예정입니다. 기능이 향상된 데이터그리드(DataGrid), multiday selection과 blackout date를 지원하는 달력(Calendar) 그리고 베타2에서 새로 추가된 탭패널(TabPanel) 같은 컨트롤들을 포함합니다.
 
우리는 최종적으로는 100개 이상의 실버라이트 컨트롤을 출시할 수 있기를 기대하고 있습니다.
 
컨트롤 템플릿의 편집하기 지원
 
WPF와 실버라이트 프로그래밍 모델의 가장 강력한 기능 중에 하나는 바로 컨트롤의 룩앤필을 완전히 변경 가능하다는 것입니다. 이는 디자이너와 개발자가 세련되고 극적인 방법으로 컨트롤의 UI를 변경할 수 있는 대단한 유연성을 제공 합니다. 이런 개념에 대해서는 지난번에 포스팅 한 실버라이트 컨트롤 템플릿에 관한 글 (한글 번역본)에서 잠시 다룬 적이 있습니다.
 
이번 주에는 디자이너가 XAML 소스코드를 편집하지 않고도 컨트롤의 템플릿 디자인을 쉽고 빠르게 변경할 수 있도록 도와주는 익스프레션 블랜드 2.6 6월 프리뷰도 함께 출시됩니다.
 
컨트롤 템플릿을 수정하는 방법을 함께 보겠습니다. 우선 익스프레션 블랜드 디자인을 열어서 슬라이더(Slider) 컨트롤 두 개를 드래그 앤 드랍으로 떨어드려 놓습니다.
 

사용자 삽입 이미지

 
만약 기본 슬라이더 컨트롤의 손잡이 부분이 너무 크고 두꺼워서 변경이 필요하다고 결정했다고 가정을 해 봅시다. 컨트롤 템플릿 편집을 이용해서 변경하려면 디자인 뷰에서 슬라이더 컨트롤을 오른쪽 클릭한 후 "Edit Control Parts" 메뉴를 선택합니다. 빈 컨트롤 템플릿을 만들어서 처음부터 시작하거나 빌트인 컨트롤의 템플릿을 복사해서 일부만 변경하는 방법을 선택할 수 있습니다.
 
사용자 삽입 이미지

 
기본 컨트롤 템플릿의 복사본 편집하는 방법을 선택하면 블랜드는 우리가 새로 만들고 있는 재사용 가능한 스타일 리소스의 이름을 물어봅니다. 우리는 이름을 정해 넣고 그 스타일을 응용프로그램 레벨(Appl.xaml)에 넣을지 아니면 지금 선택된 페이지/유저 컨트롤 넣을 것인지 선택합니다.

사용자 삽입 이미지

 
"OK"를 클릭하면 슬라이드 컨트롤의 템플릿 편집모드가 열립니다. 우리는 슬라이더 컨트롤 템플릿에 포함되어 있는 앨리먼트를 추가/삭제, 미세조정, 변경을 할 수 있습니다. 아래 그림처럼 템플릿 편집 모드에서 슬라이더 컨트롤 템플릿에 포함된 앨리먼트를 볼 수 있고 선택할 수 있습니다. (Object 윈도우의 빨간색 상자르 보세요)
 
슬라이더 손잡이를 좀더 얇게 하기 위해서 컨트롤 템플릿에서 "HorizontalThumb"앨리먼트를 선택하고 디자인 뷰에서 변경하거나 또는 속성값을 직접 변경하여 너비를 조정합니다.

사용자 삽입 이미지


 
그런 후에 디자인 뷰 상단의 네비게이션 바를 사용하여 원래의 페이지로 돌아가서 컨트롤 템플릿이 변경된 모양을 보세요.
 
사용자 삽입 이미지

현재 하나의 슬라이더 컨트롤만 우리가 정의한 컨트롤 템플릿의 새로운 스타일 리소스를 사용하고 있습니다.
 
또 다른 슬라이더 컨트롤에 같은 스타일 리소스를 적용하기 위해서는 변경할 컨트롤에서 오른쪽 마우스클릭을 하고 "Apply Resource" 메뉴에서 "ScottSlider"를 적용해 줍니다.

사용자 삽입 이미지
 
일단 두개의 슬라이더 컨트롤에 같은 스타일을 적용하면

사용자 삽입 이미지

우리가 만든 "ScottSlider" 스타일의 변경사항이 자동으로 두 개의 컨트롤에 모두 적용될 것입니다.

실버라이트 2의 모든 컨트롤은 컨트롤 템플릿을 지원하고 익스프레션 블랜드를 통해서 위에서 살펴본 편집 방법을 적용할 수 있을 것입니다.
 
비주얼 상태 매니저 (Visual State Manager, VSM) 지원
 
실버라이트와 WPF 의 컨트롤 템플릿은 컨트롤의 모양을 커스터마이징 할 수 있도록 지원함 과 동시에 "feel" 또한 커스터마이징 할 수 있습니다. "feel"의 의미는 컨트롤의 상호작용을 말합니다. 예를 들어, 눌려져 있는 상태, 비활성 상태, 컨트롤 내부의 무엇이 선택된 상태에서 컨트롤을 눌렀을 때, 포커스를 받을 때, 포커스를 잃을 때 어떻게 반응하느냐에 대한 것입니다. 컨트롤이 이런 상태에 있을때 사용자의 인터랙션이 발생하면 우리는 때로 애니메이션을 실행 시키기를 원합니다.
 
실버라이트2 베타2에서 새롭게 소개된 것 중에 하나가 바로 컨트롤 템플릿의 인터랙션을 만들기 쉽게 해주는 "비주얼 상태 매니저 (Visual State Manager, VSM)입니다. VSM은 컨트롤 템플릿과 함께 두 개의 기본 개념을 소개합니다. "비주얼 상태(Visual States)"와 "상태 변환(State Transitions)"가 바로 그것 입니다. 예를 들어서 버튼과 같은 컨트롤은 여러 개의 비주얼 상태를 가지고 있습니다. - "Normal", "MouseOver", "Pressed", Disabled", "Focused", "Unfocused"가 그것 입니다. 블랜드의 템플릿 편집 모드를 통해서 디자이너는 버튼의 각 상태를 쉽게 편집할 수 있는 능력이 생김과 동시에 하나의 상태에서 다른 상태로의 전이가 일어날 때 얼마나 오랫동안 애니메이션이 지속되어야만 하는지 같은 변환 규칙을 정의할 수 있습니다. 런타임에서 실버라이트는 하나의 상태에서 다른 상태로 변환될 때 적당한 애니메이션 스토리보드를 부드럽고 극적인 방법으로 보여줄 것입니다.
 
이런 모델의 좋은 점은 바로 디자이너가 코딩을 할 필요가 없다는 것과, 스토리보드를 직접 만들 필요가 없다는 것이며 컨트롤을 만들기 위해서 컨트롤의 오브젝트 모델을 이해할 필요가 없다는 것입니다. 이것은 컨트롤 템플릿을 만들기 위한 학습 곡선 (learning curve)를 쉽게 만들어 줍니다. 현재의 그래픽 디자이너들이 아주 쉽게 실버라이트 프로젝트를 수행할 수 있다는 얘기죠. 우리는 올해 이후에 윈도우 응용프로그램에서도 같은 방식의 접근을 할 수 있도록 비주얼 상태 매니저(VSM)를 WPF에서도 사용 가능하게 할 것입니다. WPF와 실버라이트 프로젝트 사이에 컨트롤 템플릿이 공유되듯이 말입니다.
 
그 예를 한번 보시죠. 버튼컨트롤을 디자인 영역에 올려 놓습니다.
 
사용자 삽입 이미지

 
그런 후에 버튼 위에서 오른쪽 마우스 클릭을 하고 컨트롤 템플릿을 수정 합니다. 위에서 살펴본 슬라이드의 예와 같은 기본 컨트롤 템플릿을 복사해서 사용하는 대신 빈 컨트롤 템플릿을 만들어서 시작해 보겠습니다.
 
사용자 삽입 이미지


블랜드는 스타일 리소스의 이름을 물어볼 것입니다. "ScottButton"이라고 이름을 짓고 OK버튼을 클릭합니다. 이제 디자인 영역이 버튼을 위한 편집모드로 바뀔 것입니다. 빈 컨트롤 템플릿에서 시작합니다.

사용자 삽입 이미지


블랜드에 새롭게 추가된 "상태(States)" 윈도우가 보입니다. 이 창은 버튼 컨트롤에서 사용 가능한 모든 "비주얼 상태(Visual State)"를 보여줍니다. 위의 그림에서는 버튼 컨트롤 템플릿의 기본 비주얼 트리(Visual Tree)를 정의하는 "기본(Base)" 상태가 현재 선택되어 있습니다.
 
그 다음에는 아래의 그림과 같은 벡터 앨리먼트를 기본상태(base state)속에 추가합니다. 우리는 블랜드에서 제공하는 빌트인 벡터 드로잉 도구를 사용하거나 익스프레션 디자인 (Expression Design)을 사용할 수 있고 또한 어도비 일러스트레이터 에서 벡터 아트를 만들고 블랜드에 임포트(import) 시키는 방법을 사용할 수 있습니다. 아래는 4개의 "Path" 앨리먼트를 사용했습니다. 하나는 "background" 라는 이름의 둥근 배경과 "shadow"라는 이름의 그림자, 위쪽에는 40%의 투명도를 가지는 "shine"이라는 반사효과 그리고 집 모양의 기본 내부 컨텐츠입니다.
 
사용자 삽입 이미지

 
노트: 우리는 이미지를 사용할 수 있습니다. 하지만 벡터 앨리먼트를 사용하면 나중에 버튼의 크기변환/늘리기/변환(scale/stretch/transform)을 할 때 유연성을 얻을 수 있으며 어떠한 해상도 또는 크기변환에서도 (특히 실버라이트의 모바일 시나리오에서 사용하는 경우처럼 스크린의 해상도가 다르거나 작은 경우) 또렷한 룩앤필을 얻을 수 있습니다.
 
위와 같이 기본상태의 디자인이 끝났다면 F5를 눌러서 프로그램을 브라우저에서 실행해봅시다.
 
사용자 삽입 이미지

보시는 바와 같이 우리의 버튼 컨트롤은 멋진 모양을 가지고 있네요. 버튼의 새로운 모양에도 불구하고 여전히 포커스(focus), 클릭(click) 그리고 마우스 올림(hover)이벤트를 이전과 같이 발생 시킵니다. 결국 개발자들은 새로운 컨트롤 템플릿을 버튼에 적용해도 어떤 코드 변경도 필요가 없습니다.
 
그렇지만 우리의 버튼컨트롤 템플릿이 좋지 않은 점은 인터렉티브하지 않다는 것입니다. 우리가 버튼의 포커스를 줬다 안 줬다 하거나 마우스를 올렸다 내렸다 해도 아무런 비주얼 피드백(visual feedback)이 없다는 것입니다. 또한 클릭할 때 눌려졌다가 되돌아오는 멋진 애니메이션도 없다는 것이죠.
 
우리의 버튼에 인터랙션을 주려면 블랜드로 돌아가서 버튼의 컨트롤 템플릿에 조금 더 작업을 해야 합니다. 지금까지 버튼컨트롤의 기본 상태를 위한 벡터 그래픽 앨리먼트를 추가했습니다. 이것은 버튼의 모든 비주얼 상태에서 사용될 기본 모양을 정의한 것입니다. 이제 다시 돌아가서 각각의 비주얼 상태를 변경시켜보겠습니다.
 
예를 들어서 버튼의 마우스 오버 행동을 만들기 위해서는 상태(States) 윈도우에서  "MouseOver" 상태를 선택합니다. 그리고 버튼의 모양을 살짝 바꿔 줍니다. 아래 그림에서는 컨트롤 템플릿에 있는 "shine" 벡터 앨리먼트를 선택해서 속성 창에서 투명도(Opacity) 속성을 변경하여 마우스 오버 상태에서 좀더 잘 보이게 만들어 줍니다. 블랜드가 "shine"앨리먼트를 빨간색 점과 함께 자동으로 하이라이트 시켜주고 오브젝트 윈도우에서 투명도 속성을 그 아래 보여주는 모습을 보세요. 이런 것들이 컨트롤 템플릿에서 기본 상태와 마우스 오버 상태 사이의 변경사항을 쉽게 추적 가능하도록 만들어 줍니다.
 
사용자 삽입 이미지

이제 상태 윈도우에서 "Pressed"상태를 선택하고 버튼이 눌렸을 때 어떻게 보여야 하는지 만들어 보겠습니다. 기본 상태에서 두 가지를 변경하겠습니다. 첫 번째 변경은 "shine" 앨리먼트를 마우스 오버 상태와 같이 변경합니다. 두 번째 변경은 그림자 앨리먼트를 고정한 상태에서 버튼 컨트롤의 컨텐츠를 약간만 이동시킵니다. 이렇게 하면 괜찮은 "depressed" 버튼 모양이 만들어 질 것이고 기본 상태와 잘 대조를 이룰 것입니다.
 
사용자 삽입 이미지

블랜드의 디자이너에서 배경, 집 모양의 컨텐츠 그리고 "shine" 앨리먼트를 선택해서  속성 브라우저에서 RenderTranform 의 오프셋에 아래와 같이 적용합니다.
 
사용자 삽입 이미지

이제 다시 프로그램을 브라우저에 실행하면 버튼은 이제 비주얼 피드백(visual feedback)으로 상호작용할 것입니다. 아래는  "normal" 모양의 버튼입니다.
 
사용자 삽입 이미지

 
버튼 위에 마우스를 올리면 아래와 같이 밝아집니다.

사용자 삽입 이미지
 

버튼을 클릭하면 버튼은 눌려지고 그림자가 가려집니다. 그런 후에 마우스를 버튼에서 때면 다시 반대로 튀어 나오는 모양일 것입니다.

사용자 삽입 이미지

 
우리는 버튼의 룩앤필을 변경하는 XAML 또는 어떠한 코드도 변경하지 않았다는 걸 주목하세요. 새로운 비주얼 상태 매니저는 우리를 위해 상태 사이의 움직임을 처리합니다.
 
기본적으로 실버라이트는 어떤 비주얼 상태에서 다른 비주얼 상태로의 움직일 때 변경에 대한 스토리보드를 극적으로 구성하고 실행하며 두 상태 사이에 부드러운 애니메이션을 제공합니다. 여러분은 이렇게 작동시키기 위해서 어떠한 코드도 작성할 필요도 없습니다. (여러분이 원한다면 원하는 스토리보드를 추가하고 수정할 수 있습니다. 하지만 대부분의 경우 자동화된 스토리보드를 사용할 것입니다.)
 
실버라이트의 자동 변환 기능에서 여러분이 사용할 수 있는 기능 중 하나는 비주얼 상태 변환이 발생하는 동안의 시간 간격을 변경할 수 있다는 것입니다. 비주얼 상태 변경의 오른쪽에 있는 화살표를 클릭해서 컨트롤이 어떤 특정 상태에서 다른 상태로 이동할 때 변환 애니메이션이 얼마나 오랫동안 지속될지를 결정할 수 있습니다.
 
예를 들어서 "Normal"상태에서 "MouseOver"상태로 변경되는데 0.2초가 걸리게 하고 싶다면 아래와 같은 규칙을 추가하면 됩니다.

사용자 삽입 이미지

이 규칙을 Normal ->MouseOver 사이의 변경을 0.2걸리도록 아래처럼 설정할 수 있습니다.
 
사용자 삽입 이미지


그런 후에 "MouseOver"상태를 클릭하고 "MouseOver->Normal" 변환을 0.4초 걸리도록 규칙을 만들어 설정할 수 있습니다.
 
사용자 삽입 이미지


다시 프로그램을 실행시켜서 마우스 오버 시나리오가 좀더 부드럽고 세련된 느낌을 가질 수 있도록 변환 애니메이션이 느려진 것을 확인 할 수 있습니다. 이를 위해서 단 한 줄의 코드도 작성하지 않았습니다. 실버라이트2의 모든 컨트롤은 위와 같이 컨트롤 템플릿과 비주얼 상태 매니저가 구현되어 있습니다.
 
비주얼 상태 매니저와 컨트롤 템플릿 편집에 대해서 조금 더 배우고 싶으시면 여기여기의 튜토리얼과 여기, 여기, 여기의 비디오들을 확인하세요.
 
 
TextBox
 
베타2는 TextBox 컨트롤의 많은기능 향상을 포함하고 있습니다. 자동 줄 바꾸기(text-wrap), 여러 줄 선택(multi-line text selection), 도큐먼트 네비게이션 키(document navigation keys), 그리고 클립보드에서 복사하기/붙여넣기를 지원합니다.
 
베타2는 또한 영어 문자 셋 이외의 문자에서도 (candidate window selection을 포함한) IME 레벨3 입력장치를 지원합니다.
 
사용자 삽입 이미지


입력 지원
 
베타2는 풀 스크린 모드에서 추가적인 키보드 지원을 합니다. 방향키, 탭, 엔터, 홈, 엔드, 페이지 업/페이지다운, 스페이스 키가 그것입니다. 노트: 패스워드 스푸핑 시나리오를 피하기 위해서 전체 키 입력을 지원하지는 않습니다.
 
베타2는 또한 잉크와 스타일러스 입력 지원을 위한 새로운 API들을 지원합니다.
 
UI 자동화와 접근성(UI Automation and Accessibility)
 
베타2에는 UI 자동화 프레임워크 지원이 포함되어있습니다. UI 자동화(UIA)는 스크린 리더와 다른 보조 도구(assistive tools)가 실버라이트2 응용프로그램이 만들어내는 컴포넌트를 인식하고 상호작용할 수 있도록 합니다.
베타2는 UIA 프레임워크를 사용하고 UIA 기반의 행동을 실버라이트 컨트롤의 초기 셋에 추가를 합니다. 실버라이트2의 마지막 릴리즈에서는 모든 컨트롤들이 UIA 기반의 행동을 포함할 것입니다. 우리는 또한 고대비 설정(high-contrast) 시나리오 지원을 추가할 것입니다. (역자주: 고대비 설정은 제어판의 내게 필요한 옵션 모음을 선택해서 어떤 기능인지 확인해 볼 수 있습니다.) 이러한 기능들은 Section 508(역자주: 미국 정부에서 제정된, 장애인의 정보 접근권에 대한 일종의 가이드 라인)에 호환하는 접근성 높은 응용프로그램의 제작을 가능하게 합니다. UIA는 또한 자동화된 UI 테스트를 가능하게 할 것입니다.
 
 
애니메이션과 그래픽 시스템
 
베타2에서 커스텀 의존 속성(Dependency Property)의 애니메이션을 가능하게 했습니다. 오브젝트 애니메이션(animation structs) 또한 지원합니다. 베타2는 또한 렌더링 트리(render tree)의 부분 애니메이션을 가능하게 할 수 있도록 코드에서 스토리보드를 생성하는 능력을 지원합니다. 애니메이션을 코드에서 완전히 제어가능 합니다. 프레임 당 애니메이션 콜백 지원은 마지막 릴리즈에 포함될 것입니다.
 
베타2는 향상된 비주얼 트리 인스팩션(visual tree inspection) API를 제공하는 새로운 비주얼 트리 정적 클래스를 포함합니다. 이것은 어떤 앨리먼트의 자식 앨리먼트를 열거하거나 주어진 앨리먼트의 조상과 부모를 얻어오는 능력과 같은 기능을 지원합니다. 이 API들은 모든 UIElement에 대해서 작동합니다.
 
딥줌(DeepZoom)
 
베타2는 딥줌 컬렉션을 표현하는 XML 기반의 메니페스트 파일을 지원합니다. 베타2는 또한 개발자가 고성능 렌더링 딥줌 포맷을 따르지 않는 현존하는 이미지 피라미드를 연결할 수 있는 향상된 MultiScaleTileSource 지원이 포함되었습니다.
 
WPF Compatibility
 
실버라이트 베타2는 실버라이트와 WPF 사이의 API 호환성을 향상시키기 위한 많은 수정 내용이 반영되었습니다. (노트: 마지막 실버라이트 릴리즈는 추가된 호환성 작업이 포함될 예정입니다.) 또한 이번 여름에는 실버라이트2에서 닷넷 3.5 SP1의 WPF로 소개될 새로운 API들을  추가하고 있습니다.
 
올해 이후에 포함될 예정인 VSM 지원을 겸한 이러한 작업들은 브라우저와 데스크톱 응용프로그램 사이의 코드 재사용성을 향상시켜 줄 것입니다.
 
 
미디어 향상
 
실버라이트 2 베타2는 중요한 미디어 관련 기능이 포함되었습니다.
 
어댑티브 스트리밍(Adaptive Streaming)
 
베타2는 어댑티브 스트리밍(Adaptive Streaming)을 지원합니다. 어댑티브 스트리밍(Adaptive Streaming)은 멀티 비트레이트로 인코딩한 미디어를 실버라이트가 네트워크와 CPU 상태에 따라서 동적으로 비트레이트를 변경하는 것을 가능하게 합니다.
 
이 기능은 사용자의 미디어 경험을 좀더 풍부하게 향상시켜줍니다. 컨텐츠 제공자가 낮은 비트레이트와 높은 비트레이트 버전의 비디오를 제공 가능하게 해주며 실버라이트가 사용자의 하드웨어와 네트워크 능력에 따라서 적합한 한가지를 선택할 수 있게 합니다. 만약 비디오 시청 중에 컴퓨터와 비디오의 환경이 변하면 실버라이트는 버퍼링이나 순간적인 단절 없이도 자동으로 보다 적합한 비트레이트로 전환합니다.
 
실버라이트의 어댑티브 스트리밍지원은 확장 가능합니다. 어디서 미디어 컨텐츠가 제공되고 어떤 비트레이트가 사용되어야 하는지를 결정하는 로직을 플러그인 시킬 수 있습니다.
 
컨텐츠 보호 (Content Protection)
 
베타2는 윈도우 DRM과 PlayReady DRM을 지원합니다. 두 가지 모두  크로스 브라우저와 크로스 플랫폼 환경에서 작동합니다.
 
서버 측 플레이 리스트
 
베타2는 서버 측 플레이 리스트를 지원합니다. (이전에는 클라이언트 플레이리스트 지원만 있었습니다)
 
네트워킹 향상
 
베타2는 네트워킹 부분의 여러 가지 변화가 있습니다.
 
크로스 도메인 소켓
 
베타2는 HTTP와 소켓을 사용한 크로스 도메인 네트워킹이 가능합니다. 이것은 여러분의 실버라이트 응용프로그램이 다운로드 된 사이트 뿐만 아니라 다른 사이트에서도 호출을 할 수 있다는 것입니다.
 
실버라이트는 크로스 도메인 네트워킹이 가능한지 가능하지 않은지를 판단하기 위해서 타깃 서버의 XML 정책파일을 체크할 것입니다. 실버라이트는 플래시의 정책파일뿐만 아니라 새로운 XML 정책파일 포맷을 지원합니다. 플래시 정책 파일을 지원한다는 것은 기존 사이트가 플래시를 위해 오픈을 해 놓았다면 아무런 추가 작업 없이도 실버라이트에서 호출을 할 수 있다는 것입니다.
 
백그라운드 쓰레드 네트워킹 (Background Thread Networking)
 
베타2는 백그라운드 쓰레드에서 네트워크 응답을 처리하는 것과 같이 백그라운드 쓰레드를 통해서 네트워크 요청이 가능합니다. 이것은 몇 가지 강력한 시나리오를 가능하게 하고 HTTP와 소켓을 통한 네트워크 통신을 하는 동안 브라우저의 UI 쓰레드를 차단하는 것을 피할 수 있게 합니다.
 
양방향 통신 (서버 푸쉬) (Duplex Communication (Server Push))
 
베타2는 서버 측의 WCF 서비스와 양방향 채널을 설정합니다. 이것은 서버 측의 변경을 검사하기 위해서 실버라이트 클라이언트가 폴링을 하지 않고도 서버 측에서 메시지를 "push" 할 수 있는 깔끔한 프로그래밍 모델을 가능하게 합니다. 이러한 프로그래밍 모델은 인스턴스 메신저/채팅 프로그램, 증시 확인이나 거래 응용프로그램을 포함한 매우 여러 가지 시나리오에서 유용합니다.
 
웹 서비스(Web Services)
 
베타2는 SOAP 기반의 웹서비스에서 중요한 향상이 있습니다. 웹 서비스 프록시 클래스의 엔드 포인트 URL은 프로그램의 재 컴파일 없이도 수정이 가능하게 되었습니다. 비주얼 스튜디오 또한 클라이언트로 서비스를 배포하기 위한 ASP.NET 웹 프로젝트에 추가 할 수 있는 새로운 실버라이트용 WCF 서비스((Silverlight-Enabled WCF Service)용 프로젝트 아이템 템플릿을 가지고 있습니다.
 
REST and ADO.NET 데이터 서비스
 
실버라이트는 REST 방식의 웹서비스를 지원합니다.
 
베타2는 ADO.NET 데이터 서비스(이전 코드네임: "Astoria")를 호출하고 사용할 수 있습니다. ADO.NET Data Service는 닷넷 3.5 SP1의 한 부분으로 출시될 예정이고 REST URI를 사용하는 어떠한 클라이언트에서도 사용 가능한 데이터 엔드 포인트를 배포하기 쉽게 만들어 줍니다. 실버라이트 베타2는 ADO.NET 데이터 서비스를 쉽게 호출 가능한 클라이언트 지원을 포함합니다. (그리고 선택적으로 실버라이트에서 원격 REST 질의를 표현할 수 있는 LINQ 표현 식을 사용합니다. )
 
JSON
 
실버라이트는 JSON 기반의 서비스 호출을 지원합니다.
 
베타2는 이제 실버라이트에서 JSON 결과를 쉽게 쿼리하고 필터링하고 맵핑할 수 있는 LINQ to JSON 지원을 포함합니다. 이것은 현재 웹에 배포되어 있는 AJAX 엔드 포인트와 서비스를 호출하고 사용하기 쉽게 만들어 줍니다.
 
데이터 기능향상
 
실버라이트 베타2는 데이터 영역의 몇 가지 향상이 있습니다.
 
데이터그리드 (DataGrid)
 
베타2는 데이터그리드 컨트롤의 몇 가지 새로운 기능이 추가되었습니다.
 

  • 열과 행에 대해서 자동 크기조절 기능
  • 열 정렬 (한 개 열 그리고 여러 개의 열에 대한 정렬 지원)
  • 사용자가 열의 순서를 변경가능 (순서를 변경하기 위해 열을 드래그 앤 드롭 가능 하게 함)
  • 열 잠금 지원 (특정열의 변경을 막을 수 있음)
  • 성능향상 및 버그 수정


데이터 바인딩

 

  • 베타2는 좀더 많은 데이터 바인딩과 유효성 체크를 지원합니다.
  • 바인딩 당 유효성 체크와 BindingValidationError 이벤트 핸들러 지원(양방향 바인딩(TwoWay Binding)에서 입력 유효성 체크 가능)
  • 어태치드 프로퍼티(Attached Property)에 바인딩 표현 지원
  • 풍부한 바인딩 값 변환 지원 (value conversion fallback 포함)
격리된 저장소 (Isolated Storage)
 
실버라이트는 클라이언트의 로컬에 데이터를 저장이 가능합니다. (이 기능을 "Isolated Storage"라고 부릅니다). 응용프로그램은 사용자에게 이 격리된 저장소를 얼마나 허용할지를 사용자에게 물어볼 수 있습니다. (예를 들어 사용자는 이메일 프로그램을 위해서 로컬 저장소를 50MB 사용을 허락 할 수 있습니다).
 
베타2는 실버라이트 응용프로그램이 사용하는 기본 로컬 저장소를 1MB 크기로 늘렸습니다. 베타2는 또한 쉽게 로컬 저장소를 폐기하고 삭제하는 기능을 제공하는 것과 같은 사이트 당 저장소의 허가를 관리하기 위한 보다 나은 사용자 지원을 제공합니다. 이를 제어하기 위한 관리 UI는 사용자가 실버라이트 응용프로그램 위에서 오른쪽 클릭을 해서 "Silverlight Configuration" 메뉴 옵션을 선택하면 볼 수 있습니다.
 
실버라이트 1.0과 실버라이트2 베타1과의 호환성에 대한 이해
 
실버라이트2 베타2는 실버라이트 1.0 응용프로그램과의 호환성을 유지합니다.
 
실버라이트2 베타2에서는 베타1용 응용프로그램이 실행되지 않을 것입니다. 실버라이트2에 추가된 새로운 기능을 위해 두 가지 베타버전 사이에 몇 가지 API변경이 있습니다. 실버라이트2 베타1이 설치된 브라우저에서 실버라이트2 베타2 응용프로그램이 서비스되는 사이트를 방문하면 새로운 베타버전의 업그레이드에 대한 질문을 받을 것입니다. 한번 업그레이드를 하면 베타2를 지우지 않고서는 베타1 응용프로그램을 실행 할 수 없습니다. 이것은 여러분이 베타1으로 만든 샘플을 웹에 배포하고 있다면 아마도 곧 베타2로 업그레이드 해야 할 것이라는 의미입니다.
 
우리는 베타1과 베타2의 변경사항에 대한 도움을 줄 수 있는 자세한 문서를 여기에 공개했습니다. 좀더 많은 베타1과 베타2의 변경에 대한 자세한 내용을 알고 싶으면 Shawn Wildermuth의 What chaged in Silverlight 2 Beta2Upgrading your Silverlight 2 Project to Beta2 의 포스트를 추천합니다.
 
요약
 
실버라이트2와 베타2 릴리즈의 다운로드를 알고 싶으면 http://www.silverlight.nethttp://expression.microsoft.com 을 방문하세요. 우리는 관련 글, 튜토리얼, 비디오를 며칠 또는 몇 주 후에 두 사이트에 게시를 할 것입니다. 저 역시 몇 가지 튜토리얼을 여기 제 블로그에 포스팅을 할 것입니다.
 
베타1이 출시된 몇 달 전에 작성한 저의 글 First Look at Silverlight 2First Look at Expression Blend with Silverlight 2를 읽지 않으셨다면 읽어보시기를 추천 드립니다. 이 글들은 실버라이트 프로그래밍 모델과 비주얼 스튜디오 2008과 익스프레션 브랜드를 어떻게 사용하는지를 설명합니다.
 
도움이 되었기를,
 
Scott
 
Published Friday, June 06, 2008 7:50 PM by ScottGu

원본출처 : http://weblogs.asp.net/scottgu/archive/2008/06/06/silverlight-2-beta2-released.aspx


WRITTEN BY
ONESTONE

트랙백  2 , 댓글  0개가 달렸습니다.
secret
DeepZoom 강좌 1. Deep Zoom Composer를 이용하여 .sdi 파일 만들기
DeepZoom 강좌 2. 실버라이트의 <MultiScaleImage> 컨트롤 사용
DeepZoom 강좌 3. Deep Zoom 마우스로 컨트롤 하기
DeepZoom 강좌 4. Deep Zoom 마우스 컨트롤 코드 살펴보기

DeepZoom 강좌 4. Deep Zoom 마우스 컨트롤 코드 살펴보기

지난 3개의 Deep Zoom 강좌를 통해서 우리는 Deep Zoom Composer를 이용해서 SeaDragon Image(.sdi)를 만들고 <MultiScaleImage>를 사용하여 Silverlight2 Developer Poster를 브라우저에 올렸습니다. 그리고 마우스 클릭, 휠, 드래그를 구현하여 큰 이미지를 줌인/줌아웃하면서 네비게이션을 했습니다. 그 과정에서 마우스 컨트롤을 담당하는 클래스를 만들어서 사용했었는데 이번 강좌에서는 그 코드를 조금만 살펴보겠습니다.

강좌에 사용한 코드는
* The Weekly Source Code 18 - Deep Zoom (Seadragon) Silverlight 2 MultiScaleImage Mouse Wheel Zooming and Panning Edition - Scott Hanselman
* 마우스 휠 사용을 위한 코드 - pete blois
에서 가져왔습니다.

위의 코드를 통합해서 만든 DeepZoomMouseController.cs 를 다운받으세요.


1. <MultiScaleImage> 의 줌인/줌아웃 코드 

  마우스의 이벤트를 받아서 계산을 거쳐서 결국에는 <MultiScaleImage>의 줌인/줌아웃 메서드를 호출하게됩니다. 줌인/줌아웃하는 코드는 두군데 있는데 이렇습니다.

Zoom(ZoomFactor, this.lastMousePos);

 여기서 lastMousePos 은 MouseMove 이벤트 핸들러에서 마우스 움직일 때 마다 현재 마우스의 위치를 Point 개체에 넣어서 가지고 있습니다. ZoomFactor 라는 변수는 0보다 크고 1보다 작으면 줌아웃, 1보다 크면 줌인으로 그 크기는 줌인/줌아웃의 정도를 나타냅니다. Zoom이라는 메서드는 아래와 같죠.

public void Zoom(double zoom, Point pointToZoom)
{
    Point logicalPoint = this.Source.ElementToLogicalPoint(pointToZoom);
    this.Source.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);
}

MultiScaleImage의 두가지 메서드를 사용합니다. MSDN의 도움말이 비어 있어서 자세한 내용파악이 힘드네요. 어째든 ElementToLogicalPoint를 이용해서 현재 마우스 좌표를 MultiScaleImage 컨트롤의 논리적인 좌표로 변환을 하고 ZoomFactor 값만큼 ZoomAboutLogicalPoint 메서드를 이용해서 줌인/줌아웃을 하라는 코드입니다.

줌인/줌아웃과 관련된 사용자의 입력(마우스 휠을 돌린다던지 클릭 또는 Shift 누르고 클릭)은 모두 결국 적당한 ZoomFactor값을 계산하고 난 후에 Zoom 메서드를 호출합니다.

2. 마우스 휠 컨트롤 

 마우스 휠에 관련한 이벤트는 실버라이트 자체에는 없고 실버라이트를 가지고 있는 웹 브라우저에서 발생합니다. 그래서 그 이벤트를 우리가 작성하고 있는 C# Managed Code로 가져와야 합니다. 한가지 방법은 Javascript에서 실버라이트 플러그 인으로 이벤트를 전달하는 방법이지만 Javascript를 작성해야 한다는 불편함이 있는데요. pete blois 가 Managed Code에서 Silverlight's DOM bridge를 이용하여 브라우저의 휠 이벤트를 훅(Hook)하는 방법을 공개했습니다. 그 코드가 아래와 같습니다.

if (HtmlPage.IsEnabled)
{
     HtmlPage.Window.AttachEvent("DOMMouseScroll",
                             new EventHandler<HtmlEventArgs>(this.HandleMouseWheel));
     HtmlPage.Window.AttachEvent("onmousewheel",
                             new EventHandler<HtmlEventArgs>(this.HandleMouseWheel));
      HtmlPage.Document.AttachEvent("onmousewheel",
                             new EventHandler<HtmlEventArgs>(this.HandleMouseWheel));
}

이제 HandleMouseWheel 이라는 이벤트 핸들러를 구현해 주면 됩니다.

private void HandleMouseWheel(object sender, HtmlEventArgs args)
        {
            double delta = 0;

            ScriptObject eventObj = args.EventObject;

            if (eventObj.GetProperty("wheelDelta") != null)
            {
                delta = ((double)eventObj.GetProperty("wheelDelta")) / 120;


                if (HtmlPage.Window.GetProperty("opera") != null)
                    delta = -delta;
            }
            else if (eventObj.GetProperty("detail") != null)
            {
                delta = -((double)eventObj.GetProperty("detail")) / 3;

                if (HtmlPage.BrowserInformation.UserAgent.IndexOf("Macintosh") != -1)
                    delta = delta * 3;
            }

            if (delta != 0 && mouseIsOver)
            {
                args.PreventDefault();
                if (delta > 0)
                    ZoomFactor = 1.2;
                else
                    ZoomFactor = .80;
             }
            Zoom(ZoomFactor, this.lastMousePos);
        }

HandleMouseWheel 핸들러를 보면 휠을 돌린 delta 값을 계산하고 있습니다. 그 delta 값을 이용해서 Zoom(ZoomFactor, this.lastMousePos); 를 호출하게 됩니다. 각 브라우저에서 넘어오는 delta 값의 특성에 따라서 약간의 보정 계산이 들어가 있습니다. 이것은 시행착오와 실험으로 정리가 되었겠죠. delta의 양수/음수를 판단해서 ZoomFactor를 1.2 가되면 줌인, 0.8이 되면 줌아웃이 작동됩니다.

3. 마우스 클릭, Shift + 마우스 클릭

마우스 클릭은 최상위 컨트롤인 Page에서 받습니다. 그 이벤트 핸들러를 등록을 해줍니다.

RootControl.MouseLeftButtonDown +=
                        new MouseButtonEventHandler(RootControl_MouseLeftButtonDown);
RootControl.MouseLeftButtonUp +=
                        new MouseButtonEventHandler(RootControl_MouseLeftButtonUp);

마우스 버튼을 Up 할 때 마찬가지로 ZoomFactor 값을 적당히 주고 Zoom(ZoomFactor, this.lastMousePos); 를 호출하여 줌인/줌아웃을 하네요.

void RootControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    mouseButtonPressed = false;
    if (mouseIsDragging == false)
   {
         bool shiftDown = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;

         ZoomFactor = 2.0;
         if (shiftDown) ZoomFactor = 0.5; //back out when shift is down
         Zoom(ZoomFactor, this.lastMousePos);
   }
   mouseIsDragging = false;
}

4. 마우스 드래깅을 이용한 위치 이동

마우스를 드래그 하면 그림의 위치가 이동을 합니다. 그 구현은 MouseMove 이벤트 핸들러에 있습니다. 우선 MouseEnter와 MouseLeave 이벤트 핸들러에서 mouseButtonPressed 플래그를 변화시키고 그 값을 이용해서 드래그 상태인지 아닌지 판단을 합니다.

if (mouseButtonPressed)
{
    mouseIsDragging = true;
}
if (mouseIsDragging)
{
    Point newOrigin = new Point();
    newOrigin.X = currentPosition.X - (((e.GetPosition(Source).X - dragOffset.X)
                                  / Source.ActualWidth) * Source.ViewportWidth);
    newOrigin.Y = currentPosition.Y - (((e.GetPosition(Source).Y - dragOffset.Y)
                                 / Source.ActualHeight) * Source.ViewportWidth);
    Source.ViewportOrigin = newOrigin;
}

MultiScaleImage 의 ViewportOrigin 의 위치를 변화 시키면서 이동을 하게 되네요. 역시 msdn의 설명이 비어 있어서 구체적인 내용은 파악하기 힘들지만 말이죠.

HTML과 Managed Code 사이의 인터렉션에 관해서는 튜토리얼을 참조하세요.

여기까지 마우스 컨트롤을 하는 소스분석을 해봤습니다. 이것으로 Deep Zoom 강좌를 마치겠습니다. Deep Zoom을 이용해서 창의적인 표현을 많이 봤으면 좋겠습니다. 도움이 되셨기를 바랍니다.
감사합니다.



마지막으로 Deep Zoom에 관련한 블로그 및 강좌를 모아 봤습니다.

* Deep Zoom 소개
Deep Zoom! - 유령회사 공도 소프트
와우!! SeaDragon을 위한 Deep Zoom Composer!! - GILVERLIGHT = GILBERT + SILVERLIGHT
[MIX08] 실버라이트 딥줌(DeepZoom) 기술과 하드락 카페 사례 - UXFactory
[Silverlight] Deep Zoom을 활용한 대만의 국립 궁전 박물관 - 준서아빠가 생각하는 행복한 UX이야기

* 강좌
훈스닷넷 8회 정기세미나 5세션 발표자료 - 유령회사 공도 소프트
Deep Zoom 강좌 : 2. Silverlight 프로젝트 만들기 - ToExpert.Net (어허 ~ 어째 비슷하네요 ~ 강좌가...)


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  6개가 달렸습니다.
  1. ㅠㅠ; 왜 이리 점점 어려버 지는지...해해햇...
  2. 한서영 2008.03.24 13:49
    그대로 따라하는데 namespace 가 없다는 에러 가 나네요

    오류 9 'System' 네임스페이스에 'Windows' 형식 또는 네임스페이스 이름이 없습니다. 어셈블리 참조가 있는지 확인하십시오. C:\Documents and Settings\Administrator\My Documents\SilverlightTest\DeepZoomSilverlight2poster\DeepZoomSilverlight2poster_Web\DeepZoomMouseController.cs 8 14 DeepZoomSilverlight2poster_Web
  3. 한서영 2008.03.24 13:51
    오류 1 'DeepZoomMouseController' 형식 또는 네임스페이스 이름을 찾을 수 없습니다. using 지시문 또는 어셈블리 참조가 있는지 확인하십시오. C:\Documents and Settings\Administrator\My Documents\SilverlightTest\DeepZoomSilverlight2poster\DeepZoomSilverlight2poster\Page.xaml.cs 19 13 DeepZoomSilverlight2poster
  4. 길버트 2008.03.28 15:57
    한번의 zoom-in, zoom-out으로 원래 배율로 돌아오려면,
    확대시 1.25, 축소시 0.8을 하시는 것이 좋습니다.
secret

실버라이트 2에서 가능 눈에 들어오는 기능이 바로 DeepZoom이죠. 지난번 8회 훈스닷넷 정기세미나에서 DeepZoom 데모를 보셨습니다. 특히 공도님의 데모에서는 몇 분 만에 뚝딱 만들었던 기억이 나네요. 우리도 한번 해보죠.

DeepZoom 강좌 1. Deep Zoom Composer를 이용하여 .sdi 파일 만들기
DeepZoom 강좌 2. 실버라이트의 <MultiScaleImage> 컨트롤 사용
DeepZoom 강좌 3. Deep Zoom 마우스로 컨트롤 하기
DeepZoom 강좌 4. Deep Zoom 마우스 컨트롤 코드 살펴보기

DeepZoom 강좌 1. Deep Zoom Composer를 이용하여 .sdi 파일 만들기

Deep Zoom을 사용한 데모를 만들기 위해서 우선 큰이미지를 찾다가 적당한 것을 발견했습니다. 바로 Silverlight 2 Developer Poster. 게다가 훈스닷넷 자유게시판에 깜지님이 벌써 올려주셨네요. 우선 여기에서 JPG로 된 Silverlight 2 Developer Poster를 다운로드 받으세요. JPG 파일이 5.8MB 용량에 6750x4200 크기입니다. 다른 이미지 뷰어로 보면 문제 없지만 Deep Zoom으로 실버라이트 응용프로그램을 만들어서 보면 효과적일 것 같습니다. 이미 만들어서 웹에 올려져 있네요. 그래도 한번 만들어 보죠.

우선 Deep Zoom Composer를 이용해서 .sdi (SeaDragon Image)파일들을 만들어야 합니다. Deep Zoom Composer는 여기에서 다운로드 하셔서 설치하세요.

우선 Deep Zoom Composer를 실행해서 New Project를 눌러 "SilverlightDeveoperPoster" 라는 프로젝트를 만듭니다.

사용자 삽입 이미지

Import 탭에서 "Add Image.." 버튼을 누릅니다. 파일 선택 대화상자에서 아까 다운받은 "Silverlight2PosterMIX08.jpg"파일을 선택합니다. 그러면 Import Progress 대화상자가 뜨면서 이미지를 로딩합니다. 우리는 하나의 큰 이미지를 이용할 것이기 때문에 이미지 Import는 마치고 Compose 탭으로 이동하겠습니다. 만약 다른 이미지를 사용하시려면 여기서 이미지를 Import 해주세요.

사용자 삽입 이미지

Compose 탭에서는 가져온 이미지를 배치합니다. 줌인 해서 이미지를 배치하기도 하고 옆으로 나란히 배치하기도 합니다. 우리는 하나의 이미지를 전체 배경으로 놓을 것입니다. 오른쪽의 All Images에서 아까 가져온 이미지를 드래그해서 가운데에 놓습니다. 그리고 돋보기 모양의 "Fit to Screen"을 눌러서 스크린 전체에 꽉 채웁니다.

사용자 삽입 이미지

이제 Export 할 차례입니다. Export 탭으로 이동해서 오른쪽 Setting. Name에 "Silverlight2DeloperPoster"라고 입력하고 Export 버튼을 누릅니다.

사용자 삽입 이미지

끝났습니다. 결과물을 한번 살펴보도록 하지요. 어떻게 만들어져 있을까? Export 한 폴더를 찾아서 이동합니다. "silverlight2deloperposter" 폴더로 이동해 보겠습니다. 1,2,3,4... 이름의 폴더에 사진들이 들어 있는데요. 이 사진들을 보시면 '아!' 하는 깨달음이 오실꺼에요.  

사용자 삽입 이미지

Deep Zoom 설명할 때 큰 이미지를 필요한 만큼만 가져온다고 설명을 하는데 이 그림 조각들을 보면 이해가 가실껍니다. 작은 이미지 조각들이 있고 그 용량을 보면 많아야 40KB이고 대부분 20KB 정도 입니다. 이런 작은 조각 그림들을 적당한 시기에 빠르게 로딩해서 보여주는 것이 기술이겠지요.

이제 Deep Zoom Composer 작업은 끝났습니다. "silverlight2deloperposter"의 위치는 잘 기억해 주세요. 다음 강좌로 넘어가겠습니다.


참고자료.
Deep Zoom Composer의 더 자세한 사용법은 Deep Zoom Composer User Guide 를 참조하시기 바랍니다.

오일석


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  2개가 달렸습니다.
  1. 다음 강좌로...총총총...^^;;신기 할 따름입니다..
secret
지난 3월 8일에 UX 캠프의 막바지 실버라이트 캠프가 있었습니다. 저녁 5시에 시작이 되서 새벽에 끝나는 힘든 일정이었지만 오랜만에 연속되는 큰웃음으로 즐거운 시간을 보냈죠. 여기 늦은 후기를 적어 봅니다.

저는 2조 조장이었습니다. 별로 한일은 없지만 조장이었죠. 2조에는
 - 해파리 홍혜란 님,
 - 미션임파서블 발표해주신 장재우 님
 - 토론 발표 해주신 오상훈 님
 - 연봉이 3억인 김동욱 님
 - 자상하고 친절하신 MS 전도사 박중석 님
이렇게 저를 포함하여 6명 이었습니다.

2조

해파리님이 빠진 2조원들...



실버라이트, UX가 주제인 캠프였지만 다양한 얘기를 나눴던것 같습니다. 무엇보다 다정하고 즐거우신 여러분들 만나서 좋았네요.

2조는 특히 “UX개발자“에 대한 정의를 만들어 보았는데요. 쉽지가 않았습니다. 박중석 님이 이런 말씀을 하셨습니다. “우리 회사에는 UX 개발자가 필요해!“ , “UX 개발자를 좀 고용해야 겠어요.“ 라는 말을 하는 세상이 올까요? 그럼 UX 개발자는 어떤 사람이고 어떤 능력을 가져야 할지 생각해 봤죠. 2조에서 내린 정의는 너무나 광범위하고 고차원적이었습니다.
“UX 개발자는
실버라이트, WPF, Flash, Ajax 등 RIA를 구현할 수 있는 기술을 가지고 있어야 하고
감성적이고 예술적인 감각도 풍부하고
항상 사용자의 관점에서 생각하고
디자인 감각도 갖추고 있어야 한다.”

이런 능력을 개발하기가 너무 힘들겠죠. 그래서 UX 개발팀을 만들어 저런 능력을 가진 구성원들이 모여서
팀활동으로 UX 개발을 해야 한다고 생각을 했었습니다. 짧은 시간에 쉽게 정리가 되지는 않았지만 UX 개발자라는 용어의 정의에 대해서 생각해 봤다는 것만으로도 개인적으로 큰 성과였습니다.

토론중

열심히 토론중인 2조. 경청해주는 아름다운 모습

토론중

경청해 주는 모습

정말이에요

발표의 일부였던 광고 시간-"정말이에요"



마지막 시간에는 실버라이트 골든벨. 저는 중간에 '넷스케이프'가 기억이 안나서 탈락했습니다. 폐자 부활전에서는 실버라이트 관련 문제였는데 탈락 ...

사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

 
도전 실버벨과 친절한 길버트님 ... 즐거웠습니다. 그리고 피곤했습니다.

여러분들은 항상 저에게 자극을 주고 영향을 공급해 주십니다. 감사합니다. 앞으로도 다른 장소에서 꼭 다시 만나뵈었으면 좋겠습니다.

마지막으로 단체사진 ...
실버라이트 캠프 참가자 단체사진

실버라이트 캠프 참가자 단체사진




WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret
훈스닷넷에서 정기세미나를 진행합니다. Microsoft에서 3월 20일 Heroes 행사를 하면서 국내에 3가지 제품(Microsoft Visual Studio 2008, Microsoft SQL Server 2008, Microsoft Windows Server 2008)이 출시될 예정인데요. 그 전에 이 세미나를 통해서 Microsoft 말하는 차세대 웹 전략의 핵심 기술들을 만나실 수 있습니다.
훈스닷넷에 로그인 하시고 신청하세요.

저도 마지막 세션 발표중 일부를 맡았습니다. 실버라이트 2의 새로운 기능에 대한 데모를 진행할 예정이죠. 기대해 주시고 세미나장에서 뵙겠습니다.


[8회 정기세미나] 닷넷과 함께하는 차세대 웹 전략

 일시 :
2008-03-15
 
 현재 신청인원 :   232/ 250

 발표자료 다운받기 :
준비중
 
8회 정기세미나
- 일시 : 2008년 03월 15일(토) 13시 00분
- 장소 : 한국마이크로소프트 (포스코 센터 5층)
- 참가비 : 무료
- 세미나 신청: http://www.hoons.kr/SeminarJoin.aspx 
 
세미나 Agenda
13:00~13:30
등 록
13:30-14:10
개발자를 위한 SQL Server 2008의 소개 / 이수겸
14:10-15:00
2008 MIX를 통하여 정리해보는 차세대 웹의 전략 / 김대우 박경훈
15:00~15:20
휴식
15:20~16:00
Jump to LINQ / 김수영,김시원
16:00~16:40
ASP.NET 3.5의 소개 / 서동진
16:40~17:00
휴 식
17:00~17:40
실버라이트 2.0 Now!  / 공인석,오일석
17:40~18:00
Live Q&A / 발표자
18:00~
경품추첨
발표 내용 소개

개발자를 위한 SQL Server 2008의 소개 / 이수겸

마이크로소프트가 SQL Server를 통해서 주장하는 데이터 플랫폼 비전을 개략적으로 살펴보고, 개발자 중심으로 SQL Server 2008의 새로운 기능을 소개합니다.
2008 MIX를 통하여 정리해보는 차세대 웹의 전략 / 김대우, 박경훈

 

3월 5일부터 7일까지 전세계적으로 기대하고 고대하던 MIX 행사가 열리게 됩니다. 이번 세션에서는 MIX행사에서 말하고 있는 Silverlight, ASP.NET 3.5, Windows Live 등의 기술을 통한 핵심 전략은 무엇인지 분석해 봅니다. 또한 여러 예제를 통한 새로운 비지니스 모델을 어떻게 창출해 낼 수 있을지 살펴보도록 하겠습니다.
Jump to LINQ / 김수영, 김시원

 

이제 VS 2008 출시가 바로 코앞으로 다가 왔습니다. 이전 신제품 출시와 마찬가지로 이번에도 많은 변화를 가져옵니다. 그 중에서도 LINQ가 이번에 새롭게 등장한 기술의 중심에 서있게 될 것입니다. LINQ를 위한 C# 3.0의 핵심 특징을 살펴보고 또한 LINQ 쿼리 구문 작성에 있어 성능 향상을 위한 팁들을 전해드리겠습니다. 이 세션은 C#의 사전 지식을 가지고 있는 분이라면 누구나 들을 수 있습니다.
ASP.NET 3.5의 소개 / 서동진

 

ASP.NET 3.5 Extension이 새롭게 탄생할 예정입니다. 새로원진 ASP.NET 3.5의 주요 기능(ASP.NET AJAX Improvements, MVC, Dynamic Data Support, Silverlight Support, Data Service)에 대해서 살펴보고 이러한 기술들을 기존의 기술들과 어떻게 연동되고 또한 어떻게 활용해야 될지 살펴보도록 하겠습니다.
실버라이트 2.0 NOW! / 공인석, 오일석

 

2008년 3월, MIX08에서는 더욱 강력해진 런타임 엔진과 기능들로 무장하고 버전업까지 마친 실버라이트 2.0 Beta가 소개될 예정입니다. 실버라이트 2.0 Beta는 발표후 빠른 시일 내에 Go-Live 라이선스가 제공되어 서비스가 가능하므로 그간 RIA에 목말랐던 닷넷 개발자에게 단비와 같은 존재가 될 것입니다. 이 세션에서는 새로워진 실버라이트 2.0의 주요 구성과 깜짝 놀랄만 한 기능과 데모를 소개하고 향후 RIA 시장에서의 새로운 패러다임과 전략을 제시합니다.
진행자 소개
김대우 

한국마이크로소프트 개발자 및 플랫폼 사업 총괄부서 웹 플랫폼 팀 근무
현) Web Developer Evangelist
박경훈 

HOONS닷넷 사이트 운영자
다수 닷넷 기술서적 집필및 번역
Microsoft Visual C# MVP(2005~2008)
이수겸 

현) 올랩컨설팅 선임
MCDBA / MCSD
http://bybi.tistory.com
서동진 

HOONS닷넷 ASP.Net 시삽
현) MySpace Developer
Microsoft ASP.Net MVP
MCAD / MCSD
김수영 

HOONS 닷넷 C#.NET 시삽
현) 네오위즈 게임즈
Microsoft  Visual C# MVP
MCAD / MCSD
http://www.dotnetngene.kr

김시원 

HOONS 닷넷 C#.NET 시삽
현) 이스트소프트
http://loveciel.tistory.com

공인석 

블로그 [유령회사 공도소프트] 운영자.
HOONS닷넷 실버라이트 시삽.
SBS NView, MNet TVDeep 등 다수의 실버라이트 프로젝트 수행.
MIX07이래로 실버라이트에 올인 러쉬 중.
오일석 

HOONS닷넷 실버라이트 시삽
블로그 http://onestone.tistory.com
플래시 개발자에서 실버라이트 개발자로 전향
세미나 장소


한국 마이크로소프트 - 포스코 센터 5층


 
경품안내

ITC 번역서

Programming WCF Service 한글판
(저자:저발로위,번역:박경훈) - 2권

한글판 Professional Ajax
(저자: Nicholas, 번역:장시형) - 2권

한글판 ASP.NET 2.0 웹사이트 프로그래밍 : 문제 분석-설계-솔루션 제작
(저자:마르코 벨리나소,번역:송호중) - 2권

알기 쉬운 마이크로소프트 ASP.NET AJAX
(저자:r.모로니,번역:이광수) - 2권
MS 무선마우스 1개


선착순 50명께 드립니다.


 

스폰서
  

WRITTEN BY
ONESTONE

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

아래 글은 마이크로소프트 기술이사인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 8번째 튜토리얼 Creating a Digg Desktop Application using WPF의 번역본 입니다. 본 번역본의 원문은 훈스닷넷의 실버라이트 강좌에 게시되어 있습니다.

실버라이트 튜토리얼 파트 8: WPF를 이용하여 테스트탑용 Digg 클라이언트 만들기

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

여러분은 Digg 클라이언트 샘플 프로그램의 완성된 소스코드를 여기에서 다운로드 받을 수 있습니다. 저의 실버라이트 2 레퍼런스 페이지를 북마크하면 더 많은 실버라이트 관려 글과 컨텐츠를 볼 수 있습니다.

WPF를 이용하여 테스크탑용 Digg 클라이언트 만들기

이번 마지막 튜토리얼은 이전 7개의 튜토리얼과는 다른 목표가 있습니다. 이번에는 실버라이트 코드를 돌려보지 않는 대신 WPF와 .NET 3.5를 사용할 것입니다. 우리는 브라우저의 실버라이트 플러그인에서 작동하는 Digg 클라이언트 코드를 작성했습니다. 그리고 그것을 재사용해서 윈도우 데스크탑용 응용프로그램을 만들 것입니다.

실버라이트는 .NET 프레임워크의 전체 버전과 호환하는 일부 API를 가지고 있습니다. 그 목표 중에 하나는 일반적인 프로그래밍 모델과 도구를 학습한 개발자가 RIA 웹 응용프로그램, 윈도우 데스크탑 응용프로그램, 오피스 솔루션을 넘나들면서 기술, 코드, 컨텐츠를 재사용 가능하게 하는 것입니다.

아래는 브라우저에서 작동하는 Digg 실버라이트 클라이언트의 코드를 재사용하여 브라우저 밖에서 실행되는 윈도우 데스크탑용 버전을 만드는 단계에 대한 내용입니다.

1단계: WPF 데스크탑 응용프로그램 만들기

VS 2008을 이용하여 WPF 데스크탑 응용프로그램을 만들면서 시작해보겠습니다. "DiggDesktopSample"이라고 이름을 짓겠습니다.



App.xaml과 Window.xaml 이라는 두 개의 파일이 프로젝트 안에 만들어 집니다.



우리가 파트1에서 만든 (App.xaml과 Page.xaml을 가지고 있던) 실버라이트 프로젝트와 비슷한 구조라는 것을 알 수 있습니다..

2단계: Digg 클라이언트 코드를 WPF 응용프로그램에 복사하기

우리가 만들었던 DiggApplication의 실버라이트 코드를 복사해서 "DiggDesktopSample" 윈도우 프로젝트에 붙여넣기 하겠습니다.



현재 베타1에서는 이러한 copy/paste 동작이 수동입니다만 결국은 프로젝트 타입간의 코드 이동을 좀더 자동화할 예정입니다.

3단계: 몇 가지 문제점 수정하기

컴파일을 하기 위해서 Digg 샘플 코드의 2가지를 고쳐야 합니다.

1) 실버라이트 베타1 XAML 스키마 xmlns: URL이 WPF 데스크탑 버전과 다릅니다. 새로운 프로젝트에 복사한 코드가 WPF 스키마라는 것을 알려주기 위해서 XAML 파일을 조금 수정해야 합니다. 이것은 정식버전이 나오기 전에 우리가 향상시켜야 할 기능 중에 하나입니다.

2) <WaterMarkTextBox> 컨트롤을 <TextBox>로 변경을 하고 <HyperlinkButton>컨트롤을 <TextBlock>으로 변경해야 합니다. 이 두개의 컨트롤은 아직 WPF에 포함되어 있지 않고 실버라이트 2 베타1에서 새로 추가된 컨트롤입니다. 하지만 이 컨트롤들과 함께 작동하는 다른 어떠한 네트워크, LINQ to XML, 데이터 바인딩 코드도 변경하지 않아도 됩니다.

일단 이렇게 수정을 하면 프로젝트는 깨끗하게 컴파일 됩니다.

4단계: 데스크탑 윈도우에 Digg 클라이언트 올리기

데스크탑 프로젝트에서 프로그램이 시작될 때 로드 되는 기본 윈도우인 Windows1.xaml 파일을 열었습니다.

윈도우의 타이틀을 "Digg Desktop Version"이라고 변경하고 기본 너비와 높이를 변경했습니다.

기존 Digg 실버라이트 프로젝트에 있던 Page.xaml 사용자 정의 컨트롤을 그 윈도우의 루트 컨트롤로 추가했습니다. 이렇게 하면 윈도우가 로드 될 때 윈도우에 보여질 것입니다. 저는 Page 클래스의 어떤한 코드도 변경하지 않았고 컨트롤의 이름도 그대로 사용했습니다. Page 클래스가 UserControl를 상속 받았기 때문에 WPF 윈도우나 컨트롤에 문제없이 올려질 수 있습니다.



마지막으로 수정할 내용은 Digg REST API 서버가 브라우저가 아닌 클라이언트 또는 서버에서의 접근을 알아내서 때때로 접근 거부 응답을 보내기 때문에 발생합니다. 아마도 서비스에 접근하는 자동 스크립트를 막기 위함 일 것입니다. 저는 proxy URL을 통해서 이 문제를 해결했습니다. 코드를 변경하는 것이 아니라 URL만 변경하는 것입니다.

5단계: 프로그램 실행하기

이제 Digg 데스크탑 응용프로그램을 실행 할 수 있습니다. 모든 기능은 실버라이트 버전과 똑같이 작동하고 프로그램도 같은 방식으로 움직입니다.



그리고 리스트에서 스토리를 선택하면 상세정보 사용자 정의 컨트롤이 표시됩니다.



브라우저와 데스크탑 버전 사이에 몇 가지 표면적인 스타일에 다른 점이 있습니다. 이것은 주로 사용자의 운영체제에 설정되어 있는 테마의 글꼴, 색, 스크롤 바와 같은 기본 스타일에 영향을 받기 때문입니다. 반면에 실버라이트는 모든 운영체제에서 사용하는 기본 스타일을 사용하고 있습니다. 만약 데스크탑 버전과 브라우저 버전이 완전히 똑같게 만들고 싶으면 스타일과 컨트롤 템플릿을 더 사용해야 합니다. 그렇지 않으면 데스크탑 버전은 사용자의 운영체제 테마에 맞춰집니다.

요약

우리는 앞으로 실버라이트와 WPF 간에 코드를 공유하는 좀더 자세한 글과 bast practice 가이드라인을 제안할 예정입니다. 저는 여러분이 실버라이트 응용프로그램을 만들 때 배운 기술과 지식이 WPF 프로젝트에 잘 적용될 것이라고 생각합니다. 저희는 솔루션 사이에 코드 재사용을 가능케 하고 컨트롤, 컨텐츠, 코드를 아주 쉽게 공유하게 하는 매우 높은 호환성 확보를 위해서 최선을 다하고 있습니다.

도움이 되었기를 …

스캇

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


WRITTEN BY
ONESTONE

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

아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 일곱 번째인 Using Control Templates to Customize a Control's Look and Feel의 번역본 입니다.  본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다.

실버라이트 튜토리얼 파트7: 컨트롤 템플릿을 사용하여 룩앤필(Look and Feel) 변경하기

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

여러분은 Digg 클라이언트 샘플 프로그램의 완성된 소스코드를 여기에서 다운로드 받을 수 있습니다. 저의 실버라이트 2 레퍼런스 페이지를 북마크하면 더 많은 실버라이트 관려 글과 컨텐츠를 볼 수 있습니다.

컨트롤의 룩앤필 커스터마이징

WPF와 실버라이트 프로그래밍 모델의 가장 강력한 기능은 컨트롤의 룩앤필을 완벽하게 커스터마이징 할 수 있다는 것입니다. 개발자와 디자이너는 미묘하고 극적인 방법으로 컨트롤의 UI를 만들 수 있고 대단히 유연한 방법으로 원하는 사용자 경험을 완벽하게 만들 수 있습니다.

이 튜토리얼에서 컨트롤을 커스터마이징 하는 몇 가지 방법을 살펴보고 그 기술을 이용해서 Digg 클라이언트의 UI를 마무리 하겠습니다.

컨트롤의 내용을 커스터마이징 하기

튜토리얼 파트1에서 페이지에 단순한 버튼 컨트롤을 추가했었고 어떻게 버튼의 텍스트를 "Push Me!"로 변경하는지 살펴보았습니다. 그리고 "Click" 이벤트 핸들러를 만들어 클릭했을 때의 처리를 구현했습니다.



위의 코드는 버튼을 아래처럼 만들었습니다.



앞으로 버튼 컨트롤이 여러분을 놀래 킬 것 중에 하나는 "Content" 속성이 단순히 "Push Me!"라는 텍스트가 아니라는 것입니다. 사실 "Content"속성은 우리가 원하는 어떤 모양이나 컨트롤로 설정할 수 있습니다.

예를 들어, <Image>와 <TextBlock>을 포함한 StackPanel을 포함시킬 수 있습니다.




위의 코드가 실행되면 아래와 같이 보일 것입니다. 여전히 클릭하거나 기존처럼 클릭 이벤트 핸들러를 연결하는 버튼으로써 기능을 가지고 있는 것을 보세요.



또 다른 방법은 버튼 속에 벡터 그래픽을 이용하여 아래의 Ellipse 컨트롤과 같은 Shape 컨트롤을 사용할 수 있습니다.



위의 코드가 어떻게 RadialGradientBrush로 채운 Ellipse 컨트롤을 사용하여 반사되는 멋진 효과를 넣었는지 살펴보세요.



심지어 버튼 속에 Celendar 컨트롤 같은 인터렉션 가능한 컨트롤 포함시켜 이상한 모양을 만들 수 도 있습니다.



위의 Calendar는 모든 고유 기능을 사용가능 합니다. 이 의미는 사용자가 달력에서 날짜를 찍거나 달을 앞뒤로 이동시킬 수 있고 달력에 포함된 버튼의 "Click"이벤트 핸들러를 호출 할 수 있다는 얘기입니다. (노트: 이것이 좋은 UX인지는 모르겠습니다만 무엇을 하던 할 수 있다는 유연성을 보여줍니다.)



위에 소개한 타입의 컨트롤 커스터마이징은 단지 버튼 컨트롤에서만 가능한 것이 아니고 ContentControl 베이스 클래스를 상속받는 모든 컨트롤에서 가능합니다.

컨트롤 템플릿을 이용한 컨트롤 커스터마이징

실버라이트와 WPF에서 사용한 컨트롤 모델은 컨트롤 속의 내용을 커스터마이징 가능한 것보다 더 많은 것을 할 수 있습니다. 컨트롤의 인터렉션 기능들을 유지하면서 컨트롤의 visual tree 전체를 원하는 만큼 변경할 수 있습니다.

예를 들어, 버튼의 기본적인 모양인 사각형이 싫고 아래와 같이 원모양을 원한다면



App.xaml파일에 "RoundButton" 스타일을 정의함으로써 구현 가능합니다. 버튼의 "Template"속성을 오버라이드하고 버튼의 기본 사각형 모양을 Ellipse와 TextBlock이 들어있는 모양으로 변경하는 ControlTemplate을 제공하면 됩니다.



그런 후에 이 "RoundButton" 모양의 스타일을 버튼 컨트롤에 참조시킵니다.



컨트롤 템플릿에 컨텐츠 통합하기

위의 "RoundButton"컨트롤 템플릿에서 눈여겨봐야 할 것은 버튼의 크기와 내용이 고정되어 있다는 것입니다.

좋은 소식은 WPF와 실버라이트는 이러한 값들을 설정 가능하게 만들어 준다는 것입니다. 이를 위해서 컨트롤의 속성으로 바인딩 할 수 있도록 컨트롤 템플릿 안에서 {TemplateBinding ControlProperty} 마크업 확장 구문(markup extension syntax)을 사용합니다. 이것은 다른 개발자가 컨트롤을 설정할 때 속성을 사용하듯이 컨트롤 템플릿을 사용할 수 있게 합니다.



내용을 표시하기 위해서 <TextBlock>을 사용하는 대신 <ContentPresenter>컨트롤을 사용한 것을 눈 여겨 보세요. 이것은 단지 텍스트 문자열만을 표시하는 것이 아니라 우리가 앞에서 보았듯이 다른 컨텐츠도 표시 가능하게 만들어 줍니다.

위의 스타일을 사용하여 서로 다른 내용과 속성을 설정한 3가지 버튼을 만들어 보겠습니다.



위의 버튼들은 아래처럼 표시될 것입니다. 물론 Calendar 컨트롤은 여전히 달을 이동할 수 있고 날짜를 선택할 수 있습니다.



한걸음 더 나아가자면 ControlTemplate에 "hover", "focus", "pushed" 같은 버튼의 상태를 다루는 스토리보드 애니메이션을 추가 할 수도 있습니다. 이런 능력은 HTML에서 할 수 없는 정말 품위 있는 사용자 인터렉션 시나리오를 만들 수 있게 합니다.

개발자들은 이러한 모든 스타일이나 컨트롤의 인터렉션 커스터마이징에 대해서 무감각한 상태로 응용프로그램을 만들 수 있습니다. 그들은 평소와 같이 컨트롤의 이벤트를 핸들링하고 컨트롤의 오브젝트 모델을 다루고 스타일과 템플릿을 사용하며 룩앤필의 커스터마이징과 예쁘게 꾸미기는 디자이너에게 넘길 수 있습니다.

Digg 클라이언트를 세련되게 꾸미기

이제 우리는 컨트롤 템플릿이 어떻게 작동하는지 기본적인 내용을 살펴보았습니다. 이것을 이용해서 Digg 클라이언트 프로그램의 UI를 좀더 세련되게 만들어 보겠습니다.

여기에 우리가 분명히 바꿀 필요가 있는 한 가지가 있습니다. 그것은 바로 사용자 정의 컨트롤에 있는 "Close" 버튼입니다.



좋은 소식은 이 작업은 개발자 또는 함께 일하는 디자이너들 모두에게 쉽다는 것입니다. App.xaml파일에 "CloseButton"스타일을 정의하기 위해서 ControlTemplate을 추가하고 매력적인 닫기 버튼을 만들기 위해 약간의 벡터 그래픽을 추가하겠습니다. (노트: 물론 저보다 유능한 디자이너는 좀 더 멋지게 보이도록 마우스를 올릴 때의 애니메이션을 추가할 수 있겠죠.)



프로그램을 다시 실행시키면 버튼이 아래처럼 보일 것입니다.



제가 생각할 때 좀 더 세련되게 만들어야 하는 두 번째는 리스트박스의 테두리 UI 입니다. 좀 더 가까이 보면 베타1의 리스트박스는 안쪽에 테두리가 기본적으로 있습니다. (노트: 우리는 여전히 기본 스킨을 마무리 중에 있고 마지막 릴리즈 전에 아마도 변경이 될 것입니다.)



우리는 이 테두리를 제거하고 컨트롤 템플릿을 커스터마이징하여 리스트박스에 단순한 테두리를 만들어 보겠습니다. 아래는 그렇게 하기 위하여 템플릿을 이용하여 만든 리스트박스 템플릿입니다.



이제 리스트박스에서 모든 테두리를 제거 했습니다. 어떤 컨텐츠에도 스크롤이 가능하게 해주는 <ScrollViewer>을 사용했습니다. 그리고 리스트박스 안에 실제 아이템을 랜더링하는 <ItemsPresenter/> 컨트롤 포함시켰습니다. (파트4에서 이런 아이템들을 표현하기 위해서 <DataTemplate>을 사용했었습니다.)

아래 그림은 방금 우리가 만든 좀 더 단순한 모양의 리스트 입니다.



우리는 룩앤필을 변경하기 위해서 코드를 변경하지도 않았고 컨트롤의 XAML 마크업도 변경하지 않았다는 것이 멋지네요. 이러한 코드와 디자인의 분리는 실버라이트와 WPF 응용프로그램을 만들 때 개발자와 디자이너 간의 훌륭한 협업을 가능하게 합니다. Expression Blend와 다른 Expression Studio의 제품들은 한 단계 높은 컨트롤의 디자인 능력을 가지고 있고 커스터마이징이 쉽도록 풍부한 디자이너 툴을 제공합니다.

다음 단계

이제 실버라이트를 이용한 Digg 클라이언트 구현은 끝이 났습니다.

마지막 단계는 Digg 클라이언트의 데스크탑 버전을 구현할 것입니다. 좋은 소식은 실버라이트가 WPF와 .NET 프레임워크의 일부분이기 때문에 개념, 코드, 컨텐츠를 테스크탑 버전으로 이동시키는 것이 어렵지 않다는 것입니다.

다음 단계 Creating a Digg Desktop Application Using WPF (한글 번역본)로 이동하겠습니다.

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


 


WRITTEN BY
ONESTONE

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

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

실버라이트 튜토리얼 파트 6: 사용자 정의 컨트롤을 사용하여 Master/Detail 시나리오 구현하기

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

사용자 정의 컨트롤이란?

실버라이트와 WPF의 기본적인 디자인 목표는 재사용 가능한 컨트롤에 UI 기능을 쉽게 캡슐화 할 수 있게 만들어 주는 것입니다. 개발자는 컨트롤 베이스 클래스 또는 TextBox나 Button과 같은 기존에 존재하는 컨트롤의 클래스를 상속해서 새로운 사용자 정의 컨트롤을 구현할 수 있습니다. 또 다른 방법은 기존 컨트롤의 UI를 XAML 파일에서 합성해서 만드는 방법입니다.

Digg 프로그램에서는 사용자가 특정 주제를 검색하고 그와 관련된 스토리의 리스트를 표시하여 스토리에 대한 보다 자세한 내용을 보기 위해서 선택 가능한 Master/Detail 시나리오를 만들고 싶습니다. 예를 들어, 아래 리스트에서 스토리를 선택하면



그 스토리에 대한 자세한 내용이 들어있는 대화상자를 띄워줍니다.



우리는 리스트 박스의 스토리를 선택할 때 보여줄 상세 내용을 "StoryDetailsView"라는 사용자 정의 컨트롤을 이용하여 구현할 것입니다.

StoryDetailsView 사용자 정의 컨트롤 구현하기

비주얼 스튜디오의 DiggSample 프로젝트를 오른쪽 마우스로 클릭하고 "Add New Item"을 선택합니다. New Item 대화상자가 띄워지면 UserControl 템플릿을 선택하고 새 컨트롤의 이름을 "StoryDetailsView"라고 해줍니다.



그러면 DiggSample 프로젝트에 " StoryDetailsView"라는 이름의 사용자 정의 컨트롤이 추가됩니다.



사용자 정의 컨트롤을 사용하여 모달 대화상자 만들기

StoryDetailsView 컨트롤을 사용하여 스토리의 상세 내용을 담은 대화상자를 효과적으로 표시해 보겠습니다. 스토리의 상세정보가 표시될 때는 페이지의 다른 컨텐츠 보다 상위에 표시되게 하고 그 상세정보를 닫기 전에는 다른 일을 하지 못하게 하고 싶습니다.

모달 대화상자와 비슷하게 행동하도록 만드는 방법은 몇 가지 있습니다. 이번 시나리오에서는 우선 StoryDetailsView.xaml을 열어서 아래의 XAML 내용을 추가하면서 시작해 보겠습니다.



위에서 첫 번째 <Rectangle> 컨트롤은 스크린 위의 모든 공간을 덮을 수 있게 설정되었습니다. 배경색은 아래에서 보듯이 투명도(Opacity)를 .765로 했기 때문에 약간 투명한 회색입니다. 두 번째 <Border> 컨트롤은 Rectangle 컨트롤의 위에 올라가고 고정된 크기를 가지게 됩니다. 바탕색은 파란색이고 닫기 버튼을 포함하고 있습니다.

StoryDetailsView 사용자 정의 컨트롤은 우선 아래처럼 표시될 것입니다.



사용자 정의 컨트롤의 코드 비하인드 파일에 "CloseBtn_Click" 이벤트 핸들러를 구현 합니다. 클릭을 하면 닫기 버튼의 이벤트 핸들러는 사용자 정의 컨트롤의 Visibility 속성을 "Collapsed"로 설정 합니다. 이렇게 하면 컨트롤이 사라지고 그 아래에 있는 컨텐츠가 다시 보이게 됩니다.




StoryDetailsView 표기하기

StoryDetailsView 사용자 정의 컨트롤이 스크린에 표시되게 하는 쉬운 방법은 단순히 Page.xaml 파일의 아래에 추가하는 것입니다. 그리고 visibility의 기본 값을 "Collapsed"로 설정하여 프로그램이 처음에 로드되면 보이지 않게 만듭니다.



그런 다음 Page.xaml의 코드 비하인드 클래스에서 리스트박스의 "SelectionChanged" 이벤트를 처리합니다.



사용자가 리스트의 특정 스토리를 선택하면 리스트박스의 SelectionChanged 이벤트 핸들러에서 StoryDetailsView 컨트롤의 Visibility 속성을 Visible로 설정해 줍니다.



이렇게 하면 모달 사용자 정의 컨트롤 대화상자가 표시될 것입니다. 사용자가 "Close"버튼을 클릭하면 대화상자는 사라지고 사용자는 다른 스토리를 선택 가능하며 그 과정을 반복 할 수 있습니다.

스토리 데이터를 StoryDetailsView 사용자 정의 컨트롤에 전달하기

마침내 사용자가 리스트박스에서 선택한 스토리에 대한 자세한 정보를 StoryDetailsView 컨트롤에 표시할 차례입니다.

리스트박스의 페이지의 코드 비하인드에 있는 "SelectionChanged" 이벤트 핸들러에서 리스트박스의 "SelectedItem" 속성을 사용하여 선택된 열과 연결된 DiggStory 데이터 오브젝트에 접근 할 수 있습니다.

StoryDetailsView 컨트롤에 DiggStory 오브젝트를 전달하는 간단한 한가지 방법은 컨트롤을 보이기 바로 전에 사용자 정의 컨트롤의 "DataContext" 속성을 선택된 DiggStory 데이터 오브젝트로 설정하는 것입니다.



DataContext를 이용하여 결과를 표시하기 위해서는 UserControl에 코드를 삽입하거나 데이터바인딩 표현식을 사용하여 그 값을 바인딩 시킬 수 있습니다.

예를 들어, 선택된 스토리의 제목을 표시하기 위해서 아래와 같이 데이터바인딩 표현식을 StoryDetailsView XAML에 추가합니다.



사용자가 스토리를 클릭하면



리스트박스의 이벤트 핸들러에서는 선택된 DiggStory 오브젝트를 DataContext 속성에 설정하고 컨트롤을 보이게 합니다.



DiggStory의 Title이 우리가 추가한 데이터바인딩 표현식 때문 컨트롤에 표시되는 것을 보세요.

사용자 정의 컨트롤 마무리

우리는 위의 예제를 통해서 어떻게 master/deatail 대화상자가 사용되는지 살펴보았습니다. 이제 사용자 정의 컨트롤에 몇 가지 추가 컨트롤과 데이터바인딩 표현식을 사용하여 StoryDetailsView를 완성 할 수 있습니다.



StoryDetailsView 컨트롤이 위의 그림처럼 보이게 하기 위해서 <Border> 컨트롤의 하위에 아래 내용을 채워주세요.



이것 말고는 코드를 바꾸지 않아도 됩니다. 데이터바인딩을 이용하여 DataContext의 값을 끌어왔기 때문에 다른 코드는 필요 없습니다.

다음 단계

이제 우리는 Digg 클라이언트의 모든 기능과 사용자 인터렉션 흐름을 구현했습니다.

마지막 단계는 UI를 좀더 미세하게 조정해보겠습니다. 특히 리스트박스와 버튼 컨트롤들을 약간 우아하게 다듬어 보겠습니다.

다음 단계 Using Control Templates to Customize a Control's Look and Feel (한글 번역본)로 이동하겠습니다.

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


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  1개가 달렸습니다.
  1. 주동석 2008.04.14 18:05
    제일 마지막 코딩중에요. Style 속성을 알아야 실행 돼는거 아닌가요?

    속성을 모르는데 어떡게 하는건가요?? App.xaml에 이름 만 넣어주면

    기본 속성이 있는건가요??
secret

아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 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

한국시간으로 오늘 새벽 라이베가스에서 MIX 2008 의 하이라이트 키노트가 있었습니다.
레이오지(Ray Ozzie, Chief Software Architect)와 스캇 구슬리(Scott Guthrie, Vice President)가 주요 스피커였습니다.

현장을 녹화한  동영상은 여기에서 확인 할 수 있습니다.

하지만 영어 듣기의 압박이 있기 때문에 먼저 UXFactory(http://uxfactory.com)에서 황리건 님의 블로그 포스트를 먼저 읽으면 도움이 많이 될 것 같습니다. [MIX08] 레이 오지 키노트 시작(요약) 에서 시작해서 [MIX08] 모바일용 실버라이트, MIXr, 노키아 데모까지 살펴보세요.
황리건님의 실시간 블로깅... 대단합니다. 감사합니다.

특히 실버라이트 2에 관한 내용은 뭐니뭐니해도 공도님의 블로그를 보세요.
밤을 새워서 글을 올려주셨습니다. 다시 감사.
[MIX08] NOW Playing! 부터 Deep Zoom! 까지 ...

이제 시작입니다 ^^


WRITTEN BY
ONESTONE

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