Использование Silverlight на Web-странице

Оценить
(0 голоса)

В предыдущем примере вы создали отдельную хат1-страницу, которую можно выполнить в браузере при помощи дополнительного модуля Silverlight. Этот же самый XAML можно использовать внутри HTML- или aspx-страницы. Данный раздел проведет вас по процессу встраивания нашего предыдущего примера в страницу на Web-сайте ASP.NET. Вот шаги этого процесса:

1.   Создайте приложение Website (в меню File | New Project). Вы можете сделать это в том же самом решении, что и ваше приложение Silverlight. Таким образом, вы сможете их связать. Описание: image465

2.   Затем вам нужно создать связь (похожую на ссылку) с вашим приложением Silverlight. Щелкните правой кнопкой мыши по вашему новому Web-сайту и выберите для этого Add Silverlight Link. При этом запустится диалоговое окно Add Silverlight Link (рис. 17.29).

Связывание двух проектов укажет компилятору на необходимость перенести изменения проекта Silverlight в проект Web-сайта. Проекту Web-сайта требуется реальная копия вашего приложения Silverlight. Если вы их не свяжете, то можете просто скопировать файлы на Web-сайт.

3.   Запуск приложения Silverlight на вашей Web-странице требует наличия на клиентской стороне небольшого скрипта JavaScript. К счастью, приложение Silverlight имеет весь необходимый вам код.

Вернемся к решению Silverlight. Обратите внимание на файл Silverlightjs. Он должен быть скопирован на ваш Web-сайт (об этом должна была позаботиться ссылка). Затем посмотрите на страницу TestPage.html. Она содержит файл выделенного кода с именем TestPage.html.js. Внутри него имеется автоматически сгенерированный JavaScript-код, который загрузит ваш файл Page.xaml при помощи содержимого Silverlight.js. Этот код показан в листинге 17.4. Описание: image466

Скопируйте этот код. Создайте новый файл в вашем Web-сайте с именем Default.aspx.js и вставьте в него этот код.

function createSilverlight()

Silverlight.createObjectEx({

source: "Page.xaml",

parentElement: document.getElementByld("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "100%", height: "100%", version: "1.1", enableHtmlAccess: "true"

bevents: {}

>);

// Перенести по умолчанию фокус клавиатуры //на элемент управления Silverlight document.body.onload = function() {

var SilverlightControl = document.getElementByld('SilverlightControl'); if (SilverlightControl)

SilverlightControl.focus();

4.   Теперь вам нужно связать этот JavaScript-код с вашей Web-страницей (Default.aspx). Кроме того, вам необходимо определить хост для Silverlight XAML. Для этого добавьте следующие теги скрипта и стиля тег в раздел <head> вашей разметки:  г

<script type="text/javascript" src="Silverlight.js"x/script>

<script type="text/javascript" src="Default.aspx.js"x/script>

<style type="text/css">

.silverlightHost { width: 357px; height: 354px; }

</style>

5.   И наконец, вам нужно скомпоновать остальную часть вашей страницы ASP.NET. Воз­можно, это будет заголовок, другие элементы управления и т. д.. Однако где-то на стра­нице вы напишете вызов метода createSilverlight внутри файла Default.aspx.js. Это укажет то место, куда вы хотите встроить Page.xaml. В листинге 17.5 показан пример простой разметки (здесь элемент управления Silverlight встраивается внутрь таблицы).

<%@ Page Language="C#" AutoEventWireup="true"

CodeBehind="Default.aspx.cs"

Inherits="WebApplicationSlideShow._Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Headl" runat="server">

<title>My Silverlight Page</title>

<script type="text/javascript" src="Silverlight.js"x/script> <script type="text/javascript" src="Default.aspx.js"x/script> <style type="text/css">

.silverlightHost { width: 357px; height: 354px; }

</style>

</head>

<body style="font-fainily: Verdana; font-size: 12pt">

<form id="forinl" runat="server">

<table>

<tr>

<td colspan="2">

<div style="font-size: 18pt; color: Blue">

The Slide Show Viewer </div>

</td>

</tr>

<trxtd colspan="2"xhr /x/tdx/tr>

<tr>

<td valign="middle">

<p>This Silverlight application allows you to traverse

a set of images forward and backward.</p>

<p>Use the buttons at the bottom of the image to move Next and Previous through the images.</p>

</td>

<td>

<div id="SilverlightControlHost" class="silverlightHost" > <script type="text/javascript"> createSilverlight();

</script>

</div>

</td>

</tr>

ctrxtd colspan="2"xhr /x/tdx/tr>

<tr>

<td colspan="2">

<div style="font-size: 9pt; text-align: right"> from Visual Studio 2008 Unleashed </div>

</td>

</tr>

</table>

</form>

</body>

</html>

Вот и все. Теперь вы должны запустить Web-сайт и увидеть Silverlight, который встроен в страницу. Это показано на рис. 17.30.

Резюме
Visual Studio имеет свой ответ на то, что называется Web 2.0
Создание активных клиентских приложений в стандартных браузерах
Элементы управления AJAX в ASP.NET
Создание страницы AJAX

Добавить комментарий


Защитный код
Обновить

© 2017 www.visualstudios.ru. Все права защищены.