몇 일전에 익스프레션 블렌드 3와 실버라이트 3.0이 발표 되었습니다.
좀 늦은 포스팅 이긴 하지만 관련 자료를 열람할 수 있는 주소를 정리해 보았습니다.

관심 있는 분들은 천천히 읽어보셔도 좋을 듯 합니다.
특히 Visual Kitchen은 한 시간 짜리 동영상 이긴 하지만 말은 잘 못알아들어도 봐두시면 익스프레션 블렌드 3.0의 특징에 대해 잘 아실 수 있게 됩니다. 꼭 보시면 도움이 될 겁니다. 한 시간만 투자하세요.^^

실버라이트 3.0 퀵 스타트 : http://silverlight.net/quickstarts/
실버라이트 3.0 개발툴 관련 사이트 : http://silverlight.net/GetStarted/
실버라이트 3.0 특징 : http://silverlight.net/learn/videocat.aspx?cat=12
실버라이트 3.0 도입 사례 : http://www.microsoft.com/silverlight/
실버라이트 3.0에서 새로워진 부분 : http://silverlight.net/getstarted/silverlight3/default.aspx
익스프레션 블렌드 3에 대한 소개 : http://expression.microsoft.com/ko-kr/dd565875(en-us).aspx
익스프레션 블렌드 3(스케치 플로우)에 대한 소개 : http://expression.microsoft.com/en-us/ee215229.aspx
딥줌 composer 다운로드 : http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=457b17b7-52bf-4bda-87a3-fa8a4673f8bf
익스프레션 블렌드에 대한 새로운 특징과 기능을 상세하게 감상할 수 있는 Visual Kitchen : http://www.microsoft.com/silverlight/seethelight/

Expression Media는 미디어 파일 변경에 대한 버전관리 기능을 제공합니다.
버전관리 기능을 통해 변경된 이미지와 원본 이미지를 선택해서 사용할 수 있습니다.
원본 이미지를 실수로 변경해서 원본 손실에 대한 후회를 조금은 덜 수 있게 되었습니다.

먼저 Expression Media를 실행합니다.
[파일] 에서 [항목 가져오기]로 이동하고 [파일/폴더에서(F)]를 클릭합니다.

사용할 미디어 파일을 선택합니다.

아래 이미지에서 빨간 네모 아이콘은 [라이트 테이블] 이라고 하는 기능입니다.

라이트 테이블은 선택한 이미지를 보거나 비교할 때 매우 유용합니다.
이것을 통해 간단하게 이미지를 변경하거나 회전을 시킬 수 있고, 또한 이미지의 색 레이블이나, 파일 이름, 크기, 크기 조정 백분율 등이 표시 됩니다.

아래의 이미지 처럼 [이미지 편집기]를 클릭합니다.
이미지 편집기는 이미지의 색이나 밝기, 선명도, 이미지 보정등에 사용되는 도구 입니다.
이미지 편집기에서 지원되는 다양한 기능을 적용해 보세요.

아래는 이미지 편집기로 변경한 이미지 입니다.

이렇게 변경된 이미지는 버전관리를 해줌으로써 여러가지 미디어 버전을 확보할 수 있습니다.
변경한 이미지가 마음에 들지 않을 경우 버전 폴더에서 이전 이미지를 가져오기만 하면 됩니다.
그러기 위해선 먼저 버전 폴더를 생성해야 합니다.
버전 폴더는 [이미지 편집기]에서 [설정]을 클릭함으로써 생성합니다.

버전 폴더를 생성한 후 이미지를 변경해 보세요.
그러면 아래 그림 처럼 미디어 버전이 만들어 지게 됩니다.

변경한 이미지를 다시 변경하게 되면 이미지 버전이 새롭게 추가 됩니다.

이렇게 생성된 이미지는 버전 폴더에 차곡차곡 쌓이게 됩니다.

이미지를 다시 돌리는 방법은 생성된 미디어 버전을 선택함으로써 편리하게 변경할 수 있습니다.

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

오늘 정리한 내용은 Expression 미디어로 슬라이드 쇼 만들기 입니다.
정리해논 자료가 좀 되는데 시간이 부족해서 올리질 못하네요.^^:

슬라이드 쇼를 만들기 위해 필요한 이미지를 몇 장 선택하고 EM에 추가합니다.

다음엔 메뉴바에서 [만들기]를 클릭합니다.

[슬라이드 쇼 옵션]에는 다양한 슬라이드 속성을 설정할 수 있도록 되어 있습니다.
지속시간은 슬라이드 전환 시간이고, 색은 배경색이며, 전환은 전환되면서 슬라이드가 표현하는 양식 입니다. 미디어 크기 조정은 슬라이드 쇼 완성 후 보여지는 이미지의 크기 이며, 스테이지 모눈은 전체화면에서 이미지를 몇개로 보여줄 것인가 하는 부분입니다.

취향대로 속성을 설정하고, 마지막으로 재생옵션과 일반옵션을 선택하는데 음성 주석 재생은 체크를 하지 않습니다. 마지막으로 슬라이드 쇼 [실행]을 클릭합니다.

전 전환시 아무 효과가 없도록 했습니다.

메뉴바에도 [Run] 버튼이 있습니다.

아래의 그림처럼 슬라이드 쇼가 진행되면서 현재 보여지고 있는 이미지를 빨간 글씨로 표시해 줍니다.

또한 [텍스트]에서 미디어 파일의 정보를 체크를 통해 볼 수 있습니다.

[정보] 에서는 미디어 파일의 디테일한 메타정보를 확인할 수 있습니다.

이제 슬라이드 쇼를 저장합니다.
굳이 설명하지 않아도 다 아실겁니다. 굉장히 옵션 자체가 굉장히 직관적 입니다.
적절하게 선택하고, [만들기]를 클릭하면 하나의 MOV 파일이 생성됩니다.


생성된 MOV 파일을 클릭하면 아래의 그림처럼 슬라이드 쇼가 완성됩니다.
이미지 뿐만이 아니라 동영상도 이와 같은 방법으로 슬라이드 쇼처럼 만들수 있습니다. 

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

이번엔 Expression Media을 실행했을 때 오른쪽에 보이는 카탈로그 폴더라는 것을 살펴보겠습니다.
먼저 설치한 Expression Media을 가볍게 실행해 줍니다.
그리고 아래의 그림처럼 메뉴 > 항목 가져오기 > 파일/폴더에서... 를 선택합니다.


미디어 파일 또는 폴더 선택 팝업이 활성화되면 원하는 이미지를 선택하고 가져오기를 클릭합니다.
저는 4장의 이미지를 선택했고, 작업영역에 선택한 4장의 이미지가 들어와 있는 것을 확인할 수 있습니다.
그리고 왼쪽 카탈로그 폴더가 하나 생성되어 있는 것을 볼 수 있습니다.


이 카탈로그가 어떤 것인지 간단하게 설명하겠습니다.

카탈로그에는 내가 선택한 파일에 대한 메타정보가 들어옵니다. 파일의 메타정보라 함은 가져온 파일의 하드디스크 위치나 이동식 저장장치에서의 파일 위치등이 될 수 있고, 또한 축소판에 나타난 그림의 버전 정보가 될 수 있습니다. 따라서 카탈로그가 가지는 미디어 파일의 정보를 이용해서 원본 없이 카탈로그를 검색할 수 있습니다.
이 카탈로그는 원본에 대한 축소이미지와 파일 정보만 가지기 때문에 원본이 삭제되었을 경우 카탈로그로 복구할 수 없다는 점을 알아주셨으면 합니다.

위의 사실을 아주 간단한 작업을 통해 증명해 보겠습니다.
생성된 카탈로그에 마우스로 선택하고 우클릭을 하고 지금폴더 업데이트를 선택합니다.


그러면 이미지를 선택한 폴더에 있는 나머지 사진 데이터들이 모두 카탈로그에 추가됩니다.
(카탈로그는 이미지에 대한 드라이브 정보를 가지고 있다는 것이 증명됩니다.)
아래의 그림 처럼 말입니다.



위의 이미지를 보면 빨간 네모상자 안에 있는 카탈로그의 오른쪽 숫자가 4에서 33으로 변경되어 있는 것을 확인할 수  있습니다.
이제 다시 축소판 그림에서 선택한 이미지들을 삭제해 보겠습니다.
몇 가지를 선택해서 삭제하면 카탈로그에서 제거 라는 버튼이 보입니다. 그것을 클릭해서 삭제하면 카탈로그에서 이미지가 사라진 것을 확인할 수 있습니다.


해당 이미지가 존재하는 폴더 위치로 가서 이미지를 확인해 보면 원본 이미지는 그대로 있는 것을 확인할 수 있습니다.

그 다음에 카탈로그의 드라이브 위치를 변경해 보겠습니다.
역시 마찬가지로 카탈로그 목록에서 마우스 우클릭하고 이번엔 폴더 경로 다시 설정을 클릭합니다.


저는 글쓰는데 사용되었던 이미지를 모아놓은 폴더를 선택했습니다.


폴더를 선택하면 아래의 이미지 처럼 카탈로그가 새롭게 생성됩니다.
카탈로그 목록에 표시되는 public의 위치는 공용 사진 폴더가 되고, 그 바로 아래에 있는 Images 카탈로그는 위에서 선택했던 폴더의 위치가 됩니다.
그것을 확인하기 위해 아래 그림처럼 마우스 우클릭하고 탐색기에서 폴더 열기를 선택하면 탐색기가 활성화 되면서 해당 폴더를 보여줍니다.


이제 선택한 폴더에 있는 이미지를 모두 가져와야 겠죠. 그러기 위해 위에서 해봤던 지금 폴더 업데이트를 선택합니다. 그러면 폴더에 있는 이미지들이 모두 자동으로 가져오게 되는 것을 확인할 수 있습니다.

참고로 이 카탈로그의 최대 용량은 1.8GB이고요, 최대 128,000개의 파일 까지 저장할 수 있습니다.
또한 참고로 축소판 이미지에 대한 옵션은 Expression Media의 메뉴바에서 편집 > 축소판 그림 및 미리보기 부분에서 옵션 설정으로 최적화 할 수 있습니다.

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

앞에서 언급했듯이 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

회사일도 바쁘고 C#과 실버라이트를 잠시 뒤로 미뤄두고 본의 아니게 현재 속한 곳에서 DBA 비슷하게 살고 있는 세티 입니다. (영원히 할 건 아니고 잠시....^^;;)

지금 몸 담고 있는 곳이 사교육 시장이어서 리치한 애플리케이션들을 참으로 많이 만들어 냅니다.(물론 제가 만든 건 아직 없고요...ㅎㅎ) 근데 이 곳에서도 실버라이트에 대한 관심은 아주 높더군요.
그래서 바쁜 시간 쪼개어 잠시 미뤄뒀던 이쪽(?)학습을 다시 시작했습니다.
뭔가를 만들려면 도구의 한계를 명확히 알아야 제가 표현하고 싶은 것들도 표현할 수 있을 테니깐요.
사실 실버라이트에 대해 깊이 있게 알지 못합니다. 프로젝트도 안해봤구요.^^
관련 도구의 성격도 아직은 잘 모르겠고요. 하지만 이렇게 정리해 가면서 들여다보게 되면 금방 제것이 될 거라는 생각이 듭니다. 단지 도구잖아요. ^^*

과거에 너무 어렵게 공부한 기억이 있어서 관련 내용에 대한 정리는 되도록이면 아주아주 쉽게쉽게 정리해 보겠습니다. 몇 가지 따라해보니깐 실제로 쉽긴 쉽더라구요. ㅡㅡ;;;
아무튼 강좌라기 보단 학습 정리에 대한 것으로 이해해 주시고, 필요한 분들은 저와 함께 포스트를 통해 공부해 보는 것도 좋을 것 같습니다.


Expression Media는 이미지나 동영상 그리고 사운드와 글꼴 등과 같은 미디어 파일 리소스를 이용해서 멀티미지어나 HTML 페이지등과 형태로 매우 빠르고 쉽게 구성할 수 있습니다. 많은 좋은 도구들이 현재도 없는 것은 아니지만 Expression Media는 직관적이고 쉬운 인터페이스 제공을 통해 전문가가 아닌 일반인들도 쉽게 원하는 결과물을 만들어 낼 수 있습니다.

이런 도구를 사용할려면 도구가 가지는 기능이나 성격을 필수적으로 알아야 하는 것은 아니지만 알아두면 원하는 작업을 보다 능률적으로 할 수 있을 것입니다.



Expression Media가 가지는 기능

• MS Office 2007/2008의 파일 형식과 Expression Media에 필요한 여러가지 파일 형식을 지원합니다.
• DOCX, DOTX, PPTX, POTX, XLSX, XLT(MS Office)
• XAML, Design XEJ, CSS, JS, VBS
• 네트워크 작업의 효율성
• 한 사용자가 카탈로그를 열어 편집하는 동안 다른 사용자가 공유되는 위치에서 편집중인 카탈로그에 접근해서 내용을 볼 수 있도록 해주는 카탈로그 잠금 기능의 제공
• 키워드 교집합 또는 합집합을 통해 이미지를 정렬할 수 있음.
• 미디어 파일에 대한 계층 구조 키워드 생성이 가능(사진 파일의 모든 레이어에 설명 추가 가능)
• 작업을 위해 필요한 미디어 파일을 쉽게 가져올 수 있고, 카탈로그, 축소판 그림 만들기 등을 더욱 빠르게 할 수 있고, 가져오는 중에 손상된 파일을 알려주는 기능이 있음.
• 다중 모니터를 사용하는 작업 환경에서 라이트 테이블과 카탈로그, 도구를 분리해서 위치시켜 놓고 작업을 할 수 있어 작업 생산성이 향상됨.
• 템플릿이 포함되어 있어서 플랫폼 독립적인 웹 갤러리 구성이 가능
• Quick Time이 필요한 부분에는 "QT"라는 로고를 보여줌.
• Quick Time이 없으면 WIC(Windows Imaging Component)를 사용하여 이미지 인코딩, 디코딩 변환을 수행해 줌.
• 이동식 저장장치(USB, Memory Card) 등의 자료를 즉시 가져올 수 있음.

Expression Media는 Quick Time을 자동으로 설치해 주지 않습니다. 슬라이드 쇼의 실행, 동영상 파일의 변환이나 음성 파일의 변환과 같은 작업은 Quick Time이 있어야 작동시킬 수 있으므로 미리 설치해두면 좋을 것 같습니다.

Apple의 Quick Time : http://www.apple.com/quicktime/

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

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

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

원본: 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 아키텍쳐

'Silverlight' 카테고리의 다른 글

[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

원본: 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 리스트를 확인하시기 바랍니다.

 

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

원본: 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에 액세스하는 것에 대해서 함께 알아보겠습니다. 추석이 다가오네요. 풍성한 추석 보내시고 건강하세요~^^

'Silverlight' 카테고리의 다른 글

[엘리의 실버라이트 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 데이터 컬렉션에 대해서 알아보도록 하겠습니다.

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

'Silverlight' 카테고리의 다른 글

[엘리의 실버라이트 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/BuildUi/ControlEventHandlers.aspx

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

 

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

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

 

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

 

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

 

StackPanel에 핸들러 추가하기

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

 

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

 

<TextBlock Name=”statusText”/>

 

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

 

FrameworkElement fe = e.Source as FrameworkElement; StringBuilder sb = new StringBuilder(); //using System.Text; 를 선언한 후 사용합니다. sb.Append(“source: “ + fe.Name + “\n”); sb.Append(“relative x/y to source: “ + e.GetPosition(fe) + “\n”); sb.Append(“Silverlight content area x/y : “ + e.GetPosition(null)); statusText.Text = sb.ToString();

 

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

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

e.Handled = true; FrameworkElement fe = e.Source as FrameworkElement; StringBuilder sb = new StringBuilder(); sb.Append(“source: “ + fe.Naem + “\n”); sb.Append(“relative x/y to source: “ + e.GetPosition(fe) + “\n”); sb.Append(“Silverlight content area x/y: “ + e.GetPosition(null)); statusText.Text = sb.ToString(); //</SnippetStackPanelHandler>

 

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

 

Void Canvas1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {    e.Handled = true;    statusText.Text = “”;    Canvas c = sender as Canvas;    SolidColorBrush newColor = new SolidColorBrush(Color.FromArgb (255, 200, 77, 0));    c.Background = newColor; }

 

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

 

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

 

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

 

키보드 이벤트 

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

 

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

 

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

 

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

 

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

 

private void LayoutRoot_KeyDown(object sender, KeyEventArgs e) {     //check key value, we are looking for "G"     if (e.Key == Key.G)     {         //check modifiers for Ctrl         if ((Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control)         {             statusText.Text = "Beep!";         }     } }

 

2. Page.xaml 파일에 두 번째 Canvas 엘리먼트와 TextBlock 엘리먼트 사이에 아래 코드를 코딩합니다.

 

<Button Content=”Hello” />

 

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

 

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

 

참고 키는 단지 포터블 키(이기종 플랫폼에서도 인식 가능한 키) 코드만 전달 가능합니다. 넌포터블 키(특정 기종 플랫폼에서만 인식 가능한 키 - SCROLL LOCK키는 Windows 플랫폼에서만 인식 가능) 코드는 허용되지 않습니다. 넌포터블 키 코드는 퀵스타트에서는 다루지 않습니다. 키보드 지원을 참고하시기 바랍니다.

 

참고 사항

 

이벤트 개요

마우스 지원

키보드 지원

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