세티의 Lonely Star :: [엘리의 실버라이트 2.0] 스플래시 스크린 만들기

'2008/08/25'에 해당되는 글 1건

2008/08/25 [엘리의 실버라이트 2.0] 스플래시 스크린 만들기

2008/08/25 11:30

[엘리의 실버라이트 2.0] 스플래시 스크린 만들기 Silverlight2008/08/25 11:30

원글출처 : 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"

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

4. EloiSplashScreenTestPage.html 파일에서 아래 코드를 찾습니다.

파일을 저장하고 현재 파일은 계속 열어둡니다.

5. 솔루션 탐색기에서 EloiSplashScreen.xap 파일을 드래그하여 EloiSplashScreenWeb의 루트로 이동시킵니다.

6. 계속해서 EloiSplashScreenTestPage.html 파일에서 object 태그 하위에 아래 param 태그를 추가합니다. 이 태그들은 위에서 설명한 3가지 속성들입니다. 위로 이동하셔서 다시 한 번 내용을 확인해보시기 바랍니다.

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 태그에 추가합니다.

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

Trackback (0) : Comment (0)

Posted by -세티-

«이전 1 다음»

달력

« 2008/08 »

'2008/08/25'에 해당되는 글 1건

[엘리의 실버라이트 2.0] 스플래시 스크린 만들기 Silverlight2008/08/25 11:30

'Silverlight' 카테고리의 다른 글

TRACKBACK | http://www.setisigns.net/trackback/201

세티의 Lonely Star

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크