Структура среды разработки IDE

Человеко-машинный интерфейс

Методические указания

Санкт-Петербург

Составители: доцент, канд.техн.наук В.П.Попов;

доцент, канд.техн.наук Н.В.Соловьев

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

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

Методические указания предназначены для студентов, обучающихся по направлению «Информатика и вычислительная техника» и могут использоваться при изучении дисциплин «Человеко-машинный интерфейс», «Программирование на языках высокого уровня» и «Технология программирования».

Лабораторная работа №1

Стандартные компоненты интерфейсов прикладных программ

Цель работы:Ознакомить студентов с основными свойствами и поддерживаемыми событиями стандартных компонентов, применяемых для создания интерфейсов при разработке Windows-приложений в среде визуального программирования на объектно-ориентированном языке высокого уровня.

Общие сведения

В настоящее время существует довольно большое количество различных сред визуального программирования Windows-приложений, базирующихся на объектно-ориентированных языках высокого уровня. Например, среда Delphi, в основе которой лежит язык Pascal 7.0, или Visual Basic. Существуют и специализированные среды, предназначенные для создания приложений в той или иной области, например, среда Microsoft Access для разработки систем управления базами данных или среда Matlab для проектирования инженерных приложений.

Для максимально быстрой разработки Windows-приложений все среды визуального программирования объединяют в себе следующие элементы:

- высокопроизводительный компилятор с языка программирования высокого уровня в EXE-файлы;

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

- быстрая среда разработки, содержащая полный набор визуальных средств, поддерживающих как создание пользовательских интерфейсов, так и обработку корпоративных данных, с использованием библиотеки визуальных и невизуальных компонентов;

- интегрированный отладчик, позволяющий контролировать выполнение отлаживаемого приложения в различных режимах, следить за значениями переменных и оперативно изменять эти значения непосредственно в процессе отладки;

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

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

Далее в качестве визуальной среды разработки Windows-приложений будет рассматриваться базовая версия широко известного продукта фирмы Borland – среды программирования Delphi.

Порядок выполнения лабораторной работы

1. Выбрать среду визуального программирования (рекомендуемые среды: Delphi, Visual Basic, Visual C++).

2. Выбрать объект из палитры интерфейсных компонентов (рекомендуемые страницы: стандартные, дополнительные, диалоговые компоненты).

3. Изучить свойства выбранного объекта и обрабатываемые им события.

4. Написать исполняемый код для одного из событий.

5. Отладить полученную программу.

6. Заполнить отчет по лабораторной работе.

Содержание отчета

1. Описание применения выбранного из палитры компонентов объекта.

2. Описание свойств объекта.

3. Описание событий, обрабатываемых объектом.

4. Текст исполняемого кода и результат обработки события.

Список рекомендуемых интерфейсных компонентов:

1. Главное меню (MainMenu)

2. Локальное меню (PoupMenu)

3. Статический текст (Label)

4. Строка редактирования (Edit)

5. Многостроковый редактор (Memo)

6. Стандартная кнопка (Buton)

7. Кнопка независимой фиксации (CheckBox)

8. Кнопка зависимой фиксации (RadioButton)

9. Список (ListBox)

10. Комбинированный список (ComboBox)

11. Полоса прокрутки (ScrollBar)

12. Группа (GroupBox)

13. Графическая кнопка (BitBtn)

14. Таблица (StringGrid)

15. Закладки (Tabs)

16. Статусная строка (StatusBar)

17. Открытие файла (OpenDialog)

18. Сохранение файла (SaveDialog)

19. Выбор шрифта (FontDialog)

20. Выбор цвета (ColorDialog)

Лабораторная работа №2

Разработка алгоритма задачи и текста прикладной программы

Цель работы: Основываясь на знаниях и навыках, полученных при изучении дисциплин «Алгоритмизация и структурное программирование» и «Программирование на языках высокого уровня» разработать алгоритм поставленной задачи с учетом особенностей выбранной среды визуального программирования.

Лабораторная работа представляет собой первый этап разработки алгоритма выполнения поставленной задачи и компоновки пользовательского интерфейса прикладной программы.

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

Среда программирования выбирается студентом самостоятельно из известных пакетов, поддерживающих визуальное программирование в стиле Windows, например, Visual Basic, Delphi, Visual C++.

Варианты задания:

1. Умножение матриц .

2. Нахождение точек пересечения окружности и прямой линии.

3. Решение квадратного уравнения .

4. Дальность полета и высота подъема тела при броске под углом.

5. Умножение комплексных чисел .

6. Нахождение точек пересечения двух окружностей.

7. Решение системы вида

8. Нахождение точки пересечения двух прямых.

9. Время движения тела при скольжении по наклонной плоскости.

10. Нахождение точек пересечения овала и прямой линии.

11. Нахождение обратного комплексного числа .

12. Суммарное сопротивление при различных соединениях.

13. Скорости тел после соударения (абсолютно упругий и неупругий удары).

14. Решение системы из двух линейных уравнений .

15. Расчет кпд кипятильника.

16. Нахождение точек пересечения гиперболы и прямой линии.

17. Суммарная емкость при различных соединениях.

18. Сложение матриц .

19. Объем, давление и температура при различных термодинамических процессах

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

В процессе выполнения студент должен:

- выполнить описание поставленной задачи и выбранного метода решения,

- составить список исходных данных с указанием типа, возможного диапазона, значения по умолчанию;

- составить список выходных данных с указанием типа, возможного диапазона;

- разработать схему алгоритма и исполняемый модуль;

- разработать тестовые примеры.

При большом объеме входных и выходных данных необходимо предусмотреть возможность их ввода из файла, редактирования и вывода в файл. Пример выполнения данной работы в среде визуального программирования C++ Builder 6 приведен в Приложении А, в среде Delphi – в Приложении Д.

Содержание отчета

1. .Формулировка задания и математическая модель.

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

3. Схема алгоритма решения поставленной задачи и текст исполняемого модуля с комментариями.

4. Тестовые примеры.

Лабораторная работа №3

Общие сведения

При разработке интерфейса формулируются определенные правила ведения диалога. Диалог строится из сообщений. Типы сообщений следующие:

- при вводе:

а) входные данные,

б) управляющие сообщения (команды, директивы и др.);

- при выводе:

а) сообщения об ошибках (при вводе данных и в ходе решения),

б) выходные данные,

в) сообщения о состоянии системы (что произошло или происходит в системе),

г) справка (если пользователь не может ответить на запрос системы),

д) подсказка (способ подтвердить готовность принять сообщение).

По способу ведения диалога в интерфейсе, диалоговые процессы делятся на:

- диалоги, управляемые системой:

а) меню (в виде списка, строки, блока, пиктограмм),

б) готовая форма,

в) вопросы и ответы;

- диалоги управляемые пользователем на базе команд (системы запросов на ввод).

При форматировании экрана в состав полей меню обычно включают:

- заголовок меню (объект необязательный),

- основной текст меню (список объектов выбора),

- заключительный текст (объект необязательный).

Форматирование экрана при диалоге включает этапы:

- решить, какая информация должна появляться на экране,

- определить основной формат этой информации,

- решить, где она должна появляться на экране (т.е. определить область вывода каждого поля),

- решить, какие средства выделения требуются для каждого поля (т.е. атрибуты полей),

- разработать проект размещения данных на экране,

- оценить эффективность этого размещения,

- принять меры (обновляемое сообщение, обновление строки состояний и др.), если время реакции системы (задержки) превысят приемлемое.

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

В процессе выполнения студент должен разработать внешний вид форм для отображения входных и выходных данных, а также необходимой справочной информации. Обязательно использование всплывающих подсказок. При необходимости кроме основной формы допускается использование вспомогательных форм, а также гипертекстовых ссылок в пояснениях к работе с программой. Пример выполнения данной работы в среде визуального программирования C++ Builder 6, применительно к заданию из Приложения А, приведен в Приложении Б, в среде Delphi, применительно к заданию из Приложения Г – в Приложении Д.

Содержание отчета

1. Окно основной формы интерфейса.

2. Окно информации о программе.

3. Окно пояснения по работе с программой.

Лабораторная работа №4

Общие сведения

Динамика диалога (его сценарий) может быть описана сетью (графом) переходов, представленной на рисунке 2. Каждая вершина графа – состояние, в котором диалог выводит сообщение или ждёт сообщение от пользователя. Дуги графа – возможные переходы из одного состояния в другое. В соответствии с рисунком 2, если диалог находится в состоянии N1 и условие А выполняется (истинно), то диалог переходит в состояниеN2. Аналогично выполняются и другие переходы.

Рисунок 2

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

- разработать графы возможных сценариев работы программы;

- разработать процедуры обработки событий;

- произвести тестирование программы.

Пример выполнения данной работы в среде визуального программирования C++ Builder 6, применительно к заданию из Приложения А и с использованием экранных форм из Приложения Б, приведен в Приложении В, в среде Delphi, применительно к заданию из Приложения Г и с использованием экранных форм из Приложения Д – в Приложении Е.

Содержание отчета

1. Графы возможных сценариев работы программы.

2. Тексты процедур обработки событий.

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

4. Результаты тестирования.

Рекомендуемая литература

1. Коутс Р, Влейминк И. Интерфейс «человек-компьютер». – М.: Мир, 1990. – 501с.

2. Дарахвелидзе П.Г., Марков Е.П. Delphi – среда визуального программирования. – СПб.: BHV, 1996. – 352с.

3. Холзнер С. Visual C++. Учебный курс. – СПб.: Питер, 2006. – 570с.

4. Кормен Т., Лейзерсон Ч., Ривест Р. Алгоритмы: построение и анализ. – М.: МЦНМО, 2004. – 856с.

Приложение А

Приложение Б

Компоновка форм

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

Главная форма представлена на рисунке Б.1.

Рисунок Б.1

В главной форме происходит ввод исходных данных и вывод результатов. В этой форме использованы следующие элементы VBL:

Edit – ввод исходных данных;

Memo – вывод результатов;

Image – рисунок (исходная система);

Button – кнопка запуска решения;

Label – вспомогательная информация.

Форма с информацией о программе и авторе представлена на рисунке Б.2.

Рисунок Б.2

В этой форме использованы следующие элементы VBL:

Image – рисунок(исходная система);

Label – вспомогательная информация.

Форма, содержащая информацию, которая помогает пользователю работать с программой, представлена на рисунке Б.3.

Рисунок Б.3

В этой форме использованы следующие элементы VBL:

Label – вспомогательная информация.

Форма, реализующая массовую обработку данных, представлена на рисунке Б.4.

Рисунок Б.4

Этот режим работы используется при большом объеме входных и выходных данных. Ввод данных осуществляется из файла, вывод – в файл.

В этой форме использованы следующие элементы VBL:

Button – кнопка запуска решения;

Label – вспомогательная информация;

GroupBox - вспомогательная информация.

Приложение В

Приложение Г

Приложение Д

Компоновка форм

1. Окно основной формы интерфейса.

2. Окно информации о программе.

3. Окно пояснения по работе с программой.

Приложение Е

Человеко-машинный интерфейс

Методические указания

Санкт-Петербург

Составители: доцент, канд.техн.наук В.П.Попов;

доцент, канд.техн.наук Н.В.Соловьев

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

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

Методические указания предназначены для студентов, обучающихся по направлению «Информатика и вычислительная техника» и могут использоваться при изучении дисциплин «Человеко-машинный интерфейс», «Программирование на языках высокого уровня» и «Технология программирования».

Лабораторная работа №1

Стандартные компоненты интерфейсов прикладных программ

Цель работы:Ознакомить студентов с основными свойствами и поддерживаемыми событиями стандартных компонентов, применяемых для создания интерфейсов при разработке Windows-приложений в среде визуального программирования на объектно-ориентированном языке высокого уровня.

Общие сведения

В настоящее время существует довольно большое количество различных сред визуального программирования Windows-приложений, базирующихся на объектно-ориентированных языках высокого уровня. Например, среда Delphi, в основе которой лежит язык Pascal 7.0, или Visual Basic. Существуют и специализированные среды, предназначенные для создания приложений в той или иной области, например, среда Microsoft Access для разработки систем управления базами данных или среда Matlab для проектирования инженерных приложений.

Для максимально быстрой разработки Windows-приложений все среды визуального программирования объединяют в себе следующие элементы:

- высокопроизводительный компилятор с языка программирования высокого уровня в EXE-файлы;

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

- быстрая среда разработки, содержащая полный набор визуальных средств, поддерживающих как создание пользовательских интерфейсов, так и обработку корпоративных данных, с использованием библиотеки визуальных и невизуальных компонентов;

- интегрированный отладчик, позволяющий контролировать выполнение отлаживаемого приложения в различных режимах, следить за значениями переменных и оперативно изменять эти значения непосредственно в процессе отладки;

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

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

Далее в качестве визуальной среды разработки Windows-приложений будет рассматриваться базовая версия широко известного продукта фирмы Borland – среды программирования Delphi.

Структура среды разработки IDE

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

Главное окно содержит базовые команды типа File, Edit, Search, View, Compile, Run, Debug, Options, Tools, Help, инструментальные кнопки для быстрого доступа к командам и палитру компонентов.

Состав базовых команд в основном соответствует общепринятым:

- в меню File находятся команды для выполнения операций с проектами, модулями и отдельными файлами;

- команды меню Edit позволяют помимо редактирования работать с областью обмена данными, отменять действия и управлять отображением компонентов;

- меню Search предоставляет команды для поиска и замены указанных символов и строк;

Рисунок 1 – Среда разработки Delphi

- в меню View содержатся команды для отображения различной информации и вызова информационных утилит;

- в меню Compile находятся команды для компиляции и сборки проектов, проверки синтаксиса и получения статистической информации о проекте;

- меню Run содержит команды для выполнения приложений в различных режимах, задания параметров командной строки и команд встроенного отладчика Debug;

- в меню Options сосредоточены команды задания различных параметров проекта, среды разработки и управления библиотекой компонентов;

- в меню Tools содержатся команды вызова различных утилит;

- меню Help предназначено для отображения различной информации справочного характера.

Палитра компонентов позволяет выбирать как визуальные, так и другие компоненты, которые будут присутствовать в разрабатываемой форме Windows-приложения. Компоненты сгруппированы по области их использования на отдельных страницах.

Основные страницы, присутствующие во всех версиях среды, следующие:

- стандартные компоненты, реализующие такие интерфейсные элементы среды Windows, как главное меню, локальное меню, текстовый элемент, строка редактирования, многострочный редактор, кнопки, списки;

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

- диалоговые панели для ввода и вывода файлов как общего назначения, так и специального, например, растровых изображений в bmp-формате;

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

- компоненты управления базами данных;

- компоненты для отображения данных;

- компоненты для формирования отчетов в базах данных.

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

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

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

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

Редактор используется для непосредственного написания кода в виде исходного текста программы на языке Pascal 7.0, причем код, создаваемый инспектором объектов и средой Delphi, тоже помещается в окно редактора и доступен для изменений.

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

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

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