Главная » Silverlight » Заставка

0

Если приложение Silverlight небольшое, оно будет быстро загружено и немедленно появится в окне браузера. Однако если приложение большое, а пропускная способность канала низкая, загрузка приложения занимает определенное время. Если приложение загружается дольше 500 миллисекунд, надстройка Silverlight все это время отображает на экране встроенную анимированную заставку.

Встроенная заставка не очень информативная и вдохновляющая. Это всего лишь кольцо, состоящее из мерцающих кружочков. Внутри кольца приводится процент за­грузки приложения (рис. 6.3).

ошибки (рис. 6.2). В браузере Firefox выводится сообщение об ошибке сценария. В лю­бом случае ошибка не остановит выполнение приложения.

Если вам не нравится стандартная заставка, создайте пользовательскую (рис. 6.4). Пользовательская заставка определяется в файле XAML с графическим содержимым, которое нужно вывести на экран, и в коде JavaScript, обновляющем заставку при за­грузке приложения. Использовать для обновления заставки код С# нельзя, потому что программная среда Silverlight еще не инициализирована. Однако это не является боль­шим препятствием, потому что код заставки сравнительно простой. Он состоит из двух функций, являющихся обработчиками событий и запускающихся, когда приложение загружается (первая функция) и когда загрузка завершается (вторая функция). Язык JavaScript похож на С#, поэтому вы легко справитесь с кодом.

Рис. 6.3. Стандартная встроенная заставка Silverlight

Рис. 6.4. Пользовательская заставка

Файл XAML, определяющий заставку, тоже не может быть частью файла ХАР, а сле­довательно, и приложения Silverlight. Это объясняется тем, что заставка должна быть выведена на экран, когда файл ХАР еще загружается. Поэтому разметка XAML долж­на находиться в отдельном файле, передаваемом вместе с файлом ХАР с того же сайта.

Примечание. Тестирование заставки потребует дополнительных усилий. Сначала вы не увидите ее на экране, потому что локальное приложение передается браузеру слишком быстро. Необходимо замедлить загрузку приложения. Однако сначала убедитесь в том, что используется тестирующий веб-сайт ASP.NET, т.е. приложение Silverlight хостируется встроенным тестирующим веб-сервером программы Visual Studio (см. главу 1). Затем добавьте несколько больших файлов (например, набор файлов МРЗ общим объемом приблизительно 1 Гбайт) в проект Silverlight. Для каждого откройте свойство Build Action и присвойте ему значение Resource, чтобы добавить файл в проект ХАР. Еще один прием состоит во временном удалении в методе Application_Startup () строки кода, устанавливающей корневой элемент приложения. Тогда по завершении загрузки приложения оно ничего не выведет на экран. Вместо окна приложения браузер выведет заставку, в которой будет отображено значение 100%.

Чтобы создать пример, показанный на рис. 6.4, начните с создания нового проекта Silverlight с тестирующим сайтом ASP.NET (см. главу 1). Затем добавьте на веб-сайт ASP. NET (но не в проект Silverlight) новый файл XAML. Для этого выделите в окне Solution Explorer (Проводник решений) веб-сайт ASP.NET и выберите команду WebsiteOAdd New Item (Веб-сайтОДобавить новый элемент). Выберите шаблон Silverlight JScript Page, введите имя и щелкните на кнопке Add (Добавить). Новый файл XAML предназначен для разметки, определяющей заставку.

При добавлении нового файла XAML программа Visual Studio создает базовую за­готовку страницы с контейнером Canvas. Программа предполагает, что вы создаете приложение Silverlight 1.0, которое поддерживает намного меньший набор элементов и в котором нельзя применить другие контейнеры. Однако вы можете использовать лю­бой базовый элемент Silverlight, т.е. элемент, определенный во встроенной сборке и не требующий добавления специальной сборки в загружаемый архив ХАР. Нельзя исполь­зовать элементы, определенные в дополнительной сборке System.Windows.Controls, dll или любой другой сборке, которую необходимо добавлять в архив ХАР и загружать в клиентский компьютер.

Совет. Самый простой способ создания заставки состоит в следующем. Создайте проект Silverlight, а затем скопируйте разметку в файл заставки на веб-сайте. Тогда при создании разметки вы сможете воспользоваться рабочей средой Visual Studio, недоступной при непосредственном создании разметки на веб-сайте ASP.NET.

Ниже приведена разметка XAML простой заставки, показанной на рис. 6.4. Она со­держит контейнер Grid, текстовый блок TextBlock и два объекта Rectangle. Элемент Rectangle, рисующий прямоугольник, более подробно рассматривается в главе 8. Первый объект Rectangle рисует фон индикатора прогресса, а второй — темную полоску. Оба объекта Rectangle размещены в одной ячейке Grid, поэтому они перекрываются.

<Grid xmlns="http: / /schemas .microsoft. com/winfx/2006/xaml

/presentation"

xmlns :x="http: / /schemas .microsoft .com/winfx/2006/xaml"> <StackPanel VerticalAlignment="Center"> <Grid>

<Rectangle x:Name="progressBarBackground" Fill="White" Stroke="Black" StrokeThickness="1" Height="30" Width="200"> </Rectangle>

<Rectangle x:Name="progressBar" Fill="Yellow" Height="28" Width="0"> </Rectangle> </Grid>

<TextBlock x:Name="progressText" HorizontalAlignment="Center" Text="Загружено 0% .. ."></TextBlock> </StackPanel>

</Grid>

Затем на входную страницу HTML или тестовую страницу ASP.NET нужно добавить функцию JavaScript. Если планируется использовать обе страницы (HTML и ASP.NET), поместите функцию JavaScript в отдельный файл и свяжите ее с обеими страницами с помощью атрибута source блока сценария. Код сценария JavaScript просматривает именованные элементы страницы с помощью метода sender. findName () и манипули­рует их свойствами. Кроме того, код вычисляет текущий процент выполнения с помо­щью свойства eventArgs .progress. В данном примере код обработки события обновля­ет текст и определяет ширину полоски на основе значения eventArgs .progress.

<script type="text/javascript"> function onSourceDownloadProgressChanged(sender,

eventArgs)

{

sender.findName("progressText").Text = "Загружено " +

Math.round((eventArgs.progress * 100)) + "% …"; sender.findName("progressBar").Width = eventArgs.progress * sender.findName("progressBarBackground").Width; -

}

</script>

Примечание. В загружаемом с сайта книги коде заставки используется более сложная методика на основе преобразований (см. главу 9). Она позволяет имитировать индикатор прогресса без жесткого кодирования максимальной ширины, в результате чего он может расширяться до текущей ширины окна браузера.

Чтобы применить заставку, нужно добавить на страницу параметр splashscreen- source, идентифицирующий разметку заставки, и параметр onsourcedownloadpro- gresschanged, подключающий обработчик события JavaScript. Для задания реакции на завершение загрузки нужно подключить другой обработчик JavaScript с помощью параметра onsourcedownloadcomplete.

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">

<param name="source" value="ClientBin/SplashScreen.xap"/> <param name="onerror" value="onSilverlightError" /> . <param name="background" varue="white" /> <param name="splashscreensource" value="SplashScreen.xaml" /> <param name="onsourcedownloadprogresschanged" value="onSourceDownloadProgressChanged" />

</object>

Профессиональные программисты часто создают весьма изощренные заставки, чтобы продемонстрировать свое мастерство. Эта традиция прочно укоренилась сре­ди разработчиков приложений Flash. Примеры заставок можно увидеть на странице www.smashingmagazine.сот/2008/03/13/showcase-of-creative-flash-preloaders. Большинство увиденных там эффектов легко воспроизводится с помощью простых за­ставок Silverlight, аналогичных рассмотренной выше. Воспроизвести некоторые эффек­ты чрезвычайно тяжело. Однако их легко имитировать средствами анимации после за­грузки приложения.

Существуют способы создания более мощных заставок, но в любом случае постарай­тесь сделать объем приложения как можно меньшим. Не забывайте, что объем влияет на время загрузки. Переместите код заставки в библиотечную сборку классов и разме­стите большие ресурсы (изображения и видео) в отдельных файлах или сборках. Когда из приложения удалено все, что не обязательно должно присутствовать в нем, оно за­гружается быстро. После загрузки приложение может вывести эстетически привлека­тельный интерфейс, имитирующий заставку, и начать выполнять реальную работу, для которой оно, собственно, и предназначено.

Способы динамической загрузки приложения рассматриваются далее. Их примене­ние требует дополнительных усилий, однако с их помощью можно сократить для поль­зователя время ожидания нужных ему средств решения задачи.

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии