3. Компоненти відображення дерева даних — Outline

Ми розглянули основні можливості компоненту TreeView. Компонент Outline схожий на нього. Структура дерева теж міститься у властивості Items і доступ до окремих вузлів також здійснюється через цей індексний список вузлів. Але індекси починаються з 1. Наприклад Outline1->Items[1] —>Text — це текст вузла дерева з індексом 1 (першого вузла). Властивість Items має тип TOutlineNode. Його властивості і методи відрізняються від властивостей і методів типу вузлів в TreeView. І заповнюється структура дерева інакше: через властивість Lines типу TStrings. Редактор цієї властивості можна викликати, клацнувши на кнопці з багатокрапкою біля властивості Lines у вікні Інспектора Об'єктів. Ви потрапите у вікно, в якому можете записати тексти всіх вузлів, роблячи відступи, щоб виділити рівні вузлів. Текст повинен виглядати так, як вище описувалося представлення структури в текстовому файлі.

Піктограми, які супроводжують зображення вузлів, задаються параметрами PictureOpen (піктограма розгорненого вузла), PictureClosed (піктограма згорнутого вузла), PictureMinus (піктограма символу "—" біля розгорненого вузла, що має спадкоємців), PicturePlus (піктограма символу "+" вузла, що має спадкоємців, але не розгорненого), PictureLeaf (піктограма вузла, що не має спадкоємців — листа дерева). Основна відмінність піктограм компоненту Outline полягає в тому, що вони однакові для всіх вузлів одного типа, тоді як в TreeView можна задавати піктограми індивідуально для кожного вузла.

Програмно змінювати структуру дерева можна за допомогою методів Add, AddObject (додавання вузла в дерево), Insert, InsertObject (вставка вузла в задану позицію), AddChild, AddChildObject (вставка дочірнього вузла), Delete (видалення вузла). Індекс виділеного користувачем вузла можна визначити через властивість SelectedItem. Якщо SelectedItem = 0, означає жоден вузол не виділений. Текст виділеного вузла визначається властивістю Text: наприклад:

Outline1->Items[Outlinel->SelectedItem]->Text;

Втім, той же самий текст дасть і вираз:

Outline1->Lines->Strings[Outline1->SelectedItem - 1];

4. Відображення інформації в стилі папок Windows — компонент ListView

Компонент ListView дозволяє відображати в стилі Windows дані у вигляді списків, таблиць, крупних і дрібних піктограм. З подібним відображенням всі ви стикаєтеся, розкриваючи папки Windows.

Стиль відображення інформації визначається властивістю ViewStyle, яка може встановлюватися в процесі проектування або програмно під час виконання. Властивість може приймати значення: vsіcon — крупні значки, vsSmallіcon — дрібні значки, vslist — список, vsReport — таблиця.

Розглянемо основні властивості і методи компоненту ListView. Відкрийте новий проект і перенесіть на нього ListView. Основна властивість компоненту ListView, яка описує склад інформації, що відображається — Items. Під час проектування його може бути встановлено спеціальним редактором, що викликається клацанням на кнопці з багатокрапкою поряд з цією властивістю у вікні Інспектора Об'єктів. Вікно редактора схоже на вікно, описане для компоненту TreeView. Так само в ньому задаються нові вузли кнопкою NewItem і дочірні вузли — кнопкою NewSubltem. Тільки сенс дочірніх вузлів інший: це інформація, яка з'являється тільки в режимі vsReport — у вигляді таблиці.

Задайте в редакторі деяку кількість елементів і дочірніх вузлів. Сенс їх залежить від конкретного завдання. Це можуть бути деякі вироби і цехи, в яких вони повинні проходити обробку, або це можуть бути товари і пункти, куди їх треба відправити, і т.п.

Для кожного вузла задається властивість Cаption — напис, що з'являється біля піктограми. Для дочірніх вузлів ця властивість відповідає напису, що з'являється в елементах таблиці в режимі vsReport.

Властивість ImageIndex визначає індекс піктограми. Індекс відповідає спискам зображень, що зберігаються в окремих компонентах ImageList. Вказівки на ці компоненти ви можете задати у властивостях LargeImages для режиму vsІcon і SmallІmages для режимів vsSmallІcon, vsList і vsReport. Індекси починаються з 0. Якщо ви вкажете індекс 1 (значення за умовчанням), піктограми зображатися не будуть.

Властивість StаteIndex в панелі ItemProperties дозволяє додати другу піктограму в даний об'єкт. Подібна піктограма може просто служити додатковою характеристикою об'єкту. Індекс, що указується як StаtеIndex, відповідає списку зображень, що зберігаються в окремому компоненті ImageList, заданому у властивості StateІmages компоненту ListView.

Спосіб впорядковування елементів визначається відповідним завданням властивості SortType.

Властивість Checkboxes, встановлена в true, визначає відображення індикатора з прапорцем біля кожного елементу списку. Тільки врахуйте, що властивість спрацьовує тільки у випадку, якщо ви не встановили описану раніше властивість StateІmages. Інакше кажучи, біля піктограми може з'являтися або індикатор, або додаткова піктограма.

Індикатори елементів можна встановлювати програмно або їх може змінювати користувач під час виконання. Тоді дізнатися програмно, чи встановлений індикатор в деякому елементі Items[i], можна перевіркою його властивості Checked. Наприклад:

for (int і=0; i<ListView1->Items->Count; i++)

if (ListViewl->Items->Item[i]->Checked)

ShowMessage("Вибраний елемент "+ListViewl->Items->Item[i]->Caption);

Приведений оператор перевіряє всі елементи і відображає повідомлення про тих, в яких встановлений індикатор. У реальному застосуванні, звичайно, замість такого повідомлення повинні робитися якісь дії.

Властивості HotTrack і HotTrackStyles визначають появу виділення при переміщенні курсорe над елементом списку і стиль цього виділення. Властивість HoverTime задає в мілісекундах затримку появи такого виділення.

Властивість списку Selected визначає виділений користувачем елемент списку. Цим можна скористатися для виконання якихось дій. Наприклад, якщо потрібні якісь дії при подвійному клацанні на якомусь елементі, то в обробнику події OnDblCIick компоненту ListView можна написати оператори:

if (ListView1->Selected != NULL)

ShowMessage{ListViewl->Selected->Caption);

Оператор if перевіряє, чи виділений якийсь елемент, тобто чи проведене подвійне клацання на елементі, а не просто на порожньому полі списку. Якщо клацання на елементі, то з ним можна провести якісь дії (у даному прикладі натомість просто відображається повідомлення).

Властивість Columns визначає список заголовків таблиці в режимі vsReport при властивості ShowColumnHeaders (показати заголовки), встановленій в true. Властивість Columns можна задати в процесі проектування спеціальним редактором заголовків, що викликається подвійним клацанням на компоненті ListView або клацанням на кнопці з багатокрапкою поряд з властивістю Columns у вікні Інспектора Об'єктів. Кнопка AddNew (крайня ліва) дозволяє додати нову секцію в заголовок, кнопка DeleteSelected (друга зліва) — видалити секцію, кнопки MoveSelectedUp і MoveSelectedDown (кнопки із стрілками) дозволяють змінювати послідовність секцій.

Після того, як ви додали секцію і встановили на ній курсор, у вікні Інспектора Об'єктів з'явиться перелік властивостей цього об'єкту. У властивості Caption ви можете задати текст заголовка. У властивості ImageІndex можете вказати індекс піктограми, яка з'явиться перед заголовком. Властивості MinWidth і MaxWidth визначають відповідно мінімальну і максимальну ширину заголовка в пікселах. Тільки в цих межах користувач може змінювати ширину заголовка курсором миші. Значення ширини за умовчанням задається значенням властивості Width. При зміні ширини секції під час виконання генерується подія OnSectionResize.

Контрольні питання:

1. У чому полягає перевага застосування спеціалізованих компонентів для відображення ієрархічних даних?

2. Яким чином може створюватися та редагуватися структура ієрархічних даних на етапі конструювання?

3. Яким чином може створюватися та редагуватися структура ієрархічних даних в процесі виконання програми?

4. За рахунок чого елементам структури можна співставляти графічні зображення?

5. Які методи застосовують для зчитування значень елементів структури?

6. Від чого залежить стиль відображення інформації у компонента ListView?