Ellie's Professional Software Insight

사전 지식 없이 Silverlight로 간단한 어플리케이션 만들기부터 시작하는 내용

http://silverlight.sys-con.com/read/463961.htm

1. Silverlight.js
해당 페이지에서 silverlight 컴포넌트를 만드는 데 필요한 모든 것들을 포함함.
(Silverlight SDK를 설치하면, Resources 디렉토리에 Silverlight.js가 있음)

Silverlight는 XAML을 렌더링하는 브라우저 플러그인이고 java script 프로그래밍 인터페이스를 공개.
브라우저 플러그인은 <object>, <embed> 등으로 구현되는데, 브라우저에 따라 세부 방식은 다름. Silverlight.js를 사용하면 이 과정을 편하게 할 수 있음


2. XAML (XML Application Markup Language)
Silverlight UI는 XAML로 정의
TextBlock 컨트롤이 있는 XAML Canvas를 만들어보자.

> XAML 소스 보기

root Canvas는 모든 silverlight XAML에 있고, 전체 화면 영역을 표시함.
TextBlock 엘리먼트는 앞서 말한 "Hello World"를 표시할 TextBlock 컨트롤을 나타냄.

3. CreateSilverlight.js
위의 XAML 소스를 Page.xaml로 저장.
소스 관리를 위해 Silverlight 컴포넌트를 만드는 코드를 별도의 자바스크립트 파일로 분리해서 작성해보자.

> CreateSilverlight.js 소스 보기

createObjectEx 함수는 Silverlight.js에 정의되어 있음
handleLoad 이벤트가 정의됨

4. Application Logic
텍스트 블록을 누르면 "Hello World"가 "You Clicked Me"로 바뀌는 간단한 어플리케이션을 만들어보자.

> 어플리케이션 소스 보기

Silverlight가 컨트롤을 렌더링 할 때 handleLoad 이벤트를 호출하고 컨트롤에 대한 참조, userConetxt 변수(createSilverlight에서 설정가능)와 root canvas 엘리먼트에 대한 참조를 던져줌.

텍스트 블록(txt)을 찾고 이벤트 리스너("MouseLeftButtonDown"이벤트를 기다림)를 추가함. 이 이벤트 발생시 txtClicked 함수가 실행됨.

이벤트 핸들러를 구현할 때는, 그 함수에 sender와 args(이벤트에 관련된 argument들) 파라미터를 받아들여야 함.

5. HTML Page
앞의 java script 파일을 참조하고 silverlight 컨트롤을 포함하는 html 페이지 생성.

> Html 소스 보기

이 파일을 웹 서버에 올린 후 실행시켜 보자.