Data View. Базовые компоненты Extension Library

Продолжаем рассматривать основные компоненты Extension Library. Это 3-ий выпуск и он будет посвящен такому компоненту, как Data View.

1. Application Layout

2. Navigator

3. Data View

4. Form Table (+Form Layout Column, Form Layout Row)

5. Dialog (+ Dialog Content, Dialog Button Bar)

6. Tooltip Dialog

--- Дополнительно ---

7. Widget Container

8. Bread Crumbs

Data View

Основное назначение компонента - отображение коллекции данных (документов). Это прямой наследник стандартного компонента View Panel , но с бОльшими возможностями. Он используется как для стандартных браузеров, так и для отображения на мобильных устройствах.

Итоговый вид отображаемого будет похож на вот этот. отображение представления, построенное на основе этого компонента имеет некоторые вполне конкретные области:

- Основное содержание пункта, включающее: основной текст и дополнительные данные или действия

- Дополнительные детали (и возможность их сворачивания/разворачивания)

- Дополнительные данные (колонки), отличающиеся меньшим размером шрифта

- Отображение иконок

При добавлении компонента предлагается:

- выбрать тип источника данных
- указать базу (для Domino View), по-умолчанию текущая
- выбрать/указать название представления
- имя компонента для обращения к нему

Что очень удобно в XPages - буквально все параметры могут быть вычисляемые, а это значит, например источник данных, вплоть до базы данных может быть вычислен на лету и отображен.

В отличии от простого View Panel, который при добавлении предлагает выбрать колонки для отображения и собственно сразу готов в работе, Data View необходимо сконфигурировать, а именно:

1. Указать источник данных для основной колонки

Идем: AllProperties -> format -> summaryColumn -> "+", добавится основная колонка, в ее свойстве columnName необходимо указать программное название колонки в представлении.

Она указывается на последней вкладке свойств колонки.

Этого уже достаточно, чтобы компонент начал отображать данные.

2. Отображение названий колонок

Можно зайти в основные опции компонента и выставить галку "Show column titles" или AllProperties -> format -> columnTitles = true

Далее для указания названия конкретной колонки (в данном случае основной), нужно указать его в AllProperties -> format -> summaryColumn -> columnTitle

3. Отображение дополнительной детальной информации

Место для помещения деталей по каждому документ обозначено как "detail" на компоненте. Для деталей могут быть настроены следующие опции:

- Детали можно сворачивать/разворачивать: AllProperties -> format -> collapsibleDetail

- Разворачивать детали при открытии представления: AllProperties -> basic -> expandedDetail

- Загружать детали при открытии представления AllProperties -> basic -> detailsOnClient. Если false - при каждом разворачивании деталей будет обращение к серверу за данными. Соответственно: либо быстрее загружаем представление изначально, но потом подгружаем каждый раз, либо грузим все сразу.

4. Ответные документы

Если представление отображает иерархию документов, компонент все сделает сам. Единственное, для возможности сворачивать/разворачивать ответные документы, нужно поставить опцию: AllProperties -> format -> collapsibleRows

5. Прокрутка результатов выборки и количество отображаемых результатов

Отображение коллекции  данных на Web неразрывно связано с возможностью прокрутки результатов выборки. Для этого используется стандартный компонент Pager. Для Data View есть 6 мест, куда могут быть добавлены Pager - 3 наверху и 3 внизу.

Для управлением количества отображаемых результатов на одной странице используется свойство AllProperties -> data -> rows

6. Дополнительные колонки

Дополнительные колонки добавляются через AllProperties -> format -> extraColumns -> "+"

Для указания источника данных (колонки) используется свойство viewExtraColumn -> columnName. а для задания названия columnTitle.

Дополнительные колонки прижаты к правому краю представления и меньше по шрифту.

7. Страница для отображения содержимого документа
Основная колонка в исходном варианте - ссылка. Можно указать страницу, открываемую по-умолчанию для отображения содержимого документа. Указывает это в AllProperties -> basic -> pageName

Пример работы компонента можно посмотреть в Demo-приложении. Как любитель морской тематики позволил себе для демонстрации взять в качестве данных суда :)