Урок 15. Работа с графикой.

Как мы уже знаем, Visual Studio.NET предоставляет разработчику компоненты, предназначенные для работы с графикой. В этом разделе мы рассмотрим дсновные приемы их использования в приложениях ASP.NET.

Начнем мы с самого простого объекта image. На первый взгляд, он не слишком отличается от своего аналога с вкладки HTML, однако это не совсем так. Он является полноценным компонентом Web Forms, поэтому мы можем динамически изменять его свойства.

Попробуем создать простейшую страницу, иллюстрирующую принципы работы с этим компонентом. Предположим, у нас есть небольшая база данных о книгах. Мы хотим дать пользователю возможность выбирать их наименование и просматривать внешний вид обложки соответствующей книги.

Поступим мы максимально просто. Создадим новый объект с наименованием image, и на страницу положим компонент ListBox, в котором мы разместам наименования книг, а справа от него расположим объект image, который будет служить для отображения их обложек. Изначально при загрузке страницы не будет выбрана ни одна книга, поэтому свойство visible для компонента image следует установить в False.

Теперь перейдем к установке содержимого объекта ListBox. Для этого надо в окне Properties (Свойства) активировать редактор свойства items. Это диалоговое окно с наименованием Listltem Collection Editor (Редактор коллекции Listltem),

Нажатие на кнопку Add (Добавить) добавляет элемент в список. При этом в правой части диалогового окна появляется список свойств для добавляемого элемента. Так как изначально ни один элемент списка не будет находиться в выбранном состоянии, для всех элементов свойство selected следует установить в False. В свойстве Text следует установить наименования книг, а именно те строки, которые будут отображаться в списке. Свойство Value будет автоматически принимать значение свойства Text, но разработчик, естественно, может сам изменить значение данного свойства. Именно оно будет передано на сервер для обработки. Впрочем, этот способ работы с органом ввода информации унаследован от обычных HTML-форм, и в некоторых случаях может быть успешно проигнорирован разработчиком.

После того, как список книг будет полностью создан, следует обратить внимание на свойство AutoPostBack для компонента ListBox, и установить его в True, чтобы выбранное пользователем значение автоматически отсылалось серверу, когда пользователь будет переходить от одного элемента списка к другому.

Теперь мы полностью подготовили дизайн своей страницы. Осталось подготовить ее содержимое и запрограммировать логику ее поведения. Для этого скопируем в соответствующий виртуальный каталог сервера все необходимые графические файлы с обложками книг. В моем случае я использовал три книги, и файлы получили имена l.gif, 2.gif и 3.gif. Да, я знаю — это очень оригинально.

Теперь перейдем к программированию логики поведения Web-страницы. Воспользуемся стандартным обработчиком изменения состояния списка. Напишем функцию, Перехватывающую событие SelectedlndexChanged.
Двойной щелчок по нему на странице в режиме разработки переведет нас в режим написания кода функции-обработчика. Для анализа выбранного пользователем значения, воспользуемся свойством Seiectedindex, в котором указывается порядковый номер элемента списка, выбранного пользователем. Следует учитывать, что нумерация ведется с нуля. Разработчику останется проанализировать значение этого свойства, и в соответствии с ним установить свойство imageurl для компонента image. После того, как все необходимые установки будут выполнены, следует сделать видимым этот рисунок. Для этого значению visible присвоим - True. Полный вариант кода класса, реализующего данную страницу, можно увидеть в листинге 3.16.

Л истинг 3.16

if Public Class WebForml

jt Inherits System.Web.UI. Page

Protected WithEvents Imagel As System.Web.UI.WebControls.Image

Protected WithEvents ListBoxl As System.Web.UI.WebControls.ListBox

Protected WithEvents Labell As System.Web.UI.WebControls.Label

iRegion " Web Form Designer Generated Code "

'This call is required by the Web Form Designer.

<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

End Sub

Private Sub Page_Init(ByVal sender As System.Object, ByVal e

As System.EventArgs) Handles MyBase.Init

'CODEGEN: This method call is required by the Web Form Designer 'Do not modify it using the code editor. InitializeComponent() End Sub

#End Region

Private Sub Page_Load(ByVal sender As System.Object, ByVal e

As System.EventArgs) Handles MyBase.Load

'Put user code to initialize the page here

End Sub

Private Sub ListBoxl_SelectedIndexChanged(ByVal sender As System.Object, ByVal 4>e

As System.EventArgs) Handles ListBoxl.SelectedlndexChanged

If ListBoxl.Selectedlndex = 0 Then

Imagel.ImageUrl = "l.gif" End If If ListBoxl.Selectedlndex = 1 Then

Imagel.ImageUrl = "2.gif" End If If ListBoxl.Selectedlndex = 2 Then

Imagel.ImageUrl = "3.gif" End If

Imagel.Visible = True

End Sub

End Class

Конечно, сам код обработки можно было написать несколько изящнее, но в данном случае я сделал акцент на простоте и понятности кода. Внешний вид разработанной страницы при отображении в браузере показан на рис. 3.17.

HTML-код отображенной страницы приведен в листинге 3.17.

Листинг 3.17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<titlex/title>

<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">

<meta name="CODE_LANGUAGE" content="Visual Basic 7.0"> <meta name="vs defaultClientScript" content="JavaScript">

<meta name="vs targetSchema" con-tent="http://schemas. microsoft.com/intellisense/ie5">

</HEAD>

<body MS_POSITIONING="GridLayout">

<form name="Forml" method="post" action="WebForml.aspx" id="Forml">

<input type="hidden" name="__VIEWSTATE"

value="dDwtMTM5OTQ2MTM203Q802w8aTwxPjs+

02w8dDw7bDxpPDE+02k8Mz47PjtsPHQ8cD xwPGw8SWlhZ2Wcmw7VmlzaWJsZTs+02w8Mi5naW

Y7bzxOPjs+Pjs+Ozs+03Q8dDw702w8aTw xPjs+Pjs7Pjs+Pjs+Pjs+" />

<img id="Imagel" src="/image/2.gif" border="0"

style="height:130px;width:138px;Z-INDEX: 101; LEFT: 348px; POSITION: absolute;

TOP: 55px" />

<select name="ListBoxl" id="ListBoxl" size="3"

onchange="__doPostBack('ListBoxl1,'')" language="javascript"

Style="height:139px;width:196px;Z-INDEX: 103; LEFT: 44px; POSITION: absolute; TOP: 57px">

<option value="l">Интeгpaльныe микросхемы</ор^оп>

<option selected="selected" value="2">KoHKpeTHaH математика</орtiоn>

<option value="3">MaiiMHHaH гpaфикa</option>

</select>

<span id="Labell" style="Z-INDEX: 104; LEFT: 45px; POSITION: absolute; ;S TOP: 18рх">Выберите интересующую Вас книгу</зрап>

<input type="hidden" name=" EVENTTARGET" value="" />

jjf, <input type="hidden" name="__EVENTARGUMENT" value="" />

<script language="javascript">

function __doPostBack(eventTarget, eventArgument) {

var theform = document.Forml;

theform.__EVENTTARGET.value = eventTarget;

theform.__EVENTARGUMENT.value = eventArgument;

theform.submit();

</script>

</form>

</body>

</HTML>

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

Впрочем, компонент image не является единственным компонентом, ориентированным на работу с графикой. На вкладке Web Forms (Web-формы) можно обнаружить еще один компонент с наименованием AdRotator. Это, по сути дела, заготовка для прокрутки баннеров. По умолчанию ее размеры шестьдесят на четыреста шестьдесят пикселов. Ничего не напоминает?

Даже если судить по наименованию этого компонента, он предназначен для прокрутки баннеров. Естественно, не просто для отображения одного бан-нера, для этих целей мы могли воспользоваться и компонентом image, а именно прокрутки нескольких заранее заготовленных баннеров. Конечно, разработчик должен иметь возможность управлять количеством отображае-мьгх баннеров, некоторые из них показывать чаще, другие реже. Крайне желательна возможность отключать целые категории баннеров. Все это уже реализовано в компоненте AdRotator. Разработчики Visual Studio .NET очень хорошо позаботились о предоставлении хорошего движка для рекламы в будущих проектах сторонних производителей.

Основой управления отображения баннеров служит свойство AdvertisementFile. Это обычное свойство строкового типа string, в котором содержится путь к определенному XML-файлу. Об XML будет подробно рассказано в cледующей главе, а пока что мы попробуем обойтись без пространных лекций, и на маленьком, но понятном примере рассмотрим применение подобного XML-файла, который позволяет управлять отображением рекламы в приложениях AS P. NET.

В листинге 3.18 приведен код XML-файла с наименованием adv.xml, который был размещен в виртуальном каталоге images.

Л истинг 3.18

<Adve rt i sement s> <Ad>

<ImageUrl>l.gif</ImageUrl>

<NavigateUrl>http://www.computerbook.ru</NavigateUrl>

<AlternateText>Computerbook.ru — весь мир компьютерных книг </AlternateText>

<Impressions>50</Impressions> <Keyword>oursite</Keyword>

</Ad> <Ad>

<ImageUrl>2.gif</ImageUrl>

<NavigateUrl>http://www.amazone.com</NavigateUrl>

<AlternateText>amazone.com — легендарный книжный магазин </AlternateText>

<Impressions>50</Impressions> <Keyword>frends</Keyword>

</Ad> <Ad>

<ImageUrl>3.gif</ImageUrl>

<NavigateUrl>http://www.computerbook.ru</NavigateUrl>

<AlternateText>Computerbook.ru — весь мир компьютерных книг </AlternateText>

<Impressions>50</Impressions> <Keyword>oursite</Keyword>

</Ad> </Advertisements>

Легко увидеть, что по своей структуре и синтаксису XML очень похож на HTML. И это вполне понятно, ведь родитель у них общий — язык SGML (Standard Generalized Markup Language). Чтобы не вдаваться в долгие объяснения, которым место найдется только в одной из следующих глав, скажем пока максимально просто — язык XML позволяет разработчику создавать свои собственные теги, и пользоваться ими для логического форматирования содержимого документа. Как и в HTML, разработчик XML-документов получает возможность располагать одни теги внутри других. Что, собственно говоря, отлично видно в листинге 3.18.

Все содержимое файла заключается между парой тегов <Advertisements> и </Advertisements>. Это содержимое разбито на отдельные однотипные блоки, каждый из которых описывает один баннер, участвующий в рекламной системе. Эти блоки ограничиваются тегами <Ad> и </Ad>. Каждый из таких блоков описывает один баннер, который будет отображаться в данном компоненте. Внутри этих блоков располагаются одинаковые наборы тегов, задающие свойства баннеров.

Между тегами <imageuri> и </imageUri> располагается текстовая строка, в которой указывается URL графического файла с изображением самого баннера. Следует указать, что данная строка является содержимым файла, а не параметром какого-либо тега, поэтому она не должна заключаться в кавычки.

Каждый баннер является не только простым изображением, он одновременно выполняет роль и гиперссылки. Поэтому между тегами <NavigateUri> и </NavigateUri> располагается URL того ресурса, на который должна будет указывать гиперссылка, связанная с отображаемым баннером.

Давно известно, что для Web-дизайнеров и Web-разработчиков хорошим тоном служит связывание графических изображений с дополнительным текстом, который будет отображаться на месте рисунка в том случае, если у пользователя в браузере отключено отображение графики. В нашем случае, для каждого баннера соответствующий текст будет располагаться между тегами <AlternateText> И </AlternateText>.

Любая баннерная система может управлять количеством показов того или иного баннера. Частота показа каждого баннера регулируется числом, заключенным между тегами <impressions> и </impressions>. Это не просто некое количество показов, а частота его показа, относительно иных баннеров. Естественно, эти числа являются некими долями относительно их общей суммы.

И, наконец, осталось лишь рассмотреть значение последней пары тегов — <Keyword> и </Keyword>. Между ними располагается некое ключевое слово, которое на самом деле является наименованием категории. На самом деле разработчик имеет возможность отключать воспроизведение баннеров, принадлежащих той или иной категории.

Помимо XML-файла, который описывает коллекцию баннеров, применяемых в оформлении страницы, следует установить значение свойства Target.

Значением этого свойства является наименование фрейма или окна просмотра браузера, в котором будет открыт документ, связанный с отображающимся баннером. Подобные наименования, а точнее ключевые слова, жестко прописаны в спецификации HTML, и являются значениями одноименного параметра target, часто применявшегося вместе с тегом гиперссылки <а>.

На этом обзор методов работы с различными компонентами, связанными с графическими изображениями, заканчивается.