웹 페이지에 Silverlight 추가

2009. 12. 15. 10:53

object 요소를 사용하면 지원되는 모든 브라우저와 호환되는 방식으로 HTML에 Silverlight 플러그 인을 포함하고 구성할 수 있습니다. 이 항목에서는 object 요소를 사용하여 다음과 같은 일반적인 작업을 수행하는 방법에 대해 설명합니다.

Silverlight 플러그 인을 포함하고 호스팅할 응용 프로그램을 지정합니다.
Silverlight가 설치되지 않은 경우 표시할 대체 HTML을 지정합니다.

이러한 작업은 HTML 페이지의 서로 다른 부분 및 특히 object 요소의 서로 다른 구성 매개 변수에 해당합니다. 다음 절차에서는 여러 작업을 독립적으로 설명하지만 이 항목의 끝부분에서는 전체 브라우저 간 HTML 예제를 빌드합니다.

각 절차의 조각을 사용하는 대신 최종 예제를 프로젝트의 템플릿으로 사용해야 합니다. 최종 예제는 브라우저 간 호환성을 확인하며 Visual Studio 및 Expression Blend가 테스트 페이지를 동적으로 생성하는 데 사용하는 템플릿을 기반으로 합니다.

HTML object 요소를 사용하여 추가 구성 작업을 수행할 수 있습니다. 자세한 내용은 Silverlight 플러그 인 개체 참조 및 HTML 개체 요소의 속성 값을 참조하십시오. 참고 항목 단원에 나열된 항목은 특정 포함 시나리오의 추가 적용 범위를 제공합니다.

object 요소를 사용하는 대신 Silverlight.js 도우미 파일에서 제공하는 JavaScript 포함 함수를 사용합니다. 이러한 함수는 궁극적으로 object 요소를 생성하고 보다 편리하게 JavaScript를 개발하는 데 사용됩니다. 자세한 내용은 방법: JavaScript를 사용하여 웹 페이지에 Silverlight 추가를 참조하십시오.

Silverlight가 설치되지 않은 경우 표시할 대체 HTML을 지정하려면


    <a href="http://go.microsoft.com/fwlink/?LinkID=108182"
        style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181"
            alt="Get Microsoft Silverlight"
            style="border-style: none"/>
    </a>

</object>

방법: JavaScript를 사용하여 웹 페이지에 Silverlight 추가

Silverlight가 설치되지 않은 경우 표시할 대체 HTML을 지정하려면

<div id="silverlightControlHost">
    <script type="text/javascript">
        var getSilverlightMethodCall =
            "javascript:Silverlight.getSilverlight(\"2.0.30800.0\");"
        var installImageUrl =
            "http://go.microsoft.com/fwlink/?LinkId=108181";
        var imageAltText = "Get Microsoft Silverlight";
        var altHtml =
            "<a href='{1}' style='text-decoration: none;'>" +
            "<img src='{2}' alt='{3}' " +
            "style='border-style: none'/></a>";
        altHtml = altHtml.replace('{1}', getSilverlightMethodCall);
        altHtml = altHtml.replace('{2}', installImageUrl);
        altHtml = altHtml.replace('{3}', imageAltText);

      Silverlight.createObject(
            "ClientBin/SilverlightApplication1.xap",
            silverlightControlHost, "slPlugin",
            {
                width: "100%", height: "100%",
                background: "white", alt: altHtml,
                minRuntimeVersion: "2.0.30800.0"
            },
            { onError: onSLError, onLoad: onSLLoad },
            "param1=value1,param2=value2", "row3");
    </script>

예제 설명

다음 코드 예제에서는 Silverlight.js 파일을 사용하는 전체 HTML 페이지를 제공합니다. 여기에는 파란색 배경이 표시되며 표의 셀에 Silverlight 플러그 인 컨트롤이 네 개 포함되어 있습니다. 파란색 배경을 사용하면 기본 응용 프로그램 코드를 수정하지 않고 Visual Studio에서 이 예제를 테스트할 수 있습니다. 기본 사용자 인터페이스는 흰색 배경을 사용하여 호스트 웹 페이지의 파란색 배경과 다르게 표시됩니다.

이 예제에서는 다음과 같이 포함 함수를 사용하는 방법을 설명합니다.

포함 함수의 반환 값을 사용하여 HTML 요소의 innerHTML 속성 설정. 예제의 window.onload 처리기를 참조하십시오.
포함 함수를 다른 함수에 래핑하여 일반적인 구성 캡슐화. 예제의 embedSilverlight 함수를 참조하십시오.
플러그 인을 호스팅하는 HTML 요소 내에서 직접 createObject 또는 createObjectEx 호출. 예제의 sl3Host 및 sl4Host 요소를 참조하십시오.

이 예제에는 여러 플러그 인 인스턴스가 포함되어 있으므로 Silverlight를 사용할 수 없을 때 그 중 하나의 인스턴스만 구성하여 설치 환경을 표시합니다. 기본 설치 환경을 방지하기 위해 첫 번째 인스턴스를 제외하고 모든 플러그 인 인스턴스에는 비어 있지 않은 alt 속성 값이 지정됩니다. 사용되는 alt 값은 아무 것도 표시되지 않도록 HTML 주석을 지정합니다.

이 예제에서 각 Silverlight 플러그 인에는 고유한 id 및 userContext 값이 지정됩니다. OnLoad 이벤트 처리기는 이러한 값을 사용하여 로드 순서를 나타내는 브라우저 상태 표시줄을 업데이트합니다.

이 예제에서는 JavaScript 함수를 사용하여 플러그 인의 OnError 이벤트를 처리하지만 구현은 빈 상태로 둡니다. Visual Studio에서 생성되는 기본 구현은 방법: HTML을 사용하여 웹 페이지에 Silverlight 추가를 참조하십시오. JavaScript 오류 처리기는 디버깅하는 동안에는 유용하지만 응용 프로그램을 배포할 때에는 일반적으로 제거합니다. JavaScript에서 처리할 수 있는 오류에 대한 자세한 내용은 오류 처리를 참조하십시오.

iframe 요소 및 기타 HTML 도움말 요소는 브라우저 간 호환성을 제공합니다. iframe을 지정하면 Safari 브라우저에서 페이지를 캐싱할 수 없습니다. Safari 캐싱을 사용하면 사용자가 이전에 방문한 Silverlight 페이지로 돌아갈 때 Silverlight 플러그 인이 다시 로드되지 않습니다. 자세한 내용은 Safari Developer FAQ를 참조하십시오.

코드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>EmbeddingWithJS</title>

function embedSilverlight(parentElement, pluginId, userContext) {
            var altHtml = pluginId == "sl1" ? null : "";
            return Silverlight.createObject("ClientBin/EmbeddingWithJS.xap",
                parentElement, pluginId,
                {
                    width: "200", height: "50",
                    background: "white", alt: altHtml,
                    minRuntimeVersion:"2.0.30908.0", autoUpgrade:true
                },
                { onError: onSLError, onLoad: onSLLoad },
                "param1=value1,param2=value2", userContext);
        }

        function onSLLoad(plugIn, userContext, sender) {
            window.status +=
                plugIn.id + " loaded into " + userContext + ". ";
        }

        function onSLError(sender, args) {
            // Display error message.
        }
    </script>
</head>

<body>

<table>
        <tr>
            <td id="sl1Host"/>
        </tr>
        <tr>
            <td id="sl2Host">
                <script type="text/javascript">
                    embedSilverlight(sl2Host, "sl2", "row2");
                </script>
            </td>
        </tr>
        <tr>
            <td id="sl3Host">
                <script type="text/javascript">
                    Silverlight.createObject(
                        "ClientBin/EmbeddingWithJS.xap", sl3Host, "sl3",
                        {
                            width: "200", height: "50",
                            background: "white", alt: "",
                            minRuntimeVersion: "2.0.30908.0"
                        },
                        { onError: onSLError, onLoad: onSLLoad },
                        "param1=value1,param2=value2", "row3");
                </script>
            </td>
        </tr>
        <tr>
            <td id="sl4Host">
                <script type="text/javascript">
                    Silverlight.createObjectEx({
                        source: "ClientBin/EmbeddingWithJS.xap",
                        parentElement: sl4Host,
                        id: "sl4",
                        properties: {
                            width: "200",
                            height: "50",
                            background: "white",
                            alt: "",
                            minRuntimeVersion: "2.0.30908.0" },
                        events: {
                            onError: onSLError,
                            onLoad: onSLLoad },
                        initParams: "param1=value1,param2=value2",
                        context: "row4"
                    });
                </script>
            </td>
        </tr>
    </table>
    <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</body>
</html>

'WPF' 카테고리의 다른 글

INotifyPropertyChanged (0)	2010.01.02
Using Value Converters (0)	2010.01.02
DataGrid 템플릿 (0)	2010.01.02
간단한 data grid 사용법 (0)	2010.01.02
쿠키사용법 (0)	2009.12.15
간단하게 세션처럼 사용하기?! (0)	2009.12.15
WCF 웹서비스를 이용한 데이터 바인딩 (0)	2009.12.15
ResizeGrip - Resizing (Mostly Custom) Windows (0)	2009.12.15
SplashScreen 만들기 (0)	2009.12.15
초간단 실버라이트 웹서비스 사용하기 (0)	2009.06.30

kojaedoo blog