Лекция по информатике "Графический интерфейс VB" (часть 3)

Основой для создания графического интерфейса разрабатываемого приложения являются форма (в Visual Basic — класс объектов Form, в VBA — класс объектов UserForm), представляющая собой окно, в котором размещаются управляющие элементы. Необходимо отметить, что графический интерфейс проекта может включать в себя несколько форм.

VB может работать в двух режимах: проектирование (design) и выполнение (run).

В режиме проектирования программист осуществляет «визуальное проектирование» и ввод кодов программы (т. е. осуществляет программирование). Исходное состояние – это пустое окно. Программист может рассматривать его как "холст" с лицевой и обратной стороны. На передней (лицевой) стороне программист рисует формы и элементы управления: окна для ввода текста, кнопки, линейки прокрутки и т. д. , которыми будет управлять пользователь при работе с созданным программистом приложением. Все это визуальная часть VB (первое слово в VB).

Обратная сторона "холста" - программы (в виде процедур), которые определяют для каждого элемента управления, что нужно делать, если произошло, то или иное событие для данного элемента управления. Программа пишется на языке Basic (отсюда второе слово в VB).

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

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

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

В режиме проектирования доступны:

 - ToolBox - панель компонентов управления;

 - Properties - панель свойств;

 - Основное окно;

 - Code Window;

 - Project.

В заголовке основного окна указывается режим (design).

В режиме выполнения осуществляется отладка приложения. Здесь программисту доступно лишь основное окно и окно Debug. В заголовке основного окна указывается режим [run].

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

Замечание 2. Доступ к свойствам объектов в режиме проектирования происходит через соответствующее окно свойств (Properties), а в режиме выполнения, только программным путем.

Основное окно.

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

Если закрыть основное окно, то автоматически закрываются все окна и осуществляется выход из VB, т. е. завершение программы. Закрыть другие окно можно независимо друг от друга.

Если минимизировать основное окно, то минимизируются все окна. Минимизировать отдельно окна ToolBox, Properties и др. нельзя.

Открыть окна (кроме основного) можно из меню View основного окна. View | Form, ToolBox, Properties, Projects.

На панели инструментов основного окна расположены числовые значения координат положения и размеры текущего объекта, которые выражены в твипах (twip).

Для формы координаты положения задаются относительно границ экрана (left, top), левого края экрана и верхнего края экрана. Например (1502, 1628) - означает, что форма располагается 1502 твипа от левого края экрана и 1628 твипов от верхнего края экрана.

Для элементов управления координата положения задаются относительно границ формы (left, top): левого края формы и верхнего края формы.

Размер текущего объекта измеряется как ширина х высоту.

Твип – это единица измерения равная 1/1440 логического дюйма. Размер логического дюйма зависит от монитора и его разрешающей способности. Поэтому один твип будет разным для различных типов мониторов.

Однако нет необходимости иметь дело с единицами «твип». В каждой форме имеется свойство Scale Mode, которое определяет в каких единицах измерять место положение объектов и их размеры на форме: «пунктах», «пиках», «сантиметрах», «дюймах» и др.

Основные элементы управления.

Форма – это объект, представляющий собой окно на экране, в котором размещаются управляющие элементы.

Визуальное конструирование графического интерфейса приложения состоит в том, что на форму с помощью мыши помещаются и «рисуются» те или иные управляющие элементы.

Классы управляющих элементов (Controls) имеют различное назначение в графическом интерфейсе приложения. Текстовые поля (TextBox), метки (Label) и списки (ListBox) обычно используются для ввода и вывода данных, графические окна (PictureBox) — для вывода графики, командные кнопки (CommandButton), переключатели (Checkbox) и флажки (OptionsButton) — для организации диалога и так далее.

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

Управляющие элементы – это объекты, являющиеся элементами графического интерфейса приложения и реагирующие на события, производимые пользователем или программными объектами.

Форма и управляющие элементы обладают определенны­ми наборами свойств, методов и событий.

Элементы управления создаются при помощи панели инструментов (Tool Box), открытие View – Tool Box. Все кнопки панели инструментов, за исключением первой, служат для создания элементов управления. Первая кнопка называется Pointer (указатель). Щелкнув по указателю можно выбрать уже созданный в форме элемент управления, изменить его размеры или переместить. Данный режим конструирования формы включается автоматически после размещения элемента управления в форме.

Весь материал - смотрите документ.

Лекция 3. Графический интерфейс и событийные процедуры

Графический интерфейс. Основой для создания графического интерфейса разрабатываемого приложения являются форма (в Visual Basic — класс объектов Form, в VBA — класс объектов UserForm), представляющая собой окно, в котором размещаются управляющие элементы. Необходимо отметить, что графический интерфейс проекта может включать в себя несколько форм.

VB может работать в двух режимах: проектирование (design) и выполнение (run).

В режиме проектирования программист осуществляет «визуальное проектирование» и ввод кодов программы (т.е. осуществляет программирование). Исходное состояние – это пустое окно. Программист может рассматривать его как "холст" с лицевой и обратной стороны. На передней (лицевой) стороне программист рисует формы и элементы управления: окна для ввода текста, кнопки, линейки прокрутки и т.д., которыми будет управлять пользователь при работе с созданным программистом приложением. Все это визуальная часть VB (первое слово в VB).

Обратная сторона "холста" - программы (в виде процедур), которые определяют для каждого элемента управления, что нужно делать, если произошло, то или иное событие для данного элемента управления. Программа пишется на языке Basic (отсюда второе слово в VB).

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

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

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

В режиме проектирования доступны:

- ToolBox - панель компонентов управления;

- Properties - панель свойств;

- Основное окно;

- Code Window;

- Project.

В заголовке основного окна указывается режим (design).

В режиме выполнения осуществляется отладка приложения. Здесь программисту доступно лишь основное окно и окно Debug. В заголовке основного окна указывается режим [run].

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

Замечание 2. Доступ к свойствам объектов в режиме проектирования происходит через соответствующее окно свойств (Properties), а в режиме выполнения, только программным путем.

Основное окно.

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

Если закрыть основное окно, то автоматически закрываются все окна и осуществляется выход из VB, т.е. завершение программы. Закрыть другие окно можно независимо друг от друга.

Если минимизировать основное окно, то минимизируются все окна. Минимизировать отдельно окна ToolBox, Properties и др. нельзя.

Открыть окна (кроме основного) можно из меню View основного окна. View | Form, ToolBox, Properties, Projects.

На панели инструментов основного окна расположены числовые значения координат положения и размеры текущего объекта, которые выражены в твипах (twip).

Для формы координаты положения задаются относительно границ экрана (left, top), левого края экрана и верхнего края экрана. Например (1502, 1628) - означает, что форма располагается 1502 твипа от левого края экрана и 1628 твипов от верхнего края экрана.

Для элементов управления координата положения задаются относительно границ формы (left, top): левого края формы и верхнего края формы.

Размер текущего объекта измеряется как ширина х высоту.

Твип – это единица измерения равная 1/1440 логического дюйма. Размер логического дюйма зависит от монитора и его разрешающей способности. Поэтому один твип будет разным для различных типов мониторов.

Однако нет необходимости иметь дело с единицами «твип». В каждой форме имеется свойство Scale Mode, которое определяет в каких единицах измерять место положение объектов и их размеры на форме: «пунктах», «пиках», «сантиметрах», «дюймах» и др.

Основные элементы управления.

Форма – это объект, представляющий собой окно на экране, в котором размещаются управляющие элементы.

Визуальное конструирование графического интерфейса приложения состоит в том, что на форму с помощью мыши помещаются и «рисуются» те или иные управляющие элементы.

Классы управляющих элементов (Controls) имеют различное назначение в графическом интерфейсе приложения. Текстовые поля (TextBox), метки (Label) и списки (ListBox) обычно используются для ввода и вывода данных, графические окна (PictureBox) — для вывода графики, командные кнопки (CommandButton), переключатели (Checkbox) и флажки (OptionsButton) — для организации диалога и так далее.

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

Управляющие элементы – это объекты, являющиеся элементами графического интерфейса приложения и реагирующие на события, производимые пользователем или программными объектами.

Форма и управляющие элементы обладают определенны­ми наборами свойств, методов и событий.

Элементы управления создаются при помощи панели инструментов (Tool Box), открытие View – Tool Box. Все кнопки панели инструментов, за исключением первой, служат для создания элементов управления. Первая кнопка называется Pointer (указатель). Щелкнув по указателю можно выбрать уже созданный в форме элемент управления, изменить его размеры или переместить. Данный режим конструирования формы включается автоматически после размещения элемента управления в форме.

1. Элемент Label (метка) используется для отображения на экране текста, который пользователь не может изменить с клавиатуры.

2. Элемент TextBox (текстовое поле) – основной элемент управления, предназначенный для ввода данных.

3. Элемент Frame (рамка) – один из элементов – контейнеров, которые предназначены для объединения в группу нескольких элементов управления.

4. Элемент CommandButon используется для того, чтобы начать, прервать или закончить какой – либо процесс.

5. Элемент CheckBox (флажок) предназначен для выбора опции путем установки специальной пометки («галочки»).

6. Элемент OptionButton (переключатель) предназначен для установки только одной опции из группы, в отличии от элемента управления CheckBox (флажок).

7. Элемент ListBox (список) позволяет выбрать из списка один или несколько элементов. В любое время список может редактировать: добавлять новые элементы или удалять существующие. Если не все элементы могут одновременно отображаться в поле списка, то автоматически добавляются полосы прокрутки.

8. Элемент ComboBox (поле со списком) представляет собой комбинацию двух элементов управления: списка (ListBox) и текстового поля (TextBox). Поле со списком используется в том случае, когда нельзя заранее определить значения, которые следует включить в список, или когда в списке слишком много элементов. В поле со списком можно не только выбрать нужное значение, но и вводить его непосредственно в поле ввода.

1. Элементы управления HscrollBar и Vscroll (полосы прокрутки), позволяющие просматривать содержимое окна, не помещающееся на экране.

2. Элемент Timer (таймер – часы) позволяет запускать или завершать различные процессы приложения в определенные моменты времени.

3. Элемент Shape (фигура) позволяет строить геометрические фигуры: прямоугольники, окружности и т.д.

4. Элемент Line (линия) позволяет построить линии.

5. Элемент PictureBox (окно с рисунком) служит для отображения рисунков и других графических объектов. Окно с рисунком является элементом – контейнером.

6. Элемент Image (рисунок) предназначен только для отображения графических объектов, т.е. в отличии от элемента PictureBox, он не является элементом – контейнером.

7. Элемент Data (управление данными) используется для получения доступа к таблицам базы данных.

8. Элемент OLE (связывание и внедрение объектов) позволяет взаимодействовать с любыми программами, поддерживающими OLE.

Оконный интерфейс Visual Basic

Окно Конструктор форм. Окно Конструктор форм является основным рабочим окном и расположено в центре окна интегрированной среды разработки языка Visual Basic. По умолчанию проекту присваивается имя Projectl. Именно в этом окне происходит визуальное конструирование графического интерфейса разрабатываемого приложения.

В окне Конструктор форм располагается сама форма frm, которая является также объектом и принадлежит классу объектов Form. Размеры формы можно менять, перетаскивая мышью правую или нижнюю границу формы.

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

Окно Программный код. С формой связан программный модуль, содержащий программные коды процедур. Для ввода и редактирования текста программы служит окно Программный код (в данном случае Project1-frm1(Code)), которое вызывается командой [View-Code].

Сразу под строкой заголовка окна Программный код размещаются два раскрывающихся списка. Левый список содержит перечень объектов проекта (объектов, размещенных на форме), а правый — перечень событий, доступных для выбранного объекта.

Панель инструментов. В левой части окна интегрированной среды разработки Visual Basic располагается Панель инструментов (Tool-Box), содержащая пиктограммы управляющих элементов. Стандартный набор управляющих элементов включает в себя 21класс объектов: CommandButton (командная кнопка), TextBox (текстовое поле), Label(надпись) и т. д. Существует возможность дополнить панель инструментов новыми классами управляющих элементов RichTextBox(усовершенствованное текстовое поле), ImageList (список изображений) и др. Выбрав щелчком мышью на Панели инструментов нужный элемент, мы можем поместить его на форму проектируемого приложения. Процесс размещения на форме управляющих элементов аналогичен рисованию графических примитивов с использованием графического редактора.

Фактически мы размещаем на форме экземпляры определенных классов объектов. Например, выбрав класс CommandButton, мы можем разместить на форме неограниченное количество экземпляров этого класса, то есть командных кнопок Command1, Command2, Command3 и так далее.

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

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

Окно Просмотр объектов. Еще одно важнейшее окно — окно Просмотр объектов (Object Browser) может быть вызвано командой [View-Object Browser].

В левой колонке окна производится выбор объекта или класса объектов.

В правой колонке появляется перечень свойств, методов и событий выбранного объекта или класса объектов.

Выбрав элемент списка (например, событие Click), можно получить о нем краткую информацию, которая появляется в нижней части окна.

Окно Проводник проекта. Окно Проводник проекта (Project) располагается в верхнем правом углу

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

Проект хранится в файле с расширением vbp (в данном случае в файле prjVBI.vbp). Кроме того, входящие в проект формы хранятся в отдельных файлах с расширением frm (в данном случае форма, входящая в состав проекта, хранится в файле frmVBI.frm).

Окно Расположение формы, В нижнем правом углу находится окно Расположение формы (Form Layout). Оно показывает, где будет располагаться окно формы на экране монитора в период выполнения программы. Положение формы можно изменять перетаскиванием мышью.

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

Первая пара чисел показывает расстояние от левого верхнего угла монитора до левого верхнего угла формы, а вторая пара — это размеры формы (ширина и высота). Размеры отображаются в особых единицах — твипах (один твип равен примерно 0,018 мм).

Если необходимо задать точные значения местоположения и размеров формы, то это можно сделать, установив значения свойств формы Left (расстояние по горизонтали от левого верхнего угла монитора до верхнего левого угла формы), Тор (расстояние по вертикали от левого верхнего угла монитора до верхнего левого угла формы), Width (ширина формы) и Height (высота формы).

Расположение вышеперечисленных окон на рабочем столе интегрированной среды разработки, а также их размеры можно изменять с помощью мыши или команд меню View (Просмотр).

Использование среды VB для создания приложения. Укрупнено действия программиста, при создании приложения, можно представить:

a) Построение формы. Подбор места расположения и размеров.

b) Настройка среды проектирования производится в диалоговом окне Options (вкладка General). Открыть это диалоговое окно можно с помощью команды меню Tools/Options.… Здесь можно указать ширину и высоту ячейки сетки формы. Можно сетку показать на форме, а можно и убрать с формы. (Это делается с помощью флажка Show Grid.) Можно привязать все объекты на форме к узлам сетки (флажок Align Controls to Grid).

c) Расположение компонентов управления на форме. Для размещения компонентов управления на форме можно использовать 2 способа:

- дважды щелкнуть по компоненту управления Toolbox. Компонент управления появится в середине формы;

- один раз щелкнуть по компоненту управления Toolbox. Затем поместить курсор в то место, где будет располагаться верхний левый угол компоненты управления. Удерживая нажатой левую кнопку мыши, раздвинуть до нужных размеров. Потом можно этот компонент переместить и изменить его размеры.

Для редактирования размещения компонентов управления можно использовать меню Edit (Cut, Сору, Paste, Delete). Можно воспользоваться контекстным меню, где имеются и дополнительные возможности, например:

Bring to Front- выдвинуть объект вперед;

Send to Back- послать назад;

Align to Grid- выровнять по сетке (формы) выделенный элемент (объект).

d). Установка свойств каждого из компонентов управления. В частности, каждый объект имеет свойство имя (Name). Имя обычно начинают со строчной буквы. Три первые буквы определяют тип объекта. Например, frmOpen (форма), lblHello (метка), chkBold (флажок), txtUserNambe (текстовое окно), cmdButton(командная кнопка).

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

f).Отладка программы. При отладке выявляются две разновидности ошибок: синтаксические ошибки и логические ошибки.

Синтаксические ошибки обнаруживаются непосредственно в окне редактирования кода при написании программы.

Логические ошибки появляются во время работы программы. Для управления поиском логических ошибок используются опции меню Run и Debug, а для их обнаружения – окна: Locals , Watch Window, Quick Watch, Immediate Window.

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

Отладка в непрерывном режиме осуществляется с помощью команд Run/Start, Run/Break, Run/Continue, Run/End, а также команды Debug/Step to cursor. В непрерывном режиме можно использовать контрольные точки останова. Контрольные точки останова (КТО) можно устанавливать и отменять с помощью команды Debug/Toggle Breakpoint. Для этого, предварительно установив курсор на необходимую команду в Code Window, щелкнуть по команде Debug/Toggle Breakpoint. Для удаления КТО, необходимо поставить на эту КТО курсор и щелкнуть по той же команде.

Следует отметить, что КТО остаются и после завершения программы. При повторном запуске КТО сохраняются. Для отключения всех КТО сразу используется команда Debug/Clear All Breakpoints. Эту команду можно выполнить перед запуском программы.

По команде End осуществляется выход из задачи и переход в режим проектирования.

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

- Debug/Step into - с заходом в вызываемую процедуру;

- Debug/Step over - без захода в вызываемую процедуру.

При пошаговой отладке, после выполнения каждого оператора, VB переходит в режим приостанова (Break). При выполнении последнего оператора в процедуре обработки события VB попадает в режим работы Run, ожидая прихода очередного события. После поступления очередного события, VB снова начинает отладку в пошаговом режиме. Отметим, что, если при выходе из процедуры обработки события VB находился в непрерывном режиме отладки, то при появлении очередного события, VB продолжит отладку в непрерывном режиме отладки.

Находясь в состоянии приостанова (независимо в каком режиме производится отладка), можно заставить VB продолжить выполнение отладки с любого оператора. Для этого следует поместить курсор на ту строку, которую следует выполнить при дальнейшей отладке, а затем, щелкнув по команде Run / Set Next Statement, продолжить отладку в необходимом режиме.

Следует отметить, что 7 команд для отладки в непрерывном и пошаговом режиме дублируются кнопками на панели инструментов.

Для отображения процесса отладки используются 4-е окна отладки: Locals Window, Watch Window, Quick Window, Immediate Window. Все они используются в режиме приостанова(Break). Их назначение:

-Locals Window, используется для просмотра всех свойств всех объектов на форме;

- Watch Window, используется для наблюдения за изменением значений переменных в пошаговом режиме;

- Quick Window, используется для просмотра значения выделенной переменной в окне Code Window;

- Immediate Window. В этом окне можно записать любой оператор VB и сразу его выполнить.

Окна отладки можно вызвать с помощью кнопок на панели инструментов, либо с помощью опции меню View.