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

Работа с текстом

Одной из наиболее часто возникающих задач при создании Web-приложения является работа с текстом. Для этого существует несколько различных способов, начиная от уже известного Response.Write("Текст") и заканчивая использованием элемента Label или TextBox с установленным в True значением свойства ReadOnly.

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

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

Рассмотрим работу с серверным элементом управления Table. Так как он относится к разряду серверных элементов, им возможно управлять в коде приложения, добавляя и удаляя строки и столбцы, а также изменяя их содержимое. Эти же операции можно проделать и в процессе разработки с использованием стандартных средств визуального редактирования Visual Studio. Для добавления элементов (столбцов и строк) к элементу Table в процессе разработки необходимо выполнить следующие операции:

1. Добавить элемент Table на страницу.
2. В панели Properties выбрать пункт Rows и нажать кнопку.
3. В открывшемся окне TableRow Collection Editor добавить новую строку, нажав на кнопку Add ( рис. 5.4).
   

   
   Рис. 5.4. Окно редактирования элементов строки таблицы
4. В свойствах строки при необходимости добавить столбцы, выбрав пункт Cells.
5. Отредактировать свойства строк и столбцов, установив необходимые параметры.

Например, для создания таблицы следующего вида:

необходимо установить значения свойств объекта Table, как показано ниже. После того, как таблица добавлена на страницу, а в нее добавлены три строки, в каждую из которых добавлено по три столбца, а в свойства Text каждого столбца введены значения, как показано в примере, таблица в окне браузера будет выглядеть следующим образом ( рис. 5.5):

Рис. 5.5. Результат отображения таблицы в окне браузера

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

Для создания рамки, обрамляющей всю таблицу, необходимо установить значения для следующих свойств всей таблицы:

BorderColor=Black
BorderStyle=Solid
BorderWidth=1

В результате таблица приобретает контур, представляющий собой сплошную линию черного цвета толщиной один пиксель ( рис. 5.6).

Рис. 5.6. Отображение контура таблицы

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

GridLines=Both
CellPadding=1
CellSpacing=0

Открыть окно TableRow Collection Editor, затем открыть окно установки свойств ячеек строки и для каждой ячейки установить следующие свойства:

BorderColor=Black
BorderStyle=Solid
BorderWidth=1

В результате будет получена следующая таблица ( рис. 5.7рис. 5.7):

Рис. 5.7. Отображение границ таблицы

Как видно, процедура установки необходимых свойств таблицы достаточно трудоемка. Для упрощения этого процесса можно воспользоваться возможностями каскадных таблиц стилей CSS. В качестве примера создадим таблицу, аналогичную ранее созданной. Для этого поместим на страницу серверный элемент управления table и заполним его ячейки данными. Результат будет выглядеть следующим образом ( рис. 5.8):

Рис. 5.8. Размещение на странице серверного элемента Table

Создадим новую таблицу стилей и добавим ее к данной Web-странице. Для этого выполним команду главного меню Website Add New Item и в открывшемся окне выберем Style Sheet ( рис. 5.9).

Рис. 5.9. Окно добавления к сайту таблицы стилей

После нажатия на кнопку Add Visual Studio создаст новый файл StyleSheet.css в каталоге Web-приложения и откроет редактор его содержимого, а также дополнительное окно, отображающее иерархию создаваемых стилей ( рис. 5.10).

Рис. 5.10. Редактирование содержимого таблицы стилей

Видно, что в качестве заготовки создан лишь один стиль для тела HTML-документа. Теперь мы по своему усмотрению можем добавлять стили для различных элементов документа. Хотя файл .css представляет собой обычный текстовый файл, Visual Studio предоставляет средства визуального создания и редактирования стилей.