Принципы разработки пользовательского интерфейса интернет-приложения

Группировка элементов проверки ввода данных

На сложных страницах ввода данных может существовать много элементов для ввода. В зависимости от их назначения, бывает удобно объединить их в логические группы, в которых была бы реализована своя логика проверки данных. Для этого целесообразно сгруппировать валидаторы. Это бывает удобно в случае, когда на странице расположено несколько панелей, внутри которых находятся отдельные поля ввода данных и кнопки, инициирующие событие postback. В таких ситуациях необходимо, чтобы внутри каждой панели реализовывалась отдельная логика проверки вводимых данных.

В ASP.NET такое возможно благодаря группам проверки. Для создания группы проверки вводимых данных необходимо поместить элементы ввода и кнопку в одну группу проверки данных. Для этого необходимо установить одинаковое значение свойства ValidationGroup всех элементов управления, входящих в эту группу. В качестве значения свойства ValidationGroup используется строка, например Login, Registration и т. п.

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

Рис. 5.42. Пример страницы, содержащей несколько групп элементов управления и валидаторов

Комбинирование верификаторов

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

Для интерпретации сообщений об ошибках, генерируемых при использовании нескольких верификаторов с одним элементом управления, необходимо понимать правила проверки вводимых данных, принятые в ASP.NET. Так, все верификаторы за исключением RequiredFieldValidator приравнивают отсутствие введенного значения к вводу правильного значения. Таким образом, при отсутствии введенных данных генерируются одни сообщения (это проверяет RequireFieldValidator ) и другие, если введенное значение находится вне допустимого диапазона или имеет неверный формат.

Для добавления еще одного верификатора и связывания его с текущим полем ввода необходимо добавить его на страницу и установить для него свойства Text, ErrorMessage, ControlToValidate, ValidationGroup.

Краткие итоги

Вопросы построения пользовательского интерфейса являются одними из самых важных при создании Web-приложения. Процесс создания интерфейса отличается от аналогичного процесса при разработке традиционных Windows-приложений.

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

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

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

В состав ASP.NET входит множество различных элементов управления, предназначенных для решения задач организации интерфейса пользователя любой сложности. Одной из основных задач при разработке Web-приложения является организация работы с текстовой информацией. Для этого существуют такие элементы, как Label, TextBox, Table и другие, предоставляющие разработчику большой выбор возможностей организации обработки, вывода на страницу и ввода текстовой информации. При создании пользовательского интерфейса Web-приложения необходимо использовать каскадные таблицы стилей. Visual Studio содержит визуальный редактор стилей, значительно облегчающий их создание.

Содержимое серверных элементов управления может динамически изменяться. Организация этого возможна путем взаимодействия с серверным элементом из программного кода приложения. В реальных приложениях часто возникает необходимость привязки значений элемента управления к какому-либо источнику данных. Таким источником могут быть как таблицы базы данных, так и массивы либо свойства объектов или выражения, объединяющие несколько элементов. Для осуществления такой привязки необходимо выполнить метод DataBind() для всей страницы Web-приложения, а также использовать выражение привязки данных внутри элемента управления.

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

Важной составляющей любого ввода данных является проверка вводимых данных. Такая проверка должна осуществляться как на клиентском компьютере, так и на сервере. Клиентская проверка осуществляется за счет использования программного кода, написанного на языке JavaScript. В ASP.NET реализован удобный механизм организации такой проверки за счет применения верификаторов - специальных элементов управления, размещаемых на Web-странице и позволяющих осуществлять как клиентскую, так и серверную проверку вводимых данных.