달력

082008  이전 다음

  •  
  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  
  •  
  •  
Internet Explorer 8 Beta 1에는 Visual Search 라는 기능이 있습니다.

어떤 검색을 위해 매번 브라우저의 주소창에 검색 사이트를 입력해서 해당 페이지를 연 다음 다시 검색 결과를 입력하고 검색하지 않아도 브라우저에 있는 검색 프로바이더를 선택해서 간편하게 검색할 수 있게 해주는 기능입니다.

아래의 그림에 보면 Visual Search 영역은 브라우저의 오른쪽에 있습니다.
사용자 삽입 이미지

Visual Search에 검색 프로바이더를 추가하기 위해선 브라우저의 오른쪽에 위치한 Visual Search에서 메뉴를 오픈하고 Fine More Providers... 를 선택합니다.
사용자 삽입 이미지

그러면 MS의 공급자 사이트로 이동하게 됩니다.
사용자 삽입 이미지

Internet Explorer 8 Beta 1 브라우저에 검색 프로바이더를 추가하기 위해선 약간의 절차가 필요합니다.

1. 먼저 내가 등록하고자 하는 검색 사이트로 이동합니다.
2. 검색창에 대문자로 TEST를 입력해서 검색 쿼리를 만들어 냅니다.
3. 아래의 빨간 네모 박스에 나오는 주소를 복사합니다.

사용자 삽입 이미지

4. 아래의 그림처럼 빨간 네모 박스 영역에 주소를 복사해서 붙여 넣습니다.
5. 다음으로 검색 프로바이더의 이름을 적절하게 입력합니다.
6. 그런 후 마지막으로 설치 버튼을 클릭하면 됩니다.

사용자 삽입 이미지

7. XML 보기를 클릭하면 아래의 그림처럼 XML로 된 프로바이더 정보를 확인할 수 있습니다.
사용자 삽입 이미지

참고로 Internet Explorer 7에서도 검색 프로바이더를 확장할 수 있다고 합니다. 그것은 Internet Explorer 7 에서 검색 아키텍처가 새롭게 디자인 되었기 때문이라고 하는데요.
Internet Explorer 7에 사용된 새로운 검색 아키텍처에 대한 내용은 아래의 링크를 참조하시면 됩니다.

OpenSearch Description :
http://www.opensearch.org/Specifications/OpenSearch/1.1

위의 주소를 클릭해서 열어보면 검색 프로바이더로 등록되는데 필요한 xml의 정의가 매우 상세하게 설명되어 있습니다. Internet Explorer에서의 주소등록은 window.external 객체의 AddSearchProvider 메서드에 의해서 이루어진다고 합니다.

만드는 방법도 매우 쉽게 되어 있네요.
먼저 검색 프로바이더는 다음과 같은 형태의 XML 파일을 만듭니다.

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>MSDN</ShortName>
<Description>MSDN Search</Description>
<Url type="text/html"
   template="http://search.msdn.microsoft.com/search/results.aspx?view=msdn&amp;qu={searchTerms}"
/> 
</OpenSearchDescription>


그리고 위의 XML을 읽어들이기 위해서 다음과 같은 코드를 이용하면 된다고 합니다.

<a href="#"
   onclick="window.external.AddSearchProvider('http://www.example.com/provider.xml')"
   >Add Search Provider Example</a>


만약 위와 같은 클릭 행위 없이 페이지 로드시에 검색 공급자를 등록하고 싶다면 HTML 파일의 head 내에 link 엘리먼트를 이용하여 등록하면 된다고 합니다.

   <link title="My Provider" rel="search" type="application/opensearchdescription+xml" href="http://www.example.com/provider.xml">

보다 자세히 알고 싶으신 분은 아래의 참고주소로 직접 들어가 보시면 될 듯 합니다.^^


참고주소
1. Search Provider Extensibility in Internet Explorer 7, MSDN, http://msdn.microsoft.com/en-us/library/ms532996.aspx
2. AddSearchProvider, MSDN, http://msdn.microsoft.com/en-us/library/ms535931(VS.85).aspx
3. OpenSearch Description, OpenSearch, http://www.opensearch.org/Specifications/OpenSearch/1.1

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by -세티-

원글출처 : 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 데이터 컬렉션에 대해서 알아보도록 하겠습니다.

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

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by -세티-
지난 수요일에 친할머니가 돌아가셔서 3일간의 상을 마치고, 집에 왔습니다.

삼일동안 접속할 수 없었던 블로그에 들어와 보니 짱묜님이 방명록에 글을 남겨 주셨습니다.
그래서 짱묜님의 블로그를 방문했습니다.
오~ 디자이너 관점에서 보는 실버라이트 강좌가 매우 내실있고, 간략 깔끔하게 잘 정리 되어 있었습니다.
개발자가 아닌 디자이너의 입장에서 실버라이트에 대해 꼼꼼하게 알고 싶다면 짱묜님의 사이트에서 많은 도움을 받을 수 있을 거라 생각됩니다.

한번 방문해 보세요.^^

짱묜님의 블로그 : http://zzangmyon.tistory.com/
크리에이티브 커먼즈 라이선스
Creative Commons License

'HCI & UX' 카테고리의 다른 글

HCI (1)  (0) 2009/04/17
Microsoft UX Platform and Tool Overview By Chris Bernard  (0) 2009/04/11
[블로그 소개] 짱묜님이 운영하는 실버라이트  (4) 2008/08/22
MS MED User Experience Workplace를 보아요~  (0) 2008/07/12
HCI 정리  (0) 2008/07/07
User Experience Architecture  (4) 2008/06/23
Posted by -세티-

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

 

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

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

 

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

 

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

 

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 핸들러가 실행되어진 후에 어떤 핸들러도 함께 라우팅이 되지 않았습니다. 이는 Handledtrue로 설정을 되었기 때문에 이벤트 라우팅이 이루어지지 않은 것입니다.

 

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로 명명된 StackPanelKeyDown 이벤트 핸들러를 추가합니다. 인텔리센스를 사용하여 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 응용 프로그램을 다운로드 받을 때 로딩되는 진행 상황 등을 알려주는 임시 (준비) 페이지 만들기에 대해서 알아보겠습니다.

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by -세티-

바쁘다는 핑계로 잘 열어보지 않던 메일함을 열었습니다. KISTI의 글로벌동향브리핑(GTI)를 RSS로 받아보고 있는데요. 재미있는 기사를 발견했습니다. (클릭)

이미 인지과학을 전공으로 하셨던 분들에게는 이 기사가 그리 새로운 소식이라 할 수 없겠지만 인지과학과 담을 쌓고 지내던(인지과학에 대한 무지일수도 있고, 무관심에 의해서 일수도 있고요~) 저와 같은 타분야 사람들에게는 시야와 감을 넓혀주는 그런 소식이라 할 수 있습니다.

최근의 과학기술, 공학기술의 발전 방향을 보면 시간이 흐를수록 인간본성 자체에 대한 연구를 강화하면서 그 위에 기존의 과학기술이나 공학기술을 접목하는 시도를 많이 하고 있는 것 같습니다.

사용자 삽입 이미지


우리가 관심을 가질수 밖에 없는 소프트웨어 분야도 타분야들과 마찬가지로 인지과학의 중요성을 인지하고 그것을 접목하고 발전하는데 그 흐름을 같이 하는 것 같습니다.

기회가 되면 관련 사항을 정리해서 한번 소개하는 글을 쓰겠습니다.
 
실버라이트라나 플렉스와 같은 기술은 자바스크립트에 비해 사람에게 감성을 전달하는 측면이 뛰어나고, 자바나 닷넷에 비해서는 플랫폼 접근성이 훨씬 좋다고 생각됩니다. 이런 기술이 지금은 기존 기술의 부족한 부분을 보완하는 수준에서 사용되고 있긴 하지만 머지않아 주류가 될 것이라 생각됩니다.

위의 두 기술이 주류가 되는 세상에서 무언가를 구현하기 위해서는 그것을 사용하는 사람에 대한 고민이 반드시 필요하게 될 것입니다.

따라서... 미리미리 공부합시다.^^

참고 : http://www.iua.upf.es/~jblat/material/hci/

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by -세티-
원글출처 : http://silverlight.net/Quickstarts/BuildUi/ControlEventHandlers.aspx 
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

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

8 4일부터 6일까지 부산으로 휴가를 다녀왔습니다. 친한 동생 집이 부산이라 2 3일 동안 아주 알차게 보내고 왔습니다. 부모님들께서도 너무 잘해주셔서 맛있는 것도 많이 먹고 차까지 빌려주셔서 편히 잘 쉬다 왔습니다. ^^*

해수욕을 할까 말까 하다가 해운대에서 결국 했는데, 직접 가보니 사람이 그렇게 많진 않고 정말 밤까지 시끌벅적 하더군요. 여러 사정으로 휴가 못 가시는 분들한테는 너무 죄송하지만 간만에 유유히 편히 쉬다 왔습니다. ^^;

 

오늘은 Silverlight 입력 이벤트에 대한 핸들러 작성에 대해서 알아보는 시간입니다. C# 이나 Visual Basic에서, 어셈블리로 컴파일되는 이벤트 핸들러를 작성하는 방법과 XAML 파일에서 이 것들을 참조하는 방법에 대해서 알아보겠습니다.

 

Silverlight 응용 프로그램 작성 시, XAML 파일은 C# 또는 Visual Basic을 이용하여 함께 작업이 가능합니다. 이 두 파일을 이용하여 프로그램을 작성한다면 보다 나은 Silverlight 응용 프로그램 개발을 할 수 있을 것입니다.

XAML (eXtensible Application Markup Language)
파일에선 응용 프로그램 대부분의 UI (User Interface)를 구현할 수 있고 관리 코드 (C# 또는 Visual Basic)를 사용하여 XAML을 동작하게 합니다.

그럼, 좀 더 자세히 알아보도록 하겠습니다.

 

Silverlight 기반 응용 프로그램 이벤트를 핸들러를 작성하는데는 아래와 같이 여러 방법들이 있습니다.

 

1. Silverlight 플러그 인에 의해 해석되고 브라우저의 스크립트 엔진으로 전달되는 JavaScript 핸들러를 작성할 수 있습니다.


2. IronPython
이나 관리되는 Jscript 같은 관리되는 코드로 지정한 동적 언어에 핸들러를 작성할 수 있습니다. 이 핸들러는 실행되기 전까지 컴파일이 되지 않습니다. 관리되는 코드 내 동적 언어를 위한 지원은 DLR (Dynamic Language Runtime)에 의해 제공되어 집니다. 좀 더 자세한 정보는 동적 언어로 Silverlight 프로그래밍을 참고하시기 바랍니다.


3. C#
이나 Visual Basic과 같은 관리되는 코드 언어에 핸들러를 작성할 수 있습니다. 핸들러를 참조하는 XAML 페이지와 이와 함께 컴파일 되는 코드 비하인드 파일로 이벤트 핸들러가 작성되어집니다.

 

여기서는 3번 째 방법을 설명을 할 것인데, XAML 파일에서 핸들러를 참조하여 C# 또는 Visual Basic 코드에 이벤트 핸들러를 작성하는 방법에 대해서 설명하고 어셈블리의 일부로서 코드 비하인드 파일과 XAML 파일을 컴파일 하는 것을 설명할 것입니다.

 

사전 준비 사항

- Silverlight 2 베타 2

- Visual Studio 2008 (90일 평가판)

- Visual Studio 2008용 Silverlight Tools 베타 2

 

먼저 Visual Studio 2008을 사용하여 Silverlight 프로젝트를 하나 만드시기 바랍니다. (참고: Silverlight 응용 프로그램 생성하기)

 

프로젝트와 기본 XAML 파일 생성하기

Visual Studio Silverlight 템플릿 기반 프로젝트는 디폴트 클래스와 네임스페이스를 포함하고 이와 함께 x:Class도 이미 선언되어져 있습니다.

 

다음은 프로젝트를 만들고 XAML 파일을 편집하는 절차입니다.

 

1. Silverlight 응용 프로그램 하기를 참고하여 Silverlight 응용 프로그램을 하나 만드시기 바랍니다. HTML 페이지를 호스팅하기 위해 옵션으로 이 프로젝트 안에 Silverlight를 호스팅할 HTML 테스트 페이지를 동적으로 생성을 선택하시기 바랍니다. 프로젝트는 C#이나 Visual Basic을 선택할 수 있는데 선택에 따라 절차에 대한 설명이 달라질 것 입니다.

 

2. 기본 Silverlight 템플릿에서 만든 프로젝트를 보기 위해 솔루션 탐색기를 엽니다.

 

3. 다음으로 Page.xaml 파일을 여시기 바랍니다.

 

4. 루트 엘리먼트인 UserControlHeightWidth 속성이 정의되어 있다면 삭제합니다.

 

5. Grid 엘리먼트를 StackPanel 엘리먼트로 변경하고 Background 속성을 추가하시기 바랍니다. Grid 태그를 삭제하고 다음 코드를 붙여넣기 합니다.

<StackPanel x:Name=”LayoutRoot” Background=”OldLace”>

</StackPanel>


StackPanel
은 완성된 코드를 실행시킨 후 보시면 브라우저의 바탕이라고 보시면 됩니다.

   StackPanel을 포함한 레이아웃 컨트롤들에 대해서는 차후 설명하는 시간을 갖도록 하겠습니다.

사용자 삽입 이미지

6. UI 엘리먼트를 추가합니다. StackPanel의 자식 엘리먼트로 Canvas 엘리먼트를 추가합니다. StackPanel 태그 사이에 다음 XAML 코드를 자식 엘리먼트로 추가합니다. 참고로 아직 이벤트나 이벤트 핸들러는 선언하지 않은 상태입니다.


<Canvas x:Name=”Canvas1” Background=”DarkKhaki” Width=”100” Height=”30”>

   <TextBlock>Canvas1</TextBlock>

</Canvas>

 

7. Canvas 엘리먼트 속성으로 MouseLeftButtonDown을 입력하거나 타이핑 완성에 도움이 되는 인텔리센스 드롭다운 항목들을 선택하여 코딩합니다. 처음 입력하면 속성이 정의되지 않은 MouseLeftButtonDown=”” 상태로 표시될 것입니다. 속성에 대한 값은 추가로 UI 드롭다운 인텔리센스 항목을 통하여 보실 수 있습니다.

사용자 삽입 이미지

8. 인텔리센스 드롭다운 항목에 도움말을 보고 탭 키를 누릅니다. 이러면 Canvas1_MouseLeftButtonDown이라는 이벤트 핸들러를 정의하고 참조하게 됩니다. 이 이름은 변경하셔도 됩니다.


사용자 삽입 이미지

지금까지 작성한 XAML 파일은 다음과 같습니다.


<Canvas x:Name=”Canvas1” Background=”DarkKhaki” Width=”100” Height=”30“ MouseLeftButtonDown=”Canvas1_MouseLeftButtonDown”>

     <TextBlock>Canvas1</TextBlock>

</Canvas>

 

9. 현재 코드 비하인드 파일 (C# 또는 Visual Basic)의 이벤트 핸들러 코드는 비어 있습니다. 아직 컴파일은 하지 마시기 바랍니다. 이 코드는 다음 절차에서 코딩할 예정입니다.

 

핸들러 작성

 

XAML 페이지에서 참조하는 모든 이벤트 핸들러는 클래스 내에 정의되어야 하고 XAML 파일내 x:Class에 의해 선언된 어셈블리에 있어야 합니다. 코드 비하인드 파일 (C# 또는 Visual Basic)과 그 XAML 파일은 클래스 내 코드로 연결되어 있고 함께 컴파일 됩니다. 기본적으로 템플릿은 XAML 파일과 코드 비하인드 파일의 이름을 동일하게 만들고 프로젝트 내에서 XAML의 의존적 파일로서 코드 비하인드 파일이 함께 생성됩니다. 예를 들어, Page.xaml 파일을 만들었다면 코드 비하인드 파일은 여러분이 사용하는 언어에 따라 Page.xaml.cs 또는 Page.xaml.vb로 만들어졌을 것입니다. 그리고 코드 비하인드 파일은 단지 바로 아래 위치되어 있습니다. (처음 코드 비하인드 파일을 볼 수 없다면 솔루션 탐색기 내 Page.xaml의 왼쪽 +를 클릭해보세요.)

 

다음은 관리되는 코드 파일 내 이벤트 핸들러를 정의하는 방법입니다.

 

1. Page.xaml.cs 또는 Page.xaml.vb 파일을 편집하기 위해 엽니다.

C# 이라면, 프로젝트 템플릿에 따라 네임스페이스와 클래스가 정의됩니다. Visual Basic이라면, 클래스는 정의 되고 네임스페이스는 프로젝트의 기본 네임스페이스에 의해 지정됩니다.

 

2. Page 클래스의 멤버로서 정의된 Canvas1_MouseLeftButtonDown 빈 핸들러를 찾아보세요. 이 빈 핸들러는 이 전 절차에서 인텔리센스를 통해 TAB 키를 눌렀을 때 생성된 것입니다. XAML 파일의 Canvas 엘리먼트 참조를 하기 위해 sender 파라미터를 사용하는 핸들러 작성해보겠습니다. XAML 파일에 정의된 기본 값을 SolidColorBrush를 사용하여 변경해봅니다. 각 언어에 맞게 아래 코드를 보시기 바랍니다.

 

CS

private void Canvas1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

   Canvas c = sender as Canvas;

   SolidColorBrush newColor = new SolidColorBrush(Color.FromArgb(255, 200, 77, 0));

   c.Background = newColor;

}

 

VB

Private Sub Canvas1_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)

    Dim c As Canvas = sender

    Dim newColor As SolidColorBrush = New SolidColorBrush(Color.FromArgb(255, 200, 77, 0))

    c.Background = newColor

End Sub

 

3. 응용 프로그램을 컴파일하고 실행해보세요. (F5 키를 사용하여 디버그 상태로 컴파일하고 실행시킵니다.) HTML 페이지와 Silverlight 컨텐츠가 로드될 것입니다. 그럼, Canvas1 부분을 클릭해보세요. 컬러가 변경되는 것을 확인하실 수 있을 것입니다.

 

참고

만약 Silverlight 관리되는 이벤트가 EventArgs/RoutedEventArgs로부터 상속된 클래스를 사용하거나 다른 이벤트 핸들러에서 발생한 이벤트 데이터를 사용하지 않는다면 일반적으로 EventHandlerRoutedEventHandler를 사용합니다. MouseLeftButtonDown 이벤트는 마우스와 관련된 이벤트의 데이터를 전달해주고 MouseEventHandler 델리게이트를 사용합니다.

 

코드에 이벤트 핸들러 추가하기

 

일반적으로 XAML 코드에 이벤트 핸들러를 추가하는 것이 편리하지만 CLR (Common Language Runtime) 코드에 CLR 구문을 사용하여 추가할 수도 있습니다. 예를 들어, 사용 언어가 C#이라면, +=로 이벤트 핸들러를 추가할 수 있습니다. 다음 절차는 Loaded 이벤트 핸들러를 추가하기 위해 클래스 생성자를 사용한 것 입니다. Loaded 이벤트 핸들러는 기존의 Canvas1_MouseLeftButtonDown 핸들러를 다른 CanvasMouseLeftButtonDown 이벤트에 추가할 것 입니다.

 

아래의 방법으로 XAML 파일과 관리되는 코드를 편집합니다.

 

1. Page.xaml 파일을 편집합니다. Canvas 엘리먼트 뒤에 핸들러를 제외한 Canvas를 하나를 추가합니다. Canvas와 구별하기 위해 Background 속성 값을 다르게 지정합니다.


<Canvas x:Name=”Canvas2” Background=”Orchid” Width=”100” Height=”30”>

   <TextBlock>Canvas2</TextBlock>

</Canvas>


2. Page.xaml.cs 파일을 편집합니다. Page 클래스 생성자 내 InitializeComponent 다음에 Loaded 이벤트 핸들러를 추가합니다. (다음 단계에서 새로운 핸들러를 정의할 것 입니다. 또한 C#에서 +=를 입력하면 인텔리센스가 제공하는 여러 옵션들을 보게 될 것입니다. 그리고 다음 단계를 시작하는데 Page_Loaded의 뼈대를 잡아줄 것입니다.)

 

CS

public Page()

{

   InitializeComponent();

   this.Loaded += new RoutedEventHandler(Page_Loaded);

}


사용자 삽입 이미지

3. Canvas2 MouseLeftButtonDown 이벤트를 참조하는 Page_Loaded 핸들러를 정의합니다. 그리고 Canvas1_MouseLeftButtonDown 핸들러를 추가하세요.

 

CS

void Page_Loaded(object sender, RoutedEventArgs e)

{

   Canvas2.MouseLeftButtonDown += new MouseButtonEventHandler(Canvas1_MouseLeftButtonDown);

}

 

VB

Sub Page_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)

   AddHandler Canvas2.MouseLeftButtonDown, AddressOf Canvas1_MouseLeftButtonDown

End Sub

 

4. 파일을 저장하고 컴파일 한 후 응용 프로그램을 실행시킵니다. Canvas2 영역을 클릭했을 때 컬러가 변경되는 것을 확인하실 수 있습니다.

 

사용자 삽입 이미지
                                        ▽

사용자 삽입 이미지

Handles를 사용하여 Visual Basic에서 이벤트 핸들러 추가하기

 

Visual BasicWithEventsHandles 키워드를 사용하여 핸들러를 추가하는 또 다른 구문이 있습니다. XAML 코드에서 만들어져 명명된 엘리먼트의 경우 WithEvents 키워드를 사용할 수 없습니다. Silverlight Visual Studio 프로젝트에서 WithEvents 키워드는 추가되고, 명명된 XAML 엘리먼트에 접근하기 위해 참조되어지고 기본적으로 생성됩니다. Handles 구문은 유일하게 x:Name 엘리먼트가 추가되어졌을 때 작동됩니다. Handles를 선언했을 때 x:Name의 값은 인스턴스를 참조하게 됩니다.

 

XAML 파일 편집과 이벤트 핸들러 Handles 키워드를 사용하기

 

1. Page.xaml 파일을 편집합니다. 버튼처럼 보이는 첫 번 째 Canvas 다음에 이벤트 핸들러가 제외된 Canvas를 하나를 추가합니다.

 

VB

<Canvas x:Name="Canvas2" Background="Orchid" Width="100" Height="30">

  <TextBlock>Canvas2</TextBlock>

</Canvas>

 

2. Page.xaml.vb 파일을 편집합니다. 첫 번째 것과 같은 이벤트 핸들러를 추가합니다. (Canvas1_MouseLeftButtonDown을 복사하여 Canvas2_MouseLeftButtonDown으로 이름을 변경하겠습니다.) 이 번에는 Canvas2 인스턴스를 위한 MouseLeftButtonDown 이벤트 핸들러 지정을 위해 Handles 키워드를 사용합니다.

 

Private Sub Canvas2_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Canvas2.MouseLeftButtonDown

        Dim c As Canvas = sender

        Dim newColor As SolidColorBrush = New SolidColorBrush(Color.FromArgb(255, 200, 77, 0))

        c.Background = newColor

    End Sub


참고

먼저 x:Name=”Canvas1” 같은 속성 값을 가진 Canvas를 만들어놓고 기능적으로나 코드 면에서완전 동일한 핸들러를 구현하고자 한다면 핸들러는 다른 인스턴스에 핸들러 역할도 할 수 있습니다.

… Handles Canvas1.MouseLeftButtonDown, Canvas2.MouseLeftButtonDown.

이렇게 구현한다면 XAML 파일 Canvas1 엘리먼트의 MouseLeftButtonDown 이벤트 속성을 삭제하여도 됩니다.

 

핸들러 사용 시, XAML 파일에 속성을 추가하여 사용하거나 Handles 구문을 사용하는 것은 각 이벤트에 상호 독립적입니다. 응용 프로그램의 일관성을 유지하기 위해 XAML 파일에서 핸들러를 지정할 지, 코드 비하인드 파일에서 지정할 지 결정을 해야 합니다. Handles를 사용한다면 Silverlight가 라우트된 이벤트를 지원하게 됩니다. 이 것에 대해서는 뒤에서 좀 더 자세히 다루게 될 것입니다. 라우트된 이벤트를 사용하면 객체 트리에서 실제로 발생한 객체가 아닌 다른 객체에서 라우트된 이벤트 핸들러를 추가할 수 있습니다.

 

이 번 시간은 여기까지입니다. 다음 시간은 계속 해서 Silverlight 입력 핸들러 작성에 대해서 알아보도록 하겠습니다.
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by -세티-

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

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

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

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

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

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

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

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

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

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

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

사용자 삽입 이미지

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

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

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

사용자 삽입 이미지
(이전 포스트에서 만든 컨트롤을 빌드하면 나오는 dll 파일)


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

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

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

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

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

사용자 삽입 이미지

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

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

아래의 그림에서 처럼 MediaElementLoadedBehavior 속성값으로 Stop을 설정합니다.
사용자 삽입 이미지

원래 원문을 살펴보면 MediaElementAutoPlay의 속성값으로 False를 넣으라고 되어 있는데 Blend 2.5에서 해당 속성을 찾을 수 없었습니다.
사용자 삽입 이미지
(미디어엘리먼트에 설정 가능한 속성들)

자아. 아무튼 계속 진행합니다.
이제 각각의 버튼 사용자 컨트롤에 이벤트를 연결해야 합니다. 마우스의 왼쪽 버튼이 해당 버튼을 클릭하였을 때 동작하는 이벤트의 이름을 MouseLeftButtonDown 속성값에 넣어줍니다. 아래의 그림 처럼 말이지요.

사용자 삽입 이미지

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

사용자 삽입 이미지

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

이상으로 Blend 2.5를 이용한 실버라이트 애플리케이션 개발에 대해 간략하게 알아보았습니다.
좋은 하루 되십시오.^^
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by -세티-

[HTML] Box Model

General Web 2008/08/06 15:53
Box Model

XHTML 문서는 계층적으로 조직화된 엘리먼트(태그)를 포함합니다. 웹 브라우저는 엘리먼트의 레이아웃이나 내용의 비주얼 포맷팅을 위해 CSS를 사용합니다.

웹 브라우저는 웹 페이지에 각 엘리먼트를 묘사하기 위해 직사각형을 그립니다. 그리고 아래의 그림은 페이지에  직사각형 레이아웃이 그려진 것을 보여줍니다.

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
            <head>
                <title>CSS Example</title>
            </head>
            <body>
                <h1>Shoppling List</h1>
                <p>Please <strong>don't</strong> forget the following:</p>
                <ul>
                    <li>Large tomatoes</li>
                    <li>Red bell peppers</li>
                    <li>Eggplant</li>
                </ul>
            </body>
        </html>
    

Shoppling List

Please don't forget the following:

  • Large tomatoes
  • Red bell peppers
  • Eggplant

엘리먼트가 묘사하는 박스나 직사각형은 4개의 부분으로 구성됩니다. 아래의 그림은 그것에 대한 설명인데 내용, 보더, 내용과 보더 사이에 공간이 있는데 그것을 패딩이라고 부릅니다. 그리고 보더와 직사각형의 모서리 사이의 공간을 마진이라고 합니다.

Margin
Border
Padding
Hello World

엘리먼트는 2가지 타입으로 되어 있다. 블럭(block)과 인라인(inline)이다.

Block elements - 블럭 엘리먼트는 부모 엘리먼트에 대해 100%의 넓이를 가진다. 예를 들어서 h1은 블럭 엘리먼트이다. h1 다음에 나오는 엘리먼트는 모두 아래에 위치하게 된다.

Inline elements - 인라인 엘리먼트는 단지 내용의 넓이만 잡는다. 이것의 의미는 두개 또는 그 이상의 인라인 엘리먼트가 같은 라인상에서 디스플레이 될 수 있음을 의미한다. 예를 들어서 a 태그는 인라인 엘리먼트 이다.

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

'General Web' 카테고리의 다른 글

CSS1 - 1. 기본개념  (0) 2008/11/30
W3C 표준 DOM  (0) 2008/11/30
[HTML] Box Model  (0) 2008/08/06
2. xml 문서의 생성과 CSS를 이용한 XML 문서 출력  (0) 2008/04/11
xml과 10가지 설계목표  (0) 2008/04/11
[RDF 입문서] 1. 소개  (0) 2008/03/12
Posted by -세티-
 
스피어라는 이름의 동그란 멀티터치 컴퓨터가 나왔다고 합니다.
당장은 아니지만 점점 인터페이스의 진화가 연구실 경계를 넘어 우리 곁으로 다가오고 있는 느낌이 듭니다.

MS 스피어 관련 기사 : http://www.zdnet.co.kr/news/enterprise/0,39031021,39171679,00.htm

이 컴퓨터는 글로벌이미지내이션 사의 기술을 도입해서 만들어진 거라고 합니다.
기사에도 나와 있지만 매직 플라넷이라는 이름의 원형체 디스플레이를 만든 회사라고 합니다.

아래는 매직 플라넷이라고 하는 원형체 디스플레이에 대한 영상 입니다.

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by -세티-

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


지난 토요일 (도대체 언제 토요일을 말하는 걸까? ^^;) 저녁에 갑자기 목을 움직일 수 없을 정도로 뒷 목이 아파서 고생을 했습니다. 잠을 잘 못 잔 것도 아닌데그래서 자고 일어나면 괜찮아지겠지 했는데 아침에 침대에서 일어나려고 하니 목에 힘을 주면 너무 아파서 침대에서 일어나지 못할 정도였습니다. 이 때야 알았습니다. ‘침대에서 일어날 때도 목에 힘이 들어가고 있었구나…’ ㅋㅋ

어쨌든 도저히 안될 것 같아서 응급실에 가서 근육 이완제, 진통제 맞고 입원까지 할 것 같아 읽을 책이나 필요한거 간단히 챙겨 갔었는데 다행히 약만 지어주고 집에 가라고 하더군요.
일주일 정도 지났는데도 목이 좀 불편하긴 하네요. .

 

목이 아프기 전에도 조금씩 하고는 있었던 몸살림 운동이라고 있습니다.

간단히 본인의 좋지 않은 부위를 위한 운동들을 할 수 있는데, 어렵지도 않고 꾸준히 오래만 한다면 좋다고 하는데 여러분들도 댁에서 해보시기 바랍니다. (http://www.momsalim.or.kr)

좋은 정보 되셨으면 하는 마음에 소개해드립니다. ^^ (잡담이 점점 늘어나네요. --)

 

그럼 본론으로 들어가서, 개체 브라우저에 대해서 알아보겠습니다.

 

Visual Studio 개체 브라우저 Silverlight 어셈블리 탐색

 

Silverlight 프로젝트는 Visual Studio와 함께 설치된 어셈블리 대신 Silverlight와 함께 설치된 .NET 프레임워크 어셈블리를 참조합니다. Visual Studio 개체 브라우저는 Silverlight 어셈블리를 검색할 수 있고 여러 기준 별로 보기 상태를 설정할 수 있습니다. 또한 솔루션 탐색기에서 선택한 프로젝트에 참조를 추가할 수도 있습니다.

 

개체 브라우저에서는 네임스페이스와 클래스, 형식, 어셈블리 멤버들을 확인할 수 있습니다. 문서를 참조하는 것보다 개체 브라우저로 이용 가능한 프로그래밍 요소들을 좀 더 나은 방법으로 검색할 수 있습니다. 개체 브라우저는 문서를 제공하고 있진 않지만 프로그래밍 시 어셈블리를 참고할 때에 여러분들에게 많은 도움을 줄 수 있을 것입니다. Silverlight 형식과 멤버 관련 모든 문서는 MSDN 라이브러리의 Silverlight 참조를 참고하시기 바랍니다.

 

사전 준비 도구

- Silverlight 2 베타 2

- Visual Studio 2008 (90일 평가판)

- Visual Studio 2008 Silverlight Tools 베타 2

 

그럼 개체 브라우저 특징과 기능들에 대해서 좀 더 자세히 알아보도록 하겠습니다.

 

먼저 개체 브라우저를 메뉴에서 보기 개체 브라우저를 선택하여 열어보도록 하겠습니다.

 

사용자 삽입 이미지

 

위 그림을 보시면 창이 세 개 있습니다. 왼쪽에는 개체 창이 있고 오른쪽 위에는 멤버 창, 오른쪽 아래는 설명 창이 있습니다.

 

개체 창에서는 .NET 프레임워크 및 COM 구성 요소, 네임스페이스, 형식 라이브러리, 인터페이스, 열거형, 클래스와 같은 것들이 포함되어 있습니다. 멤버 창에는 속성과 메서드, 이벤트, 변수, 상수, 등의 항목을 볼 수 있습니다. 마지막으로 설명 창에는 개체 창이나 멤버 창에서 선택한 항목에 대한 세부 정보가 표시됩니다.

 

 

참고:

Silverlight 어셈블리는 Silverlight 기반 응용 프로그램에서 사용되는 멤버들과 .NET 프레임워크 코드에 의해서만 참조될 수 있는 멤버들이 있습니다. Silverlight 응용 프로그램에서 사용 될 수 없는 멤버는 SecurityCriticalAttribute 속성으로 확인 가능합니다. 이 속성은 개체 브라우저에서 확인할 수는 없지만 SecurityCriticalAttribute 속성을 가진 멤버의 인텔리센스 도움말에서 접두사 “[SECURITY CRITICAL]” 을 보고 확인할 수 있습니다. SecurityCriticalAttribute 속성을 가진 멤버 사용 시, Silverlight 문서는 또한 형식과 멤버가 보안에 중요 요소로 지정됩니다. 여러분의 코드에 보안에 엄격한 멤버를 사용한다면 그 멤버를 Sivlerlight 기반 응용 프로그램에서 실행할 때 예외가 발생할 것입니다.

 


사용자 삽입 이미지

위 그림은 SecurityCriticalAttribute 속성을 가진 네임스페이스를 추가한 후 솔루션 탐색기의 상태입니다.

 

계속해서 사용자 지정 구성 요소 집합 편집 대화 상자에 대해서 알아보고 개체 브라우저 검색 범위 보기와 사용하는 방법을 알아보도록 하겠습니다.

 

아래 그림은 찾아보기 콤보 박스입니다. 그럼, 찾아보기 메뉴에 대해서 알아보도록 하지요.

사용자 삽입 이미지

찾아보기 메뉴

 

모든 구성 요소: 전체 .NET 프레임워크, 현재 솔루션 및 현재 솔루션에서 참조하는 구성 요소, 사용자 지정 구성 요소 집합 편집을 선택하여 추가한 기타 구성 요소에 있는 개체를 표시합니다.

 

<Framework Versions>: .NET Framework .NET Compact Framework의 특정 버전에 대한 개체를 표시하도록 선택할 수 있습니다. 예를 들어, 컴퓨터에 .NET Framework 2.0 .NET Framework 3.0이 설치되어 있는 경우 .NET Framework 3.0만 검색하도록 선택할 수 있습니다. 다른 프레임워크도 등록되어 있다면 이 목록에 표시됩니다.

 

사용자 솔루션: 현재 솔루션 및 참조되는 해당 구성 요소의 개체를 표시합니다.

 

사용자 지정 구성 요소 집합: 사용자 지정 구성 요소 집합 편집을 선택하여 추가한 구성 요소의 개체를 표시합니다.

 

사용자 지정 구성 요소 집합 편집: .NET, COM, 프로젝트, 찾아보기, 최근에 사용한 파일 탭으로 구성되어 있고 이 대화 상자로 개체 브라우저나 기호 찾기 대화 상자에 표시되는 구성 요소 목록을 수정할 수 있습니다.

 

위 각 항목을 참고하여 상황에 맞게 검색 범위를 적절히 선택하여 사용하시면 됩니다.

 

다음은 사용자 지정 구성 요소 집합 검색 범위에 구성 요소를 추가하는 절차입니다.

 

1. 찾아보기 콤보 박스에서 사용자 지정 구성 요소 집합 편집을 선택합니다. 아래와 같이 사용자 지정 구성 요소 집합 편집 대화 상자가 열립니다.

 

사용자 삽입 이미지

 

2. 추가하거나 제거하려는 구성 요소 형식의 탭을 선택합니다.

 

3. 구성 요소 이름을 더블 클릭합니다. 또는 Ctrl 키를 사용하여 여러 구성 요소를 선택한 다음 추가를 클릭합니다.

 

다음은 사용자 지정 구성 요소 집합 검색 범위에서 항목을 제거하는 절차입니다.

 

1. 찾아보기 콤보 박스에서 사용자 지정 구성 요소 집합 편집을 선택합니다.

 

2. 사용자 지정 구성 요소 집합 편집 대화 상자에서 선택한 프로젝트 및 구성 요소 목록의 항목을 더블 클릭합니다. 또는 Ctrl 키를 사용하여 여러 항목을 선택한 다음 제거를 클릭합니다.

 

3. 확인을 클릭하여 개체 브라우저로 돌아오고 사용자 지정 구성 요소 집합 목록에 변경 내용을 적용합니다.

 

 

참고:

사용자 지정 구성 요소 집합 검색 집합에서 구성 요소를 제거하여도 시스템에서 구성 요소가 제거되지는 않습니다. 검색할 목록에서만 구성 요소가 제거되는 것입니다.

 

 

구성 요소를 추가하는 방법은 그리 어렵진 않습니다. 여기서 참고 사항이 구성 요소 의미에 대해서 아는 것이 더 중요할 것입니다.

 

다음은 사용자 지정 구성 요소 검색 범위에 외부 구성 요소를 추가하는 절차입니다.

 

1. 찾아보기 목록에서 사용자 지정 구성 요소 집합 편집을 선택합니다.

 

2. 사용자 지정 구성 요소 집합 편집 대화 상자에서 불필요한 구성 요소를 제거하려면 제거를 클릭합니다.

 

3. 찾아보기 탭을 선택하고 해당 구성 요소에 해당하는 파일을 탐색합니다.

 

 

참고:

예를 들어, 소스 브라우저 파일 (.bsc)을 선택할 수 있습니다.

 

 

4. 선택한 구성 요소 파일을 선택한 프로젝트 및 구성 요소 목록에 추가하려면 추가를 클릭합니다.

 

5. 원하는 외부 구성 요소를 모두 선택할 때까지 3단계와 4단계를 반복합니다.

 

6. 확인을 클릭하여 개체 브라우저로 돌아오고 사용자 지정 구성 요소 집합 목록에 변경 내용을 적용합니다.

 

사용자 지정 구성 요소 집합 검색 범위에 대한 설정은 Visual Studio의 세션 간에 동일하게 유지됩니다. 선택한 구성 요소 목록은 Visual Studio 사용자 응용 프로그램 디렉터리에 저장됩니다.

 

c:\Documents and Settings\<USERNAME>\Application Data\Microsoft\VisualStudio\8.0\ObjBrowEX.dat

 

이 파일을 삭제하면 사용자 지정 구성 요소 집합 목록이 지워집니다.

 

참고 사항:

 

개체 브라우저 아이콘

사용자 삽입 이미지

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by -세티-
윈도우 XP쓰다가 비스타 사용하시는 분들의 이야기를 들어보면 너무 많은 리소스 사용으로 인해 느리다는 이야기를 종종 듣습니다.

데스크탑의 성능이 충분한 분들에게는 비스타 운영체재의 무거움이 큰 문제가 되지 않을 것이고, 그렇지 않은 분들이나 혹은 가벼운 운영체재를 원하시는 분들에게는 그 무거움이 조금은 불편함으로 다가오기도 하고 그럴 것입니다.

아래에 비스타의 성능을 향상시키는 방법을 소개합니다.
영어로 되어 있긴 하지만 크게 어렵지 않게 이해하실 수 있을 것 입니다.

http://windowshelp.microsoft.com/Windows/en-US/help/95f70af6-edd6-4f2f-9f02-7d6bdf0190611033.mspx
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by -세티-