Учебный центр "ANIT Texno Inform"
Опубликован: 25.06.2014 | Доступ: свободный | Студентов: 2595 / 850 | Длительность: 24:39:00
Темы: Программирование, Образование
Специальности: Программист
Лекция 15:
Организация меню и панелей инструментов
Компонент TImageList
TImageList - это контейнер для хранения списка изображений. Как правило, в TImageList хранят изображения для меню и кнопок панелей инструментов. Компонент TImageList находится на вкладке Common Controls Палитры компонентов:
Компонент невизуальный, так что его также можно установить на любое свободное место. Щелкните дважды по нему, чтобы открыть Редактор ImageList. В Редакторе нажмите кнопку "Добавить", откроется диалоговое окно "Добавить изображения". Теперь вот что: для пунктов меню нам нужны маленькие изображения, 16*16 пикселей. По умолчанию, Lazarus устанавливается в папку C:\Lazarus. Если вы не меняли эту папку, то картинки для пунктов меню у вас будут по адресу
C:\Lazarus\images\menu
Изображений там не так, чтобы очень много, гораздо больше интересных изображений, да и целых бесплатных коллекций изображений можно найти на просторах Интернета. Однако на первое время обойдемся тем, что уже есть. Откройте указанный адрес в диалоге выбора изображений. Нам нужна картинка для пункта меню "Файл -> Открыть". Тут лучше подойдет файл menu_project_open.png. Выберите этот файл и нажмите кнопку "Открыть" - файл попадет в список под индексом 0. Как и в других списках, индексация в TImageList начинается с 0, индекс -1 означает, что изображения не выбрано. Снова нажмите кнопку "Добавить" в редакторе. Для "Файл -> Сохранить как" подойдет файл menu_project_saveas.png. Изображение встанет под индексом 1.
Впрочем, изображения можно перемещать по списку, менять их местами с помощью кнопок "Переместить вверх" и "Переместить вниз". Под индексом 2 установите файл menu_exit.png - это будет изображение для "Файл -> Выход". Для пунктов меню "Окно" подходящих изображений нет, поэтому мы оставим эти команды без соответствующих картинок.
Нажмите кнопку "OK", чтобы закрыть редактор. Теперь нам нужно, чтобы главное меню увидело эти изображения. Выделите компонент MainMenu1. В его свойстве Images выберите наш ImageList1. Таким образом, мы связали главное меню со списком изображений.
Далее, дважды щелкните по MainMenu1, чтобы открыть редактор меню. Выделите подпункт "Открыть" пункта "Файл". Вы видите, что его свойство ImageIndex равно -1, то есть, изображения не выбрано. Откройте список изображений и выберите первое изображение, с индексом 0. Для подпункта "Сохранить как" установите индекс 1. Для "Выход" - индекс 2. В результате пункты меню "Файл" станут отображаться вместе с изображениями:
Большой пользы от этого нет, но проект украшает. То же самое сделайте для соответствующих пунктов всплывающего меню: сначала в его свойстве Images выберите наш список ImageList1. Затем откройте редактор меню, выделите поочередно пункты "Открыть", "Сохранить как" и "Выход", выберите для них соответствующие ImageIndex. Сразу же в редакторе меню вы не заметите изменений, однако закройте его, сохраните проект и запустите программу на выполнение. Щелкните правой кнопкой мыши по окну и, пожалуйста, меню с изображениями:
Горячие клавиши
Тут самое время вспомнить об одном важном свойстве подпунктов меню, как главного, так и всплывающего - ShortCut.
ShortCut - свойство, позволяющее выбрать для команды меню сочетание клавиш, так называемые "горячие клавиши". Если какое то сочетание клавиш присвоено одной из команд, то пользователю необязательно будет лезть в меню, чтобы выполнить эту команду, достаточно будет нажать соответствующее сочетание клавиш. Так, для команды меню Файл->Открыть традиционно применяют сочетание <Ctrl+0>; для команды Файл->Сохранить - <Ctrl+S>; для команды Файл->Выход можно использовать <Ctrl+Q>. Откройте редактор главного меню, выделяйте по очереди в меню Файл подпункты "Открыть", "Сохранить как" и "Выход". Выберите для этих команд соответствующие сочетания в свойстве ShortCut. В результате меню приобретет такой вид:
Теперь пользователь сможет выполнять эти команды как с помощью меню, так и с помощью "горячих клавиш". Делать то же самое с пунктами всплывающего меню имеет смысл только в том случае, если его команды отличаются от команд главного меню. В нашем случае все равно будут выполняться команды главного меню, так что указывать эти же горячие клавиши во всплывающем меню не нужно.
Панель инструментов
Самый простой способ организовать Панель инструментов - установить обычную панель TPanel с настройками свойств Align = alTop, AutoSize = True, и уже на эту панель установить кнопки TSpeedButton. И панель, и кнопки мы с вами изучали в "Работа с компонентами" , поэтому останавливаться на этом не будем. Изучим другой, более профессиональный способ организации панели инструментов.
Для этого нам потребуется компонент TToolBar с вкладки Common Controls Палитры компонентов:
Просто установите его на форму, и он сам займет нужное место - растянется по всей верхней границе окна. Обращу ваше внимание на некоторые свойства компонента, которые могут представлять для нас интерес.
| Images | - ссылка на список изображений для кнопок панели. Выполняет такую же функцию, как соответствующее свойство меню. |
| DisabledImages | - ссылка на список изображений, которые будут привязаны к неактивным кнопкам. Чаще всего это свойство оставляют пустым, в таком случае у неактивных кнопок (у которых Enabled = False) будет такое же изображение, как у активных, но только серого цвета. При желании для неактивных кнопок можно подобрать альтернативные изображения. |
| HotImages | - ссылка на список изображений для кнопок, над которыми в данный момент находится указатель мыши. Чаще всего это свойство не заполняют, и тогда изображения у таких кнопок не меняется. При желании, можно подобрать альтернативные изображения, чтобы выделять текущую кнопку. |
| EdgeBorders | - установка бордюра по сторонам панели. Имеет 4 подсвойства, соответствующие границам панели, и если в соответствующем подсвойстве установлено True, то данная граница будет выделена. По умолчанию, включена только верхняя граница, отделяющая панель инструментов от строки с главным меню. Если желаете, можете включить отображение всех границ. |
| Flat | - если True, то кнопки плоские, как в современных панелях Windows, если False - выпуклые, как в старых программах. По умолчанию равно True, так лучше и оставить. |
| ShowHint | - если True, то всплывающие подсказки будут выходить, если False, то нет. С таким свойством нам уже доводилось встречаться. На панели инструментов обычно отображаются кнопки с изображениями, но без текста. Пользователь, если только знакомится с вашей программой, поначалу может и не сообразить, какая кнопка для чего нужна. Поэтому в панели инструментов данную подсказку лучше включать (по умолчанию ShowHint = False). Затем в свойстве Hint кнопок вы пропишите нужные подсказки, и пользователь сможет их прочитать, когда подведет указатель мыши к той или иной кнопке. |
Сделаем на панели ToolBar1 следующие установки:
| EdgeBorders | - включаем все границы, если есть желание. А вообще это необязательно. |
| Images | - выберите наш ImageList1. Как видите, один и тот же список изображений мы используем и для главного меню, и для всплывающего, и для панели инструментов. |
ShowHint = True
Остальные свойство можно не изменять.
Займемся созданием кнопок. Вначале сделаем кнопку "Выход из программы", затем установим разделитель, затем кнопки "Открыть файл с изображением" и "Сохранить файл как". Для команд пункта "Окно" мы кнопок делать не будем, тем более, что у нас нет для них изображений. Итак, щелкните правой кнопкой мыши по панели инструментов, и выберите команду "Новая кнопка". На панели инструментов появилась кнопка, которой Lazarus автоматически присвоил имя ToolButton1. Измените ее свойство Name на bExit, чтобы название соответствовало действию. В свойстве Hint напишите следующую подсказку:
Выход из программы
А в свойстве ImageIndex выберите изображение с индексом 2. Теперь перейдем на вкладку События Инспектора объектов, и в свойстве OnClick выберем FileExitClick - событие OnClick для пункта "Выход" главного меню. Как видите, для панели инструментов нам тоже не придется заново писать код.
Снова щелкните правой кнопкой по панели инструментов, и выберите команду "Новый разделитель". Тем самым вы вставите разделитель - вертикальную черту между предыдущей кнопкой и следующими. Ничего с этим разделителем делать больше не нужно, разве что вам покажется, что разделитель слишком (или наоборот, недостаточно) широк. В этом случае выделите разделитель и измените его свойство Width.
Вставьте еще одну кнопку. Назовите ее bOpen, выберите для нее изображение под индексом 0, в свойстве Hint напишите следующую подсказку:
Открыть файл с изображением
В событии OnClick этой кнопки выберите соответствующее событие из главного меню.
Вставим еще одну, последнюю кнопку. Назовем ее bSaveAs, в ImageIndex выберем картинку с индексом 1, в свойстве Hint напишем подсказку:
Сохранить файл как
Выберем для кнопки соответствующее событие OnClick.
В результате у вас должна получиться такая Панель инструментов:
Это все. Сохраните проект и запустите его на выполнение. Если вы все сделали правильно, теперь у вас есть правильно действующая панель управления с тремя кнопками и одним разделителем.
