Мы запустили ТГ-канал по урокам C#

Стартовая HTML-страница

121

Silverlight 5 --- Стартовая HTML-страница

И наконец, последний "ингредиент" развертывания — тестовая HTML-страница. Она является точкой входа в содержимое Silverlight, поэтому ее часто называют входной страницей. Посетитель запрашивает эту страницу с помощью браузера. В изолированном решении Silverlight программа Visual Studio присваивает файлу тестовой страницы имя TestPage.html. В проекте, хостируемом страницей ASP.NET, тестовая страница получает имя на основе имени проекта. Чаще всего ее переименовывают, присваивая более информативное имя.

Тестовая HTML-страница не содержит разметки или кода Silverlight. Вместе этого в ней с помощью кода JavaScript определяется область содержимого для надстройки Silverlight. По этой причине в браузере должна быть включена поддержка JavaScript, иначе он не сможет вывести содержимое Silverlight на экран. Ниже приведена сокращенная версия тестовой HTML-страницы, в которой, однако, сохранены все существенные компоненты: 

<!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>Тестовая страница Silverlight</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">
        ...
    </script>
</head>
<body>
    <form id="form1" runat="server" style="height:100%">
        <!-- Здесь выводится содержимое Silverlight -->
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
		  <param name="source" value="SilverlightTest.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="5.0.61118.0" />
		  <param name="autoUpgrade" value="true" />
		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.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>
    </form>
</body>
</html>

Ключевой компонент разметки — элемент <div> с id="silverlightControlHost". Он представляет область содержимого Silverlight и содержит элемент <object>, который загружает надстройку Silverlight. Элемент <object> содержит четыре ключевых атрибута: data (идентификация объекта как области содержимого Silverlight), type (задание требуемой версии Silverlight — вторая или выше), height (высота области содержимого Silverlight) и width (ширина области содержимого).

Будьте осторожны при модификации, казалось бы, тривиальных компонентов тестовой страницы HTML. Некоторые из них необходимы для обеспечения совместимости с браузерами определенных типов. Например, запятая в конце атрибута data элемента <object> обеспечивает совместимость с браузерами Firefox. Невидимый элемент <iframe> в конце элемента <div> позволяет выполнять навигацию в браузерах Safari. Фактически вы можете модифицировать только значения ширины и высоты, список параметров и альтернативное содержимое.

При использовании сайта ASP.NET тестовая страница генерируется только один раз при создании сайта. В результате HTML-страницу можно изменять, не беспокоясь о том, что изменения будут переопределены.

При использовании изолированного проекта без сайта ASP.NET программа Visual Studio генерирует тестовую страницу при каждом запуске проекта. В результате этого любые изменения тестовой страницы отбрасываются. Если нужно настраивать тестовую страницу, легче всего создать ее для проекта вручную. Для этого выполните следующие действия:

  1. Выполните проект как минимум один раз, чтобы программа Visual Studio сгенерировала тестовую страницу.

  2. Щелкните на пиктограмме Show All Files (Показать все файлы), расположенной в верхней части окна Solution Explorer.

  3. В окне Solution Explorer разверните папку Bin\Debug.

  4. Найдите файл TestPage.html, щелкните на нем правой кнопкой мыши и выберите команду Сору (Копировать). Щелкните правой кнопкой мыши на папке Bin\Debug и выберите команду Paste (Вставить). Копия будет служить пользовательской тестовой страницей. Щелкните правой кнопкой мыши на новом файле и выберите команду Rename (Переименовать). Введите произвольное имя.

  5. Чтобы сделать пользовательскую тестовую страницу частью проекта, щелкните на файле правой кнопкой мыши и выберите команду Include in Project (Включить в проект).

  6. Чтобы направить Visual Studio на пользовательскую тестовую страницу при выполнении проекта, щелкните на файле тестовой страницы правой кнопкой мыши и выберите команду Set As Start Page (Назначить стартовой страницей).

Задание размеров области содержимого Silverlight

По умолчанию области содержимого Silverlight присваивается ширина и высота 100%, в результате чего содержимое занимает все доступное пространство в окне браузера. Размер области содержимого можно зафиксировать, жестко закодировав значения ширины и высоты в пикселях (обычно так не делают, поскольку такое ограничение слишком сильное). Можно также расположить элемент <div> содержащий область, в ограниченном месте страницы, например в ячейке таблицы, в другом элементе с фиксированными размерами или между другими элементами <div> в многоколоночной структуре.

Страница XAML может содержать жестко закодированные размеры, даже когда установленные по умолчанию размеры тестовой страницы ограничивают область содержимого Silverlight доступным пространством в окне браузера. Программа Visual Studio по умолчанию присваивает каждой новой странице Silverlight ширину 400 px и высоту 300 px путем установки атрибутов Height и Width корневого элемента UserControl. Если окно браузера больше, чем жестко закодированные размеры страницы, дополнительное пространство не используется. Если же оно меньше, часть страницы может оказаться за пределами видимой области окна.

Жесткое кодирование размеров полезно при создании сложных графических структур с абсолютным позиционированием и минимальной гибкостью. В противном случае атрибуты width и Height лучше удалить из открывающего дескриптора <UserControl>. Тогда размеры страницы совпадут с размерами области содержимого Silverlight, а размеры области содержимого будут определяться окном браузера. В результате содержимое Silverlight всегда будет вписываться в текущее доступное пространство.

Чтобы увидеть фактические размеры области содержимого Silverlight, добавьте в нее рамку с помощью простого правила в дескрипторе <div>, например:

<div id="silverlightControlHost" style="border:1px solid orange;">

Конфигурирование области содержимого Silverlight

Элемент <object> содержит ряд элементов <param>, которые передают дополнительные параметры надстройке Silverlight. В следующей таблице перечислены наиболее важные параметры. Можете экспериментировать с ними, работая с примерами, посвященными таким средствам HTML, как заставки, прозрачность, анимация и т.п.

Параметры, передаваемые надстройке Silverlight
Имя параметра Описание
source Адрес URI, указывающий на файл ХАР приложения Silverlight. Обязательный параметр
onError Обработчик события JavaScript, запускаемый при возникновении необработанной ошибки в надстройке Silverlight или в коде приложения. Кроме того, обработчик onError вызывается, если надстройка Silverlight установлена, но не соответствует параметру minRuntimeVersion
background Цвет фона области содержимого Silverlight. Выводится после любого содержимого, отображаемого объектом Silverlight, но перед любым содержимым HTML, занимающим то же пространство. Если установить свойство Background страницы, оно переопределит цвет фона, заданный в параметре background элемента <object>
minRuntimeVersion Минимальная версия Silverlight, которая должна быть установлена для успешного выполнения приложения. Если необходимы средства Silverlight 3, установите значение 3.0.40624.0 (немного меньшее значение может указывать на бета-версию). Для Silverlight 2 достаточно версии 2.0.31005.0
autoUpgrade Булево значение, определяющее, должна ли надстройка Silverlight попытаться обновить себя (если она установлена, но имеет недостаточно большой номер версии). По умолчанию параметр имеет значение true. Установите значение false, если хотите решать проблемы с версиями самостоятельно с помощью события onError
enableHtmlAccess Булево значение, которое определяет, имеет ли надстройка Silverlight доступ к объектной модели HTML. Значение true позволяет манипулировать расположенными на тестовой странице элементами HTML с помощью кода Silverlight
initParams Строка, которую можно применить для передачи пользовательской инициализирующей информации. Полезна при использовании одного и того же приложения Silverlight разными способами на разных страницах
splashScreenSource Адрес окна заставки XAML, выводимого во время загрузки файла ХАР
windowless Булево значение, определяющее режим вывода объекта Silverlight: в своем окне (по умолчанию) или без окна. При значении true содержимое HTML видно сквозь содержимое Silverlight. Обычно значение true используется для создания фигурных элементов управления Silverlight, интегрированных в содержимое HTML
onSourceDownloadProgressChanged Обработчик события JavaScript, запускаемый при окончании загрузки части файла ХАР. Можно использовать для создания индикатора загрузки
onSourceDownloadComplete Обработчик события JavaScript, запускаемый по окончании загрузки всего файла ХАР
onLoad Обработчик события JavaScript, запускаемый по завершении загрузки первой страницы Silverlight
onResize Обработчик события JavaScript, запускаемый при изменении размеров области содержимого Silverlight

Альтернативное содержимое

Элемент <div> может содержать разметку HTML, которая будет выведена на экран, если дескриптор <object> не будет распознан браузером или надстройка Silverlight недоступна. На стандартной тестовой странице эта разметка состоит из рисунка с надписью "Загрузите надстройку Silverlight", охваченного ссылкой, в результате чего при щелчке на рисунке загружается страница Silverlight: 

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" 
          alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>

Облегчение установки для пользователей

Надстройка Silverlight установлена не у всех пользователей. Кроме того, у некоторых пользователей установлена недостаточно новая версия надстройки. Тестовая страница Silverlight должна обнаружить проблему и сообщить о ней пользователю. Однако этого недостаточно для того, чтобы пользователь предпринял правильные действия.

Предположим, пользователь загружает сайт в первый раз и получает графическое приглашение установить надстройку Silverlight. Он может не захотеть устанавливать незнакомую программу, потому что не знает, что она делает, и не знаком с терминологией, применяемой при установке. И даже если он щелкнет на кнопке установки, ему придется выполнять незнакомые операции: он получит приглашение загрузить пакет установки Silverlight и выполнить файл. В любой момент он может передумать и перейти к другой странице.

Исследования показывают, что пользователи намного охотнее выполняют процедуру установки, если она выглядит как часть приложения, а не как специальная технология инсталляции.

Чтобы облегчить установку надстройки, создайте альтернативное содержимое. Если на компьютере пользователя не установлено ни одной версии Silverlight браузер выводит кнопку Get Silverlight (Установить Silverlight). Эта кнопка хорошо знакома всем разработчикам, но незнакома многим пользователям. Чтобы приглашение выглядело более уместным, добавьте графические компоненты с именем и логотипом приложения. Полезно добавить также текст, сообщающий о том, что надстройка необходима для увеличения возможностей страницы. Обязательно добавьте кнопку загрузки надстройки.

Необходимо также учесть проблемы с версиями. Если версии установленной надстройки недостаточно, альтернативное содержимое не выводится. Вместо этого надстройка генерирует событие onError с кодом args.ErrorCode=8001 (необходимо обновление) или 8002 (необходим перезапуск) и выводит диалоговое окно, приглашающее пользователя получить обновленную версию. Естественно, вам лучше решить эти проблемы самому, чтобы не докучать пользователю.

В первую очередь отключите автоматическое обновление: 

<param name="autoUpgrade" value="false" />

Проверьте код ошибки в функции onSilverlightError на тестовой странице. Если обнаружена проблема с версиями, примените код JavaScript для изменения содержимого элемента <div>, содержащего надстройку Silverlight. Добавьте более понятное содержимое, рекламирующее ваше приложение. Добавьте также гиперссылку на правильную версию Silverlight: 

function onSilverlightError(sender, args) {
    if (args.ErrorCode == 8001) {
         // Поиск области содержимого Silverlight
         var hostContainer =
            document.getElementById("silverlightControlHost");

         // Изменение содержимого. Здесь разместите любой код HTML
         hostContainer.innerHTML = "";
     }
     
     // Обработка других ошибок
}

Чтобы протестировать код, присвойте параметру minRuntimeVersion неправдоподобно большое значение.

Маркер сайта

Стандартная тестовая HTML-страница содержит маркер сайта — приведенный ниже комментарий, расположенный во второй строке: 

<!-- saved from url=(0014)about:internet -->

Этот комментарий — нечто большее, чем просто автоматически сгенерированная строка, игнорируемая браузерами. Он содержит информацию, необходимую для отладки приложения, и вынуждает браузер выполнить страницу в более ограниченной зоне безопасности, чем обычно.

В общем случае маркер сайта идентифицирует веб-сайт, с которого была загружена локально сохраненная страница. Однако в данном случае программа Visual Studio не знает, где будет развернуто приложение Silverlight. Поэтому она вместо URL включает в маркер строку about:internet, которая сигнализирует о том что страница загружена с произвольного сайта открытой сети. Число 14 обозначает количество символов, используемых в URL. Более подробное описание маркера сайта и стандартных способов его использования можно найти в статье Mark of the Web.

Пройди тесты
Лучший чат для C# программистов