Лабораторная работа

Тема. Использование панелей для проектирования интерфейса.

Цель. Освоить приёмы использования панелей для организации интерфейса приложения

Панель – контейнер, служащий для объединения других управляющих компонентов

Панели выполняют функции:

- декоративные, зрительно объединяя компоненты связанные друг с другом по назначению;

- управления, организую совместную работу своих дочерних компонентов. Основные свойства

· BevelInner – выпуклый, утопленный или плоский вид внутренней части;

· BevelOuter – выпуклый, утопленный или плоский вид обрамления компонента;

· BevelWidtn – определяет ширину обрамления компонента в пикселях;

· BorderStyle – указывает, ограничена ли клиентская область компонента одинарной бордюрной линией;

· BorderWidth – расстояние в пикселях между внутренней и наружной кромками обрамления.

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

1. Запустите среду Lazarus

2. Создайте новое приложение

3. Установите панели как показано на рисунке и задайте соответствующие свойства

4. Сохраните приложение в папке Panel

5. Закройте приложение

6. Создайте новое приложение Panel2.

7. Расположите компоненты как показано на рисунке

8. Для заполнения списка в ListBox воспользуйтесь свойством Items.

9. Сохраните приложение в папке Panel2

10. Запустите приложение и измените размеры формы

ПРОБЛЕМА: при изменении размера формы – размеры компонентов не изменились.

РЕШЕНИЕ. Компонент необходимо привязать к месту на форме.

Свойство - Align
alTop	Верхний край компонента привязан к верхнему краю родительского компонента
alLeft	Левый край компонента привязан к левому краю родительского компонента
alRight	Правый край компонента привязан к правому краю родительского компонента
alBottom	Нижний край компонента привязан к нижнему краю родительского компонента

11. Установите для компонентов свойство соответствующее свойство Align и запустите приложение/

компонент	Значение свойства Align
Panel2	alTop
Panel1	alLeft
Memo1	alRight

ПРОБЛЕМА: Не изменяется положение компонентов, расположенных на панелях staticText и ListBox

РЕШЕНИЕ. Компонент необходимо привязать к месту на панели

12. Для компонента StaticText измените свойство Anchors и запустите приложение. Размеры компонента StaticText должны измениться

13. Удалите с формы компонент Memo1.

14. Установите компонент TSplitter, расположенный на странице Additional.

15. На место компонента Мемо1 установите панель GroupBox и задайте свойство Align равным alClient

16. Сохраните и запустите приложение. Попробуйте изменить размеры компонента Panel1.

17. Измените свойства компонента ListBox1так, чтобы его размеры изменялись при изменении размеров формы и панели по вертикали, но оставались неизменными при изменении по горизонтали.

18. Установите компонент Splitter так, чтобы можно было изменять размер панели Panel2. (Необходимо сначала установить свойство компонентов Panel1 и GroupBox равным alNone, установить компонент TSplitter (Align=AlTop), а затем установить для компонентов Panel1 и GroupBox необходимые значения свойств)

19. Сохраните приложение.

20. Протестируйте работу приложения.

21. Поэкспериментируйте со свойством ResizeStyle компонента TSplitter.

22. Установите для панели Panel1 значение свойства Constraints как показано на рисунке

23. Запустите приложение и попробуйте изменить ширину Panel1 до минимума

24. Создайте для Panel1 обработчик события OnResize и для формы обработчик onActive:

25. Запустите приложение и проверьте работу приложения

26. Покажите результат работы преподавателю.

27. Ответьте на контрольные вопросы.

Контрольные вопросы

1. В каких случаях оправдано использование панелей в интерфейсе программы?

2. В чём заключается основное назначение компонента TSplitter?

3. За что отвечает свойство Align?

4. За что отвечает свойство Anchors?

5. Что произойдёт с панелью, если свойству Align задать значение alBottom?

6. Что произойдёт с панелью, если свойству Align задать значение alClient?

7. За что отвечает свойство Items компонента ListBox?

8. В каких случаях используют свойство Constraints?

9. Приведите примеры использования обработчика события форсы OnActive.

Дата добавления: 2015-08-17