Опубликован: 25.09.2008 | Уровень: специалист | Доступ: платный
Лекция 5:

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

Аннотация: Рассматриваются вопросы создания пользовательского интерфейса интернет-приложения. Рассматриваются принципы позиционирования элементов пользовательского интерфейса, перечисляются основные интерфейсные элементы, используемые в ASP.NET. Рассматриваются принципы использования основных интерфейсных элементов для вывода информации на Web-страницу, а также организации ввода данных. Описываются возможности применения каскадных таблиц стилей для оформления внешнего вида элемента управления и всей страницы. Приводятся примеры динамического управления содержимым страницы с использованием элементов программирования, рассматриваются простейшие примеры осуществления привязки элементов управления к данным. Рассматриваются базовые принципы организации проверки вводимых данных.
Ключевые слова: пользовательский интерфейс, интерфейс, браузер, HTML, css, visual, позиционирование, меню, tools, designer, positioning, доступ, ПО, Toolbox, элементы управления, AdRotator, input file, FileUpload, ViewState, операции, таблица, text, контур, collection, editor, каскадные таблицы стилей, Add, new, item, style, sheet, файл, класс, пункт, rule, переключатель, class, имя класса, build, тег, значение, время выполнения, пользователь, поле, список, ID, базы данных, ASP, net, массив, выражение, определение, переменная, функция, целый, БД, отображение, объект, место, координаты, графическая карта, гиперссылка, Окружность, прямоугольник, вывод, приложение, сервер, Размещение, стиль оформления, форматирование, информация, enter, приветственное сообщение, командная кнопка, валидатор, отправка, диапазон, тип данных, класс символов, квантификатор, MSDN, поиск, regular expression, корректность, e-mail, пользовательская процедура, алгоритм, относительное позиционирование

Цель лекции: изучить принципы построения пользовательского интерфейса, рассмотреть вопросы использования основных серверных элементов управления, применяемых для создания Web-приложений, рассмотреть вопросы организации ввода данных от пользователя и их проверки.

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

При построении Web-приложения необходимо учитывать тот факт, что его интерфейс отображается в окне браузера и, следовательно, ограничен его возможностями. Кроме того, как известно, браузер способен отображать страницу, описанную с помощью языка HTML. На сегодняшний день использование HTML без CSS является неэффективным, т.к. CSS способна значительно расширить базовые возможности HTML, связанные с позиционированием элементов внутри страницы, поэтому при рассмотрении дальнейших примеров предполагается, что читатель владеет базовыми знаниями CSS.

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

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

  • Абсолютное позиционирование (absolutely positioned) позволяет располагать элементы в точности там, куда их помещает разработчик. При этом элементы управления имеют абсолютное положение на странице.
  • Относительное позиционирование (relatively positioned) очень похоже на абсолютное с той разницей, что позиция элемента задается относительно элемента, имеющего статическое расположение на странице.
  • Статическое позиционирование (statically positioned), при котором положение элементов управления определяется относительно других элементов управления, размещенных на странице. В этом случае все элементы располагаются последовательно один за другим.
  • Без заданного атрибута позиционирования (no positioning attribute) - здесь редактором удаляется любая информация относительно положения элемента управления. При этом используется статическое позиционирование.

Чтобы задать способ позиционирования элементов, необходимо открыть окно свойств Visual Studio с помощью пунктов меню Tools \Rightarrow Options, в открывшемся окне Options выбрать раздел HTML Designer \Rightarrow CSS Positioning. В открывшемся окне свойств, изображенном на рис. 5.1, нужно выбрать соответствующий режим позиционирования.

Окно свойств среды Visual Studio 2005

Рис. 5.1. Окно свойств среды Visual Studio 2005

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

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

<asp:Button ID="Button1" runat="server" Style="z-index: 100;
 left: 436px; position: absolute;top: 187px" Text="Button" />
<asp:Button ID="Button2" runat="server" Style="left: 245px;
 position: relative; top: 266px" Text="Button" />
<asp:Button ID="Button3" runat="server" Style="position: static"
 Text="Button" />

Для элемента Button1 использовалось абсолютное позиционирование, для Button2 - относительное, Button3 - статическое.

Для создания пользовательского интерфейса Web-приложения возможно использование как серверных, так и HTML-элементов управления. Как известно, доступ к серверным элементам управления возможен из кода приложения, что дает больше возможностей по управлению ими. Однако серверные элементы требуют больше ресурсов, т. к. для них необходимо сохранение значений атрибутов в состоянии вида.

Доступ ко всем элементам управления, в том числе и к HTML-элементам, осуществляется посредством панели инструментов Toolbox, которая состоит из нескольких разделов. Выбрав соответствующий раздел, Вы получаете доступ к его элементам управления. На рис. 5.2 представлен раздел HTML панели инструментов Toolbox.

Раздел HTML окна панели инструментов

Рис. 5.2. Раздел HTML окна панели инструментов

Серверных элементов управления гораздо больше, они расположены в разделе Standart панели инструментов Toolbox ( рис. 5.3).

Раздел Standard панели инструментов

Рис. 5.3. Раздел Standard панели инструментов

Если сгруппировать HTML и серверные элементы управления по видам задач программирования, можно получить следующую таблицу [ 2 ] :

Задача HTML-элементы Серверные элементы
Отображение текста Input (Text), Textarea Label, TextBox, Literal
Отображение таблиц Table Table, DataGrid
Выбор значения из списка Select DropDownList, ListBox, DataList, Repeater
Исполнение команд Input (Button), Input (Reset), Input (Submit) Button, LinkButton, ImageButton
Установка значений Input (CheckBox), Input (Radio) CheckBox, CheckBoxList, RadioButton, RadioButtonList
Отображение графики Image Image, ImageButton
Работа с датами - Calendar
Демонстрация рекламных изображений - AdRotator
Отображение горизонтальной линии Horizontal Rule Literal
Получение файлов от клиентов Input (File) FileUpload
Сохранение введенных на странице данных Input (Hidden) ViewState
Проверка вводимых данных Страничные сценарии RequiredFildValidator, RangeValidator, RegularExpression Validator, CompareValidator, CustomValudator, ValidationSummary
Igor Chelyadinski
Igor Chelyadinski
Беларусь, Минск, №54, 2013
Корсаков Сергей
Корсаков Сергей
Россия