Отдельная область прокрутки

Как ни крути, а форма не позволяет организовать прокрутку в отдельной своей части. Например, в приложении для просмотра графических файлов хотелось бы организовать прокрутку рисунка, но так, чтобы строка состояния в прокрутке не участвовала. Форма этого сделать не позволяет. Здесь на помощь приходит компонент ScrollBox, представляющий собой отдельную область прокрутки. Он расположен в палитре компонентов на вкладке Additional (рисунок 8.45).

Рисунок 8.45. Компонент ScrollBox

Таблица 8.13 содержит краткую характеристику его отличительных свойств.

Свойство	Описание
Align	Способ выравнивания области прокрутки в пределах владельца.
AutoScroll	Если равно значению True, полосы прокрутки появляются и скрываются автоматически по мере необходимости.
AutoSize	Режим автоматического изменения размеров области прокрутки в зависимости от размеров и положения внутренних компонентов.
BevelEdges	Вложенные свойства beLeft, beTop, beRight и beBottom определяют видимость соответственно левой, верхней, правой и нижней сторон рельефной рамки.
BevelInner	Внутренний скос рельефной рамки: bvNone - скос отсутствует, bvLowered - скос внутрь, bvRaised - скос наружу; bvSpace - скос заменяется отступом.
BevelKind	Вид рельефной рамки: bkNone - рамки нет, bkTile - рамка с четкими скосами, bkSoft - рамка со сглаженными скосами, bkFlat - плоская рамка (без скосов).
BevelOuter	Внешний скос рельефной рамки: bvNone - скос отсутствует, bvLowered - скос внутрь, bvRaised - скос наружу; bvSpace - скос заменяется отступом.
BevelWidth	Ширина скосов рельефной рамки.
BorderStyle	Определяет, имеет ли область прокрутки рамку.
DockSite	Определяет, используется ли область прокрутки для стыковки других компонентов.
HorzScrollBar	Определяет параметры и поведение горизонтальной полосы прокрутки (см. табл. 6.10).
VertScrollBar	Определяет параметры и поведение вертикальной полосы прокрутки (см. табл. 6.10).
OnGetSiteInfo	Происходит, когда у компонента запрашивается место для стыковки.

Таблица 8.13. Важнейшие свойства компонента ScrollBox

Компонент ScrollBox служит контейнером для других компонентов и обеспечивает их прокрутку внутри себя. Давайте поместим на него рисунок (компонент Image), а область прокрутки расположим между меню и строкой состояния. В результате большие рисунки будут прокручиваться уже не формой, а компонентом ScrollBox и строка состояния останется на своем месте, прижатой к нижнему краю формы.

Шаг 50. Выделите на форме компонент Image и временно удалите его в буфер (команда меню Edit / Cut). Теперь опустите на форму компонент ScrollBox, выбрав его из палитры компонентов. Назовите новый компонент ScrollBox и подгоните его под всю незанятую область формы, установив свойство Align в значение alClient (рисунок 8.46).

Рисунок 8.46. Свойство Align обеспечивает подгонку компонента под размеры контейнера

Шаг 51. А сейчас переключитесь на форму (так, чтобы компонент ScrollBox остался выделенным) и вставьте из буфера обмена компонент Image (команда меню Edit / Paste). Убедитесь, что он находится в левом верхнем углу области прокрутки.

Готово. Выполните компиляцию и запустите приложение, загрузите в него какой-нибудь рисунок из каталога C:\Program Files\Common Files\Borland Shared\Images\Splash\256Color. Увеличивая и уменьшая окно, понаблюдайте за тем, как появляются и исчезают полосы прокрутки между меню и строкой состояния (рисунок 8.47). Обратите внимание, что величина бегунков на полосах прокрутки зависит от соотношения видимой части и всего изображения. Это работает компонент ScrollBox. Правда, здорово! А самое главное - быстро и без единой строчки кода.

Рисунок 8.47. Программа для просмотра графических файлов теперь умеет прокручивать не уместившееся внутри окна изображение

Полосы прокрутки

Коль уж речь зашла о прокрутке, сделаем небольшое отступление и скажем пару слов о компоненте ScrollBar. Вы, наверное, еще раньше заметили его в палитре компонентов на вкладке Standard и сейчас не совсем понимаете, для чего он нужен (рисунок 8.48).

Рисунок 8.48. Компонент ScrollBar

ScrollBar - это отдельная полоса прокрутки без области прокрутки. Ее согласованная работа с другими компонентами обеспечивается программистом. Для этого в компоненте ScrollBar предусмотрено событие OnScroll, в ответ на которое и нужно выполнять необходимые действия. Должны вам сообщить, что компонент ScrollBar не имеет никакого отношения ни к форме, ни к компоненту ScrollBox. И вообще, он используется редко. Авторы этой книги будут вам признательны, если вы сообщите им о применении компонента ScrollBar в реальной задаче.

Следуя традиции данной книги, мы приводим табличное описание свойств компонента (таблица 8.14).

Свойство	Описание
Kind	Вид полосы прокрутки: горизонтальная или вертикальная.
LargeChange	Величина "информативной страницы".
Min, Max	Начальная и конечная виртуальные позиции на полосе прокрутки.
Position	Позиция бегунка на полосе прокрутки.
SmallChange	Величина "информативной строки".
OnChange	Происходит при изменении значения свойства Position. Если значение свойства Position изменяется при перемещении пользователем бегунка, то событие OnChange происходит сразу после события OnScroll.
OnScroll	Происходит при перемещении бегунка.

Таблица 8.14. Важнейшие свойства и события компонента ScrollBar

Рисунок 8.49 наглядно поясняет смысл свойств LargeChange и SmallChange.

Рисунок 8.49. Свойства LargeChange и SmallChange применяются при расчете величины прокрутки

Ну вот вы и разобрались с прокруткой. Уверены, что вам понравилось, как она реализована в среде Delphi. Действительно, компонентное программирование. Взял компонент ScrollBox, поместил на форму, набросал в него других компонентов - и готово. А теперь пора засучить рукава, ибо вас ждет самая увлекательная часть этой главы - проектирование панели инструментов.

Панель инструментов

Панель инструментов (toolbar) - это расположенная под главным меню панель с кнопками, раскрывающимися списками, переключателями и другими компонентами. Компоненты панели инструментов, как правило, дублируют часто используемые команды меню.

Панель

Для создания панели инструментов в среде Delphi существует компонент ToolBar, расположенный в палитре компонентов на вкладке Win32.

Рисунок 8.50. Компонент ToolBar

Шаг 52. Активизируйте форму и поместите на нее компонент ToolBar. Дайте новому компоненту имя ToolBar (рисунок 8.51).

Рисунок 8.51. Панель инструментов оказалась в области прокрутки

Внимательный читатель, наверное, уже обратил внимание, что компонент ToolBar попал в область прокрутки (внутрь компонента ScrollBox), и поэтому будет прокручиваться вместе с рисунком. Нам нужно вынести компонент ToolBar из области прокрутки и поместить его прямо в форму. Для этого воспользуемся окном Object TreeView.

Шаг 53. Перейдите к окну Object TreeView и найдите в нем компонент ToolBar. Захватите его с помощью мыши и перетащите к элементу PictureForm в этом же окне (рисунок 8.52).

Рисунок 8.52. Буксировка в окне Object TreeView позволяет быстро перенести компонент с одной панели на другую

Теперь компонент ToolBar находится именно там, где нужно (рисунок 8.53):

Рисунок 8.53. Панель инструментов вынесена за пределы области прокрутки

Между прочим, если вы сразу хотите поместить компонент на другой компонент, закрытый от вашего взора, выберите первый компонент в палитре компоненте и щелкните второй компонент в окне Object TreeView (рисунок 8.54):

Рисунок 8.54. Размещение компонента сразу внутри нужного компонента с помощью окна Object TreeView

Шаг 54. В окне свойств установите свойство AutoSize в значение True. После этого панель инструментов будет автоматически подгонять свои размеры в зависимости от размеров и количества размещенных на ней компонентов.

Основу для размещения кнопок вы создали и в качестве передышки мы предлагаем вам пробежаться по наиболее важным свойствам компонента ToolBar и поэкспериментировать с их значениями (таблица 8.15).

Свойство	Описание
AutoSize	Если равно значению True, то панель автоматически изменяет свою высоту в зависимости от размеров размещенных на ней компонентов.
BorderWidth	Величина отступа от границ компонента до кнопок.
ButtonWidth, ButtonHeight	Ширина и высота кнопок на панели инструментов.
Customizable	Если равно значению True, то пользователь во время работы программы имеет возможность управлять расположением кнопок на панели инструментов. Удерживая клавишу Shift пользователь может захватить кнопку и перенести ее на нужное место, а двойным щелчком панели инструментов (но не ее кнопок!), пользователь может вызвать специальное окно настройки.
DisabledImages	Список значков, отображаемых на недоступных кнопках. Свойство DisabledImages используется совместно со свойством ImageIndex компонента ToolButton.
DockSite	Определяет, используется ли панель инструментов для стыковки других компонентов.
EdgeBorders	Вложенные свойства ebLeft, ebTop, ebRight и ebBottom определяют видимость соответственно левой, верхней, правой и нижней сторон рельефной рамки.
EdgeInnter	Внутренний скос рельефной рамки: esNone - скос отсутствует, esLowered - скос внутрь, esRaised - скос наружу.
EdgeOuter	Внешний скос рельефной рамки: esNone - скос отсутствует, esLowered - скос внутрь, esRaised - скос наружу.
Flat	Если равно значению True, то все кнопки, находящиеся на панели инструментов, не имеют рельефных границ. Рельефные границы появляются при наведении указателя мыши на кнопку.
HideClippedButtons	Если равно значению True, то кнопки, не уместившиеся на панели целиком, не показываются вообще.
HotImages	Список значков, которые отображаются на кнопках при наведении на них указателя мыши. Свойство HotImages используется совместно со свойством ImageIndex компонента ToolButton.
Images	Список значков, которые отображаются на кнопках. Свойство Images используется совместно со свойством ImageIndex компонента ToolButton.
Indent	Отступ от края панели до первой кнопки.
List	Если равно значению True, то надписи на кнопках отображаются справа от значков. Иначе надписи отображаются под значками.
Menu	Ссылка на компонент MainMenu. Установка значения этого свойства приводит к тому, что панель инстурментов выглядит как строка главного меню.
ShowCaptions	Определяет, отображаются ли надписи на кнопках. Если установлено значение False, то на кнопках отображаются только значки.
ShowHint	Разрешает (значение True) или запрещает (значение False) показ высплывающих подсказок для кнопок панели инструментов.
Transparent	Если равно значению True, то фон панели инструментов является прозрачным.
Wrapable	Включает автоматический перенос невместившихся кнопок панели инструментов на новую строку. Если равно значению False, то перенос кнопок регулируется с помощью свойства Wrap компонента ToolButton.
OnAdvancedCustomDraw	Происходит до и после рисования панели инструментов на экране.
OnAdvancedCustomDrawButton	Происходит до и после рисования каждой кнопки панели инструментов на экране.
OnCustomDraw	Происходит при рисовании панели инструментов на экране.
OnCustomDrawButton	Происходит при рисовании каждой кнопки панели инструментов на экране.
OnCustomizeAdded	Происходит, когда пользователь добавляет кнопку на панель с помощью окна настройки панели инструментов.
OnCustomizeCanDelete	Происходит, когда пользователь пытается убрать кнопку с помощи окна настройки панели инструментов.
OnCustomizeCanInsert	Происходит, когда пользователь пытается добавить кнопку с помощи окна настройки панели инструментов.
OnCustomized	Происходит по окончании любого изменения на панели инструментов.
OnCustomizeDelete	Происходит, когда пользователь убирает кнопку с панели при помощи окна настройки панели инструментов.
OnCustomizeNewButton	Используется для формирования списка кнопок, доступных для добавления на панель инструментов. В этом обработчике, как правило, динамически создаются и возвращаются через параметр Button объекты класса TToolButton (или производных классов).
OnCustomizeReset	Происходит при нажатии пользователем кнопки Reset в окне настройки панели инструментов.
OnCustomizing	Происходит при вызове пользователем окна настройки панели инструментов и при нажатии кнопки Reset в этом окне.
OnGetSiteInfo	Происходит, когда у компонента запрашивается место для стыковки.

Таблица 8.15. Важнейшие свойства и события компонента ToolBar

Кнопки

Кнопки панели инструментов представлены компонентами ToolButton. Не пытайтесь найти компонент ToolButton в палитре компонентов. Его там нет, поскольку он не является самостоятельным компонентом, а создается и управляется из компонента ToolBar.

Шаг 55. Для добавления кнопки вызовите контекстное меню компонента ToolBar и выберите команду New Button (рисунок 8.55).

Рисунок 8.55. Создание кнопки на панели инструментов с помощью команды New Button контекстного меню

На панели инструментов появится кнопка, свойства которой будут тут же показаны в окне свойств. Дайте компоненту имя OpenToolButton.

Шаг 56. Аналогичным образом создайте еще четыре кнопки с программными идентификаторами SaveAsToolButton, HalfSizeToolButton, NormalSizeToolButton и DoubleSizeToolButton (рисунок 8.56).

Рисунок 8.56. Все необходимые кнопки созданы, но для них еще не заданы значки

Подготовительная работа завершена, список кнопок готов. На следующем шаге мы назначим кнопкам значки, но прежде перечислим важнейшие свойства компонента ToolButton, с которыми нам придется дальше работать (таблица 8.16).

Свойство	Описание
Action	Команда, хранящаяся в компоненте ActionList и выполняемая при нажатии кнопки (см. параграф 8.6).
AllowAllUp	Разрешает всем кнопкам одной группы находиться в отжатом состоянии.
AutoSize	Включает режим автоматического подбора размеров кнопки в зависимости от размеров значка и надписи.
Caption	Надпись на кнопке.
Down	Если равно True, то кнопка рисуется нажатой.
DropDownMenu	Выпадающее меню, которое появляется при нажатии кнопки. Это свойство используется, если свойство Style содержит значение tbdDropDown.
Grouped	Определяет, принадлежит ли кнопка группе взаимоисключающих переключателей. Сгруппированными считаются расположенные рядом кнопки со значением True в свойстве Grouped и значением tbdCheck в свойстве Style.
ImageIndex	Номер значка в списке Images компонента ToolBar.
Indeterminate	Если равно True, то кнопка имеет неопределенное состояние и рисуется поблекшей.
Marked	Если равно значению True, то кнопка подсвечивается цветом выделенных элементов (стандартно - синим цветом).
MenuItem	Пункт меню, с которым ассоциирована кнопка. При установке этого свойства из соответствующего пункта меню копируются значения наиболее важных свойств и событий, например Caption, ImageIndex, Enabled, Hint, OnClick.
Style	Тип кнопки: tbsButton - обычная кнопка, tbsCheck - кнопка-переключатель, tbsDivider - разделитель в виде вертикальной черты, tbsDropDown - выпадающий список, tbsSeparator - разделитель в виде вертикальной черты или пробела в зависимости от значения свойства Flat компонента ToolBar.
Wrap	Обеспечивает перенос последующих кнопок на новую строку.

Таблица 8.16. Важнейшие свойства компонента ToolButton

Значки на кнопках

Главным атрибутом кнопки является значок. Он определяется значением свойства ImageIndex (номер значка в списке Images компонента ToolBar). Установим на кнопках значки, воспользовавшись ранее созданным списком ImageList.

Шаг 57. Выделите на форме компонент ToolBar, перейдите к окну свойств и установите свойству Images значение ImageList (рисунок 8.57).

Рисунок 8.57. На кнопках панели инструментов появились значки

Вот здорово! На всех кнопках появились разные значки, хотя мы не устанавливали свойство ImageIndex ни в одной из кнопок. Это произошло потому, что компонент ToolBar сделал это за нас, назначив каждой кнопке номер значка в соответствии с очередностью добавления кнопок на панель.

Признаемся, что мы немного схитрили, заранее расположив значки в компоненте ImageList в том порядке, в котором они расположены на панели инструментов. В реальных задачах вам, вероятно, потребуется вручную указывать номера значков для каждой кнопки с помощью свойства ImageIndex.

Надписи на кнопках

Шаг 58. Кнопка может содержать надпись рядом со значком. Текст надписи устанавливается в свойстве Caption. Сначала он не виден и, чтобы его показать, задайте в компоненте ToolBar свойству ShowCaptions значение True (рисунок 8.58).

Рисунок 8.58. Кнопки панели инструментов могут содержать надписи (свойство ShowCaptions равно True)

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

Шаг 59. Подправим надписи. В окне свойств переключите свойство List в значение True (рисунок 8.59).

Рисунок 8.59. Надписи на кнопках располагаются справа от значков (свойство List равно True)

Как вы уже догадались, свойство List управляет расположением текста и значков относительно друг друга.

Шаг 60. Теперь измените надписи на кнопках (свойство Caption), чтобы получить панель инструментов, показанную на рисунке 8.60.

Рисунок 8.60. Кнопкам заданы правильные надписи

Шаг 61. Чтобы панель инструментов выглядела лучше, подгоним размеры кнопок под размеры надписей. Для этого воспользуемся свойством AutoSize, которое есть у каждой кнопки. При установке этого свойства применим технику группового редактирования компонентов.

Шаг 62. Выделите щелчком мыши первую кнопку, а затем, удерживая клавишу Shift, выделите щелчками мыши все остальные кнопки. В окне свойств произойдут следующие изменения:

· вместо имени активного компонента будет показано общее количество выделенных компонентов:

· в списке свойств останутся только общие для выделенных компонентов свойства и события;

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

Перейдите к окну свойств и установите свойство AutoSize в значение True (рисунок 8.61).

Рисунок 8.61. Применение техники группового редактирования при установке во всех кнопках свойства AutoSize в значение True

Теперь выполните компиляцию и запустите программу. Результат представлен на рисунке 8.62.

Рисунок 8.62. Программа для просмотра графических файлов имеет панель инструментов, однако кнопки пока еще не работают

Кнопки нажимаются, но реакции на них пока нет. Мы этим займемся потом, а сейчас придадим панели инструментов более современный вид. Избавимся от чрезмерного количества 3D-эффектов на кнопках.

Шаг 63. Закройте приложение и вы вернетесь в среду Delphi. Выделите на форме компонент ToolBar и переключите его свойство Flat в значение True. Теперь снова запустите программу и полюбуйтесь на результат (рисунок 8.63).

Рисунок 8.63. Кнопки панели инструментов получили современный «плоский» вид

Кнопки приобретают рельефный вид только при наведении на них указателя мыши.

Разделительные линии

Важными элементами панели инструментов являются разделительные линии, которые используются для группировки кнопок.

Шаг 64. В нашем примере логично отделить группу кнопок, отвечающих за размеры рисунка (Half Size, Normal Size и Double Size), от кнопок Open и Save As. Для этого вызовите контекстное меню панели инструментов и выберите команду New Separator (рисунок 8.64).

Рисунок 8.64. Создание разделительной линии на панели инструментов с помощью команды New Separator контекстного меню

На панель инструментов будет добавлен новый компонент, имеющий вид вертикальной черты. С помощью мыши отбуксируйте его на место между кнопками Save As и Half Size (рисунок 8.65):

Рисунок 8.65. Буксировка разделительной линии на место между кнопками Save As и Half Size

Выполните компиляцию и запустите программу. Результат представлен на рисунке 8.66.

Рисунок 8.66. Кнопки на панели инструментов внешне сгруппированы по назначению

Напоследок заметим, что разделительная линия представлена обычным компонентом ToolButton. То, какой вид имеет этот компонент (кнопка или разделительная линия), определяется свойством Style. Это свойство имеет много значений, которые перечислены в таблице 8.16.

Кнопки-переключатели

Кнопки панели инструментов могут работать как переключатели, «залипая» при нажатии. Для того, чтобы кнопка была переключателем, ее свойство Style должно содержать значение tbsCheck. Состояние кнопки (нажата она или нет) определяется значением свойства Down.

Кнопки-переключатели могут работать согласовано, т.е. включение одной из них означает выключение остальных. Именно так должны работать кнопки выбора масштаба отображения рисунка. Согласованная работа кнопок обеспечивается не так, как согласованная работа пунктов меню. Кнопки панели инструментов не имеют свойства GroupIndex, они группируются по другому принципу. Сгруппированными считаются расположенные рядом кнопки, у которых свойство Grouped равно значению True и свойство Style равно значению tbsCheck.

Шаг 65. Сгруппируйте кнопки Half Size, Normal Size и Double Size. Они уже находятся рядом друг с другом, поэтому просто установите их свойства Grouped и Style как показано на рисунке 8.67.

Рисунок 8.67. Кнопки Half Size, Normal Size и Double Size сгруппированы в трехпозиционный переключатель

У кнопки Normal Size установите свойство Down в значение True, предварительно убрав выделение кнопок Half Size и Normal Size (рисунок 8.68).

Рисунок 8.68. Начальное положение трехпозиционного переключателя - Normal Size

Выполните компиляцию и запустите программу. Проверьте, что кнопки Half Size, Normal Size и Double Size работают как трехпозиционный переключатель (рисунок 8.69).

Рисунок 8.69. Кнопки-переключатели в работе

Шаг 66. Завершая дизайн панели инструментов, сделайте кнопки Save As, Half Size, Normal Size и Double Size недоступными, установив у них свойство Enabled в значение False (рисунок 8.70). Эти кнопки будут оставаться недоступными, пока пользователь не откроет какой-нибудь рисунок.

Рисунок 8.70. Некоторые кнопки на панели инструментов отключены до тех пор, пока пользователь не откроет какой-нибудь графический файл