НОУ ІНТУІТ, Лекція, Робота з компонентами

Панель та TSplitter

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

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

У вас на формі з'явиться якась прямокутна освіта, в центрі якої буде написаноPanel1- ім'я компонента, яке Lazarus присвоїв за умовчанням. Якщо ми будемо встановлювати інші панелі,Lazarusназве їхPanel2,Panel3і т.д. Якщо на формі у нас буде тільки одна панель, то цифру в назві (властивість Name) взагалі можна буде прибрати. В даному випадку у нас буде кілька панелей, так що залишимо панелі ім'я, яке їй надавLazarusза замовчуванням. Розглянемо деякі властивості панелей, якими нам часто доведеться користуватися (компонент Panel1 при цьому повинен бути виділений).

Name	- Ім'я панелі. Якщо її перейменовуватимемо, то в цій властивості.
Caption	- текст у центрі панелі, у разі, цеPanel1. Цей текст дуже рідко використовується, його зазвичай видаляють, щоб панель була порожньою. Ми також очистимо цей текст.
Left, Top	- відстань у пікселях, відповідно, від лівої та верхньої меж форми до панелі. Встановимо в обох властивостях значення10.
Height	- Висота панелі в пікселях, встановимо її в 320.
Width	- Ширина панелі в пікселях, встановимо її в 580.

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

BevelInner – визначає стиль внутрішньої межі панелі. Може мати значення:

bvNone – ніякого стилю. (за замовчуванням для BevelInner)
bvSpace - порожній малюнок кордону, візуально не відрізняється від bvNone .
bvRaised - піднятий кордон. (за замовчуванням для BevelOuter)
bvLowered - втоплений кордон.

BevelOuter – визначає стиль зовнішньої межі панелі. Може мати такі значення, як і BevelInner .

BevelWidth – ширина окантовки в пікселях. За умовчанням має значення 1, що зазвичай цілком достатньо. Щоб ще більше підкреслити кордон, можна встановити значення 2, проте подальше збільшення ширини не зробить панель більш красивою, навпаки. Втім, це залежить від вашого смаку та конкретного дизайну.

Спробуйте "пограти" з властивостями панелі: змінюйте їх, запускайте проект на виконання, і дивіться, як змінюватиметься зовнішній вигляд панелі. А коли награєтесь та запустіть програму востаннє, розгорніть вікно на весь екран. Оце вже неприємно: вікно програми збільшилося, а панель залишилася колишньою:

Справа в тому, що панель "прив'язується" до верхньої та лівої межі форми. А при зміні розмірів вікна, права та нижня межі панелі незмінюються. Щоб "прив'язати" до форми всі сторони панелі, служать "якоря":

Anchors (англ. якоря) - властивість, що дозволяє або забороняє прив'язку сторін до зовнішнього контейнера. Якщо панель розташовується прямо на формі, то вона прив'язується до форми. А якщо панель розташовується на іншій панелі, то вже прив'язується до неї. Така властивість має більшість візуальних компонентів. Anchors - властивість, що розкривається. Якщо клацнути по кнопці "+" ліворуч від нього, то властивість розкриється, показуючи прив'язки сторін, а кнопка "+" перетвориться на "-":

Як бачимо, за умовчанням " прив'язані " лише ліва і верхня межі ( akLeft=True, akTop=True ). Щоб дозволити прив'язку правої (akRight) і нижньої (akBottom) меж панелі, їх також потрібно встановити в True. Зробіть це, запустіть програму виконання і спробуйте змінювати розміри вікна. Тепер разом із вікном змінює розміри та панель, що нам і потрібно.

Однак є і інший спосіб прив'язування компонентів до різних сторін форми або контейнера, на якому компонент знаходиться. Оскільки цей спосіб застосовується досить часто, розберемо докладніше. Для початку видаліть панель - виділіть її на формі та натисніть . Потім встановіть нову панель на форму. Таким чином, ми просто скинули всі зміни в налаштуваннях панелі, адже нова панель має всі значення за промовчанням. А ім'я в неї таке саме -Panel1. Очистимо властивість Caption і займемося вирівнюванням.

Align (англ. вирівнювання) - властивість, що дозволяє "приліпити" панель до однієї зі сторін зовнішнього контейнера, або до всього контейнера. Може мати такі значення:

alBottom - Панель займає весь низ контейнера (у разі контейнером є форма).
alClient - Панель займає веськонтейнер.
alCustom - Вирівнювання користувача, те ж саме, що alNone .
alLeft – Панель займає всю ліву частину контейнера.
alNone - Немає вирівнювання. Це значення за промовчанням.
alRight – Панель займає всю праву частину контейнера.
alTop – Панель займає весь верх контейнера.

Якщо ми встановимо цю властивість alClient , то наша панель займе всю форму. При зміні розмірів форми змінюватимуться і розміри панелі. Якщо встановимо, наприклад, alTop , то панель займе всю верхню частину форми. Якщо на цій панелі встановимо кнопки, то отримаємоПанель інструментів. А спільно з іншим компонентом, TSplitter , який знаходиться на вкладціAdditional Палітри компонентіві являє собою межу-розділювач, що переміщується, ми отримаємо різні частини вікна, розміри якого користувач зможе міняти мишею під час виконання програми:

Давайте зробимо так. У нашій Panel1 встановимо Align=alTop. Потім додамо на форму роздільник TSplitter, і також встановимо Align = alTop.

Тепер додамо на вільне місце форми ще одну панель. Очистимо в неї властивість Caption і встановимо Align = alLeft . Додамо ще один TSplitter , переконаємося, що він також Align = alLeft . Тепер весь верх і всю ліву частину форми займають панелі, відгороджуючи від вільної частини спліттерами. На цю вільну частину форми ми встановимо третю панель. Очистимо в неї властивість Caption і встановимо Align = alClient. Панель зайняла всю частину форми, що залишилася. Тепер запустіть проект на виконання та переконайтеся, що мишею можна переміщати межі-розділювачі, змінюючи розміри панелей. При зміні розмірів вікна змінюються розміри панелей:

Не забудьте зберігати проект час відчасу.

Ми втратили ще одну корисну властивість панелі - автоматичне налаштування розміру.

AutoSize - автоматичне налаштування розміру, логічне властивість. За промовчанням встановлено значення False - автоналаштування заборонено. Якщо встановити властивість у True , то автоматичне налаштування буде дозволено.

Встановіть на верхню панель кнопкуTButton. Властивості Left та Top кнопки встановіть в 1. Тепер виділіть панель, на якій знаходиться кнопка, та переведіть властивість AutoSize у True . Верхня панель, як і раніше, займає всю верхню частину форми, але тепер її висота зменшилася по висоті кнопки! У такий спосіб можна створювати прості панелі інструментів для програми. Правда, якщо ви запустите програму на виконання, то побачите, що тепер верхнім роздільником неможливо змінювати висоту верхньої панелі, адже вона у нас автоматично набуває розміру під розташовану на ній кнопку. Тож і потреба у першому спліттері в цьому випадку відпадає.