Лабораторные работы по информатике для специальности «Моделирование и исследование операций в организационно-технических системах»
Лабораторная работа № 18 Проектирование пользовательского интерфейса.
Создание меню
Введение
В лабораторной работе рассмотрен процесс создания меню приложения. В частности рассмотрены компоненты TMainMenu и TPopupMenu. Также рассмотрен компонент TStatusBar (строка состояния) и организация взаимодействия строки состояния и меню при организации справочной системы. Рассмотрены стандартные диалоги TOpenDialog и TSaveDialog. Приведены примеры использования выше перечисленных компонентов.
Элементы пользовательского интерфейса
Практически любому графическому приложению необходимо иметь меню, строку состояния и панель инструментов. Эти стандартные элементы пользовательского интерфейса приходится создавать каждому, кто решает с помощью компьютера любую более или менее серьезную проблему. Для примера на рисунке 1 приведено изображение окна программы Explorer.
Главное меню
Панель инструментов
Строка состояния
Рисунок 1 – Окно программы Explorer
Сначала подробнее рассмотрим свойства и события каждого компонента.
Компоненты TMainMenu и TPopUpMenu
Важнейшим элементом пользовательского интерфейса является меню. Меню – это список возможностей, которые программа предоставляет в распоряжение пользователя и которые он может выбирать по своему желанию. Выбор пунктов меню осуществляется с помощью мыши или клавиатуры. Различают два типа меню:
•главное меню формы;
•контекстное меню формы или компонента.
Главное меню всегда одно и располагается под заголовком формы. Выбор одного из пунктов главного меню вызывает появление на экране подчиненного меню со списком
Лабораторные работы по информатике для специальности «Моделирование и исследование операций в организационно-технических системах»
вложенных пунктов. Любой пункт подчиненного меню может быть либо командой, либо содержать другое подчиненное меню, о чем свидетельствует стрелка справа от пункта. Уровень вложенности подчиненных меню практически не ограничен, но современное представление о хорошем пользовательском интерфейсе требует, чтобы вложенность была минимальной (обычно не более двух – трех уровней).
Контекстных меню может быть много и, они не имеют постоянного места внутри формы. Такие меню не связаны с главным меню и появляются лишь по специальному требованию со стороны пользователя, как правило, по щелчку правой кнопкой мыши, когда указатель мыши наведен на нужный элемент. Пункты контекстного меню могут содержать подчиненные меню. Контекстное меню привязывается к конкретному элементу формы и идеально подходит для размещения команд, специфичных только этому элементу. Поскольку доступ к командам контекстного меню можно получить быстрее, чем к командам главного меню, использование контекстных меню делает пользовательский интерфейс более удобным.
Для создания главного и контекстного меню среда Delphi имеет два разных компонента: MainMenu и PopupMenu. Заполнение этих компонентов пунктами меню происходит одинаково, но результат будет разным. В первом случае мы получим стандартную строку главного меню, а во втором – окно контекстного меню.
Главное меню
Компонент TMainMenu находится на вкладке Standart (рисунок 2).
Рисунок 2 – Расположение компонента TMainMenu в палитре компонентов
Свойства компонента TMenuItem приведены в таблице 1.
Таблица 1 – Свойства и события компонента TMainMenu
Свойство |
Описание |
|
|
property AutoHotkeys: |
Значение maAutomatic избавляет программиста от |
TMenuItemAutoFlag; |
необходимости назначать пунктам меню "горячие" |
|
клавиши (с помощью специального символа & в тексте |
|
пунктов); компонент автоматически подбирает "горячие" |
|
клавиши. Значение maManual требует, чтобы "горячие" |
|
клавиши назначил программист. |
property AutoLineReduction: |
Если равно значению maAutomatic, то при отображении |
TMenuItemAutoFlag; |
меню идущие подряд пункты-разделители рисуются как |
property AutoMerge: Boolean; |
Определяет, сливается ли главное меню вторичной |
|
формы с главным меню главной формы. Способ слияния |
property Images: |
Список значков, отображаемых рядом с пунктами меню. |
TCustomImageList; |
Свойство Images используется совместно со свойством |
property Items: TMenuItem; |
Массив пунктов меню. |
property OwnerDraw: Boolean; |
Если равно значению True, то каждый пункт меню |
|
получает возможность участвовать в процессе своего |
Лабораторные работы по информатике для специальности «Моделирование и исследование операций в организационно-технических системах»
Свойство |
Описание |
|
|
property OnChange: |
Событие, происходит при любом изменении структуры |
TMenuChangeEvent; |
меню. |
Компонент TMainMenu является невизуальным, т. е. значок компонента TMainMenu, который отображается на форме, виден лишь на этапе разработки, а на этапе выполнения приложения его значок не отображается. Пользователь видит результат работы компонента – строку меню.
Дизайнер меню
Добавление новых пунктов выполняется в специальном редакторе – дизайнере меню (Menu Designer). Вызов дизайнера меню осуществляется с помощью команды Menu Designer…, которая находится в контекстном меню компонента TMainMenu рисунок 3. Вызвать дизайнер меню также можно два раза щелкнув на компоненте, либо выбрав свойство Items в инспекторе объектов и нажать на кнопку 
рисунок 4.
Рисунок 3 – Вызов дизайнера меню
Рисунок 4 – Вызов дизайнера меню из инспектора объектов
Вид дизайнера меню показан на рисунке 5. Обратите внимание, что в заголовок окна дизайнера меню состоит из имени формы и имени компонента меню.
Лабораторные работы по информатике для специальности «Моделирование и исследование операций в организационно-технических системах»
Рисунок 5 – Дизайнер меню
Дизайнер меню работает в паре с окном свойств. Создание и удаление пунктов осуществляется в дизайнере меню, а свойства отдельно взятого пункта устанавливаются в окне свойств.
Процесс создания меню будем рассматривать на примере создания программы «Текстовый редактор».
Создайте новое приложение. На форму (frmEditor) поместите компонент TMainMenu (MainMenu) и компонент TMemo (Memo). Установите значение свойства Caption формы frmEditor равным «Редактор». Установите значение свойства Align компонента Memo равным alClient, очистите свойство Lines этого компонента. После настройки компонентов форма примет вид как показано на рисунке 6.
Рисунок 6 – Вид формы после добавления компонентов
Процесс создания меню начнем с создания меню многие программы. Обычно оно содержит следующие «Сохранить как», «Сохранить», «Печать», «Выход», специфичных для конкретного приложения.
файл. Этот пункт имеют очень команды: «Новый», «Открыть», а также ряд других команд
Откройте дизайнер меню. Пока строка главного меню состоит из одного безымянного пункта. Дайте этому пункту программный идентификатор mitFile (значение свойства Name) и заголовок &Файл (значение свойства Caption). Символ & обеспечивает подчеркивание следующего за ним символа при отображении текста, поэтому пункт меню
Лабораторные работы по информатике для специальности «Моделирование и исследование операций в организационно-технических системах»
будет виден как File (рисунок 7). Подчеркнутая буква используется в комбинации с клавишей Alt для быстрого выбора пункта меню и называется горячей клавишей. В данном случае активизация пункта Файл будет происходить по комбинации клавиш Alt+Ф. Обратите внимание, что в некоторых версиях операционной системы Windows «горячие» клавиши подчеркиваются только после нажатия клавиши Alt.
Рисунок 7 – Текст пункта меню
Компонент TMainMenu позволяет автоматизировать назначение пунктам меню горячих клавиш, это позволяет избежать дублирования горячих клавиш в нескольких пунктах, а также с экономить время при разработке программ. За эту функцию в компоненте TMainMenu отвечает свойство AutoHotKeys. Если оно установлено в значение maAutomatic, то подбор горячих клавиш выполняется автоматически. С этого момента мы будем пользоваться этой возможностью, поэтому удалите символ амперсанта
(&) из свойства Caption компонента mitFile и убедитесь, что в компоненте MainMenu1 свойство AutoHotKeys установлено в значение maAutomatic.
Сейчас под пунктом Файл нужно создать подчиненное меню со списком команд. Для этого просто щелкните в дизайнере меню на пункте Файл, среда Delphi все сделает за вас. Под пунктом Файл появится пустая ячейка – заготовка первого пункта выпадающего списка. Выберите этот пункт с помощью мыши и дайте ему программный идентификатор mitNew (свойство Name), а в свойстве Caption впишите текст «Новый». Вместо пустой ячейки появится текст Новый и пустая ячейка переместится ниже.
Аналогично, добавьте еще четыре пункта: Открыть..., Сохранить…, Сохранить как… и Выход. В программе они должны называться mitOpen, mitSave, mitSaveAs, mitExit соответственно.
Лабораторные работы по информатике для специальности «Моделирование и исследование операций в организационно-технических системах»
Рисунок 8 – Пункты меню файл
Не пытайтесь удалить пустой пункт, завершающий список команд – у вас ничего не выйдет. Да это и не требуется, поскольку пустые висячие пункты не отображаются в меню во время работы программы.
Совет: Обратите внимание, что после названия некоторых пунктов меню следует троеточие. При создании меню для Windows-программ принято, что если при нажатии пункта меню появляется диалоговое окно, то название пункта меню заканчивается троеточием. Так же обратите на порядок пунктов меню File, он также является общепринятым. Рекомендуется придерживаться этих правил и при создании собственных программ, так как это способствует более быстрой адаптации пользователя к программе.
Для создания полноценного меню в дизайнере меню для каждого отдельно взятого пункта предусмотрено контекстное меню с необходимым набором команд (рисунок 9 и таблица 2). Если необходимо перенести пункт меню из одного места в другое, то просто захватите пункт меню щелчком левой кнопки мыши и, удерживая нажатой кнопку мыши, отбуксируйте его к новой позиции. Таким образом, можно переместить не только отдельный пункт, но и целое подчиненное меню со всеми его пунктами и вложенными меню.
Таблица 2 – Команды дизайнера меню
Команда
Insert
Delete
Create Submenu