Визуальное программирование

Основные компоненты (элементы управления) ИСР

Графический интерфейс

Большинство современных операционных систем позволяют пользователям использовать два типа интерфейсов: консольный и графический.

В консольном интерфейсе работа с компьютером осуществляется при помощи ввода текстовых команд. Первые операционные системы были рассчитаны исключительно на консольный интерфейс.

В графическом интерфейсе взаимодействие с программой осуществляется через графические элементы. Идея графического интерфейса возникла в корпорации Xerox в 1970 году и была воплощена в компьютере Xerox Alto, который не получил широкого распространения. Позже свою реализацию графического интерфейса предложили фирмы Apple и Microsoft. После этого графический интерфейс получил широкое распространение и стал реализовываться во многих системах.

Первоначально графический интерфейс был ориентирован на мышь, но сейчас он успешно применяется в устройствах с сенсорными экранами.

Стандартизация

Несмотря на все разнообразие графических интерфейсов, они имеют общие элементы и схожим образом выглядят в разных системах. При помощи этих элементов пользователи взаимодействуют с программами. Таким образом, облегчается и ускоряется освоение программ. Давайте рассмотрим основные элементы графического интерфейса.

Окно

Является основным элементом программы. В нем расположены другие элементы. Окно имеет заголовок, в котором обычно написано название программы или имя открытого файла.

Поле ввода

Это поле нужно для ввода информации и часто выглядит как белый квадрат.

Флажок

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

Полоса статуса

Представляет собой полосу с текстом, которая расположена внизу окна. Она имеет ширину равную ширине окна и предназначена для информирования пользователя.

Меню

Расположено сразу под заголовком программы. Меню предназначено для выполнения часто используемых операций. Оно состоит из разделов, в которых могут быть подразделы. Каждый раздел состоит из конечного числа пунктов. Разделы и пункты имеют названия. Для быстрого доступа к пунктам меню часто используют горячие клавиши.

Всплывающие меню

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

Переключатель

Похож на флажок, но позволяет выбрать только один пункт.

Надпись

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

Контейнер с полосами прокрутки

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

Поле ввода текста из многих строк

Оно является основным элементом любого текстового редактора и скорее всего вы с ним уже встречались.

Вкладки

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

Список значений

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

Раскрывающийся список

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

Индикатор прогресса

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

Бегунок

Позволяет выбрать значение из заданного диапазона. Бегунки бывают горизонтальные и вертикальные. Перемещение бегунка влево уменьшает значение на определенное число, а перемещение бегунка вправо увеличивает значение на определенное число.

Кнопка

Представляет собой квадрат с надписью. При щелчке на нем выполняется определенное действие.

Особенности библиотеки

В терминах библиотеки Lazarus Component Library элемент графического интерфейса называют компонентом. Каждый компонент реализуется как объект соответствующего класса, который наследуется от некоторого базового класса.

Сама работа программы определяется совокупностью обработчиков событий. Событием называется действие пользователя или операционной системы. В качестве примера события можно назвать щелчок левой кнопки мыши по элементу интерфейса программы. Обработчик события пишется в теле метода класса.

Организация библиотеки Lazarus Component Library идентична организации библиотеки Visual Component Library, используемой в Delphi и C++ Builder.

Рассмотрим теперь некоторые компоненты библиотеки LCL Lazarus. Доступ к компонентам в Lazarus организован через палитру компонентов, рис. 1.

Рис. 1. Палитра компонентов Lazarus

Палитра компонентов состоит из страниц или вкладок, в которых и находятся компоненты, сгруппированные по некоторому признаку. На рисунке 1 показана страница Standard, в которой расположены наиболее часто используемые, так называемые стандартные компоненты. По названию страницы можно понять, какие компоненты находятся в той или иной вкладке. Например, ясно, что на странице Dialogs находятся компоненты для организации диалога с пользователем.

В соответствии с предназначением курса, мы не будем рассматривать все компоненты (для этого необходимо писать новый курс объема раза в два больше, чем этот! Дополнительная иформация).

Стандартные элементы управления

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

Значок Компонент Описание
tmainmenu.png TMainMenu главное меню формы
tpopupmenu.png TPopupMenu всплывающее меню
tbutton.png TButton кнопка с текстом
tlabel.png TLabel надпись
tedit.png TEdit однострочное текстовое поле
tmemo.png TMemo многострочное текстовое поле с возможностью прокрутки
ttogglebox.png TToggleBox кнопка с двумя состояниями (вкл\выкл), которые меняются щелчком мыши.
tcheckbox.png TCheckBox флажок, может отображаться в одном из двух состояний (установлен\снят)
tradiobutton.png TRadioButton переключатель, предназначен для выбора одного переключателя из ряда возможных
tlistbox.png TListBox список строк, одна из которых может быть выбрана
tcombobox.png TComboBox комбинация выпадающего списка и однострочного текстового поля.
tscrollbar.png TScrollBar полоса прокрутки
tgroupbox.png TGroupBox контейнер, позволяющий объединить элементы управления в группы
tradiogroup.png TRadioGroup группа переключателей. Похож на TGroupBox с интегрированными TRadioButton
tcheckgroup.png TCheckGroup группа флажков. Похож на TGroupBox с интегрированными TCheckBox.
tpanel.png TPanel визуальный контейнер для других элементов управления
tframe.png TFrame контейнер для компонентов, который может быть размещен на форме или внутри другого контейнера.
tactionlist.png TActionList список действий (TAction) для централизации обработки событий меню/мыши/клавиатуры

Дополнительные элементы управления

Вкладка Additional палитры компонентов содержит дополнительные, часто используемые компоненты

Значок Компонент Описание
tbitbtn.png TBitBtn кнопка с дополнительным изображением
tspeedbutton.png TSpeedButton кнопка быстрого доступа для использования на TToolBar‘ах и т.д.
tstatictext.png TStaticText статический текст, похожий на TLabel
timage.png TImage графическое изображение (gif, jpg, bmp, png)
tshape.png TShape геометрическая фигура (треугольник/прямоугольник/круг)
tbevel.png TBevel фаска для придания глубины
tpaintbox.png TPaintBox область рисования с помощью TCanvas
tnotebook.png TNotebook контейнер, содержащий страницы, наподобие настоящей записной книжки
tlabelededit.png TLabeledEdit комбинация TEdit / TLabel
tsplitter.png TSplitter разделитель, инструмент изменения размеров
ttrayicon.png TTrayIcon значок в системной области
tcontrolbar.png TControlBar менеджер компонентов панели инструментов на форме
tflowpanel.png TFlowPanel панель, которая может ‘плавать’ в пределах родительской области
tmaskedit.png TMaskEdit TEdit с ограничениями на ввод и проверкой по шаблону
tchecklistbox.png TCheckListBox комбинация TCheckBox‘ов и TListBox
tscrollbox.png TScrollBox контейнер с прокруткой
tapplicationproperties.png TApplicationProperties невидимый компонент для получения свойств приложения
tstringgrid.png TStringGrid таблица, которая может содержать строки
tdrawgrid.png TDrawGrid таблица, которая может содержать изображения
tpairsplitter.png TPairSplitter компонент для разделения двух областей
tcolorbox.png TColorBox список для выбора цветов
tcolorlistbox.png TColorListBox список TListBox для выбора цветов
tvaluelisteditor.png TValueListEditor список имен свойств с редактируемыми значениями

 

Вкладка Common Controls палитры компонентов содержит видимые компоненты, такие как индикаторы прогресса и компоненты представления информации.

Значок Компонент Описание
ttrackbar.png TTrackBar ползунок с дополнительными отметками
tprogressbar.png TProgressBar компонент, который используется для отображения процесса, если операции выполняются длительное время
ttreeview.png TTreeView древовидное представление информации
tlistview.png TListView удобное представление элементов со значками
tstatusbar.png TStatusBar строка состояния (располагается внизу формы) для отображения информации о состоянии программы
ttoolbar.png TToolBar контейнер (панель инструментов), управляющий кнопками с изображениями из TImageList
tcoolbar.png TCoolBar контейнер (панель инструментов), управляющий кнопками с изображениями из TImageList (или действиями из TActionList), их размещением в строках и автоматической корректировкой их размеров и расположением
tupdown.png TUpDown счетчик с двумя кнопками для увеличения/уменьшения некоторого значения
tpagecontrol.png TPageControl контейнер с набором страниц, похожий на настоящую записную книжку
ttabcontrol.png TTabControl контейнер с набором вкладок
theadercontrol.png THeaderControl список с заголовками, связанными с текстом и изображениями
timagelist.png TImageList коллекция изображений, которые могут быть добавлены к другим компонентам
tpopupnotifier.png TPopupNotifier платформонезависимый компонент, представляющий всплывающую подсказку (balloon help)
tdatetimepicker.png TDateTimePicker элемент управления, помогающий в выборе корректной даты и/или времени

 

Вкладка Dialogs палитры компонентов, содержит компоненты, отображающие различные диалоговые окна.

Значок Компонент Описание
topendialog.png TOpenDialog Окно открытия файла
tsavedialog.png TSaveDialog Окно сохранения файла
tselectdirectorydialog.png TSelectDirectoryDialog Выбор папки
tcolordialog.png TColorDialog Выбор цвета
tfontdialog.png TFontDialog Выбор шрифта
tfinddialog.png TFindDialog Окно поиска текста
treplacedialog.png TReplaceDialog Окно замены текста
topenpicturedialog.png TOpenPictureDialog Окно открытия файла рисунка
tsavepicturedialog.png TSavePictureDialog Окно сохранения файла рисунка
tcalendardialog.png TCalendarDialog Выбор даты
tcalculatordialog.png TCalculatorDialog Калькулятор
tprintersetupdialog.png TPrinterSetupDialog Настройка принтера
tprintdialog.png TPrintDialog Окно печати (выбор принтера, страниц и т.д.).
tpagesetupdialog.png TPageSetupDialog Настройка страницы
ttaskdialogicon.png TTaskDialog

Аналогичные элементы Delphi, описание на русском языке, соответствие Lazarus почти полное.

Вкладка Standard

Вкладка Additional

Вкладка Win32 много аналогичных элементов вкладки Common Controls Lazarus

Вкладка Dialogs