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

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. Нажмите кнопку Готово для применения изменений. Теперь данные будут рассортированы по категории. Сортировку в базе данных можно выполнить по любому столбцу.

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

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. В этом уроке вы ознакомились с различными способами форматирования страниц.