< Назад | Далее >

Урок 2.1: Форматирование таблицы данных

Таблица данных на странице all_records.jsp имеет утилитарный внешний вид. На ней отображаются все записи из база данных, а также ссылки на другие страницы, однако выглядит это не очень привлекательно. В этом упражнении недостатки внешнего вида таблицы данных будут устранены за счет добавления таких элементов, как функция разбиения на страницы, правила стилей и рисунки продаваемых товаров.

Переименование заголовков столбцов

Об этой задаче
Зачастую названия столбцов в таблице с данными не должно совпадать с именами столбцов базы данных. В следующих шагах описывается как переименовать столбцы таблицы данных.
  1. Дважды щелкните на странице all_records.jsp на панели Структура предприятия.
  2. Щелкните на заголовке Главная категория в таблице данных.
  3. На панели Свойства перейдите на вкладку h:outputText и вместо значения Главная категория в текстовом поле Значение укажите Категория.
  4. При необходимости измените имена других столбцов.
  5. Сохраните страницу.

Форматирование компонентов вывода

Об этой задаче
Вы можете отформатировать компоненты вывода. В следующих шагах мы отформатируем компонент вывода {ЦЕНА} для отображения в виде денежной единицы, а не обычного числа.
  1. Щелкните на компоненте вывода {ЦЕНА} на странице.
  2. На панели Свойства в выпадающем списке Тип выберите Денежная единица. Теперь цена всех элементов будет отображена как денежная единица, а не обычное число. Для прочих типов данных доступны и другие варианты - проценты, дата и время. Можно также настроить формат компонента вывода для отображения типа данных, не перечисленных на панели Свойства, например, телефонный номер.
  3. Сохраните страницу.

Сортировка данных

Об этой задаче
Сейчас данные показываются беспорядочно. Чтобы создать более организованный список объявлений, упорядочьте его по категории, группировав схожие элементы.
  1. В панели Данные страницы щелкните правой кнопкой мыши на записи all_recordlist (ADS) (Окно > Показать панель > Данные страницы) и выберите в контекстном меню пункт Настроить. Откроется окно Настроить список реляционных записей window opens. Появление предупреждения с сообщением о невозможности установить соединение с базой данных означает, что вы оставили сервер работающим после тестирования Web-сайта. В таком случае нажмите кнопку отмена во всех окнах и остановите сервер в соответствии с инструкциями, приведенными в разделе "Остановка сервера" упражнения Тестирование Web-сайта.
  2. Выберите переключатели Загрузить существующую запись или список записей из области и Повторно использовать определение метаданных из существующей записи или списка записей и нажмите кнопку Далее.
  3. В следующем окне выберите ADS и нажмите кнопку Далее.
  4. В правой части следующего окна нажмите кнопку Упорядочить результаты. Откроется окно Порядок.
  5. На панели Доступные столбцы выберите ГЛАВНАЯ КАТЕГОРИЯ.
  6. Нажмите кнопку > для перемещения столбца ГЛАВНАЯ КАТЕГОРИЯ в область Упорядочить по панели. Это окно должно выглядеть следующим образом:
    Окно Настроить список реляционных записей - вкладка Упорядочить по.
  7. Нажмите кнопку Закрыть, чтобы закрыть окно Порядок.
  8. Нажмите кнопку Готово для применения изменений. Теперь данные будут рассортированы по категории. Сортировку в базе данных можно выполнить по любому столбцу.

Добавление функции разбиения на страницы

Об этой задаче
Вместо отображения каждой записи по одной в таблице с данными, можно использовать разбиение на страницы. При этом записи автоматически разбиваются на страницы заданного размера без создания новых файлов JSP в проекте.
  1. Щелкните по таблице с данными.
  2. В панели Свойства выберите h:dataTableEx в списке тегов HTML слева.
  3. Перейдите на вкладку Опции отображения в области h:dataTableEx.
  4. В поле Число строк на странице введите 5.
  5. Нажмите кнопку Добавить разбиение на страницы. Внизу таблицы с данными появится пример внешнего вида разбиения на страницы. Визуализация разбиения на страницы в проектировщике страниц является заменителем и не отражает фактический вид, так как он будет виден только при загрузке страницы в браузере.
  6. Сохраните страницу. Вы можете поэкспериментировать с разными типами разбиения на страницы и компонента статистики страниц для выбора наиболее подходящего варианта для страницы.

Расположение компонентов в группе элементов в виде списка

Об этой задаче
Вместо ровно одного компонента вывода в каждом столбце таблицы с данными можно сочетать элементы со столбцами для получения более привлекательной разметки. С помощью групп элементов можно упорядочить компоненты, точно так же как и скрытые таблицы HTML. Например, добавив изображения для улучшения облика сайта вы сможете поместить большую часть текстовой информации из объявлений в один столбец и назвать его СВЕДЕНИЯ.
  1. Откройте лоток Расширенные компоненты Faces в панели Палитра. Перенесите компонент Панель - Группа элементов на столбец ЗАГОЛОВОК таблицы данных. Откроется окно Выбрать тип.
  2. В окне Выбрать тип в качестве типа группы элементов выберите Поле и нажмите кнопку OK. Такая группа элементов размещает добавленные в нее компоненты в одном столбце или строке; при необходимости ее можно развернуть горизонтально или вертикально.
  3. Щелкните на группе элементов чтобы выбрать ее.
  4. На панели Свойства в поле Ориентация выберите Вертикальная.
  5. Перенесите компонент {НАЗВАНИЕ} на группу элементов. После добавления компонента в группу элементов поясняющий текст исчезнет.
  6. Перенесите компонент Изображение из лотка Расширенные компоненты Faces палитры на группу элементов. Рекомендуется поместить компонент изображения вниз группы дабы убедиться, что изображение будет размещено под названием.
  7. Щелкните на добавленном компоненте изображения.
  8. В области Размер панели Свойства укажите в полях Ширина и Высота значения 60 и 50 соответственно. Это обеспечит отображение изображений на странице размером 60x50 пикселей, вне зависимости от их истинного размера.
  9. Привяжите компонент изображения к столбцу ФОТО all_recordlist, переместив столбец ФОТО из панели Данные страницы в компонент изображения. Это приведет к тому, что компонент изображения отобразит данные изображения, обнаруженные в столбце ФОТО для каждой записи. Если столбец ФОТО (ByteArray) не показан, в панели Данные страницы щелкните правой кнопкой мыши на записи all_recordlist (ADS) и выберите в контекстном меню пункт Настроить. При необходимости закройте окно URL, нажав кнопку OK. В окне Настроить список реляционных записей нажмите кнопку Далее. Выберите ADS и нажмите кнопку Далее. Выберите переключатель рядом со столбцом ФОТО (ByteArray) и нажмите кнопку Далее.
  10. Щелкните на добавленном рисунке. На вкладке hx:graphicImageEx панели Свойства нажмите кнопку Выбрать объект данных страницы , расположенную рядом с полем Тип. Откроется окно Выбрать объект данных страницы.
  11. Разверните all_recordlist (Service Data Object) > all_recordlist (ADS).
  12. Выберите IMAGETYPE (String).
  13. Нажмите кнопку OK и сохраните страницу.
Результат
Теперь страница должна выглядеть следующим образом:
Текущий внешний вид страницы.

Уточнение разметки с помощью сетки

Об этой задаче
Группа элементов позволяет организовать компоненты наподобие таблицы. Группа элементов типа "список" может содержать одну строку или столбец, но группа элементов типа "сетка" может содержать любое число строк и столбцов. В описанных ниже шагах мы переместим компоненты {ЦЕНА} и {ТЕЛЕФОН} в столбец ОПИСАНИЕ таблицы данных и добавим метки для них.
  1. С помощью указателя мыши перенесите компонент Панель - Группа элементов из лотка Расширенные компоненты Faces палитры на столбец ОПИСАНИЕ таблицы данных. Откроется окно Выбрать тип.
  2. Выберите Сетка в качестве типа добавляемого компонента и нажмите кнопку OK.
  3. Щелкните на новой группе элементов "сетка".
  4. На панели Свойства укажите для числа столбцов значение 2.
  5. Перенесите компонент Вывод из лотка Компоненты Faces палитры на сетку. Этот компонент вывода станет меткой для описания продаваемого элемента. У каждого компонента вывода будет метка вроде этой, расположенная в левой ячейке таблицы.
  6. Щелкните на компоненте Вывод (в проектировщике страниц он отображается в качестве outputText) и с помощью панели Свойства в поле Значение укажите Описание:
  7. Перенесите существующий компонент {ОПИСАНИЕ} к нижнему краю сетки. Если при перемещении компонентов в группе элементов у вас возникли затруднения, попробуйте нажать кнопку мыши и посмотреть на расположение курсора. Оно указывает местоположение компонента после перемещения. Для данного упражнения необходимо отпустить кнопку мыши когда курсор будет находиться справа от предыдущего компонента.
  8. Перенесите другой компонент Вывода из палитры и положите его справа от группы элементов.
  9. На панели свойства в поле Значение укажите Цена:.
  10. Переместите существующий компонент вывода {ЦЕНА} вправо от текста вывода цены.
  11. Аналогичным образом перенесите новый компонент Вывод {ТЕЛЕФОН} и укажите для него метку Телефон:.
  12. Переместите существующий компонент {ТЕЛЕФОН} в группу элементов "сетка" справа от текста вывода телефона. Теперь страница должна выглядеть следующим образом:
    Текущий внешний вид страницы.
  13. Удалите пустые столбцы ЦЕНА, ТЕЛЕФОН из таблицы данных. Для удаления столбца щелкните на нем и откройте панель Свойства. Затем выберите h:dataTable в списке тегов HTML в левой части панели и выберите столбец для удаления из списка в правой части панели, затем нажмите кнопку Удалить.
  14. Щелкните на заголовке в столбце Описание и на панели Свойства в поле Значение укажите Сведения. Теперь страница должна выглядеть следующим образом:
    Текущий внешний вид страницы.
  15. Сохраните страницу и протестируйте ее. Если ранее вы не работали с приложениями на сервере, обратитесь к раздел Урок 1.3: Тестирование Web-сайта.
Результат
В ходе тестирования страница должна выглядеть следующим образом:
Внешний вид страницы в процессе тестирования.

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

Контрольные точки урока

Вы закончили урок 2.1. В этом уроке вы ознакомились с различными способами форматирования страниц.
Теперь вы знакомы со следующими задачами и процедурами:
  • Изменение заголовков столбцов:
  • Сортировка данных в таблице.
  • Разбиение данных на несколько Web-страниц.
  • Изменение разметки таблиц на Web-страницах с помощью групп элементов.
< Назад | Далее >
Комментарии