Принципы разработки пользовательского интерфейса интернет-приложения
Работа с текстом
Одной из наиболее часто возникающих задач при создании Web-приложения является работа с текстом. Для этого существует несколько различных способов, начиная от уже известного Response.Write("Текст") и заканчивая использованием элемента Label или TextBox с установленным в True значением свойства ReadOnly.
Таблицы являются абсолютно необходимым элементом, используемым для отображения данных на странице, т. к. достаточно много информации бывает представлено в виде таблиц; кроме того, с помощью таблиц возможно осуществлять разметку страницы и позиционирование элементов.
Все таблицы можно условно разделить на две группы: предназначенные для создания и отображения простых динамических таблиц и списков и предназначенные для создания сложных таблиц и списков, содержащих другие элементы управления. Обычно сложные таблицы и списки бывают связаны с источниками данных.
Рассмотрим работу с серверным элементом управления Table. Так как он относится к разряду серверных элементов, им возможно управлять в коде приложения, добавляя и удаляя строки и столбцы, а также изменяя их содержимое. Эти же операции можно проделать и в процессе разработки с использованием стандартных средств визуального редактирования Visual Studio. Для добавления элементов (столбцов и строк) к элементу Table в процессе разработки необходимо выполнить следующие операции:
- Добавить элемент Table на страницу.
- В панели Properties выбрать пункт Rows и нажать кнопку.
- В открывшемся окне TableRow Collection Editor добавить новую строку, нажав на кнопку Add ( рис. 5.4).
- В свойствах строки при необходимости добавить столбцы, выбрав пункт Cells.
- Отредактировать свойства строк и столбцов, установив необходимые параметры.
Например, для создания таблицы следующего вида:
необходимо установить значения свойств объекта Table, как показано ниже. После того, как таблица добавлена на страницу, а в нее добавлены три строки, в каждую из которых добавлено по три столбца, а в свойства Text каждого столбца введены значения, как показано в примере, таблица в окне браузера будет выглядеть следующим образом ( рис. 5.5):
Как видно, у данной таблицы отсутствуют как внешние, так и внутренние рамки, разделяющие ячейки. Создание рамок будет происходить в несколько этапов.
Для создания рамки, обрамляющей всю таблицу, необходимо установить значения для следующих свойств всей таблицы:
BorderColor=Black BorderStyle=Solid BorderWidth=1
В результате таблица приобретает контур, представляющий собой сплошную линию черного цвета толщиной один пиксель ( рис. 5.6).
Теперь нужно создать рамки для ячеек таблицы. Для этого необходимо выполнить следующие действия. Установить свойства
GridLines=Both CellPadding=1 CellSpacing=0
Открыть окно TableRow Collection Editor, затем открыть окно установки свойств ячеек строки и для каждой ячейки установить следующие свойства:
BorderColor=Black BorderStyle=Solid BorderWidth=1
В результате будет получена следующая таблица ( рис. 5.7рис. 5.7):
Как видно, процедура установки необходимых свойств таблицы достаточно трудоемка. Для упрощения этого процесса можно воспользоваться возможностями каскадных таблиц стилей CSS. В качестве примера создадим таблицу, аналогичную ранее созданной. Для этого поместим на страницу серверный элемент управления table и заполним его ячейки данными. Результат будет выглядеть следующим образом ( рис. 5.8):
Создадим новую таблицу стилей и добавим ее к данной Web-странице. Для этого выполним команду главного меню Website Add New Item и в открывшемся окне выберем Style Sheet ( рис. 5.9).
После нажатия на кнопку Add Visual Studio создаст новый файл StyleSheet.css в каталоге Web-приложения и откроет редактор его содержимого, а также дополнительное окно, отображающее иерархию создаваемых стилей ( рис. 5.10).
Видно, что в качестве заготовки создан лишь один стиль для тела HTML-документа. Теперь мы по своему усмотрению можем добавлять стили для различных элементов документа. Хотя файл .css представляет собой обычный текстовый файл, Visual Studio предоставляет средства визуального создания и редактирования стилей.