Форма программы курса: 1. Название. Средства эффективной разработки Web-приложений. 2. Рекомендуется студентам 2-3 курса, знакомым с основами программирования и ООП, HTML и C#. 3. Лекции - часов, лабораторные работы 4. Аннотация (200 слов max) 5. Содержание (программа)
Оглавление Тема 1.
Предмет и задачи дисциплины. Определение и структура веб-
приложений. Классификация веб-приложений. .....................................................................2 Тема 2.
Основы проектирования веб-приложений. Жизненный цикл веб-
приложения. Тестирование под нагрузкой. ............................................................................4 Тема 3.
Основы проектирования веб-приложений. Веб-сайты. Веб-сервисы......7
Тема 4.
Visual Web Developer Express Edition. Общее представление о продукте
как о средстве разработки динамических веб-приложений. .................................................8 Тема 5.
Базовые возможности Visual Web Developer Express Edition. Разработка
интерфейса пользователя........................................................................................................21 Тема 6.
Особенности отладки и тестирования веб-приложения. Средства
отладки веб-приложения. Точки останова, обработка исключений, инспекция переменных. Тема 7.
28 Базовые возможности Visual Web Developer Express Edition. Средства
администрирования веб-сайтов..............................................................................................33 Тема 8.
Защита веб-сайтов.......................................................................................37
Тема 9.
Доступ к данным Visual Web Developer Express Edition. Элементы
управления, связываемые с данными. ...................................................................................40 Тема 10.
Дополнительные возможности Visual Web Developer Express Edition.
Структура сайта и навигация. Персонализация. Технология Web parts. ...........................47 Лабораторные работы .....................................................................................................53
1
Тема 1.
Предмет и задачи дисциплины. Определение и структура веб-приложений. Классификация веб-приложений.
Курс знакомит слушателя с таким классом программ, как веб-приложения, с теоретическими основами проектирования и разработки и с техническими средствами веб-разработки. Существует несколько определений веб-приложения. Веб-приложение - совокупность программ, реализующих обработку данных в определенной области применения в среде Веб. Веб-приложение – это вспомогательные программные средства, предназначенные для автоматизированного выполнения каких-либо действий на Web-серверах. При этом они используют в качестве пользовательских интерфейсов Web-браузеры. Обычно Webприложения создаются в разных вариантах архитектуры клиент-сервер. Веб-приложение – это приложение, выполняющееся на веб-сервере, доступ к которому осуществляется путем передачи-получения пакетов по протоколу HTTP. В данном курсе под веб-приложением понимается класс приложений, компоненты которых выполняют автоматизированную обработку данных, взаимодействуя в веб-среде. Обобщенная архитектура веб-приложения – это модель клиент-сервер, в которой компоненты приложения разделяются на клиентские и серверные, и взаимодействуют компоненты путем передачи и получения пакетов по протоколу HTTP. В качестве клиента выступает веб-браузер, а в качестве сервера – веб-сервер. клиент
HTTP-пакеты
сервер
Рис. 1 Обобщенная архитектура веб-приложения
Задачи веб-сервера – это выполнение определенного набора функций по обработке данных и предоставление интерфейса (программного или пользовательского) по протоколу HTTP для доступа к этим функциям. Серверный компонент веб-приложения получает запрос от клиента и выполняет обработку данных, после этого формирует ответ и/или веб-страницу и отправляет пакет данных клиенту по сети с использованием протокола HTTP. Серверные компоненты веб-приложения могут выступать в качестве клиента других служб (сервисов), например, базы данных или другого веб-приложения, расположенного на другом сервере. Одним из преимуществ такого подхода является то, что клиенты не зависят от конкретной операционной системы пользователя, и веб-приложения, таким образом, являются межплатформенными сервисами.
Классификация веб-приложений 1. по степени связанности (сопряжения) компонентов системы: a. слабо сопряженные b. сильно связанные Степень связанности (сопряженности) компонентов системы – это степень, в которой каждый из компонентов зависит других модулей системы. Степень связанности может быть высокой (сильной) или низкой (слабой). Приложение является слабо сопряженным, если его компоненты взаимодействуют между собой по неизменным интерфейсам и не зависят от внутренней реализации каждого из компонентов. В таком приложении модификация реализации одного из компонентов не требует изменений в реализации других компонентов. В сильно связанном приложении, наоборот, функционирование одного из компонентов зависит от внутренней реализации других компонентов, и потому изменения в этих компонентах приводят к изменениям в 2
зависимом компоненте. Кроме того, отдельные компоненты сильно связанного приложения сложны для понимания, если рассматривать их без зависимых компонентов этого приложения. Также наличие сильных связей между компонентами затрудняет их независимое тестирование. 2. по количеству логических уровней в инфраструктуре приложения. a. двухуровневые b. n-уровневые Логическую структуру приложения можно разделить на три слоя пользовательские сервисы (уровень представления), прикладные сервисы (уровень бизнес-логики) и сервисы данных. Пользовательские сервисы – это интерфейс системы с пользователем, который позволяет пользователю управлять системой, а системе – предоставлять результат действий пользователя. Прикладные сервисы реализуют бизнеслогику приложения, т.е. определяют бизнес-объекты и их взаимодействия. Таким образом прикладные сервисы реализуют алгоритмы обработки данных в соответствии запросам пользователей и бизнес-правилам. Сервисы данных обеспечивают хранение данных и методы доступа к ним. В случае, если два первых логических уровня (пользовательские и прикладные сервисы) объединены в один уровень инфраструктуры, то такое приложение имеет двухуровневую архитектуру. Если же каждому логическому уровню соответствует отдельный уровень инфраструктуры – то это трехуровневое приложение, которое является наиболее распространенным случаем n-уровневого варианта. Введение в инфраструктуру дополнительного уровня позволяет заменять или модифицировать любой из уровней при необходимости. Например, изменение операционной системы клиента на уровне представления данных потребует изменения только кода пользовательского интерфейса, бизнес-логика и уровень доступа к данным останутся неизменными. 3. по виду предоставляемой пользователю информации a. статические b. динамические Динамические приложения содержат изменяющееся информационно-значимое наполнение (контент), а статическое веб-приложение содержит неизменное наполнение.
Требования к веб-приложениям Качество разрабатываемого приложения определяется тем, насколько оно соответствует тем требованиям, которые были заложены на стадии проектировании системы. Все требования к приложениям, в том числе и веб-приложениям, разделяют на функциональные и нефункциональные. Функциональные требования определяют ту функциональность системы, которую разработчики должны построить, чтобы пользователи смогли выполнить свои задачи в рамках своих бизнес-процессов. Нефункциональные требования представляют собой описание характеристик приложения, важных для пользователя при работе с системой. Рассмотрим, какие характеристики задают нефункциональные требования к системе: • надежность. Формально, надежность – это свойство приложения сохранять во времени в установленных пределах значения всех параметров, характеризующих способность выполнять требуемые функции в заданных режимах и условиях применения (ГОСТ 27.002-89). Т.е. требования к надежности приложения определяются условиями функционирования приложения (параметры сервера, максимальное количество пользователей приложения) и допустимыми показателями качества работы системы в этих условиях (время обработки запроса пользователя к системе, количество отказов системы). Таким образом, надежное веб-приложение должно обеспечивать доступ ко всем функциям для пользователя при любых 3
условиях (т.е. все возможные условия для данного приложения должны быть рассмотрены и учтены при проектировании системы). • быстродействие приложения. Быстродействие определяется как среднее время обработки запроса пользователя к системе. Максимальным приемлемым временем отклика для веб-приложений считается 5 секунд. • безопасность. Требование безопасности веб-приложения включает в себя: разграничение прав доступа к функциям и данным каждого компонента вебприложения может, контроль уровня доступа компонентов и/или пользователей, авторизация и верификация пользователей. • масштабируемость – это способность системы увеличивать свою производительность при повышенной нагрузке и добавлении ресурсов. Для пользователя масштабируемого веб-приложения должен оставаться незаметным момент (т.е. время отклика системы на запросы пользователя не должно заметно изменяться), когда возрастет нагрузка (например, к приложению получают доступ одновременно еще несколько пользователей), и при изменении конфигурации приложения (например, если на уровень бизнес-логики будет добавлен дополнительный компонент обработки данных). Более подробно о требованиях, предъявляемых к приложению, и о методах их сбора, анализа и контроля, можно прочитать в книге [4].
Тема 2.
Основы проектирования веб-приложений. Жизненный цикл веб-приложения. Тестирование под нагрузкой.
Рассмотрим основные этапы создания веб-приложения. Процесс разработки вебприложения, как и любой информационной системы, определяется понятием «жизненный цикл». Модель жизненного цикла (life cycle model) – это структура, состоящая из процессов, работ и задач, включающих в себя разработку, эксплуатацию и сопровождение программного продукта, охватывающая жизнь системы от установления требований к ней до прекращения ее использования. Основным нормативным документом, регламентирующим жизненны цикл программного обеспечения, является международный стандарт ISO/IEC 12207. Этот стандарт определяет процессы, работы и задачи, которые используются: при приобретении системы, содержащей программные средства, или отдельно поставляемого программного продукта; при оказании программной услуги, а также при поставке, разработке, эксплуатации и сопровождении программных продуктов. Структура жизненного цикла базируется на трех группах процессов: • основные процессы жизненного цикла программного обеспечения (заказ, поставка, разработка, эксплуатация, сопровождение); • вспомогательные процессы, обеспечивающие выполнение основных процессов (документирование, управление конфигурацией, обеспечение качества, верификация, аттестация, оценка, аудит, решение проблем); • организационные процессы (управление проектами, создание инфраструктуры проекта, определение, оценка и улучшение самого ЖЦ, обучение). Жизненный цикл имеет 4 фазы: 1) анализ и планирование требований. На этом этапе определяется набор функций, которые должна выполнять система с выделением приоритетных, которые должны быть реализованы быстрее всего; проводится описание информационных потребностей системы; определяются материальные затраты, аппаратные средства и устанавливаются сроки выполнения работ. 2) проектирование системы, может происходить с использование CASE-средств. На этой стадии анализируются функций системы и связи между ними, устанавливаются требования разграничения доступа к данным, к необходимой документации, Принимается 4
ешение о разделении системы на подсистемы. Результат выполнения этапа – общая модель объектов и связей между ними, функциональная модель в целом и каждой подсистемы, точно определенные с помощью CASE-средств интерфейсы, построение прототипов экранов, диалогов, отчетов. 3) построение (реализация и тестирование системы). На этом этапе происходит разработка приложения – генерация или разработка кодов, интеграция всей системы в целом. Результат этапа – готовая система, отвечающая всем требованиям, выдвинутым на первом этапе. 4) внедрение системы и обучение пользователей. Основные виды моделей жизненного цикла: • каскадная модель • спиральная модель При работе по каскадной модели производится разбиение всей разработки на этапы (фазы), причем переход с одного этапа на следующий происходит только после того, как будет полностью завершена работа на текущем. Каждый этап завершается выпуском полного комплекта документации, достаточной для того, чтобы разработка могла быть продолжена другой командой разработчиков. Положительные стороны применения каскадного подхода заключаются в следующем: • на каждом этапе формируется законченный набор проектной документации, отвечающий критериям полноты и согласованности; • выполняемые в логичной последовательности этапы работ позволяют планировать сроки завершения всех работ и соответствующие затраты. Последовательность работ в рамках каскадной модели следующая:
Рис. 2 Каскадная модель жизненного цикла
Каскадный подход хорошо зарекомендовал себя при построении систем, для которых в самом начале разработки можно достаточно точно и полно сформулировать все требования, с тем, чтобы предоставить разработчикам свободу реализовать их как можно лучше с технической точки зрения. В эту категорию попадают сложные расчетные системы, системы реального времени и другие подобные задачи. Однако, в процессе использования этого подхода обнаружился ряд его недостатков, вызванных прежде всего тем, что реальный процесс создания ПО никогда полностью не укладывался в такую жесткую схему. Основным недостатком каскадного подхода является существенное запаздывание с получением результатов. Согласование результатов с пользователями производится только в точках, планируемых после завершения каждого этапа работ, требования к ИС "заморожены" в виде технического задания на все время ее создания. Таким образом, пользователи могут внести свои замечания только после того, как работа над системой будет полностью завершена. Альтернативная модель – это спиральная модель жизненного цикла. Эта модель учитывает необходимость постоянного пересмотра, уточнения и оценки проектных требований. В модели делается упор на начальные этапы цикла: анализ и проектирование. На этих этапах реализуемость технических решений проверяется путем создания 5
прототипов. Каждый виток спирали соответствует созданию фрагмента или версии системы, на нем уточняются цели и характеристики проекта, определяется его качество и планируются работы следующего витка спирали. Таким образом, углубляются и последовательно конкретизируются детали проекта и в результате выбирается обоснованный вариант, который доводится до реализации. Такой подход может быть очень эффективным при быстрой разработке небольших проектов. Он стимулирует активное взаимодействие между проектной группой и заказчиком, поскольку заказчик оценивает ход и результаты работы на протяжении всего проекта. Недостатком спиральной модели является отсутствие четких вех (контрольных точек между этапами жизненного цикла проекта), что может привести к хаотизации процесса разработки.
Рис. 3 Спиральная модель жизненного цикла
Microsoft была разработана методология MSF, Microsoft Solution Framework. Эта модель сочетает в себе свойства двух стандартных производственных моделей: каскадной (waterfall) и спиральной (spiral). Она сохраняет преимущества упорядоченности каскадной модели, не теряя при этом гибкости и творческой ориентации модели спиральной. Модель процессов MSF учитывает постоянные изменения проектных требований. Она исходит из того, что разработка решения должна состоять из коротких циклов, создающих поступательное движение от простейших версий решения к его окончательному виду. В методологии MSF жизненный цикл проекта разбивается на 5 фаз (этапов): 1. Фаза выработки концепции – на этом этапе происходит определение целей и границ проекта, оценка рисков проекта. 2. Фаза планирования включает в себя подготовку спецификации требований к проекту, оценку проектных затрат и сроков разработки различных составляющих проекта. 3. Фаза разработки – на этой фазе разработки проектная группа фокусируется на создании компонент решения (включая как документацию, так и программный код). Однако некоторая часть этой работы может продолжаться также на фазе стабилизации, если такая необходимость выявлена в процессе тестирования. Данная фаза также включает в себя разработку инфраструктуры. 4. Фаза стабилизации. Во время фазы стабилизации производится тестирование разработанного решения. При этом внимание фокусируется на его эксплуатации в реалистичной модели производственной среды. 5. Фаза внедрения. Во время этой фазы проектная группа внедряет технологии и компоненты решения, стабилизирует внедренное решение, передает работу персоналу поддержки и сопровождения и получает со стороны заказчика окончательное одобрение результатов проекта. По завершению внедрения проектная группа производит анализ выполненной работы и удовлетворенности заказчика. Во время этой фазы по ходу переноса компонент решения из среды 6
тестирования в производственную среду могут продолжаться меры по стабилизации решения. Эта методология разработки программного обеспечения описывает управление людьми (проектной группой) и рабочими процессами в процессе разработки решения. MSF представляет собой согласованный набор концепций, моделей и правил. В рамках MSF программный код, документация, дизайн, планы и другие рабочие материалы создаются итеративными методами. MSF рекомендует начинать разработку решения с построения, тестирования и внедрения его базовой функциональности. Затем к решению добавляются все новые и новые возможности. Такая стратегия именуется стратегией версионирования. Несмотря на то, что для малых проектов может быть достаточным выпуск одной версии, рекомендуется не упускать возможности создания для одного решения ряда версий. С созданием новых версий эволюционирует функциональность решения. Подробное описание методологии MSF приведено на сайте Microsoft.
Тема 3.
Основы проектирования веб-приложений. Веб-сайты. Веб-сервисы.
Веб-сайт - это одна или совокупность веб-страниц, доступных в интернете через протоколы HTTP/HTTPS. Страницы веб-сайта объединены общим корневым адресом, а также обычно темой, логической структурой, оформлением и/или авторством. Информация, предоставляемая пользователю на сайте, может быть статическая, и сервер в этом случае является только хранилищем страниц веб-сайта, которые он по запросу клиента пересылает в неизменном виде. Другая схема работы веб-приложения появляется в случае, если веб-сайт работает с динамической информацией, т.е. информация должна зависеть от того, кто и в какой момент времени получает к ней доступ. Динамический сайт может содержать флеш- заставки, ролики, анимацию, а также отдельные статические страницы. Рассмотрим плюсы и минусы статического веб-сайта. К плюсам относится сравнительно невысокая стоимость разработки и технической поддержки (хостинг). Минусом является необходимость модификации программного кода, если требуется изменить контент сайта. При увеличении объемов сайта становится проблематично поддерживать его целостность. Динамический сайт позволяет обеспечить двусторонний обмен информацией между пользователем и приложением, а также он более удобен в управлении и поддержании, т.к. для этого не требуется вносить изменения в код страниц. При этом динамический сайт дороже в технической поддержке, чем статический, требует большее количество ресурсов сервера. В статическом веб-приложении отсутствует разделение логических уровней приложения на уровень представления, уровни обработки и доступа к данным. В динамическом приложении такое разделение появляется. Данные хранятся уже не в коде веб-страниц, а в отдельных файлах или в базе данных (БД). Уровень обработки данных может быть выполнен как монолитный компонент веб-приложения, либо отдельные компоненты могут быть выделены в виде специальных веб-сервисов, программных, доступ к которым осуществляется через Web. Использование таких компонентов улучшает масштабируемость системы, делает компоненты повторно используемыми. Веб-сервисом называется программная система, идентифицируемая строкой URI, чьи публичные интерфейсы и привязки определены и описаны посредством XML. Описание этой программной системы может быть найдено другими программными системами, которые могут взаимодействовать с ней согласно этому описанию 7
посредством сообщений, основанных на XML, и передаваемых с помощью Интернетпротоколов. Веб-сервисы обеспечивают следующие преимущества системе: взаимодействие программных компонентов возможно вне зависимости от платформы, благодаря использованию протокола HTTP возможно взаимодействие компонентов через веб. С точки зрения логической организации веб-сервисов: Назовем сервисом (service) ресурс, реализующий бизнес-функцию, обладающий следующими свойствами: • • •
является повторно используемым; определяется одним или несколькими явными технологически-независимыми интерфейсами; слабо связан с другими подобными ресурсами и может быть вызван посредством коммуникационных протоколов, обеспечивающих возможность взаимодействия ресурсов между собой.
То есть использование веб-сервисов позволяет ослабить связанность компонентов веб-приложения. Для предоставления конечному пользователю тех функций, которые реализуются веб-сервисом, требуется организовать взаимодействиех трех компонентов: источника запроса к веб-сервису, поставщика веб-сервиса и брокера веб-сервисов, выступающего посредником между источником и поставщиком веб-сервиса.
Рис. 4 Веб-сервис. Взаимодействие компонентов.
SOAP (Simple Object Access Protocol) – это протокол обмена сообщениями между поставщиком и потребителем веб-сервиса, протокол основан на XML и HTTP. WSDL (Web Service Description Language) – язык, представляет собой XML-схему, которая описывает методы и параметры Web-сервиса. XML-схема – это набор тэгов, используемых в XML-документе. Она позволяет точно определить, какие данные содержатся в соответствующем XML-документе, проверить его целостность. Протокол UDDI (Universal Description, Discovery, and Intgration) – это не зависящий от платформы, открытый каркас описания сервиса, поиска и интегрирования сервисов в веб. Более подробно смотрите на сайте www.uddi.com .
Тема 4.
Visual Web Developer Express Edition. Общее представление о продукте как о средстве разработки динамических веб-приложений.
Мы познакомились с теоретическими основами проектирования веб-приложений, следующий шаг – применение полученных знаний при разработке приложения. 8
Разработка сложных веб-приложений с нуля – трудоемкая задача, требующая от разработчиков навыков проектирования и разработки информационных систем. Для людей, начинающих свой путь в области веб-разработки, решение этой задачи становится более доступным с использованием средств разработки, ориентированных именно на потребности начинающих пользователей. Популярной средой разработки, удовлетворяющей этому требованию, является продукт Microsoft Visual Web Developer Express Edition. Для каждого из уровней веб-приложения (интерфейс, бизнес-логика, данные) VWD предлагает инструментарий эффективной разработки (см.ниже). Веб-приложения в Visual Web Developer Express Edition строятся на основе технологии ASP.NET. ASP.NET — это платформа для разработки и выполнения приложений на веб-сервере, включающая в себя объекты и элементы управления времени разработки и контекст среды выполнения. ASP.NET, в свою очередь, является частью .NET Framework, а потому обеспечивает доступ ко всем возможностям этой платформы. Например, можно создавать веб-приложения ASP.NET на любом языке программирования .NET (Visual Basic, C#, управляемые расширения для C++ и многие другие) и средств отладки .NET. Доступ к данным осуществляется средствами ADO.NET. Аналогично, можно обращаться к службам операционной системы, используя классы .NET Framework, и т. д. Веб-приложения ASP.NET выполняются на веб-сервере, настроенном на работу с Microsoft Internet Information Services (IIS). Однако необязательно работать с IIS напрямую. Можно программировать средства IIS, используя классы ASP.NET, а Visual Web Developer Express Edition будет выполнять задачи управления файлами, такие как создание приложений IIS по мере необходимости и обеспечение способов развертывания веб-приложений в IIS. Преимущество использования Visual Web Developer Express Edition для создания веб-приложений заключается в том, что эта среда предоставляет инструментальные средства, благодаря которым процесс разработки приложений становится намного быстрее, проще и надежнее. В число этих инструментов входят: • Визуальные конструкторы для веб-страниц с прототипами элементов управления и режимом просмотра кода (HTML), в котором предусмотрена возможность проверки синтаксиса кода. • Оптимизированные редакторы кода, включающие в возможности возможности IntelliSense. IntelliSense в Visual Web Developer Express Edition – это средство, обеспечивающее быстрый доступ пользователя ко всем возможностям языка программирования. Оно позволяет в режиме редактирования программного кода производить поиск по элементам языка, выбирать подходящий элемент и добавлять его в код. Intellisense предоставляет следующие возможности: o просмотр списка членов класса (структуры, объединения или пространства имен) для указываемого объекта этого класса. Выбранный в этом списке член класса, будет добавлен в программный код. o просмотр списка параметров функции, указанной в коде. Информация о фунации включает в себя имена и типы всех параметров, тип возвращаемого значения. o доступ к информации о переменной. Эта функция позволяет, выбрав идентификатор переменной в коде, увидеть, как была объявлена эта переменная. o автозавершение. Эта функция завершает недописанные названия переменных, функций, когда введено достаточно символов для разрешения неоднозначности имен. o Автоматический контроль соответствия открывающих и закрывающих скобок и незамкнутых сегментов кода. • Встроенные средства компиляции и отладки. 9
•
Средства управления проектом для создания файлов приложения и управления ими, включая развертывание на локальном или удаленном сервере.
Элементы веб-приложений ASP.NET Создание веб-приложений ASP.NET включает в себя работу со многими элементами из тех, что используются в любом клиент-серверном приложении. В их число входят: • Интерфейс пользователя. Приложение, как правило, выводит данные на экран пользователю; в веб-приложении ASP.NET интерфейс пользователя представлен в виде страниц Web Forms, которые направляют выводимые данные в обозреватель. При необходимости можно создать вывод, специально рассчитанный на работу с мобильными устройствами или другими веб-устройствами. • Компоненты. Многие веб-приложения можно разделить на компоненты, которые содержат код для выполнения определенных задач и могут быть использованы повторно. Эти компоненты можно создавать в виде веб-служб XML, которые позволяют вызывать эти компоненты через Интернет, например из вебприложения, другой веб-службы или формы Windows Forms, и использовать их повторно. • Данные. Для большинства приложений требуется доступ к данным в той или иной форме. В Visual Web Developer Express Edition для этого можно использовать ADO.NET (службы данных, являющиеся частью .NET Framework).
Создание веб-приложения в среде Visual Web Developer Express Edition Рассмотрим последовательность действий для создания простейшего вебприложения в Visual Web Developer Express Edition. Это будет веб-сайт, выводящий некоторое сообщение (например, «Hello World») при нажатии кнопки. Новый веб-сайт можно создать, выбрав пункт меню File | New web site. Появившееся диалоговое окно предлагает выбрать тип сайта, который вы хотите создать – это может быть ASP.NET Web Site, Empty Web Site, ASP.NET Web Service, Personal web Site Starter Kit. Если вы выберете шаблон ASP.NET Web Site, то Visual Web Developer Express Edition сгенерирует минимальное число файлов, необходимых для создания веб-сайта. Будут созданы одна веб-страница, пустой каталог Data, и .sln-файл проекта. Если вы выберете шаблон ASP.NET Web Service, то Visual Web Developer Express Edition сгенерирует минимальное число файлов, необходимых для создания веб-сервиса. Если вы выберете шаблон Empty Web Site – будет создан лишь пустой каталог и .sln-файл проекта. Если же будет выбран шаблон Personal web Site Starter Kit, то Visual Web Developer Express Edition задействует стартовый набор, образец персонального веб-сайта с некоторыми встроенными возможностями. В списке Location вы можете выбрать местонахождение для создаваемого Webсайта. В вашем распоряжении — три варианта: • HTTP — традиционный способ доступа к Web-сайту по протоколу HTTP с использованием FrontPage Server Extensions (аналогично используемому в предыдущих версиях); • FTP — доступ к сайту будет производиться по протоколу FTP; • File system — новая возможность ASP.NET 2.0, предлагаемая по умолчанию. При ее выборе будет создан Web-сайт просто в каталоге файловой системы локального компьютера, а для отладки будет использован интегрированный в ASP.NET отладочный Web-сервер. После окончания разработки приложения его необходимо будет опубликовать на обычном Web-сервере Internet Information Server. Для нашего примера выбираем шаблон ASP.NET Web Site. Вводим название сайта – HelloWorld, и путь к нему, указываем язык программирования – Visual C#. 10
Рис. 5 Варианты создания нового веб-сайта в Visual Web Developer Express Edition 2005
После создания нового веб-сайта, открывается главное окно Visual Web Designer — окно редактора, расположенное в центре. В нем производится основная работа по редактированию приложения ASP.NET. Обычно используются два встроенных редактора, отображаемых в этом окне. Включить каждый из редакторов можно при помощи команды меню View. Кроме того, переключиться после того, как редактор открыт, можно при помощи соответствующих вкладок (или при помощи клавиатурных комбинаций Ctrl-F6 или Ctrl-TAB): • Design — Режим Design (режим визуального конструирования) показывает HTML-страницу, позволяя выбирать и редактировать элементы пользовательского интерфейса, а также предоставляет возможность предварительного графического просмотра страницы. Обычно используется для перетаскивания элементов управления из ToolBox, настройки их свойств и определения взаимного расположения Web-страниц; • Source — эта вкладка предназначена для работы с кодом HTML. В окне Solution Explorer (по умолчанию в верхней правой части экрана) можно просмотреть набор проектов, которые относятся к вашему приложению, набор файлов в вашем проекте, а также выполнить с ними различные действия (перетаскиванием или через контекстное меню). В окне Object Browser (доступно при помощи меню View) вы можете просматривать информацию о библиотеках классов - сборках HTML и свойствах, методах, событиях и константах каждого класса. Под окном Properties расположено окно DynamicHelp. Dynamic - значит автоматически выбирается тема справки, наилучшим образом соответствующая тому, что вы делаете в настоящий момент. 11
В самой нижней части экрана расположено окно Task List. В нем: · можно добавлять новые задачи вручную (такие задачи будут автоматически помещаться в верхнюю часть экрана); · можно добавлять новые задачи в автоматическом режиме, помещая комментарии 'TODO в код; · ошибки компиляции добавляются в этот список автоматически. В верхнем левом углу - окно Server Explorer. Его главная задача - обеспечивать интеграцию внешних служб (SQL Server, Message Queue, журналы событий и т.п.) в ваше приложение. Рядом с Server Explorer находится Toolbox. В нем для приложений ASP.NET 2.0 предусмотрено 7 разделов: · HTML — стандартные элементы управления HTML (как серверные, так и клиентские); · Standard — серверные элементы управления, используемые в ASP.NET; · Data - для создания подключений к источникам данных; · Validation — элементы управления, относящиеся к проверке информации, вводимой пользователем; · Navigation — специальные элементы управления, предназначенные для навигации по сайту; · Login — элементы управления, которые используются для аутентификации пользователя на сайте; · Web Parts — специальные элементы управления, которые используются для предоставления пользователю возможности настраивать Web-сайт "под себя".
Рис. 6 Панель инструментов Toolbox
Под окном Solution Explorer по умолчанию находится окно Properties. В этом окне вы можете настраивать свойства выбранных элементов управления или других компонентов вашего проекта. В зависимости от типа элемента, для значений свойств могут быть доступны вызовы дополнительных инструментов настройки, например, для настройки цвета это Color Picker, а для подключения файла с изображением — окно Open File.
12
Рис. 7 Окно свойств Properties элемента управления
При необходимости просмотра или редактирования программного кода вебстраницы (режим Source) для упрощения навигации по коду в Visual Web Developer Express Edition реализована возможность представления структуры документа Document Outline. В окне Document Outline в виде древовидного меню показана структура вебформы и связанные с ней компоненты.
Рис. 8 Представление структуры веб-страницы Document Outline
Итак, мы создали новое веб-приложение, и посмотрим – из чего оно состоит. В окне Solution Explorer мы видим один файл Default.aspx, файл пустой веб-страницы, создаваемой по умолчанию для веб-приложения. Файл с расширением .aspx указывает среде исполнения ASP.NET, что все запросы веб-пользователя к этой странице должны обрабатываться программным кодом этой веб-страницы. Страница состоит из трех основных частей: директивы (@Page), процедурный код (тег <script>) и информация о формате (-тег страницы, определяющий внешний вид страницы). С каждым .aspx файлом может быть связан файл отделенного кода .aspx.cs – в нашем примере это файл Default.aspx.cs, его можно увидеть в окне Solution Explorer, щелкнув на значок «+» рядом с именем файла Default.aspx. Концепция отделенного кода (codebehind) базируется на идее, что каждой странице Web Forms соответствует отдельный файл с классом. Этот класс – динамически генерируемый класс страницы, создаваемый системой ASP.NET для каждого ресурса .aspx. Весь серверный код, который вы связываете с ресурсом .aspx, помещается в отделенный класс. Файл .aspx содержит визуальные элементы веб-формы, а файл Codebehind содержит логику, согласно которой эта форма функционирует. Такое разделение кода может использоваться, но это не обязательный подход – можно не выделять серверный код в отдельный файл .cs, а располагать код в файле .aspx, в разделе <script>. Такой подход допустим, но это усложняет чтение, редактирование и 13
сопровождение файла. Подробнее схема работы пользователя с веб-страницами будет описана чуть позднее. А сейчас продолжим создание нашего приложения HelloWorld. Обычно работа по созданию приложения ASP.NET выглядит так: 1. в режиме Design в графическом режиме создается содержимое страницы, на ней размещается текст, изображения, другие элементы оформления (например, таблицы); 2. в файле серверного кода codebehind для событий самой страницы и элементов управления создается программный код; 3. при необходимости на вкладке Source дорабатывается код HTML для страницы. Определим интерфейс для нашего веб-приложения – добавим элементы TextBox (в это поле ввода будет вводиться строка сообщения), Button (кнопка, по нажатию которой строка из TextBox выводится в метке Label) и Label, и HTML-элемент label (строкаприглашение для ввода сообщения). Редактировать свойства элементов можно двумя способами. В первом применяется панель свойств Properties, второй способ – редактирование исходного HTML-кода.
Рис. 9 Интерфейс приложения HelloWorld
Исходный код этой нашей первой веб-страницы будет выглядеть следующим образом:
CodeFile="Default.aspx.cs"
HELLO WORLD Сообщение для отправки: HELLO WORLD!!!
Теперь надо реализовать основную функцию нашего приложение – это вывод строки из поля txtInputMsg в lblOutputMsg по нажатию кнопки btnMsg. Для этого нужно создать обработчик события «нажатие кнопки btnMsg». Для этого дважды щелкните на 14
кнопку btnMsg в режиме Design. Visual Web Developer при этом переключится в файл Default.aspx.cs, и мы увидим следующий C# код: using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnMsg_Click(object sender, EventArgs e) { }
}
Таким образом, будет создан пустой обработчик для используемого по умолчанию события элемента. Для кнопки это событие Click. Разметка HTML нашей веб-страницы при этом автоматически модифицируется – добавляется новый атрибут OnClick в тэг asp:Button :
Определим код обработчик события Click для кнопки: protected void btnMsg_Click(object sender, EventArgs e) { lblOutputMsg.Text = txtInputMsg.Text; }
Теперь можно запускать приложение – нажимаем F5 (Debug | Start Debuggin). После этого может появиться сообщение о том, что требуется файл web.config для отладки кода. Если вы хотите запустить страницу, не выполняя отладку, выберите Run without debugging. В противном случае выберите первый варианты и Visual Web Developer Express Edition создаст файл web.config со включенной возможностью отладки.
Рис. 10 Сообщение об отсутствии файла web.config при запуске приложения
Далее запускается интернет браузер – и мы видим результат запуска приложения:
15
Рис. 11 Веб-страница приложения HelloWorld
В строке поиска браузера отображается строка http://localhost:2961/HelloWorld/Default.aspx - адрес веб-страницы нашего вебприложения, запущенного на локальном веб-сервере localhost, встроенном в Visual Web Developer Express Edition. Локальный веб-сервер обрабатывает только локальные запросы, т.е. запросы только с вашего компьютера – это сделано для обеспечения безопасности вебразработки. Итак, мы создали интерактивное веб-приложение, которое обеспечивает взаимодействие клиентского веб-браузера и серверной части. Рассмотрим, как происходит это взаимодействие изнутри ASP.NET. Все файлы .NET (C# или Visual Basic) компилируются в динамически подключаемые библиотеки (DLL). Исполняющая среда ASP.NET обеспечивает безопасный доступ к функциям этих библиотек. Запрос веб-страницы .aspx от пользователя (клиентского браузера) обрабатывается локальным веб-сервером и перенаправляется для дальнейшей обработки ISAPIрасширению ASP.NET (aspnet_isapi.dll), с которого начинается обработка любых операций, относящихся к ASP.NET. Процесс aspnet_isapi.dll во время первого запроса вебстраницы генерирует для файла .aspx временную библиотеку dll (это называется компиляция ресурсов по требованию). Эта dll содержит класс, наследуемый от соответствующего класса веб-формы, и располагается в .Net-сборке проекта. Сборка (assembly) – это один или несколько логически связанных файлов, которые развертываются совместно.
16
HTTP-запрос (первое обращение) ASP.Net файл Содержимое веб-стриниц и отделенный код
HTTP-запросы HTTP-ответы
HTTP-запросы Локальный веб-сервер
HTTP-ответы
ISAPIрасширение (aspnet_isapi. dll)
Создание сборки при первом обращении к файлу
Источник запросов Результат обработки запроса .Net -сборка HTTP-запрос (повторное обращение)
Веб-приложение Рис. 12 Схема вызовов веб-приложения ASP.NET
Вернемся к HTML-коду нашей веб-страницы. Веб-страница состоит из элементов управления пользовательского интерфейса. Элементы управления определяются как специализированные объекты, используемые для взаимодействия с пользователем, которые можно размещать в формах HTML. Элементы управления могут быть стандартными HTML-компонентами (все обработка происходит на стороне клиента) и серверными (обработка и управление осуществляется на стороне сервера). Посмотрим на HTML-кода кнопки нашего приложения:
Обратите внимание на атрибут runat="server". Он означает следующее: элемент управления, для которого использован такой атрибут, серверный, он становится доступным из программного кода в файле codebehind, и на события этого элемента управления реагирует сервер. Если этот атрибут убрать (а также, возможно, избавиться от атрибутов, которые допустимы только для серверных элементов управления), элемент управления станет обычным элементом управления HTML. Отметим отличия серверных элементов управления ASP.NET от обычных элементов управления HTML: • главное отличие, конечно, заключается в том, что в ответ на события серверного элемента управления (например, на нажатие кнопки) срабатывает событийная процедура на сервере, в которой вы можете определить любой требуемый вам код. При этом работа с серверными элементами управления основана на стандартной модели событий для этих элементов, что делает ее очень похожей на работу с элементами управления Windows: например, используются те же события Click, Load и т.п.; • в коде HTML для серверных элементов управления используется префикс пространства имен XML, который выглядит как asp. Например:
17
Для элементов управления HTML такой префикс не используется. •
в ASP.NET элементы управления производятся от общих предков и поэтому обладают общим набором свойств (BackColor), методов и событий (хотя для каждого элемента управления могут быть предусмотрены и уникальные свойства, методы и события); • в отличие от стандартных элементов управления HTML, для серверных элементов управления обязательно сохраняется информация о состоянии. Отличия наглядно видны при обновлении страницы. Для серверных элементов управления установленные пользователем значения по умолчанию сохранятся, а для обычных элементов управления HTML будут загружены исходные значения; • серверные элементы управления автоматически определяют тип и версию браузера и генерируют подходящий для него код. В результате снижается потребность в тестировании и разработке разных версий страниц под разные версии браузеров. На одной странице .aspx вполне можно использовать одновременно как серверные элементы управления, так и стандартные элементы управления HTML. Элементы управления HTML проще, стандартнее и используют меньшую полосу пропускания, поэтому серверные элементы управления обычно используются только тогда, когда вам нужна дополнительная функциональность: как на уровне сервера (например, для взаимодействия с базами данных), так и на уровне клиентского интерфейса (например, в наборе элементов управления HTML нет календаря). Отметим, что атрибут runat="server" можно использовать не только для традиционных элементов управления. Например, атрибут runat="server" можно поместить в тег для элемента HTML body, и при этом вы точно так же получите программный доступ к этому элементу (например, сможете настраивать для него фон). Вернемся к общей структуре веб-приложения. Помимо файлов веб-форм, вебприложение может включать в себя следующие файлы: 1. Global.asax – файл является необязательным файлом приложений ASP .NET и содержит дополнительный код, отвечающий за обработку событий, происходящих на уровне приложения или уровня сессии. В частности, файл Global.asax позволяет разработчику обрабатывать события запуска и остановки приложения, начало и завершение сессии, начала и завершения запроса на ресурсы, процесса аутентификации и ошибок приложения. 2. .ashx (Generic handler) – файл общих обработчиков, который позволяет обрабатывать HTTP-запросы и формировать для них ответы, как и файлы .aspx. Но в отличие от .aspx, файл Generic handler может формировать ответ не только в виде HTTP-пакета, но и в виде пакетов типов, допустимых стандартом HTTP MIME: текстовые (простой текст, html, XML), изображения (картинки), аудио, видео, приложения. Т.е. файлы generic handler позволяют возвращать по запросу пакеты с медиа-данными, без элементов пользовательского интерфейса. 3. .asmx – файлы, содержащие код входных точек веб-сервисов, аналогично как .aspx содержит входные точки веб-сайтов. Через файл .asmx выполняются запросы к вебслужбам. 4. .ascx – файл элемента управления пользовательского интерфейса. Среда Visual Web Developer Express Edition позволяет программисту создавать собственные элементы управления, нестандартные, предназначенные для решения специфичных бизнесзадач. 5. .master – файл веб-страницы, шаблонной, эталонной (в отличие от страниц контента .aspx). Пользовательский интерфейс веб-приложения строится на .aspx страницах. 18
Если же несколько или все .aspx-страницы должны быть единообразно оформлены и иметь общую функциональность, то сначала создают эталонную веб-страницу (.master), на основе которых уже создают эти .aspx-страницы. Эталонная вебстраница определяет макет, схему интерфейса, общую для группы страниц приложения. Такой макет может включать в себя статический текст и различные элементы управления, которые будут отображаться одинаково на всех вебстраницах, использующих этот шаблон. Те фрагменты макета, где должны отображаться индивидуальные данные для каждой веб-страницы, оформляют в виде элементов управления Placeholder - указатель места заполнения, «заполнитель». Placeholder - это текстовый или графический элемент шаблона страницы, контейнер, наполняемый элементом на aspx-странице. Использование эталонных веб-страниц позволяет избежать копирования повторяющихся фрагментов кода, а значит вносить изменения можно централизованно, в макет, все aspx-страницы будут обновлены автоматически. Подробно об использовании эталонных страниц рассказано в лекции 5. 6. web.config - файл конфигурации приложения. Файл конфигурации в ASP.NET позволяет задавать специфические для данного проекта параметры безопасности, параметры компиляции, трассировки, обработки событий и т. д. 7. .css – файлы, содержащие таблицы стилей (Cascading Style Sheets, CSS) предназначены для хранения данных о стиле элементов пользовательского интерфейса (размер, положение, цвет и другие параметры форматирования) отдельно от файлов веб-страницы. Это упрощает доработки сайта и создает возможность поддержки сменных стилей оформления. В Visual Web Developer имеются средства для создания CSS и их предварительного просмотра. 8. .skin – файл, описывающий тему пользовательского интерфейса. Подобно темам Mirosoft Windows темы ASP.NET задают набор настраиваемых стилей и визуальных атрибутов для компонентов сайта. К таким компонентам относятся свойства элементов управления, таблицы стилей страницы, изображения и шаблоны. Тема – это совокупность всех визуальных стилей для всех настраиваемых компонентов страницы, в своем роде супер-CSS-файл. Тема состоит из набора .css файлов, изображений и файлов-скинов. CSS-файлы определяют стиль тела страницы, а файлы-скины определяют стиль отдельных управляющих элементов ASP.NET. Файл .skin представляет из себя текстовый файл с определением значений по умолчанию для визуальных свойств этих элементов управления пользовательского интерфейса 9. .sln – основной файл веб-приложения, используется средой Visual Web Developer Express Edition при загрузке приложения для редактирования. 10. .xslt – файл, содержащий код XSLT – Extensible Stylesheet Language Transformations, язык преобразований XML-документов. При применении XSLT-трансформаций, состоящих из набора шаблонов, к XML-документу (исходное дерево) образуется конечное дерево, которое может быть как XML-структурой, так и обычным текстом. Запросы выбора данных из исходного дерева пишутся на языке запросов XPath. 11. .sitemap – файл, содержит карту сайта в виде XML. Карта сайта представляет из себя логический контейнер с иерархическим набором узлов, каждый из которых представляет страницу приложения. Т.е. файл .sitemap определяет структуру сайта и переходы между разделами сайта. 12. .mdf – файл локальной реляционной базы данных SQL 13. .resx – файл ресурсов .NET. Ресурс веб-приложения – это данные, логически связанные с веб-приложением. Это могут быть текстовые данные, изображения, мультимедиа-данные – т.е. любые данные, которые не являются исполняемыми файлами. Как правило, файлы веб-приложения не просто сохраняют в корневом катологе, а группируют в папки: 19
1. App_Code – папка, в которой можно хранить вспомогательные классы и бизнесобъекты (файлы .vb или .cs) 2. App_Data – каталог данных, используемых веб-приложением. 3. App_Themes – папка содержит определение тем, поддерживаемых веб-приложением. Каждой теме соответствует один подкатолог в App_Themes. 4. App_GlobalResources – каталог ресурсов, общих для всего веб-приложения Структура папок может быть расширена в зависимости от логической структуры файлов приложения.
20
Тема 5.
Базовые возможности Visual Web Developer Express Edition. Разработка интерфейса пользователя.
При разработке пользовательского интерфейса веб-приложения нужно учитывать следующие требования: 1. устойчивость интерфейса – интерфейс должен минимально зависеть от настроек на стороне клиента – т.е. вне зависимости от конфигурации окружения (операционная среда, тип или версия интернет-браузера, настройки браузера и т.д.) интерфейс вебприложения должен выглядеть и функционировать одинаково. Особенно это требование менее актуально для приложений в интрасети, где конфигурация клиентов обычно определена заранее, и более важно для приложений, разрабатываемых для интернета. 2. целостность дизайна – весь интерфейс (или логически схожие его компоненты) должны быть оформлены в едином стиле, т.е. иметь единообразное форматирование 3. модульность дизайна – при необходимости предоставлять пользователю большие объемы информации, для повышения удобства использования этой информации, все информационное наполнение веб-приложения следует объединять по категориям, и предоставлять пользователю возможность настраивать лично для себя – какие именно категории данных его интересуют. 4. веб-приложение должно включать в себя средства навигации по контенту. Visual Web Developer Express Edition предоставляет средства для эффективного создания веб-интерфейса, который соответствуют этим требованиям.
Разметка веб-страницы Первый шаг создания интерфейса – это наполнение веб-страницы элементами управления. Если размещать компоненты веб-страницы, последовательно перетаскивая их из панели инструментов Toolbox на окно визуального конструктора, то компоненты будут располагаться автоматически друг за другом, слева направо по всей ширине страницы. Это мы видели, когда создавали приложение HelloWorld. Как же разместить их на странице так, как нам нужно? Простейший способ – это использовать пробелы и пустые строки (тег
), формировать из этих элементов пустое пространство, разделяющее элементы интерфейса. Недостатки такого подхода – это очень неудобно. Предположим, что вы хотите, чтобы ваши элементы располагались в виде таблицы – представьте, сколько времени уйдет на создание такого взаиморасположения элементов. Visual Web Developer Express Edition предлагает альтернативные методы выполнения разметки вебстраницы. Все функции для управления разметкой веб-страницы собраны в пункте основного меню Layout, доступного в режиме визуального конструирования Design. Последовательность элементов управления образует в разметке страницы нормальный поток (normal flow). При этом компоненты располагаются на странице горизонтально, последовательно друг за другом, в той последовательности, в которой они расположены в HTML-коде. Visual Web Developer Express Edition предлагает три варианта позиционирования элементов управления: 1. статическое позиционирование – расположение компонентов на странице происходит в соответствии с нормальным потоком элементов. Этот вариант используется по умолчанию для всех элементов. При таком размещении элементы не могут перекрывать друг друга.
21
2. абсолютное позиционирование – компоненты размещаются на веб-странице по точным координатам, начало отсчета координат – левый верхний угол страницы. Элемент с абсолютным позиционированием перестает быть частью нормального потока элементов, т.е. расположение такого элемента не влияет на расположение следующих за ним элементов страницы. Координаты абсолютного позиционирования можно указать в HTML-коде элемента управления - атрибут Style элемента:
Положение элемента задается левым верхним углом, в пикселях. Второй вариант задать положение элемента при абсолютном позиционировании – это в режиме визуального конструирования Design мышью перенести элемент на подходящее место – в этом случае координаты будут зафиксированы в HTML-коде автоматически. 3. относительное позиционирование – элементы интерфейса размещаются на вебстранице по точным координатам, но координаты вычисляются не относительно левого верхнего угла страницы, а относительно координат элемента в нормальном потоке. Т.е. указывается смещение элемента относительно его положения в нормальном потоке. Следующий за ним элемент в потоке имеет такие же координаты, как если бы это смещение равнялось нулю.
Выбор способа позиционирования для элементов, добавляемых на веб-страницу, осуществляется в режиме Design в пункте меню Layout | Position | Auto-Postion option. В открывшемся диалоговом окне в разделе HTML Designer – CSS positioning нужно выбрать опцию «Change positioning to the following for controls added using the Toolbox, paste or drag and drop». После этого станет доступен список возможных вариантов позиционирования, приведенный выше – т.е. абсолютное позиционирование (Absolutely positioned), относительное позиционирование (Relatively positioned), статическое (Statically positioned), и без указания позиционирования (No positioning attribute). Если метод позиционировании не будет указан для элемента управления, то при отображении страницы будет выбран метод позиционирования по умолчанию. В этом случае при смене метода позиционирования по умолчанию для этой странице, например, при подключении к странице css-файла, изменится и местоположение элемента управления. Выбранный метод позиционирования будет применен ко всем новым элементам, добавляемым на страницу. Если для уже существующего элемента управления вы захотите изменить метод позиционирования, то это можно сделать так: выбираем нужный элемент управления, далее в пункте меню Layout | Position отмечаем галочкой новый метод позиционирования, который и будет применен к выбранному элементу. Для организации фиксированного взаимного расположения элементов управления друг относительно друга можно использовать таблицы. Все пространство веб-страницы представляется в виде таблицы, т.е. набора строк и столбцов, и элементы управления располагаются в ячейках этих таблиц. Такая организация веб-формы позволяет легко выполнить разметку страницы. Для эффективного выполнения этой операции в Visual Web Developer Express Edition можно использовать встроенные шаблоны таблиц с помощью Дизайнера таблиц (доступ к диалоговому окну через пункт меню Layout | Insert Table), либо создать свой собственный шаблон. Размеры добавленной таблицы можно изменять, потянув мышью за границы столбцов и отдельных ячеек, при этом на поле конструктора указывается ширина выбранного столбца или ячейки в пикселах.
22
Рис. 13 Дизайнер таблиц для разметки веб-страниц
Элементы управления можно объединять в группы, которые можно модифицировать как единое целое. Для этого используются уровни (Layer). Добавить уровень на веб-страницу можно через пункт меню Layout | Insert Layer. В html-коде уровень представляет из себя фрагмент кода между тегами и , в который и добавляются все элементы группы. Т.е. уровень – это контейнер элементов управления, который позволяет выполнять групповые операции над всеми вложенными элементами. Для выравнивания элементов управления друг относительно друга предназначена панель инструментов Layout. По умолчанию в Visual Web Developer Express Edition она не видна, для доступа к ней нужно вызвать контекстное меню в области верхних меню и отметить галочкой значение Layout, после чего в верхней части экрана появится новая панель инструментов:
Рис. 14 Панель инструментов Layout
Используя инструменты этой панели, можно выполнять следующие действия с выбранными элементами управления: 1. выравнивание расположения элементов по вертикали – по левому углу, по центру элементов, по правому углу 2. выравнивание расположения элементов по горизонтали – по верхнему углу, по центру элементов, по нижнему углу 3. выравнивание размеров элементов – по ширине, по высоте, по ширине и высоте 4. выравнивание интервалов между элементами (когда выделено более двух элементов) – выравнивание горизонтальных/вертикальных интервалов, 23
увеличение/уменьшение горизонтальных/вертикальных интервалов, удаление горизонтальных/вертикальных интервалов между элементами
Эталонные страницы Для веб-приложений важным требованием к интерфейсу пользователя является целостность дизайна. Для этого страницы веб-сайта должны иметь одинаковую графическую разметку. Например, все страницы могут иметь верхний и нижний колонтитулы и тело страницы. Для этого можно вручную дублировать код и элементы интерфейса на каждой странице, но это конечно не самый эффективный метод. Visual Web Developer Express Edition предлагает средства для автоматического повторного использования кода – эталонные страницы (master pages), основу которой является возможность в ASP.NET выполнять слияние шаблона с контентом, определяемым пользователем. Следующие характеристики эталонных страниц позволяют сделать разметку страницы функциональной, а также упростить ее использование и сопровождение: • определение супершаблона – эталонной страницы, на которую явно ссылаются отдельные страницы контента • применение эталона на различных уровнях структуры приложения – для всех страниц приложения, всех страниц в каталоге или для каждой отдельной страницы • поддержка одним веб-приложением нескольких эталонных страниц. Эталонная страница – это отдельный файл, определяющий шаблон для некоторого набора страниц. Страницы приложения, наследующие структуру эталонной страницы, должны ссылаться на нее в директиве @Page или указывать ее программно. Страница, создаваемая на основе эталонной, называется страницей контента (content page). Одна эталонная страница может быть связана с любым количеством страниц контента. Общая схема работы с эталонными страницами следующая: 1. создание общего пользовательского интерфейса и функциональности в эталонной странице 2. указание именованных полей подстановки (ContentPlaceHolder) для контекста, предоставляемого производными страницами. 3. создание в странице контента ссылки на эталонную страницу 4. наполнение в странице контента полей подстановки реальным информационным наполнением. Для конечного пользователя эталонные страницы абсолютно прозрачны. При работ с приложением со стороны клиента видны только URL страниц контента, при запросе страницы исполняющая среда ASP.NET объединяет содержимое эталонной и контентной страниц. Эталонная страница представляет собой файл с расширением .master, чей синтаксис практически не отличается от применяемого в обычной странице .aspx. У эталонной страницы есть два главных признака: • Директива @Master, заменяющая директиву @Page • Один или несколько дочерних элементов ContentPlaceHolder Каждый элемент ContentPlaceHolder указывает область разметки, чье реальное содержимое будет определяться страницами контента в период выполнения. Тело эталонной страницы может содержать любую комбинацию серверных элементов управления, обычного текста, изображений, HTML-элементов и программного кода. Рассмотрим простой пример взаимодействия пары «эталонная страница – страница контента». Первый шаг – создаем эталонную страницу MasterPage.master, которая представляет собой разметку для страницы с верхним и нижним колонтитулами, и вертикальным меню из трех пунктов в левой части страницы: 24
Рис. 15 Пример эталонной страницы
Исходный код эталонный веб-страницы: <script runat="server"> Untitled Page
| |
Пункт меню 1
Пункт меню 2
Пункт меню 3
| |
| Москва |
Директива @Master позволяет исполняющей среде ASP.NET правильно обрабатывать эталонную страницу. Эта директива поддерживает несколько атрибутов, в том числе Language, Inherits, ClassName. Атрибут Language задает язык, используемый в коде эталонной страницы. Inherits указывает базовый класс этого эталона, ClassName определяет имя реального класса эталона. Элемент управления ContentPlaceHolder является контейнером, размещенным на эталонной странице. С его помощью отмечаются те места, куда дочерние страницы могут помещать свой собственный контент. Поле подстановки контента определяется уникальным идентификатором:
Полю подстановки контента можно присвоить значение по умолчанию, показываемое в случаях, когда страница контента не предоставила никакой замены. Если в странице контента отсутствует ссылка на какое-то поле подстановки эталона, то будет показан контент по умолчанию. Следующий фрагмент иллюстрирует способ определения контента по умолчанию: Контент по умолчанию
Если страница заполняет поле подстановки, то контент по умолчанию полностью игнорируется. Страница контента – это .aspx-страница, состоящая только из серверных тегов . Связь между полями подстановки и контентом осуществляется на основе идентификаторов этих полей:
Количество полей подстановки, определяемых в эталонной странице, соответствует числу ее настраиваемых областей. Страница контента не обязана заполнять все поля подстановки своей эталонной страницы. Создадим для страницы MasterPage.master страницу контента. Сделать это можно несколькими способами. Первый способ – вызвать на эталонной странице контекстное 26
меню, и выбрать пункт Add Content Page. При этом будет создана новая страница .aspx, содержащая ссылку на нашу эталонную страницу и серверный компонент для каждого поля подстановки. Второй способ – это в уже существующей веб-странице .aspx в директиве @Page добавить атрибут: MasterPageFile="~/MasterPage.master"
При этом элементы Content для полей подстановки нужно будет добавить самостоятельно. Итак, любым из способов создаем контентную страницу, и в добавляем заголовок и кнопку – это и будет реальное наполнение поля подстановки PageBody. Созданная страница будет выглядеть следующим образом:
Рис. 16 Пример страницы контента
Серым цветом затеняются элементы, унаследованные от эталонной страницы MasterPage.master и недоступные для редактирования. А элементы, добавленные к шаблонной странице, располагаются внутри элемента управления Content. Исходный код контентной страницы приведен ниже: Контентная страница
Результат запуска веб-страницы:
27
Рис. 17 Пример результата объединения эталонной страницы и страницы контента
Соответствие между эталонной и контентной страницами можно установить не только на уровне страницы, но и на уровне приложения или папки. Связывание на уровне приложения предполагает, что все страницы в приложении будут ссылаться на один и тот же эталон. Сконфигурировать такое поведение можно путем установки атрибута masterPageFile в элементе <pages> файла Web.config:
<system.web> <pages masterPageFile="MasterPage.master"/>
Если то же значение задать в файле Web.config отдельного подкаталога веб-сайта, то все веб-страницы в этой папке будут обращаться к указанной эталонной странице. При таком подходе все веб-страницы приложения должны содержать элементы управления Content, соответствующие полям подстановки эталонной страницы. Привязка к эталону на уровне приложения исключает возможность применения страниц, не являющихся страницами контента. Если страница ссылается на эталонную, то ее серверные элементы не могут размещаться на за пределами тега .
Тема 6.
Особенности отладки и тестирования веб-приложения. Средства отладки веб-приложения. Точки останова, обработка исключений, инспекция переменных.
Отладка приложения – это этап разработки приложения, в процессе которого происходят обнаружение, локализация и устранение ошибок в программе. Существуют различные подходы и средства отладки. В качестве основного средства используются отладчики, которые включают в себя пользовательский интерфейс для пошагового выполнения программы: оператор за оператором, функция за функцией, с остановками на некоторых строках исходного кода. Точка останова (breakpoint) — это преднамеренное прерывание выполнения программы, при котором выполняется вызов отладчика. После перехода к отладчику, 28
программист может исследовать состояние программы (состояние переменных, стек вызовов и т.д.), с тем чтобы определить, правильно ли ведёт себя программа. После остановки в отладчике, программа может быть завершена, либо продолжена с того же места, где произошёл останов. Рассмотрим средства отладки приложения в Visual Web Developer Express. Доступ к ним осуществляется через пункт меню Debug.
Рис. 18 Меню управления функциями отладчика Visual Web Developer Express Edition
Основные функции отладчика VWD это: 1. запуск приложения в режиме отладки 2. переход к следующей инструкции Step Into 3. переход к следующей инструкции Step Over 4. переход к следующей инструкции Step Out 5. установить/отменить точку останова 6. удалить все точки останова 7. заблокировать все точки останова Первая функция – запуск приложения в режиме отладки – инициирует работу отладчика VWD, который выполняет программу до первой точки останова, после остановки в отладчике можно либо завершить выполнение программы (функция Stop Debugging), либо продолжить выполнение программы до следующей точки останова (функция Continue), либо перейти к следующей инструкции приложения. Для перехода к следующей инструкции программы существует три команды - Step Into/ Over/ Out. Если текущая инструкция не содержит вызова функции, то эти команды работают одинаково. Если же текущая инструкция содержит вызов функции, то: Step Into – переходит к первой инструкции вызываемой функции, Step Over – полностью выполняет вызываемую функцию и останавливается на инструкции, следующей за текущей инструкции в текущей функции. Step Out - выполняет все инструкции, оставшиеся в текущей функции. Если она вызвана из другой функции, текущей инструкцией становится та, которая расположена за вызовом текущей функции. Иначе – программа выполняется до следующей точки останова. В Visual Web Developer Express Edition точка останова определяется указанием инструкции программы, при переходе управления к которой происходит прерывание выполнения программы.
29
Рис. 19 Точка останова в Visual Web Developer Express Edition
Остановки программы в определенных точках позволяют проследить значения переменных в определенные моменты выполнения приложения. Текущие значения переменных отображаются в окне Locals, которое содержит две закладки. Первая «Locals» - на ней отображаются все текущие локальные переменные. Вторая «Watch» предназначена для просмотра значений переменных, выбираемых пользователем, которые ему требуется отследить на текущем этапе отладки.
Рис. 20 Окно просмотра значений переменных при отладке программы
Еще одно окно, доступное в режиме отладке и содержащее информацию о ходе выполнения программы – это окно Call Stack. В нем отображается стек вызовов приложения, т.е. список всех активных вызовов функций, выполнение которых начато, но в текущий момент отладки не завершено.
Рис. 21 Окно стека вызовов
30
В Visual Web Developer Express Edition выполнение веб-приложения можно легко приостановить, задав на проверяемой строке кода точку останова. Далее можно запустить пошаговое выполнение строк программы с проверкой состояния всех переменных — это очень удобно при поиске ошибок. Инструмент Exception Assistant предоставляет подробное описание исключительных ситуаций, возникающих при отладке приложений, и, что еще важнее, даёт рекомендации по устранению ошибок в программе.
Рис. 22 Инструмент Exception Assistant
Подсказки отладчика
В окне подсказок отладчика можно оперативно проверять значения переменных при отладке веб-приложений. Для этого достаточно навести указатель мыши на экземпляр объекта, и отладчик тут же покажет значения его членов. Средства визуализации (Visualizers) отладчика 31
Если показать значения простых числовых переменных нетрудно, то представить более сложные типы, например содержимое XML-файлов, куда сложнее. Инструменты отладчика Debugger Visualizers обеспечивают графическое представление объектов, что позволяет просматривать данные во время отладки. Так, строку в формате XML (например, определение RSS-канала) можно визуализировать при помощи XML Visualizer. Инструмент DataSet Visualizer позволяет просматривать содержимое объектов DataSet.
Тестирование – процесс многократного выполнения программы с целью обнаружения как можно большего количества ошибок. Основные виды тестирования для веб-приложения, также как для любого приложения: • Модульное тестирование – выполняется с целью проверки функциональности классов, входящих в приложение • Интеграционное тестирование - тестирование правильности взаимодействия классов, входящих в различные модули приложения. Взаимодействие объектов представляет собой просто запрос одного объекта на выполнение другим объектом одной из операций получателя и всех видов обработки, необходимых для завершения этого запроса. • Системное тестирование – это тестирование правильности функционирования системы в целом. При этом программа рассматривается с точки зрения пользователя. При этом процесс тестирования переплетается с процессом разработки программ. Раннее тестирование позволяет аналитикам и проектировщикам четко формулировать требования к проекту и делать эти требования «поддающимися» тестированию. Основной подход к тестированию: тестировать как можно раньше, часто и в полном объеме. Специфика веб-приложения – это большое количество пользователей, имеющих одновременный доступ к функциональности приложения. Поэтому для веб-приложений особенно важными являются такие этапы системного тестирования, как тестирование производительности, масштабируемости и стабильности. Часто эти этапы объединяются общим термином «тестирование подо нагрузкой». Цели тестирования под нагрузкой: • Производительность. Цель: ускорение выполнения запроса пользователя. 32
•
Масштабируемость. Цель: увеличение количества пользователей, одновременно обращающихся к приложению при пиковой нагрузке. • Стабильность. Цель: уменьшение утечек памяти в компонентах приложения и числа системных сбоев. Планирование тестирования должно начинаться с определения среды тестирования. Здесь первая задача – оценить ресурсы, которые понадобятся при тестировании. При оценке ресурсов можно исходить из правила: 15-20% времени разработки входит на тестирование вообще, и примерно треть этого времени занимает тестирование под нагрузкой. Важно создать отдельную тестирующую среду, сравнимую с реальной, т.е. конфигурация и параметры оборудования должны быть максимально приближены к реальным условиям использования веб-приложения. Следующий шаг планирования тестирования – это определение стратегии тестирования. Для этого необходимо определить: • Узкие места системы и количество параллельных запросов, которые должна обрабатывать система • Количество несинхронизированных пользователей может обслуживать приложение с приемлемым временем отклика • Зависимость степени масштабируемости системы при наращивании оборудования Еще один шаг при подготовке к тестированию – это определение показателей, которые позволят количественно оценить эффект от изменений, внесенных между тестами, и проверить соответствие приложения требованиям заказчика. Такими показателями могут быть число заказов, обработанных в минуту, или время выполнения запроса к веб-странице. Приступая к тестированию веб-приложения в среде Visual Web Developer Express Edition, необходимо помнить, что локальный веб-сервер этой среды не обеспечивает реальный тестовый сценарий. Особенно важно это для приложений, которые обращаются к файлам, которые не являются веб-страницами, к файлам, расположенным на других машинах, к реестру Windows или локальной или удаленной базе данных.
Тема 7.
Базовые возможности Visual Web Developer Express Edition. Средства администрирования веб-сайтов.
Администрирование веб-сайта Поведение веб-приложения зависит и от параметров системного уровня, и от характеристик приложения. Настройки веб-сайта хранятся в файле Web.config, общего для веб-приложения. Если приложение содержит дочерние каталоги, оно может определить файл Web.config для каждого каталога. Для конфигурирования веб-сайта можно редактировать конфигурационные файлы, а также Visual Web Developer Express Edition предоставляет для этого инструмент Web Site Administration Tool. Этот инструмент является административным веб-интерфейсом сайта и доступен через меню Website | ASP.NET Configuration. С его помощью можно управлять пользователями, ролями, персональной информацией, провайдерами данных, параметрами приложений и др. Все это освобождает от ручного редактирования конфигурационных файлов (web.config) и облегчает поддержку сайта.
33
Рис. 23 Инструмент администрирования веб-приложения
1. 2. 3. 4. 5.
Для администрирования пользователей и ролей служит вкладка Security. На вкладке Application доступны функции: создать параметры приложения (Create application settings) настроить параметры приложения (Manage application settings) настроить почтовый сервер (Configure SMTP e-mail settings) настроить параметры отладки и трассировки приложения (Configure debugging and tracing) установить страницу, загружаемую по умолчанию при возникновении ошибок в ходе исполнения программы (Define default error page)
34
Рис. 24 Инструмент для конфигурирования веб-приложений
Диалоговое окно создания параметров приложения используется при необходимости определить для приложения специфичные параметры, которые требуется отделить от основного кода приложения. Параметры хранятся в виде пар «имя параметра» – «значение параметра». После добавления нового параметра, изменения в файл Web.config вносятся автоматически в следующей форме:
35
Рис. 25 Создание параметров веб-приложения
Программный доступ к параметрам приложения осуществляется через класс ConfigurationManager. Статические свойства этого класса: • AppSettings – возвращает набор определенных пользователем параметров приложения в форме пар «имя-значение». Доступ к значению параметра осуществляется по имени параметра. • ConnectionStrings – возвращает набор строк соединения, используемых в веб-приложении. Рассмотрим простой пример приложения, использующего информацию из конфигурационного файла. По нажатию кнопки оно будет выводить значение параметра myTest, определенного в web.config. Исходный код веб-страницы:
CodeFile="Default.aspx.cs"
Untitled Page
36
Код обработчика нажатия кнопки: protected void btnСlick_Click(object sender, EventArgs e) { ConfigurationManager.AppSettings.Get("myTest"); }
Результат выполнения веб-приложения следующий:
Рис. 26 Пример результата программного использования конфигурационного файла
Развертывание веб-приложения Visual Web Developer позволяет легко размещать веб-сайты, просто копируя файлы на сервер. Вся информация о конфигурации сайта содержится в XML-файлах, входящих в проект. Даже базы SQL Server 2005 Express Edition можно развертывать простым копированием файлов БД на сервер, если на нем уже настроен SQL Server 2005. Для развертывания приложения копированием необходимо выбрать пункт меню Web Site | Copy Web Site. В открывшемся диалоговом окне нужно указать параметры копирования. Первый этап – это установление соединения с сервером, на котором вы хотите развернуть веб-приложение. Для этого в верхней части экрана выбираем Connect, и открывается окно выбора местоположения сервера – в файловой системе, на веб-сервере IIS, на FTP-сайте, на удаленном веб-сайте. Здесь вы должны указать параметры соединения с сервером, и затем выполнить соединение. После этого в правой части окна появится список файлов и папок, расположенных на сервере, в левой части – список файлов разворачиваемого веб-приложения. Второй этап – это копирование выбранных в левом окне файлов на сервер, для этого выбираем в левом списке файлы, нажимаем кнопку Copy selected files from source to remote web site. И заключительный этап – это тестирование развернутого веб-приложения, расположенного на выбранном веб-сервере.
Тема 8.
Защита веб-сайтов.
Для ограничения доступа зарегистрированных пользователей к веб-сайту разработчик может выбирать между тремя типами аутентификации: Windows (используется по умолчанию), Passport, Forms. Тип аутентификации задается в файле конфигурации приложения и не может изменяться динамически. При Windowsаутентификации информация о пользователях и группах часто хранится в базе данных Security Accout Manager, но может быть передана и в ведение службы каталогов Active Directory. При Passport-аутентификации пользовательская информация хранится во внутренней базе данных службы Passport. При Forms-аутентификации вы сами можете указать, где хранить сведения о пользователях и ролях. Чаще всего они помещаются в отдельную базу данных. Для управления пользователями и ролями можно использовать средство Web Site Administration Tool, закладка безопасности Security.
37
Рис. 27 Управление безопасностью веб-приложения средствами Web Site Administration Tool
В Visual Web Developer Express Edition предоставляется ряд элементов управления, облегчающих программирование веб-приложения в части защиты: Login, LoginName, LoginStatus, LoginView, PasswordRecovery, ChangePassword, CreateUserWizard. Эти элементы управления легко настроить для отправки пользователям сообщений по электронной почте с подтверждением регистрации или восстановления забытых паролей. Приложению, основанному на модели Forms-аутентификации, всегда нужна страница входа пользователя на сайт. Общая структура такой страницы – это группа текстовых полей (имя, пароль пользователя), кнопку для проверки введенных данных и, возможно, флажок «Запомнить меня», а также ссылки для пользователей, забывших пароль, и для желающих зарегистрироваться. Элемент управления Login предоставляет эту функциональность, включая и возможность проверки учетных данных пользователя с помощью стандартного провайдера управления членством.
Рис. 28 Элемент управления Login
Элемент управления LoginName действует как метка, показывающая на вебстранице имя текущего пользователя в приложении:
Этот элемент управления получает имя текущего пользователя из внутреннего объекта User и выводит его с применением текущего стиля. Для этого он динамически создает экземпляр элемента Label, устанавливает шрифты и цвета и показывает текст с 38
именем пользователя. Программный интерфейс элемента LoginName состоит из одного свойства – FormatString, определяющего формат выводимого текста: LoginName1.FormatString = "Welcome, {0}";
Выводимый текст может содержать только одно поле подстановки. Элемент управления LoginStatus показывает состояние аутентификации для текущего пользователя. Его пользовательский интерфейс состоит из кнопки-ссылки для входа и выхода из системы (в зависимости от текущего статуса). Если пользователь работает анонимно, т.е. не вводил свои учетные данные, этот элемент управления выводит кнопку-ссылку с приглашением войти в систему. В противном случае, если пользователь успешно прошел аутентификацию, элемент управления показывает кнопку выхода.
Элемент LoginView позволяет комбинировать элементы LoginStatus и LoginName, реализуя нестандартный пользовательский интерфейс, учитывающий статус аутентификации пользователя, а также роли, к которым он принадлежит. Этот элемент управления, создаваемый на основе шаблона, упрощает разработку пользовательского интерфейса, зависящего от статуса (анонимный или аутентифицированный) и от ролей пользователей. Т.е. можно создать шаблоны для каждого статуса или роли и использовать их в веб-приложении. Элемент PasswordRecovery предоставляет пользователю интерфейс для восстановления забытого пароля и получения его по электронной почте. Элемент управления ChangePassword предоставляет интерфейс для замены пароля пользователем:
Рис. 29 Элемент управления ChangePassword
Элемент управления CreateUserWizard предлагает встроенную функциональность по созданию нового пользователя с помощью MembershipAPI. Этот элемент реализует основные действия и позволяет программисту расширять их, отсылая новому пользователю электронное письмо с подтверждением или добавляя к мастеру новые шаги, предназначенные дл сбора дополнительных сведений. Существует два возможных варианта настройки элемента: изменение одного из стандартных этапов или добавление дополнительных шагов, определяемых пользователем. Ниже показана демонстрационная страница, содержащая этот элемент:
39
Рис. 30 Элемент управления CreateUserWizard
Тема 9.
Доступ к данным Visual Web Developer Express Edition. Элементы управления, связываемые с данными.
Большинство динамических веб-приложений работает по общей схеме: они извлекают данные из источников данных, обрабатывают их, встраивая в HTML-код, а затем посылают итоговый код разметки браузеру. Т.е. задачи доступа к данным – это взаимодействие с источником данных и заполнение полученными данными полей свойств элементов пользовательского интерфейса. Среда Visual Web Developer Express Edition предоставляет инструменты для решения этих задач: элементы источников данных, которые предлагают удобную схему получения данных, и элементы управления, связываемые с данными, которые позволяют реализовать уровень представления полученных данных. Элемент источника данных – это мост между физическим провайдером данных и пользовательским кодом. Во многих случаях пользовательским кодом является серверный элемент управления, связанный с данными, при этом связывание выполняется декларативно и почти без кода. Компоненты источников данных не только разработаны для соединения с провайдерами данных, но и поддерживают единую модель разнообразных источников. В число поддерживаемых типов источников данных входят реляционные БД, документы XML, собственные бизнес-объекты. Компонент источника данных – это элемент управления для работы с данными, который может реализовать некоторые или все операции стандартного набора операций над данными. Реализует ли элемент полный стандартный набор операций или только их подмножество, зависит от класса. Например, элемент источника данных SQL(управляет реляционными данными) поддерживает выбор и обновление данных, другой элемент может предоставлять только возможность выбора данных. Стандартный набор операций над данными включает четыре базовых операции ввода-вывода: выбор, удаление, вставку и обновление. Компонент источника данных возвращает извлеченные данные как объект. Тип возвращаемого объекта зависит от конкретной реализации. Связываемый с данными элемент управления – это элемент, который связывается с источником данных и генерирует свой пользовательский интерфейс на основе его содержимого. Эта категория включает самые разнообразные элементы: от простых элементов управления – списков (таких как DropDownList и ListBox), использующих данные для генерирования кода разметки, до более сложных (таких как DataList, GridView), использующих связанные данные для создания собственной иерархии дочерних элементов управления. 40
Рассмотрим простой пример веб-приложения, использующего механизм доступа к данным. Первый шаг – создаем небольшую базу данных, данными из которой будет оперировать веб-приложение. 1. Создаем пустую базу данных. Выполняем операцию Add New Item для вебприложения, выбираем тип файла - SQL Database, имя файла – Customers.mdf 2. Создаем таблицу в базе данных. В окне Database Explorer выбираем список Tables и для него выполняем операцию Add New Table 3. Определяем структуру созданной таблицы:
Рис. 31 Пример базы данных, созданной средствами Visual Web Developer Express Edition
4. Наполняем таблицу тестовыми данными. Для этого выбираем таблицу в Database Explorer, и в контекстном меню выбираем Show Table Data. В открывшемся окне данных таблицы редактируем значения в ячейках и сохраняем. Следующий шаг – это создание элемента источника данных, который будет взаимодействовать с созданной базой данных и предоставлять полученные данные для дальнейшей обработки в веб-приложение. 1. В панели инструментов Toolbox в разделе Data выбираем элемент SQLDataSource и переносим его в окно веб-страницы 2. Настраиваем созданной элемент источника данных:
3. В окне Choose Your Data Connection выбираем источник данных, с которым будет работать настраиваемый элемент. В нашем примере выбираем в выпадающем списке файл Customers.mdf. В нижней части диалогового окна отображается строка 41
соединения, которая будет использована для работы с источником данных, которая определяет настройки соединения, параметры безопасности соединения. 4. В окне Save the Connection String to the Application Cofiguration File можно указать, сохранять ли строку соединения с базой данных в конфигурационном файле приложения. Если сохранять, то при необходимости изменить параметры соединения (например, имя используемой базы данных) можно будет модифицировать только файл web.config, не меняя файлы веб-страниц, а значит внесенные изменения будут доступны без перекомпиляции пректа. 5. Определяем параметры для получения данных в окне Configure the Select Statement:
Определив элемент источника данных, переходим к организации представления данных из базы в интерфейсе пользователя. 1. В панели инструментов Toolbox в разделе Data выбираем элемент управления GridView и переносим его в окно веб-страницы 2. Выбираем источник данных для GridView:
42
Итак, простейшее приложение для отображения данных из базы данных готово, запускаем его, результат выполнения показан ниже:
Таким образом, Visual Web Developer Express Edition позволяет создавать вебприложения, связанные с данными, даже без написания кода. Но при этом остается и возможность программно управлять процессом связывания, что позволяет получить полный контроль над механизмом связывания. Рассмотрим подробнее инструменты для связывания веб-приложения с данными.
Элементы управления – источники данных Элемент источника данных представляет собой класс .NET Framework, облегчающий связывание хранилищ данных и связываемых с данными элементов управления. Элемент источника данных олицетворяет одно или несколько именованных представлений данных. Каждое представление позволяет получить перечисление объектов данных. Для управления содержимым источника данных служат похожие на SQL команды, такие как SELECT, INSERT, DELETE, UPDATE. Элементы источников данных наследуются от класса Control и имеют две разновидности – табличную и иерархическую. Кроме того, базовым классом для всех элементов источников данных является абстрактный класс DataSourceControl, определяющий интерфейс между связываемыми с данными элементами управления и лежащими в их основе данными. Хотя элемент 43
источника данных не имеет визуального представления, он реализован как элемент управления для обеспечения возможности «декларативной персистентности» (автоматического создания во время обработки запроса) в исходном коде .aspx и для получения доступа к состоянию отображения страницы. Для доступа к своему источнику данных элемент источника данных предоставляет ряд свойств и методов. Некоторые из этих членов специфичны для элемента управления, другие являются общими для всех элементов источников и определены в интерфейсе IDataSource. Реализация этого интерфейса – единственное обязательное условие создания собственного элемента источника данных ASP.NET. Visual Web Developer Express предлагает пять элементов источников данных: SqlDataSource, AccessDataSource, ObjectDataSource, XmlDataSource, SiteMapDataSource. Первые три элемента являются источниками табличных данных, последние два – источниками иерархических данных. Табличные данные это любые данные, которые можно представить в виде таблицы, состоящей из строк и столбцов. SqlDataSource – представляет соединение с провайдером данных SQL. Имя провайдера и строка соединения указываются при помощи свойств ProviderName и ConnectionString. AccessDataSource – представляет соединение с базой данных Access. Наследуется от элемента SQLDataSource, но при попытке установить свойства ProviderName и ConnectionString генерирует исключение. Для указания на файл базы данных используется свойство DataFile. ObjectDataSource – позволяет выполнить связывание с собственным бизнесобъектом .NET, возвращающим данные. Класс, с которым работает этот элемент управления, задается по имени посредством свойства TypeName. Этот элемент позволяет разработчикам структурировать приложения с использованием трехуровневой архитектуры и, несмотря на это, пользоваться преимуществами декларативной модели связывания с данными. Класс, используемый с этим элементом, должен включать конструктор без параметров. XmlDataSource – позволяет выполнить связывание с xml-файлом или строкой xmlданных. Этот элемент источника данных поддерживает и табличное, и иерархическое представлении данных. Табличное представление XML-данных – это просто список узлов, относящихся к конкретному уровню иерархии, а иерархическое представление отображает полную иерархию. Источник XML-данных поддерживает и сценарий «только для чтения», и сценарий чтения-записи. SiteMapDataSource – этот элемент вводит информацию карты сайта в иерархический элемент управления, связанный с данными (например, TreeView), позволяя ему отобразить структуру сайта. Используется это для организации навигации по вебсайту. Для начала в корневом каталоге веб-приложения создаете конфигурационный файл .sitemap, далее создаете элемент источника данных SiteMapDataSource для этого файла, и затем указываете этот элемент в качестве источника данных для элемента управления из панели Toolbox, раздел Navigation. Подробнее процесс создания средств навигации по сайту описан в лекции 10. Чаще всего в приложениях используется класс SqlDataSource, поэтому рассмотрим его подробнее. SqlDataSource – это элемент источника данных, представляющий соединение с реляционным хранилищем данных, таким как SQL Server или Oracle, или любым источником данных, доступным посредством ODBC и OLE DB. Для формирования соединения с хранилищем данных служат два основных свойства – ProviderName и ConnectionString. Первое представляет строку соединения и содержит информацию, достаточную для открытия сеанса с ядром СУБД. Второе определяет пространство имен управляемого провайдера ADO.NET, используемого для выполнения операции. По умолчанию свойство ProviderName имеет значение System.Data.SqlClient;
44
это означает, что по умолчанию хранилищем данных является SQL Server. Для использования провайдера OLE DB укажите вместо этого строку Data.OleDB. Свойство DataSourceMode определяет способ извлечения данных командой Select. DataSourceMode может принимать два значения: DataSet и DataReader. В первом случае выбор данных осуществляется с помощью адаптера данных, после чего результаты запроса кэшируются в объекте DataSet и хранятся в памяти сервера. При работе в режиме DataSet элемент источника данных поддерживает усложненные сценарии, допускающие возможность сортировки и фильтрации. Если свойству DataSourceMode присвоено значение DataReader, выполняется команда SQL и объект чтения данных читает строки по одной в режиме «только чтение» с продвижением только вперед. Значение свойства DataSourceMode не влияет на другие операции, такие как вставка, обновление или удаление. Ниже приведен код создания элемента источника данных, использованный в примере, описанном в начале лекции:
Как вы помните, при создании элемента источника данных мы выбрали опцию сохранения строки соединения отдельно в конфигурационном файле приложения, поэтому в файле web.config нашего примера указан параметр в разделе :
Элемент источника данных предназначен для выполнения операций с данными: выборка, обновление, вставка и удаление. Для конфигурирования этих операций элемент SqlDataSource имеет следующие свойства: SelectCommand – получает или задает команду SQL, используемую для извлечения данных из хранилища. UpdateCommand – получает или задает команду SQL, используемую для обновления строк в хранилище данных. InsertCommand – получает или задает команду SQL, используемую для вставки новых строк в хранилище данных. DeleteCommand – получает или задает команду SQL, используемую для удаления строк из хранилища данных. В элементе источника данных, созданном в нашем примере, установлено свойство SelectCommand: SelectCommand="SELECT * FROM [tblCustomers]"
Значением каждого свойства XXXCommand является строка, содержащая текст используемой SQL команды. Если требуется выполнить фильтрацию данных, т.е. создать фильтр поверх данных, извлеченных с помощью команды SelectCommand, то для этого можно использовать свойство FilterExpression элемента источника данных. Синтаксис этого свойства похож на синтаксис SQL-конструкции WHERE.
Элементы управления, связываемые с данными
45
Связываемый с данными элемент управления – это элемент, который связывается с источником данных и генерирует свой пользовательский интерфейс на основе его содержимого. Эта категория элементов включает в себя: • составные элементы: GridView, DataList, DetailsView, FormView; • иерархические элементы: TreeView, Menu • простые элементы управления-списки: CheckBoxList, RadioButtonList, ListBox, DropDownList, BulletedList; • простые элементы Repeater и AdRotator. Под простыми элементами управления, связываемыми с данными, понимают вебэлементы управления, имеющие пользовательский интерфейс на базе списка. Источник данных предоставляет этим элементам данные для заполнения списка элементов HTMLразметки. Элемент управления AdRotator отображает на веб-странице рекламный баннер, изменяющийся при обновлении страницы. Рекламную информацию этот элемент извлекает из источника данных. Данные, передаваемые элементу AdRotator, должны соответствовать корректной схеме. Элемент управления BulletedList – маркированный список. Пункты списка можно определить путем определения объектов ListItem для каждого пункта: один два три
Можно генерировать пункты списке не статически, а заполнить список при помощи связывания с данными: Свойство DataTextField позволяет выбрать отображаемый столбец, BulletStyle – стиль маркера, а DisplayMode задает режим отображения (обычный текст, кнопки-ссыки или гиперссылки). В режиме LinkButton щелчок обрабатывается исполняющей средой
ASP.NET и приводит к генерированию серверного события. Для обработки щелчка на сервере следует определить обработчик OnClick: protected void listCustomers_Click( object sender, BulletedListEventArgs e) { int itemIndex = e.Index; } Свойство Index класса BulletedListEventArgs содержит индекс пункта списка,
на котором был выполнен щелчок, индекс отсчитывается от 0. Рассмотрим составные элементы управления, связываемые с данными. Составной элемент управляет деревом дочерних элементов управления, а его выходные данные генерируются путем слияния кода разметки составляющих элементов. В Visual Web Developer Express Edition определены несколько ключевых составных элементов управления, связываемых с данными: GridView, DetailsView, FormView. Элемент управления GridView позволяет создавать табличные формы для отображения, редактирования и удаления строк данных, а также сортировку данных и разбиение на страницы.
46
Элементы управления DetailsView и FormView отображают записи по одной за раз из связанного источника данных и могут предоставлять возможность выбора записи для отображения. Различие между ними заключается в поддержке шаблонов. Элемент DetailsView имеет гибкий настраиваемый интерфейс, но фиксированный формат. Элемент FormView полностью строится на базе шаблона. Элементы DetailsView и FormView используются часто для обновления существующих и вставки новых записей, т.е. реализуют двустороннее связывание с источником данных. Элемен DetailsView можно использовать самостоятельно, а можно в комбинации с GridView для оперативного создания форм, отображающих и списки записей, и их содержимое. Элемент TreeView может быть связан с любым элементом источника данных, представляющим иерархические данные (XmlDataSource, SiteMapDataSource). По умолчанию TreeView связывает узлы иерархических данных с собственными узлами так, что при этом отображается мя узла, а не конкретный атрибут или внутренний текст. Вы можете контролировать связывание узлов с помощью ряда параметров. В частности, можно связать свойства узла элемента TreeView с определенным полем источника данных, указав связь узла дерева. Объект TreeNodeBinding определяет отношение между каждым элементом данных и связываемым с ним узлом. По умолчанию в TreeView отображается значение, возвращаемое методом ToString элемента данных, которое оказывается просто именем узла. Свойство TextField объекта TreeNodeBinding позволяет изменить этот вариант по умолчанию, чтобы отображалось имя атрибута или внутренний текст (TextField=”#innertext”). Кроме настройки текста узла вы можете указать поле подсказки (ToolTip), поле URL изображения и URL, к которому следует перейти при щелчке узла. В зависимости от возможностей клиента элемент TreeView может поддерживать функцию развертывании/свертывания узлов, настройку вида изображений узлов дерева, индикаторов +/-, флажков выбора и стилей. Элемент управления Menu обеспечивает веб-приложению навигационную функциональность. Элемент Menu допускает связывание с любым источником данных и состоит из пунктов меню, хранимых в наборе. Класс MenuItem представляет один пункт меню, а MenuItems – это свойство набора, возвращающее все дочерние пункты конкретного меню. Элемент Menu поддерживает несколько статических и динамических стилей пунктов, таких как стили выбранного пункта, подменю и пункта, над которым в данный момент находится курсор мыши. Динамические стили применяются с использованием модели Dynamic HTML. Примером динамического стиля может служить стиль, назначаемый пункту при наведении на него курсора мыши. Статические стили задаются программно и никогда не изменяются в ответ на действия пользователей.
Тема 10. Дополнительные возможности Visual Web Developer Express Edition. Структура сайта и навигация. Персонализация. Технология Web parts. Персонализация приложения: технология web-parts Одно из требований к веб-приложению – это возможность предоставлять персонализированный контент пользователю. То есть веб-приложение должно быть модульным и настраиваемым. Технология web-parts (веб-разделы) предлагает инфраструктуру для создания таких веб-приложений, которые могут управлять насыщенным контентом и большими объемами информации. Веб-разделы можно применять для разработки сайтов, позволяющих пользователям выбирать и получать только нужную информацию. Веб-разделы – это контейнерные компоненты, объединяющие различные типы контента. 47
Примером использования веб-разделов является страница my.msn.com. Она представляет собой объединение различных блоков, каждый из которых содержит собственный тип информации.
Рис. 32 Страница my.msn.com как пример приложения, созданного на базе технологии вебразделов
Все блоки информации, доступные на веб-странице, представляют интерес для пользователя. Такое максимально информативное для конкретного пользователя наполнение страницы позволяют создавать именно веб-разделы. С помощью ссылок Add Content и Chang Details пользователь может выбрать, какие блоки показывать и как они должны быть оформлены, каждый блок можно реализовать средствами Visual Web Developer Express Edition на базе веб-раздела. Каждый веб-раздел соответствует экземпляру управляющего элемента WebPart. Веб-раздел можно рассматривать как информационное окно, помещенное на страницу. Пользователи могут закрывать, минимизировать или восстанавливать это окно. Элемент управления WebPart – это контейнер, заполненный HTML-содержимым – статическим текстом, ссылками, изображениями и другими управляющими элементами. Содержимым веб-раздела может быть любая информация, представляющая интерес для всех пользователей, для некоторых групп или для отдельного человека. Часто контент веб-раздела поставляется внешними веб-сайтами, предлагающими, например, новости финансового рынка или спортивные, прогноз погоды. Содержимое веб-раздела может быть совершенно разнообразным – от списка избранных ссылок до галереи фотографий или результатов поиска. С точки зрения разработчика компонент WebPart – это разновидность элемента управления Panel, т.е. класс WebPart наследуется от класса Panel.
Темы Одно из важных требований к интерфейсу веб-приложения – это целостность оформления всех ебстраниц. Применение каскадных таблиц стилей (CSS) во многом способствует достижению этой цели. CSS обеспечивает гибкость визуальным стилям оформления, а при работе со свойствами элементов управления ASP.NET такую гибкость обеспечивают темы ASP.NET. 48
Темы ASP.NET подобно темам Microsoft Windows задают набор настраиваемых стилей и визуальных атрибутов для компонентов сайта, установка темы сводится к установке значения свойства, и все параметры, задаваемые темой, активизируются одновременно. Темы можно применять к отдельным элементам управления, а также к одной странице или веб-сайту целиком. Тема (Theme) – это совокупность всех визуальных стилей для всех настраиваемых компонентов веб-страницы. Тема идентифицируется по имни и состоит из CSS-файлов, изображений и скинов элементов управления. Скин элемента управления (control skin) – это текстовый файл, содержащий значение по умолчанию для визуальных свойств данного управляющего элемента. Если эта функциональность включена, то после добавления на страницу управления (например, GridView) будет изображаться в соответствии со стандартными значениями свойств, определенными в данной теме. Работа с темами веб-приложения состоит из двух этапов: • Создание темы • Привязка темы к странице и элементам управления Тема для страницы размещается в специальной папке App_Themes корневого каталога веб-приложения. В ней можно задавать скины управляющих элементов, таких как Button, TextBox, GridView и т.д. Обычно скин задается для каждого типа элемента, используемого в приложении, при этом свойства определяются таким образом, чтобы все управляющие элементы выглядели в одном стиле. Тема страницы может также содержать таблицы стилей и графические изображения. Таким образом, папка App_Themes содержит отдельный подкаталог для каждой темы, идентифицируемой по имени подкаталога. В каждой из этих подпапок содержатся файлы .css, .skin, а также необязательный подкаталог Images в случае, если в теме используются изображения. Скины обычно задаются во время проектирования, но их можно модифицировать и программно. Файл скина .skin – это текстовый файл с элементами разметки, похожей на разметку страницы .aspx. Простейший пример скин-файла для элемента Label выглядит следующим образом:
Он задает для метки значение свойств по умолчанию: шрифт полужирный, оранжевого цвета. Эти настройки становятся новыми значениями по умолчанию для всех элементов-меток веб-приложения. Следует иметь ввиду, что если в файле .aspx переопределить, например, свойство ForeColor, то это значение будет проигнорировано. Причина в том, что параметры темы применяются к элементам управления сразу после создания их экземпляров. Это значит, что каждый элемент Label создается с цветом шрифта, указанном в .aspx-файле, но через мгновение он получает цвет фона, указанный в скине. Т.е. значение свойства, устанавливаемого в файле скина, нельзя переопределить декларативно. Другое значение этого свойства можно установить программно в событии Page_Load или Page_Init: protected void Page_Load(object sender, EventArgs e) { lbl.ForeColor = System.Drawing.Color.Blue; }
Сопоставление темы со страницей выполняется очень легко. Для этого атрибуту Theme директивы @Page нужно присвоить название выбранной темы:
Название темы совпадает с именем подкаталога, расположенного в папке App_Themes. Одну и ту же тему можно присвоить всем страницам сайта. Для этого нужно изменить файл web.config в корневом каталоге приложения: <system.web>
49
<pages theme="TestTheme">
Кроме того, можно задать тему индивидуально для отдельного элемента управления, указав для него свойство SkinID. Свойство SkinID ссылается на конкретный именованный скин, принадлежащий теме страницы. С помощью этого приема различные элементы управления одного типа могут использовать разные скины. Если в теме страницы нет скина с таким значением свойства SkinID, то для этого управляющего элемента будет применяться стандартный скин. Именованный скин – это скин с некоторым ID. Если для скина не указан ID, то он используется в качестве стандартного скина для элемента управления. Создание именованного скина:
Добавление ссылки на именованный скин для элемента управления .aspx-страницы:
Отключить скины для управляющего элемента и всех его дочерних элементов позволяет свойство EnableTheming.
Создание средств навигации по сайту Крупное веб-приложение имеет достаточно сложную структуру интерфейса, поэтому пользователю требуются средства навигации по контенту, чтобы свободно ориентироваться в предоставляемой информации. Visual Web Developer Express Edition предлагает инфраструктуру навигации, поддерживающую настройку, хранение и рендеринг средств навигации, которая состоит из трех основных компонентов: 1. Структура сайта. Общий программный интерфейс для представления иерархической структуры сайта. Этот программный интерфейс доступен через объект карты сайта, который компоненты провайдера карты заполняют информацией, прочитанной из хранилища данных. По умолчанию таким хранилищем является XML-файл корневого каталога приложения с именем app.sitemap. 2. Навигация по сайту. Каждый определенный в карте сайта узел вязан с некоторым URL, и разработчики страницы могут легко получить и использовать в период выполнения корневой URL любого раздела сайта. То есть любой элемент, определенный в структуре сайта, должен быть привязан к URL, чтобы обеспечить доступ к этому элементу в период выполнения 3. Отображение структуры сайта. Этот компонент визуализирует пользовательский интерфейс навигации по сайту и устанавливает соответствие между понятными пользователю URL и соответствующими им путями к файлам .aspx. Иерархическая структура сайта состоит из узлов, каждый из которых представляет страницу приложения. Такая структура называется картой сайта. Стандартное представление карты сайта в Visual Web Developer Express Edition – xml-файл с расширением .sitemap, например, такой: <siteMap> <siteMapNode title="Домашняя страница" url="Default.aspx"> <siteMapNode title="Резюме" url="Resume.aspx" /> <siteMapNode title="Ссылки" url="Links.aspx" /> <siteMapNode title="Альбомы" url="Albums.aspx" > <siteMapNode title="Фотографии" url="Photos.aspx" > <siteMapNode title="Описание" url="Details.aspx" />
50
/>
<siteMapNode title="Регистрация" url="Register.aspx" /> <siteMapNode title="Управление" url="Admin/Albums.aspx" > <siteMapNode title="Фотографии" url="Admin/Photos.aspx" > <siteMapNode title="Описание" url="Admin/Details.aspx"
Файл карты сайта на программном уровне преобразуется в объект SiteMap, доступный в серверном коде страницы. Каждый элемент <siteMapNode> содержит атрибуты title, url и необязательный атрибут description. Первый возвращает имя узла иерархии сайта, которое предназначено для отображения пользователю, второй укаывает URL, по которому осуществляется переход при выборе данного узла иерархии. Для того, чтобы привязать информацию карты сайта к элементам управления, нужно сначала получить доступ к данным карты и затем использовать иерархические элементы управления, например, TreeView и Menu. На первом шаге можно использовать элемент источника данных SitemapDataSource, который упоминался в лекции 9. Следующий код демонстрирует объявление элемента источника данных карты сайта и привязку его к элементу управления TreeView и Menu: <ParentNodeStyle Font-Bold="False" /> <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px" VerticalPadding="0px" /> <StaticSelectedStyle BackColor="#507CD1" /> <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <StaticHoverStyle BackColor="#284E98" ForeColor="White" />
Элементы управления связаны с элементом источника данных через свойство DataSourceID и отображают узлы карты сайта в соответствии со значениями атрибутов url и title. Элемент управления SiteMapPath является индикатором, который показывает место страницы в структуре сайта и также является удобным средством навигации. По умолчанию объект SiteMapPath возвращает строку со всеми узлами карты и физическими путями, разделенными знаком >. Пример создания элемента SiteMapPath: <PathSeparatorStyle Font-Bold="True" ForeColor="#507CD1" />
Свойство PathSeparator задает разделитель пути (вместо >, используемого по умолчанию), а PathSeparatorStyle – параметры разделителя. Пример веб-страницы, содержащей схему навигации по сайту, построенной с использованием элементов TreeView и Menu, SiteMapPath.
Рис. 33 Карта сайта, созданная с применением элементов TreeView и Menu, SiteMapPath
52
Лабораторные работы Работа 1. Определение требований к веб-приложению и проектирование. Работа 2. Работа в среде Visual Web Developer Express Edition. Знакомство с интерфейсом среды. Создание веб-сайта. Отладка программы. Работа 3. Визуальное проектирование веб-сайтов. Создание и использование эталонных веб-страниц. Работа 4. Разработка схемы аутентификации веб-приложения. Работа 5. Динамическое наполнение веб-сайта. Элементы управления для визуализации динамических данных. Разработка БД средствами SQL Server 2005 Express Edition и реализация взаимодействия веб-сайта с разработанной БД. Работа 6. Создание средств навигации для веб-сайта. Создание целостного и настраиваемого интерфейса средствами Visual Web Developer Express Edition (WebParts, темы).
1. 2. 3. 4. 5. 6.
6. Имеющаяся литература: Документация производителя Visual Web Developer Express Edition. (http://msdn.microsoft.com/vstudio/express/) Учебный курс МГТУ им. Баумана «Технология программирования». Романова Т.Н. W3C “Web-services architecture requirements” Карл И. Вигерс. Разработка требований к программному обеспечению / Пер. с англ. – М.: Издательско-торговый дом «Русская редакция», 2004. – 576 с.: ил. Дино Эспозито. Знакомство с Microsoft ASP.NET 2.0 http://www.learnvisualstudio.net/ - Руководства и учебные курсы по C#, ASP.NET, Visual Basic.
7. Планируемая к изданию авторами курса литература (сроки подготовки) 8. Можно указать дополнительно предполагаемую форму отчетности, контрольные работы, формы контроля текущей успеваемости по курсу и т.д.
53
