Размещение Silverlight в браузере
Ниже приводится HTML код веб-страницы, использующей 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" > <head> <title> SilverlightSample </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" src="Silverlight.js"></script> <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> <form name="form1" method="post" action="SilverlightSampleTestPage.aspx" id="form1" style="height:100%"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGQ/xyUlnh+Njw13GNNCd7VpDXlAuQ==" /> </div>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/SilverlightSample.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="3.0.40624.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text- decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" 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> </form> </body> </html> |
Как видно из кода, на веб-странице используется сценарий Silverlight.js, который обеспечивает загрузку и установку подключаемого модуля для клиентов, не имеющих его, и элемент <object>, исходный код для которого содержится в файле с расширением XAP, созданным в Microsoft Visual Studio или Microsoft Visual Web Developer Express.
В принципе, для использования и создания приложений Silverlight не требуется никакого специального программного обеспечения. Создавать сайты на Silverlight можно, используя любое ПО для разработки веб-сайтов, начиная от Notepad, заканчивая Microsoft Visual Web Developer Express или Expression Blend.
Для этого, прежде всего, необходимо создать HTML-файл. Элемент управления Silverlight будет размещаться на этой странице путем вставки в нее тега <object>, как в приведенном выше примере. Только вместо файла с расширением XAP - указывается XAML файл.
С помощью тега <object> создается экземпляр Silverlight. Это стандартный HTML тег, следовательно, он поддерживает стандартные параметры. Ниже приводится лишь неполный список параметров (тех, которые были использованы в предыдущем примере):
Атрибут Type (Тип) определяет тип загружаемого объекта. В данном случае задано значение application/x-silverlight-2, которое указывает браузеру загружать подключаемый модуль Silverlight для доступа к этому содержимому.
Атрибут Width (Ширина) определяет ширину элемента управления в процентном соотношении или в пикселах.
Атрибут Height (Высота) определяет высоту элемента управления в процентном соотношении или в пикселах.
Атрибут ID определяет имя элемента управления, используемое в коде JavaScript.
Объекты поддерживают разные наборы настраиваемых параметров, поэтому HTML-тег <object> поддерживает список элементов <Param>, позволяющие задавать нестандартные параметры. Эти элементы используются для определения пар имя/значение.