Организация графического интерфейса задачи

Предлагаемый в главах 2-5 вариант программирования – классический подход последовательной реализации задачи от общего к частному (нисходящее программирование). Машинная обработка задачи производилась с помощью командного интерфейса. В процессе выполнения программы ввод информации из потока обеспечивали операторы (scanf,), предписывающие считывание вводимых данных. Вывод их, а также итоговых (промежуточных) результатов в поток осуществляли операторы printf, fprintf.

Массовое использование графических операционных систем (Windows) привело к необходимости внедрения графических интерфейсов в программирование прикладных задач. Это определило изменение методик организации ввода-вывода информации.

Основа графического интерфейса – окно.

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

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

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

организации контроля и обмена данными (поля).

Разработаем окно реализации простейшей вычислительной задачи (пример 6.5): «Рассчитать площадь прямоугольника s (м²) при известных размерах а (м) и b (м)».

Анализ постановки задачи определяет:

наличие исходных данных – размеров а и b;

получение одного результата – площади s;

Управление выполнением задачи требует как минимум двух команд:

запуск на решение;

прекращение работы задачи.

Следовательно, графический вариант интерфейса формируется совокупностью трех диалоговых полей – подокон (двух ввода, одного вывода) и двух командных кнопок (ОК – расчет, Cancel – выход). Улучшение дружественности пользователю предписывает каждое из диалоговых полей обозначить (расшифровать) добавлением трех поясняющих полей. Один из вариантов графического интерфейса задачи имеет вид:

Диалоговое поле (однострочное, многострочное поле редактирования) – активное подокно реализации ввода-вывода численных значений в форме символьной строки.

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

Многострочное поле – активное подокно ввода совокупности данных (элементов массива).

Размер поля выбирается пользователем в соответствии с размерностью массива. Каждый элемент массива располагается в отдельной строке.

В процессе ввода переход на следующую строку осуществляется нажатием клавиши <Enter>.

Отображаемая в поле часть массива изменяется стандартной полосой прокрутки (справа и/или снизу от поля).

Многострочный список – активное подокно вывода массива расчетных данных.

Каждый элемент располагается на отдельной строке.

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

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

Поясняющие поля(поля комментариев) отличаются от активных полей именами (Text), не выделены цветом и чаще оформляются безрамочно.

Командная кнопка – активный элемент управления задачей.

Характерная особенность диалоговых полей и командных кнопок – отклик на события.

Событие – специфическое внешнее воздействие на конкретный активный компонент.

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

Реакция – отклик активизированного компонента на событие.

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

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

Современные языки программирования, в частности С++, располагают обширными библиотеками различных компонентов (объектов) организации интерфейса (окна, кнопки, метки, поля редактирования и т.п.).

Для облегчения использования объекты в библиотеках сформированы в классы.

Класс – объединение по конкретным признакам компонентов, данных и методов их обработки.

Использование конкретного экземпляра класса предполагает перемещение копии уже существующего с присвоением ему уникального имени, то есть создание нового экземпляра.

Создание и использование новых экземпляров класса (графических компонентов интерфейса) возможно:

напрямую, вручную;

автоматизированно.

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

Автоматизированный вариант создания нового экземпляра класса существенно упрощает и облегчает использование классов за счет специальных средств интегрированной среды разработки приложений (ИСРП). Интегрированная среда Borland C++ 5.02 позволяет организовать ввод-вывод информации вычислительной задачи в графической форме представления.

Внимание! ИСРП – обязательный компонент машинной обработки, поэтому методики работы с ней рассматриваются в соответствующей литературе.

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

Этапы автоматизированного варианта создания окна:

создание шаблона главного окна;

определение типовых компонентов (полей ввода-вывода, управляющих элементов), размещаемых в окне;

размещение компонентов в требуемых точках окна-заготовки, корректировка их расположения и размеров;

идентификация компонентов.

Создание шаблона окна

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

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

Определение типовых компонентов

Конкретная задача (ее алгоритм) определяет количество вводимых переменных.

Достоинство графического интерфейса – автоматическое отображение вводимых переменных на протяжении всего решения задачи.

Так, в задаче вычисления площади прямоугольника, исходные переменные – а, b. Для их ввода необходимы два диалоговых однострочных поля, дополненные двумя поясняющими.

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

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

Выполнение задачи помимо выбора полей требует определения событий и управляющих элементов, обеспечивающих ее решение. Основные события – запуск на решение и прекращение работы. Они реализуются командными кнопками – «ОК» и «Cancel».

Размещение компонентов в площади окна

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

построчно с предварительным пояснением;

построчно с последующим пояснением;

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

сгруппировано по назначению (входные, выходные, промежуточные данные)

Размещение управляющих кнопок обусловлено расположением полей и желанием пользователя:

построчно под полями;

постолбцово справа от полей;

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

В рассматриваемом примере примем за основу построчное (простейшее) расположение полей в верхней части окна и кнопок под ними. Вариант шаблона представлен на рис. 6.4.

Рис. 6.4. Шаблон окна задачи о площади прямоугольника

Идентификация компонентов

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

Так в рассматриваемом примере поле 1 (ввод) предназначено для ввода переменной «а» и идентифицируется именем PoleA, поле 2 (ввод) предназначено для ввода переменной «b» и идентифицируется именем PoleВ, поле 3 (вывод) предназначено для вывода переменной «s» и идентифицируется именем PoleS.

Программная реализация задачи с использованием графического интерфейса представлена ниже.