본문 바로가기

Silverlight

[TIP] 실버라이트2 설치 후 자동으로 리프레시 하기


실버라이트 2는 1.0과는 달리 <object>태그를 사용하여 마치 플래시나 미디어 플레이어를 올리는 것 처럼 쉽게 올릴 수 있게 되어 있고 <object></object> 태그 사이에 원하는 HTML 디자인을 넣어서 실버라이트가 설치되지 않았을 때 화면도 매우 쉽게 구성할 수 있게 되어 있죠.

그런데, 한가지 문제는 이렇게 해서 설치를 마친 후에 자동으로 실버라이트 애플리케이션이 초기화되지 않는다는 점인데요, 이것을 해결하려면 어쩔 수 없이 1.0에서 했던 Silverlight.js와 createSilverlight 함수를 만들어서 사용하는 수 밖에 없어요.

생각해보면 그리 어렵지 않은데 막상 구현하려면 막막한게 사실이죠.
일단 다음 다운 받고 실버라이트 2를 제거한 후 SL2Install_web/SL2InstallTestPage.html 파일을 열어 데모를 실행해볼 수 있어요.

실버라이트 설치 후 자동으로 실행하기 데모


원리는 아주 간단한데요, Silverlight.js에 포함된 Silverlight.isInstalled 함수와 Silverlight.available 및 Silverlight.us.Browser 속성을 사용하여 현재 상태에 따라 처리할 수 있게 했어요. 만약 실버라이트가 설치되어 있으면 정상적으로 생성하면 그만이고, 그렇지 않다면 설치 화면을 보여주고 3초 후에 설치가 완료되었는지를 계속 검사해요. 그러다가 실제로 사용자가 설치 완료하면 다시 한번 실버라이트 생성을 시도하죠.
이러한 역할을 하는 파일이 SL2Install.js인데요, 관심있는 분들은 분석을 해보세요.

단, 이 방법은 IE에서만 작동하는 걸로 알려져 있어요. 아쉽게도 다른 브라우저에서는 자동으로 리프레시 되지 않아서 브라우저를 껐다가 켜야 할 거에요.

사용 방법은 간단해요.
    <div id="silverlightControlHost">
        <div id="silverlightInstall">
            <a href="http://go.microsoft.com/fwlink/?LinkID=108182">
                Microsoft Silverlight 설치하기<br />
                <img src="Silverlight.png" alt="실버라이트 설치" style="border:none 0px #FFFFFF" />
            </a>
        </div>
    </div>
   
    <script type="text/javascript">
        Silverlight.createWithInstall(
            'mySilverlight',
            'ClientBin/SL2Install.xap',
            'silverlightControlHost',
            'silverlightInstall',
            '100%', '100%', null
        );
    </script>

위의 코드에서 굵게 표시된 글자 부분만 체크하면 되는데요,
먼저 silverlightControlHost DIV태그는 실버라이트 애플리케이션이 호스팅될(올라갈) 위치이고,
silverlightInstall DIV는 실버라이트가 설치되지 않았을 때 보여줄 HTML 디자인이에요.
당연히 실버라이트 런타임을 다운받을 수 있는 링크를 연결해줘야 겠죠?
링크는 2.0 beta1의 경우 http://go.microsoft.com/fwlink/?LinkID=108182 이걸 넣어주면 되는데 이 링크는 후에 바뀔 가능성도 염두해야 해요.

마지막으로 위의 두 DIV 태그를 적당한 위치에 배치했으면 HTML의 제일 바닥쯤에 <script>태그를 넣고 Silverlight.createWithInstall(고유ID, XAP위치, HostDIV태그ID, 설치DIV태그ID, 너비, 높이, 유저데이터); 를 호출하면 Host DIV 위치에 실버라이트 애플리케이션이 생성되죠.

피드백 바랍니다. ~ :D

[출처] 유령회사 공도소프트