1 Загальна характеристика

Панелі та компоненти зовнішнього оформлення

1 Загальна характеристика

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

У таблиці1 наведено перелік панелей, що обслуговують їх компонентів та компонентів зовнішнього оформлення.

Таблиця 1 Панелі та компоненти, що їх обслуговують

GroupBox(групове вікно)

Є контейнером, що поєднує групу зв'язаних органів управління, таких як радіокнопкиRadioButton, контрольні індикаториCheckboxі т.д.

Є контейнером для групування органів управління та менших контейнерів. Панель можна також використовувати для побудови смуг стану, інструментальних панелей, палітр інструментів.

Використовується для малювання прямокутної рамки, зображеної як виступаюча або втоплена.

ScrollBox(вікно з прокручуванням)

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

Splitter(розділювач панелей)

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

ControlBar(інстументальна панель)

Використовується для розміщення інструментальної панелі.

PageControl(багатосторінкове вікно)

Дозволяє створювати сторінки в стилі Windows 95/98, керовані закладками або іншими органами керування, для збереження місця на робочому столі.

StatusBar(смуга стану)

Смуга стан програми, при необхідності - на декількох панелях.

ToolBar(інструментальна панель)

Інструментальна панель для швидкого доступу до часто використовуваних функцій програми.

2 Панелі загального призначення - компоненти Panel, GroupBox, Bevel, ScrollBox, Splitter

На рис. 1 наведено приклад, що демонструє вигляд таких панелей, якPanel,GroupBox,Bevel,ScrollBox. У лівій частині форми розміщені компоненти Panel із різними значеннями параметрів. З цих компонентів ми почнемо розгляд панелей.

панелей
Мал. 1Приклад панелей загального призначення

ПанеліPanelвикористовуються найбільш широко. З їхньою допомогоюкомпонуються різні елементи інтерфейсу(кнопки, вікна редагування, списки), функціонально пов'язані один з одним. Такий функціональний зв'язок має підтримуватись і зоровим зв'язком — об'єднанням відповідних елементів у межах однієї панелі. Панелі Panel можуть використовуватися для організації інструментальних панелей, смуг стану і т.п., хоча для цих цілей є і спеціалізовані компоненти, які будуть розглянуті пізніше.

Одним із призначень панелей є також групування таких елементів, що управляють, як RadioButton — радіокнопки. Всі радіокнопки, розташовані на панелі, працюють як узгоджена група: у будь-який момент може бути обрана лише одна. Аналогічно узгодженою групою працюють і розташовані на панелі швидкі кнопки SpeedButton, якщо вони мають однакове значення якості GroupIndex. У той же час SpeedButton, розташовані на різних панелях або на панелі та формі, не утворюють зв'язаної групи навіть за однакового значення GroupIndex.

Зовнішній вигляд панелі Panel визначається сукупністю параметрівBevelInnerстиль внутрішньої частинипанелі,BevelOuterстиль зовнішньоїчастинипанелі,BevelWidthшириназовнішньої частини панелі,BorderStyleстиль бордюру,BorderWidthширина бордюру. Результат поєднання деяких значень цих параметрів показано на рис. 1. Верхня панель відповідає параметрам за замовчуванням. Нижня панель відповідає випадку, коли не визначено стиль жодної з областей панелі (значення всіх параметрів рівні None). У цьому випадку сама панель ніяк не виділяється на формі. Видно лише напис на ній (властивість Caption), якщо напис заданий, і, звичайно, видно ті компоненти, які розміщуються на панелі.

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

У бібліотеці Delphi є спеціальний компонент - Splitter , який дозволяє легко здійснити це. Розглянемо це з прикладу. Нехай ви хочете мати у додатку форму, що містить три панелі, які розташовуються так, як показано на рис. 2. При зміні розміром вікна панель Panel1 повинна в будь-якому випадку займати всю нижню частину вікна, не збільшуючись у висоту. Панель Panel2 повинна займати ліву частину вікна, змінюючи при зміні розмірів вікна свою висоту, але не змінюючи ширину. А панель Panel3 повинна займати всю частину вікна, що залишилася. Крім того, ми хочемо забезпечити користувачеві можливість змінювати положення кордону між панелями Panel2 і Panel3, розширюючи одну з цих панелей івідповідно стискаючи іншу.

Виходячи з наших вимог, властивість Align треба встановити у панелі Panel1 в alBottom (вирівнювання по нижньому краю вікна), у панелі Panel2 — в alLeft (вирівнювання по лівому краю вікна), у панелі Panel3 — в alClient (вирівнювання по всій частині клієнтської області вікна) ). А між Panel2 та Panel3 треба розмістити Splitter – роздільник.

ScrollBox

Мал. 2Панелі з роздільником

Послідовність проектування такої форми може бути наступною;

Розмістіть на формі панель Panel1 і задайте Align = alBottom. Панель займе нижню частину вікна.

Розмістіть на формі панель Panel2 і задайте Align = alLeft. Панель займе ліву частину вікна.

Розмістіть на формі роздільник Splitter і задайте Align = alLeft (втім, це значення Align встановлено за замовчуванням). Розділювач притиснеться до правої сторони панелі Panel2, яка вже вирівняна в той самий бік. Розділювач завжди треба вирівнювати лише після вирівнювання відповідної панелі, так як інакше він притиснеться просто до краю форми.

Після цього можна розмістити на формі панель Panel3 і задати Align = alClient. Розділювач виявиться затиснутим між Panel2 і Panel3.

Після запуску програми можна переконатися, що, потягнувши курсором миші за межі поділу між панелями, кордон переміщатиметься.

Розглянемо властивості компонента Splitter. ВластивістьResizeStyleвизначаєповедінкарозділювача при переміщенні його користувачем. За умовчанням ця властивість дорівнюєrsPattern. Це означає, що поки користувач тягне курсором миші кордон, сам роздільник не переміщається і панелі теж залишаються колишніми розмірами. Переміщується лише шаблон лінії, вказуючи місце наміченого переміщення кордону. Лишепісля того, як користувач відпустить кнопку миші, роздільник переміститься та панелі змінять свої розміри. Фактично така ж картина спостерігається, якщо встановити ResizeStyle =rsLine. При ResizeStyle =rsUpdateу процесі перетягування кордону користувачем роздільник також переміщається і розміри панелей постійно змінюються. Це може бути зручно, якщо користувач хоче встановити розмір панелі таким, щоб на ній була видна якась конкретна область. Але оскільки процес перетягування в цьому випадку супроводжується постійним перемальовуванням панелей, спостерігається неприємне мерехтіння зображення. Отже, цей режим можна рекомендувати тільки в дуже рідкісних випадках. Якщо встановити ResizeStyle= rsNone, то в процесі перетягування кордону не переміщається ні сама межа, ні лінія, що її зображує. Навряд чи це зручно користувачеві, тому я не можу уявити випадку, коли було б вигідно використовувати цей режим.

ВластивістьMinSizeкомпонента Splitter встановлюємінімальний розміру пікселях обох панелей, між якими затиснутий роздільник. Завдання такого мінімального розміру необхідно, щоб при переміщеннях кордону панель не стиснулася до нульового розміру або до такої величини, при якій на ній зникли б якісь необхідні для роботи елементи управління. На жаль, як ви самі можете переконатися, експериментуючи з компонентом Splitter, властивість MinSize не завжди спрацьовує правильно. До того ж ця властивість відноситься до обох панелей, межа між якими переміщається, а в ряді випадків бажано окремо встановити різні мінімальні розміри однієї та іншої панелі. Це простіше (і надійніше) зробити, поставивши в панелях відповідні значення властивостіConstraints. Наприклад, якщо ви в описаному вище тестовому додатку поставите ввластивості Constraints в панелі Panel2 значення MinWidth = 50, а в панелі Panel3 MinWidth = 100, то саме тільки до таких розмірів у процесі виконання програми користувач зможе змінювати ці панелі.

Компонент Splitter має подіюOnMoved, яканастає після кінця переміщення кордону. У обробнику цієї події можна передбачити, якщо необхідно, впорядкування розміщення компонентів на панелях, розміри яких змінилися: перемістити якісь мітки, змінити розміри компонентів тощо.

ПанельGroupBoxне має таких широких можливостей завдання різних стилів оформлення, як Panel. Але вона має вбудовану рамку з написом (рис. 1), яка зазвичай використовується для виділення на формі групи функціонально об'єднаних компонентів. Жодних особливих властивостей, відмінних від вже розглянутих, панель GroupBox не має.

КомпонентBevelформально не є панеллю, він не може бути контейнером для компонентів. Наприклад, за допомогою Bevel не можна згрупувати радіокнопки. Однак, чисто зорово компонент Bevel може використовуватися як схожість панелі. На рис. 1 у нижній правій частині вікна представлені різні варіанти оформлення Bevel.

Стиль відображенняBevel визначається властивістюStyle, яка може набувати значеньbsLowered— втоплений, іbsRaised— піднятий. Аконтур компонентавизначається властивістюShape, яка може приймати значення:bsBox— прямокутник,bsFrame— рамка,bsSpacer— пунктирна рамка,bsTopLine,bsBottomLine,bsLeftLine,bsRightLine— відповідної верхня, нижня, ліва та права лінії. Залежно від значення Style лінії можуть бути потопленими чи виступаючими. Усі перелічені варіанти наведено наМал. 1.

Зупинимося тепер на компонентіScrollBoxпанелі з прокручуванням. Цей компонент призначений для створення області, в якій можуть розміщуватися компоненти, що займають велику площу, ніж сам ScrollBox. Наприклад, компонент ScrollBox можна використовувати для розміщення довгих текстових рядків або великих інструментальних панелей, які з міркувань економії площі вікна недоцільно відображати повністю. У прикладі рис. 1 в ScrollBox розміщена панель з написом: «Це ScrollBox, що містить панель з довгим написом». У межах ScrollBox видно лише частину цієї панелі. Якщо розміриScrollBoxменше, ніж розміщені компоненти, то з'являються смуги прокручування, які дозволяють користувачеві переміщатися по всіх розміщених у ScrollBox компонентах.

Розмістити в межах невеликої області ScrollBox великі компоненти або багато компонентів, що займають у великій площі, можна в процесі проектування, наприклад, за допомогою такого прийому. Збільште часово розмір ScrollBox так, щоб у цьому компоненті помістилося все, що ви хочете розмістити. Проведіть потрібне розміщення. А потім зменшіть розміриScrollBoxдо потрібних.

ВластивістьBorderStyleвизначаєстиль рамкикомпонента ScrollBox. ВластивістьAutoScrollдозволяє встановити автоматичну появу необхідних смуг прокручування, якщо розмір розміщених компонентів перевищує розмір області по горизонталі, вертикалі або в обох вимірах. Якщо з якихось міркувань це небажано, ви можете самі керувати появою горизонтальної та вертикальної смуг за допомогою властивостейHorzScrollBarіVertScrollBarвідповідно. Але в цьому випадку ви повинні самі задавати ряд властивостей смуги прокручування і, насамперед,Rangeрозмір упікселяхпрокручується області. Значення переміщення при одноразовому натисканні користувачем кнопки прокручування може розраховуватися компонентом автоматично виходячи з розмірів області та вікна, якщовластивість смугипрокручуванняSmoothвстановлено вtrue. В іншому випадку ви повинні задати величину одиничного переміщення у властивостіIncrement.