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

Что такое панель инструментов? Мы уже знаем, что во многих программах есть панели, на которых установлены кнопочки с рисунками. Иногда кнопочки содержат текст, чаще содержат только изображение. При наведении указателя мыши на такую кнопочку, спустя некоторое время, выходит подсказка – что это за кнопка. Как правило, кнопки панели инструментов дублируют команды главного и (или) всплывающего меню, облегчая пользователю работу с программой. Есть два способа организовать панель инструментов, рассмотрим оба.

Кнопка SpeedButton

Создайте новое приложение. Установите на форму панель, очистите у нее свойство Caption, свойство Align установите в alTop, чтобы она заняла весь верх формы. Свойство Height установите в 24.

Теперь перейдите на вкладку Additional и найдите кнопку SpeedButton. Установите ее на панель. Чтобы прижать ее к самому левому краю, свойство Left установите в 0. Теперь взгляните на свойство Height, оно равно 22. У панели это свойство равно 24. Следовательно, чтобы кнопка была посередине панели, нужно свойство Top установить в 1. Тогда сверху и снизу кнопки получится по 1 пикселю.

Теперь рассмотрим, что эта кнопка умеет делать. Прежде всего, она отличается от других кнопок тем, что не имеет фокуса ввода. Что это означает? При работе программы один из компонентов имеет фокус ввода, он выделен. Если это компонент для ввода текста ( Edit, Memo ), то пользователь сразу может вводить текст. Если это кнопка, то пользователь может нажать <Enter>, что будет равносильно нажатию на кнопку мышью. Кроме того, клавишей <Tab> можно перемещать фокус ввода от одного компонента к другому, порядок выделения компонентов определяется их свойством TabOrder. А кнопка SpeedButton фокуса ввода не имеет, ее нельзя выделить клавишей <Tab>, а если вы щелкните по ней мышью, то фокус ввода вернется к тому компоненту, в котором был до этого.

Свойство Glyph у этой кнопки работает так же, как у BitBtn и позволяет загрузить на кнопку изображение. Откройте диалоговое окно этого свойства и выберите картинку "DoorOpen" из стандартной коллекции Delphi.

Щелкните дважды по кнопке SpeedButton и напишите там выход из программы:

Close;

Сохраните проект, скомпилируйте его и посмотрите, как кнопка работает.

Во всех современных приложениях такие кнопки обычно выглядят более плоскими. Чтобы убрать выпуклость кнопки, измените свойство Flat на True.

Теперь познакомимся еще с одним свойством, которое имеет большинство компонентов. Это система подсказок Hint, подсказка выходит, когда пользователь наведет указатель мыши на компонент. В свойстве Hint кнопки напишите "Выход из программы". Однако этого мало, нужно еще разрешить подсказке выходить на экран. За это отвечает свойство ShowHint. Но внимание! Если мы установим это свойство в True, то только эта кнопка сможет выводить подсказку, для других кнопок его тоже придется выставлять в True. Чтобы этого не делать, можно установить свойство ShowHint в True у родительского компонента – панели или самой формы. Тогда все компоненты, расположенные на этом объекте, будут иметь True в этом свойстве. Давайте установим это свойство в True у формы. Теперь и панель, и кнопка тоже имеют True в ShowHint. И любая следующая кнопка, которую мы бросим на панель рядом с первой, также будут иметь возможность выводить подсказку. Скомпилируйте проект и посмотрите, как он работает.

Однако это еще не предел возможностей кнопки SpeedButton. Ее еще можно группировать. Установим рядом еще две таких кнопки. Сделайте так, чтобы они были вплотную друг к другу, но чуть поодаль от первой кнопки. На первую наложите рисунок "led2on", на вторую – "led2off" из коллекции изображений Delphi:

Эти кнопки расположены рядом, и имеют схожие картинки. Таким образом, пользователь уже видит, что они относятся к какому-то одному свойству. Выделите обе кнопки и установите у них свойство GroupIndex в единицу. Этим самым мы сгруппировали их в одну индексную группу. Теперь у любой из них установите свойство Down (нажата) в True. Сохраните проект, скомпилируйте его и посмотрите, как работает индексная группа. Нажмите другую кнопку, первая отожмется. И наоборот. Именно таким образом вы можете, к примеру, выбрать начертание шрифта или выравнивание абзаца в MS Word.

Вы можете устанавливать сколько угодно групп, и каждой присваивайте в свойстве GroupIndex свою цифру. Ноль означает, что кнопка не принадлежит ни к какой группе. У кнопки с групповым индексом 0 вы просто не сможете перевести свойство Down в True.

Такая панель инструментов выглядит более привлекательно, чем просто панель с кнопками, не правда ли? Однако есть более профессиональный способ организации панели инструментов.

Перемещаемые панели инструментов

Если вам в приложении потребуется лишь пара-тройка кнопок в панели инструментов, то проще воспользоваться первым вариантом. Но если вы делаете серьезное приложение и желаете, чтобы у него была профессиональная панель инструментов, то лучше воспользоваться перемещаемой панелью, как у программ из MS Office. Такие панели можно двигать, можно отрывать их от формы и делать из них отдельное окно. Впрочем, давайте сразу же напишем пример программы с такой панелью.

Создайте новое приложение, установите на форму компонент ControlBar с вкладки Additional. Это простой компонент, работает как панель, но он позволяет панелям инструментов перемещаться внутри себя по желанию пользователя. Свойство Align установите в Top, а свойство AutoSize – в True. Тогда компонент будет автоматически растягиваться или сужаться, когда вы будете двигать панели инструментов внутри него.

Теперь перейдите на вкладку Win32, и найдите там компонент ToolBar. Это и есть панель инструментов, установите ее поверх ControlBar. Как видите, ControlBar сразу принял нужную высоту. Если вы снимете выделение с этого компонента, то увидите, что он имеет оборку сверху. Обычно на программах такой оборки нет, поэтому снимем ее. Свойство EdgeBorders компонента раскрывается, и показывает, какие оборки есть. Установите ebTop в False. Теперь наша панель инструментов имеет профессиональный вид, только кнопочек ей недостает. Желательно и тут установить свойство AutoSize в True.

Начнем добавлять кнопки. Щелкните правой кнопкой мыши по панели инструментов и выберите команду NewButton. Появилась новая кнопка. Команда NewSeparator в этом меню создает разделители между кнопками. Удалить кнопку или разделитель просто – выделяете ее и нажимаете <Delete>.

Давайте создадим такую же панель, как в прошлом примере. После первой кнопки вставьте сепаратор, потом еще две кнопки. Опять таки, эти кнопки выпуклые, а в современных приложениях они выглядят более плоскими. Выделите саму панель, и свойство Flat измените на True, тогда все кнопки на панели будут выглядеть плоскими.

Теперь установим на форму компонент ImageList и загрузим те же три картинки: dooropen.bmp, led2on.bmp и led2off.bmp.

Теперь выделите панель инструментов, и в свойстве Images выберите наш ImageList. Картинки из списка автоматически загрузились в кнопки. Если вам не понравилось распределение этих картинок, можете изменить их, изменяя свойство ImageIndex. Первая картинка там имеет индекс 0, вторая – 1, и так далее. Таким образом, вы можете присваивать кнопкам различные картинки из списка.

Давайте рассмотрим некоторые полезные свойства кнопки на панели инструментов. Сама кнопка называется ToolButton, но такого компонента на палитре инструментов нет, ее можно загрузить, только щелкнув по панели инструментов правой кнопкой мыши и выбрав команду NewButton. Кнопка по своим свойствам схожа с кнопкой SpeedButton. Рассмотрим их подробно.

AllowAllUp. Если установлено в True, то кнопка синхронизирует свое состояние с другими кнопками группы – в любой момент может быть нажата только одна кнопка группы. Это свойство работает только в том случае, если свойство Grouped (группировка) у кнопки также установлено в True. Выделите две последних кнопки и установите у него оба этих свойства в True.

Caption. Содержит надпись на кнопке, которая будет выходить вместе с изображением, если у самой панели инструментов свойство ShowCaptions установить в True. У первой кнопки в этом свойстве напишите "Выход", у второй – "Активна", а у третьей "Неактивна". Что там будет активно или нет, не имеет значения, сейчас мы просто учимся работать с панелью инструментов. Теперь выделите саму панель инструментов, и установите свойство ShowCaptions в True. Как видите, кнопки стали большими, и вместе с изображением на них выходит также и текст. В некоторых приложениях вы можете встретить такие панели инструментов. Снова верните это свойство в False. Чтобы вернуть кнопкам первоначальный размер, выделите первую кнопку и измените ее размеры. Установите свойства Height и Width равным 23.

Down. Как и прежде, это свойство отвечает за состояние кнопки – нажата она или нет. Чтобы повторить предыдущий пример, установите у первой кнопки Down в True.

ImageIndex. С этим свойством мы уже разбирались, оно отвечает за картинку, которая изображена на кнопке.

Style. Стиль кнопки. Пожалуй, самое интересное свойство. Если вы скомпилируете пример, то увидите, что при нажатии на кнопку, она возвращается в отжатое состояние. А как быть, если нам, как в прошлом примере, требуется, чтобы всегда была нажата только одна кнопка из группы? Мы уже сгруппировали две последние кнопки и указали им синхронизировать состояние с другими кнопками группы. Теперь снова выделите их, а в свойстве Style выберите tbsCheck. Этот стиль позволяет кнопке оставаться в нажатом состоянии. Чтобы отжать ее, нужно будет снова щелкнуть по кнопке. Если же кнопки сгруппированы, как в нашем примере, то нажатие на другую кнопку отожмет первую.

Сама панель инструментов также имеет ряд интересных свойств, которые требуется знать. Выделите ее, и посмотрите на Инспектор Объектов. Такие свойства, как Align, Height и Width мы разбирать не будем, так как знакомы с ними по другим компонентам.

AutoSize. Если True, то панель автоматически выравнивает высоту, учитывая высоту кнопок.

ButtonHeight. Определяет высоту кнопок, создаваемых на этой панели.

ButtonWidth. Определяет ширину кнопок на этой панели. Чтобы кнопки были квадратными, оставляйте эти свойства равными друг другу.

Caption. Название панели инструментов, которое будет видно, если снять панель инструментов с места и сделать из нее отдельное окно. Укажите в этом свойстве "Файл".

Flat. Если равно True, то кнопки выглядят современно, без выпуклостей.

List. Работает, если ShowCaptions установлен в True. Если равно True, то изображение прижмется к левой границе, а текст – к правой. Иначе изображение будет сверху, а текст – снизу кнопки.

ShowCaptions. Разрешает или запрещает показ текста на кнопках.

Кроме того, мы знаем, что кнопки могут иметь разные состояния, и быть активными или неактивными (это зависит от свойства Enabled ). Обычная кнопка в неактивном состоянии имеет рисунок серого тона. Кнопки имеют три варианта изображения – обычное, неактивное, и когда над кнопкой располагается указатель мыши. В один контейнер ImageList невозможно загрузить изображения различных состояний кнопок. Если вы желаете использовать все три состояния, то вам придется устанавливать три контейнера ImageList для изображений. В каждый контейнер вы добавляете картинку своего состояния, важно, чтобы эти картинки имели одинаковый индекс, то есть, чтобы они соответствовали друг другу по очередности в списке. Далее, вы устанавливаете:

Images. Здесь вы указываете контейнер с обычным изображением кнопки, у нас это ImageList1.

DisabledImages. Здесь вы указываете контейнер с изображениями недоступных кнопок.

HotImages. Тут указывается контейнер с изображениями кнопок в момент, когда указатель мыши находится над ними.

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

DragKind. Пожалуй, наиболее интересное свойство панели инструментов. Оно может иметь два варианта – dkDrag (по умолчанию), и dkDock. Если установлено dkDrag, то панель можно будет перемещать только внутри ControlBar. Для этого нужно указателем мыши ухватиться за вертикальную черточку в левой части панели и перемещать ее. А вот если установить в этом свойстве dkDock, то панель инструментов можно будет снять с ControlBar, установить ее внутри окна программы или даже за ее пределами. Попробуйте это сделать.

Теперь еще один интересный пример панели инструментов. Кнопки на этой панели можно связывать с главным или всплывающим меню! То есть, если у вас есть главное меню, и там есть команда "Выход", которую вы уже запрограммировали, то нет нужды писать этот же код у кнопки, достаточно связать ее с компонентом главного меню.

У нас нет кода обработчика события кнопки "Выход". Если есть – удалите. Установите на форму главное меню. Укажите там раздел "Файл" и подразделы "Открыть", "-" и "Выход". Свяжите меню с нашим ImageList, и пункту "Выход" присвойте картинку dooropen.bmp. Теперь создайте обработчик события для этого пункта и пропишите там

Close;

Сохраните проект, скомпилируйте его и посмотрите, как он работает. Теперь выделите кнопку "Выход" на панели инструментов, и в свойстве MenuItem выберите пункт меню, с которым нужно ассоциировать кнопку (у меня это N4). Если вы все сделали правильно, то при работе программы, если пользователь выберет команду "Выход" в меню или нажмет кнопку "Выход" на панели инструментов, выполнится один и тот же код.

Точно также кнопки можно связать с всплывающим меню, за это отвечает свойство PopupMenu, в котором вы можете выбрать всплывающее меню. Свойство DropDownMenu связывает кнопку с вспомогательным меню, если оно есть.

Мы изучили способы организации профессиональной панели инструментов, теперь ваши программы будут выглядеть более солидно.