2008/05/19 01:15
[세티의 실버라이트] 1. 실버라이트 시작하기 Silverlight2008/05/19 01:15
원글출처: http://silverlight.net/quickstarts/silverlight10/FileSetup.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
앞에서 우리는 실버라이트의 각 버전별 특징과 실버라이트 결과물을 제작하는데 있어서 어떤 도구를 알맞게 이용하는지 살펴봤습니다. 설명된 내용을 모두 잘 이해했다면 우리는 이제 실버라이트를 이용한 원하는 결과물을 만들어 볼 수 있을 것이빈다. 가장 많은 이용자를 확보하고 있으며, 가장 보편적인 플랫폼인 웹에서 이용할 수 있는 무언가를 만들어 보는 것이 가장 나을 듯 합니다.
웹 기반 실버라이트를 제작하기 위해서 우리는 실버라이트 1.0을 이용하도록 하겠습니다. 웹 페이지에 실버라이트를 추가하기 위해서 일반적으로 실버라이트 프로젝트는 다음 4개의 파일을 가집니다.
- 실버라이트 플러그 인
- silverlight.js
- XAML 파일
- HTML 파일을 지원하기 위한 JavaScript 파일
시작하기 전에 먼저 실버라이트 플러그 인과 HTML 파일을 준비해야 합니다. 실버라이트 플러그 인은 다음의 링크에서 다운로드 받으면 됩니다.
실버라이트 플러그인 다운로드 : http://www.microsoft.com/downloads/details.aspx?FamilyId=E0BAE58E-9C0B-4090-A1DB-F134D9F095FD&displaylang=en
플러그 인을 다운로드 받았고, 설치를 완료했다면 이제 HTML 파일 하나를 생성합니다.
이제 이렇게 만들어진 HTML 페이지에 참조를 하기 위한 스크립트를 추가할 것인데 그 스크립트 파일은 다음과 같습니다.
참조할 스크립트 : Silverlight.js, crObj.js
먼저 HTLM 페이지에 실버라이트 플러그 인이 호스트될 엘리먼트를 만들고, Silverlight.js와 crObj.js 에 대한 참조를 추가하게 됩니다. 여기서 Silverlight.js 파일은 멀티 플랫폼에서 실버라이트 실행을 가능하게 해주는 역할을 합니다.
Silverlight.js 파일을 얻을려면 다음의 주소에서 다운로드 받으면 됩니다.
실버라이트 1.0 SDK : http://www.microsoft.com/downloads/details.aspx?familyid=FB7900DB-4380-4B0F-BB95-0BAEC714EE17&displaylang=en
다운로드가 완료되면 설치합니다.(원하는 폴더에 설치하시면 됩니다.)
저는 D:\Program Files 에 파일을 설치 했고, 그 하위에 설치된 실버라이트 1.0 SDK 폴더에서 Silverlight.js 파일을 가져오도록 하겠습니다.
적당한 폴더를 만들고 HTML 파일과 Silverlight.js 파일을 위치 시킵니다.
자아~ 이제 기본적인 준비가 모두 완료 되었습니다. ^^
이제 준비된 HTML 파일을 열고, <head> 영역에 다음의 마크업을 추가 합니다.
마크업을 추가 했으면 이제 crObj.js라는 빈 파일을 하나 만들어 놓고 마크업을 마찬가지로 <head> 영역에 추가 합니다.
이제 HTML 파일에 대한 작업은 모두 완료 되었습니다. 그럼 이전에 만들어 두었던 crObjS.js 파일을 열어서 실버라이트 생성을 위한 작업을 할려고 합니다. 아래의 그림과 같이 코딩을 완료 합니다.
이 스크립트는 몇몇의 파라미터를 포함하고 있는데 플러그 인의 높이나 넓이 실버라이트 콘텐트를 포함하는 XAML파일의 이름, 그리고 windowless와 같은 특정한 값을 설정할 수 있습니다.
windowless란?
- 제가 이해하기로는 실버라이트 플러그인이 위치할 영역과 함께 렌더링 되느냐 안되느냐의 차이가 같습니다. 즉 isWindowless를 false로 설정하면 실버라이트 플러그 인이 위치할 영역을 먼저 렌더링 하고 그 다음에 실버라이트 플러그 인을 렌더링하여 위치시키는 것이고, true로 설정하면 실버라이트가 위치할 영역 즉 <div> 가 렌더링 되면서 실버라이트 까지 같이 렌더링 되는 것을 말하는 것 같습니다. 그것에 대한 구분은 opacity값을 계산해서 구분되는 것으로 보입니다. 이것에 대한 부연 설명은 아래의 경로에서 읽어보시면 됩니다.
isWindowless 속성에 대한 이해 : http://msdn.microsoft.com/en-us/library/bb412380.aspx
자아~ 이제 실버라이트를 위한 HTML 파일과 js 파일이 준비되었으므로 실버라이트 콘텐트를 생성할 차례 입니다.
먼저 앞에서 생성했던 HTML 파일과 같은 디렉토리 상에 SimpleXAML.xaml 파일을 생성합니다. 그리고 이 Silverlight에 대한 이벤트 핸들링과 같은 행위를 하고 싶다면 그것에 대한 스크립트 파일을 별도로 만들어서 <head> 영역에 스크립트 마크업을 추가합니다. 저는 이 파일의 이름을 SimpleEventHandle.js 라고 하겠습니다.
여러 개의 실버라이트 플러그인을 생성하고 싶다면 앞에 설명된 것을 참고하여, 실버라이트 JS를 만들고, div 마크업을 이용하여 호스팅될 영역을 생성하고, 다시 그것을 호스팅할 js 파일을 생성하고, 다시 HTML 페이지의 <head> 영역에 js 참조 마크업을 추가하면 됩니다.
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
앞에서 우리는 실버라이트의 각 버전별 특징과 실버라이트 결과물을 제작하는데 있어서 어떤 도구를 알맞게 이용하는지 살펴봤습니다. 설명된 내용을 모두 잘 이해했다면 우리는 이제 실버라이트를 이용한 원하는 결과물을 만들어 볼 수 있을 것이빈다. 가장 많은 이용자를 확보하고 있으며, 가장 보편적인 플랫폼인 웹에서 이용할 수 있는 무언가를 만들어 보는 것이 가장 나을 듯 합니다.
웹 기반 실버라이트를 제작하기 위해서 우리는 실버라이트 1.0을 이용하도록 하겠습니다. 웹 페이지에 실버라이트를 추가하기 위해서 일반적으로 실버라이트 프로젝트는 다음 4개의 파일을 가집니다.
- 실버라이트 플러그 인
- silverlight.js
- XAML 파일
- HTML 파일을 지원하기 위한 JavaScript 파일
시작하기 전에 먼저 실버라이트 플러그 인과 HTML 파일을 준비해야 합니다. 실버라이트 플러그 인은 다음의 링크에서 다운로드 받으면 됩니다.
실버라이트 플러그인 다운로드 : http://www.microsoft.com/downloads/details.aspx?FamilyId=E0BAE58E-9C0B-4090-A1DB-F134D9F095FD&displaylang=en
플러그 인을 다운로드 받았고, 설치를 완료했다면 이제 HTML 파일 하나를 생성합니다.
이제 이렇게 만들어진 HTML 페이지에 참조를 하기 위한 스크립트를 추가할 것인데 그 스크립트 파일은 다음과 같습니다.
참조할 스크립트 : Silverlight.js, crObj.js
먼저 HTLM 페이지에 실버라이트 플러그 인이 호스트될 엘리먼트를 만들고, Silverlight.js와 crObj.js 에 대한 참조를 추가하게 됩니다. 여기서 Silverlight.js 파일은 멀티 플랫폼에서 실버라이트 실행을 가능하게 해주는 역할을 합니다.
Silverlight.js 파일을 얻을려면 다음의 주소에서 다운로드 받으면 됩니다.
실버라이트 1.0 SDK : http://www.microsoft.com/downloads/details.aspx?familyid=FB7900DB-4380-4B0F-BB95-0BAEC714EE17&displaylang=en
다운로드가 완료되면 설치합니다.(원하는 폴더에 설치하시면 됩니다.)
저는 D:\Program Files 에 파일을 설치 했고, 그 하위에 설치된 실버라이트 1.0 SDK 폴더에서 Silverlight.js 파일을 가져오도록 하겠습니다.
(설치된 Silverlight 1.0 SDK 경로 및 Silverlight.js 파일)
적당한 폴더를 만들고 HTML 파일과 Silverlight.js 파일을 위치 시킵니다.
(작업할 폴더로 옮겨진 Silverlight.js 파일)
자아~ 이제 기본적인 준비가 모두 완료 되었습니다. ^^
이제 준비된 HTML 파일을 열고, <head> 영역에 다음의 마크업을 추가 합니다.
마크업을 추가 했으면 이제 crObj.js라는 빈 파일을 하나 만들어 놓고 마크업을 마찬가지로 <head> 영역에 추가 합니다.
(빈 문서로 생성한 crObjS.js )
(<head> 영역에 추가된 Silverlight.js와 crObjS.js에 대한 마크업)
이제 준비된 HTML 페이지에 실버라이트가 표시될 수 있는 영역을 잡아줄 것입니다. <div> 태그를 이용하여 그 영역을 표시할 것이며, id는 firstSilverlight로 하겠습니다.
만약에 실버라이트가 하나가 아닌 그 이상의 실버라이트를 화면에 표시하고자 한다면 영역을 또 잡아주고 다른 ID를 부여하면 됩니다.
이제 실버라이트를 div 블럭에 출력해 주기 위해 필요한 자바스크립트 코드를 HTML 파일에 추가합니다.
만약에 실버라이트가 하나가 아닌 그 이상의 실버라이트를 화면에 표시하고자 한다면 영역을 또 잡아주고 다른 ID를 부여하면 됩니다.
이제 실버라이트를 div 블럭에 출력해 주기 위해 필요한 자바스크립트 코드를 HTML 파일에 추가합니다.
이제 HTML 파일에 대한 작업은 모두 완료 되었습니다. 그럼 이전에 만들어 두었던 crObjS.js 파일을 열어서 실버라이트 생성을 위한 작업을 할려고 합니다. 아래의 그림과 같이 코딩을 완료 합니다.
windowless란?
- 제가 이해하기로는 실버라이트 플러그인이 위치할 영역과 함께 렌더링 되느냐 안되느냐의 차이가 같습니다. 즉 isWindowless를 false로 설정하면 실버라이트 플러그 인이 위치할 영역을 먼저 렌더링 하고 그 다음에 실버라이트 플러그 인을 렌더링하여 위치시키는 것이고, true로 설정하면 실버라이트가 위치할 영역 즉 <div> 가 렌더링 되면서 실버라이트 까지 같이 렌더링 되는 것을 말하는 것 같습니다. 그것에 대한 구분은 opacity값을 계산해서 구분되는 것으로 보입니다. 이것에 대한 부연 설명은 아래의 경로에서 읽어보시면 됩니다.
isWindowless 속성에 대한 이해 : http://msdn.microsoft.com/en-us/library/bb412380.aspx
자아~ 이제 실버라이트를 위한 HTML 파일과 js 파일이 준비되었으므로 실버라이트 콘텐트를 생성할 차례 입니다.
먼저 앞에서 생성했던 HTML 파일과 같은 디렉토리 상에 SimpleXAML.xaml 파일을 생성합니다. 그리고 이 Silverlight에 대한 이벤트 핸들링과 같은 행위를 하고 싶다면 그것에 대한 스크립트 파일을 별도로 만들어서 <head> 영역에 스크립트 마크업을 추가합니다. 저는 이 파일의 이름을 SimpleEventHandle.js 라고 하겠습니다.
여러 개의 실버라이트 플러그인을 생성하고 싶다면 앞에 설명된 것을 참고하여, 실버라이트 JS를 만들고, div 마크업을 이용하여 호스팅될 영역을 생성하고, 다시 그것을 호스팅할 js 파일을 생성하고, 다시 HTML 페이지의 <head> 영역에 js 참조 마크업을 추가하면 됩니다.
'Silverlight' 카테고리의 다른 글
| [세티의 실버라이트] 3. Canvas 객체에 대해서. (0) | 2008/05/25 |
|---|---|
| [세티의 실버라이트] 2. Silverlight XAML 파일 생성하기 (0) | 2008/05/20 |
| [세티의 실버라이트] 1. 실버라이트 시작하기 (0) | 2008/05/19 |
| Silverlight - Microsoft Expression Studio 2 특징 (0) | 2008/05/12 |
| 개발자를 위한 실버라이트에대한 소개 (0) | 2008/04/19 |
| 디자이너를 위한 실버라이트 관련 지식 (0) | 2008/04/19 |
