본문 바로가기
Development/Silverlight

방법: HTML을 사용하여 웹 페이지에 Silverlight 추가

가온 다온 아비 2010. 7. 9. 15:35
반응형

Silverlight

방법: HTML을 사용하여 웹 페이지에 Silverlight 추가

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

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

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

각 절차의 조각을 사용하는 대신 최종 예제를 프로젝트의 템플릿으로 사용해야 합니다. 최종 예제는 브라우저 간 호환성을 확인하며 Visual Studio 및 Expression Blend가 테스트 페이지를 동적으로 생성하는 데 사용하는 템플릿을 기반으로 합니다. 그러나 이 예제에서는 기본 설치 및 업그레이드 환경만 제공합니다. 이 환경을 향상시키는 방법에 대한 자세한 내용은 Microsoft Silverlight Installation Experience White Paper and Sample Code를 참조하십시오.

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

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


프로시저

 

 

플러그 인을 포함하려면

참고:

일반적으로 설치 경험을 제공하고 브라우저 간 호환성을 확인하기 위해 추가 HTML을 지정합니다. 전체 HTML 예제를 보려면 이 항목의 끝부분을 참조하십시오.

복사

<object width="300" height="300"
data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" >
<param name="source" value="SilverlightApplication1.xap"/>
</object>

width 및 height 특성은 브라우저 간 호환성에 필요합니다. 고정된 픽셀 값을 지정하거나 부모 요소의 너비와 높이에 상대적인 백분율을 지정할 수 있습니다. 상대 크기 조정을 사용할 때 Content.Resized 이벤트를 처리하여 플러그 인 크기 변경에 응답할 수 있습니다. 자세한 내용은 Silverlight 플러그 인 크기 조정을 참조하십시오.

type 특성 및 표시된 특정 값도 필요합니다. 이 값은 Silverlight MIME 형식을 사용하여 플러그 인 및 필요한 버전을 식별합니다. 지정된 MIME 형식은 Silverlight 2 및 모든 이후 버전에서 사용됩니다. 자세한 내용은 Silverlight 플러그인 버전 관리를 참조하십시오.

일부 브라우저의 성능 문제를 방지하는 데 data 특성 및 해당 값이 권장됩니다. 데이터 값에서 뒤에 오는 쉼표를 확인합니다. 이 쉼표는 빈 값을 포함하는 두 번째 데이터 매개 변수를 나타냅니다.

이름이 source인 param 요소는 반드시 필요하며 응용 프로그램 파일의 위치 및 이름을 나타냅니다. 일반적으로 HTML 파일을 기준으로 하는 위치에 .xap 응용 프로그램 패키지를 지정할 수 있습니다. 자세한 내용은 Source(Silverlight 플러그 인 개체)를 참조하십시오. 응용 프로그램 개발에 대한 자세한 내용은 응용 프로그램 모델을 참조하십시오.

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


예제

 

 

설명

다음 코드 예제에서는 전체 브라우저 창을 사용하는 Silverlight 응용 프로그램에 전체 HTML 페이지를 제공합니다. 이 예제는 테스트 페이지를 동적으로 생성하도록 선택하는 경우 Visual Studio에서 사용되는 기본 HTML을 기반으로 합니다.

이 예제는 CSS 스타일시트 및 div 요소를 사용하여 플러그 인을 포함합니다. 이렇게 하면 플러그 인이 브라우저 창의 가장자리로 확장합니다. 이 요소 및 기타 HTML 도움말 요소에서는 브라우저 간 호환성을 제공합니다.

참고:

브라우저 차이 때문에 Silverlight 플러그 인은 object 요소 또는 부모 컨테이너 요소(예: div 요소)에 대한 CSS 스타일시트 overflow 속성을 지원하지 않습니다.

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

이 예제에서는 JavaScript 함수를 사용하여 플러그 인의 OnError 이벤트를 처리합니다. JavaScript 오류 처리기는 디버깅하는 동안에는 유용하지만 응용 프로그램을 배포할 때에는 일반적으로 제거합니다.

또한 이 예제에는 지정된 Silverlight 버전이 설치되어 있지 않은 경우 업그레이드 환경을 제공하기 위해 minRuntimeVersion 및 autoUpgrade 설정이 포함되어 있습니다. 앞에서 언급한 것처럼 type 및 data 설정에서 "2"는 Silverlight 버전을 나타내지 않습니다. 자세한 내용은 Silverlight 플러그인 버전 관리를 참조하십시오.

웹 브라우저 창에서 이 예제를 보려면 source 매개 변수에서 올바른 Silverlight 응용 프로그램 패키지를 지정해야 합니다. 자세한 내용은 방법: 새 Silverlight 프로젝트 만들기를 참조하십시오.

코드

복사

<!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" >
<!-- saved from url=(0014)about:internet -->
<head>
<title>SilverlightApplication1</title>

<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>

<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}

var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;

if (errorType == "ImageError" ||
errorType == "MediaError") {
return;
}

var errMsg = "Unhandled Error in Silverlight Application "
+ appSource + "\n";

errMsg += "Code: " + iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";

if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition +
" \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}

throw new Error(errMsg);
}
</script>
</head>

<body>
<div id="silverlightControlHost">
<object width="100%" height="100%"
type="application/x-silverlight-2"
data="data:application/x-silverlight-2," >
<param name="source" value="SilverlightApplication1.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50303.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50303.0"
style="text-decoration: none;">
<img
src="http://go.microsoft.com/fwlink/?LinkId=161376"
alt="Get Microsoft Silverlight"
style="border-style: none"/>
</a>
</object>
<iframe id="_sl_historyFrame"
style='visibility:hidden;height:0px;width:0px;border:0px'>
</iframe>
</div>
</body>
</html>

<http://msdn.microsoft.com/ko-kr/library/cc189089(VS.95).aspx>에서 삽입

반응형

티스토리툴바