Конспект проектирование интерфейса оконного приложения с использованием элементов управления

Обновлено: 06.07.2024

Программирование в Windows основывается на использовании функций API (Application Program Interface, т.е. интерфейс программного приложения).

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

Программный интерфейс приложений

Windows API (Application Programming Interfaces) — общее наименование целого набора базовых функций интерфейсов программирования приложений операционных систем семейств Microsoft Windows.

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

Все основные функции Windows объявляются в заголовочных файлах. Главный заголовочный файл называется WINDOWS.H, и в этом файле содержится множество ссылок на другие заголовочные файлы.

Основное отличие функций API от библиотечных функций С: код библиотечных функций связывается с кодом программы пользователя, а код функций API остается вне программы пользователя в динамически подключаемых библиотеках (DLL – Dynamic Link Library), что позволяет создавать более компактный и эффективный код приложений.

Графический интерфейс пользователя

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

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

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

Программирование Windows-приложений тесно связано с понятиями объектно-ориентированного программирования. Главным объектом в операционной системе Windows является окно. Окно может содержать элементы управления: кнопки, списки, окна редактирования и др. Эти элементы, по сути, также являются окнами, но обладающими особыми свойствами.

Активное окно – окно, получающее реакцию от пользователя в данный момент.

Основные элементы окна

Основными элементами окна являются

  • 1 — строка заголовка title bar
  • 2 — строка меню menu bar
  • 3 — системное меню system menu
  • 4 — кнопка сворачивания окна minimize box
  • 5 — кнопка разворачивания окна maximize box
  • 6 — рамка изменения размеров sizing border
  • 7 — клиентская область client area
  • 8 — горизонтальная и вертикальная полосы прокрутки scroll bars

Многозадачность

Многозадачность ( multitasking ) — свойство операционной системы обеспечивать возможность параллельной (или псевдопараллельной) обработки нескольких процессов.

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

Процессы и потоки

Процессом ( process ) называется экземпляр программы, загруженной в память. Экземпляр программы может создавать потоки ( thread ), которые представляют собой последовательность инструкций на выполнение.

Выполняются не процессы, а именно потоки. Любой процесс имеет хотя бы один поток. Этот поток называется главным (основным) потоком приложения .

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

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

Дескрипторы

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

Примеры дескрипторов, описанных в заголовочном файле windows.h

typedef void * HANDLE ; // абстрактный дескриптор (например, файла)
typedef void * HMODULE ; // дескриптор модуля
typedef void * HINSTANCE ; // дескриптор экземпляра программы
typedef void * HKEY ; // дескриптор ключа в реестре
typedef void * HGDIOBJ ; // дескриптор граф. примитива (перо, кисть)
typedef void * HWND ; // дескриптор окна
typedef void * HMENU ; // дескриптор меню
typedef void * HICON ; // дескриптор иконки
typedef void * HBITMAP ; // дескриптор картинки
typedef void * HFONT ; // дескриптор шрифта

Контекст устройства

GDI – графический интерфейс устройства. Функции системной библиотеки GDI32.dll используются для вывода графики на экран.

Дескриптор контекста устройства — это паспорт конкретного окна для функций GDI. Контекст устройства фактически является структурой данных, которая внутренне поддерживается GDI. Он связан с конкретным устройством вывода информации (принтер, дисплей). Что касается дисплея, то в данном случае контекст устройства обычно связан с конкретным окном на экране.

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

WinAPI - это хорошо, но ИМХО в 21 веке нужно очень ограниченному кругу лиц, которые либя пилят что-то системное и низкоуровневое под Windows (всякие антивирусы, например), либо пилят библиотеки типа Qt. Все остальные могут использовать эти самые библиотеки - это гораздо проще, приятней, а возможно еще и кроссплатформенно (от библиотеки зависит). Вобщем я не вижу смысла сейчас в ВУЗах давать в большом объеме всякие системные АПИ, это может быть на курсе операционных систем и, например очень обрезанном виде на курсе параллельного программирования (где должны и про другие инструменты рассказать, начиная от OpenMP, MPI, заканчивая все теми же Qt).

Свидетельство и скидка на обучение каждому участнику

Зарегистрироваться 15–17 марта 2022 г.

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

Ход урока

План разработки программы, №1

IV Изучение нового материала
Визуальное программирование представляет собой процесс создания Windows-приложений, при котором возможно одновременно конструировать, изменять, отлаживать приложение, используя интегрированную среду разработки IDE (Integrated Development Environment). По сути, визуальное программирование – это единство двух взаимосвязанных процессов: наглядного конструирования типового Windows-окна приложения и написания кода.
Интегрированная среда разработки Delphi 6 представляет собой многооконную систему, определяемую настройками пользовательского интерфейса:

Главное окно (Delphi6 – Project I).

Окно Обозреватель дерева объектов (Object Tree View).

Окно Инспектора объектов (Object Inspector).

Окно Конструктора формы (Forml).

Окно Редактора кода (UnitI.pas).

Модуль служит для размещения кода программы пользователя.
Любая программа Delphi состоит из файла проекта (*.dpr), одного или нескольких модулей (*.pas).
Имена в Delphi задаются латинскими буквами, цифрами и знаком подчеркивания.
Интерфейс Delphi. Элементы интерфейса. Главное окно/
Главное окно осуществляет основные функции управления проектом создаваемой программы и состоит из:

Внимание.
Главное окно остается открытым все время работы IDE. Закрывая его, вы тем самым закрываете Delphi и все открытые в нем окна.

hello_html_70ade8c0.jpg

Строка заголовка главного окна отображает имя открытого в данный момент проекта.
По заголовку главного окна можно определить, в каком режиме открыт проект.

Текст заголовка

Режим работы

Delphi 6 – Project1

Delphi 6 – Project1 [Running]

Строка меню содержит команды, необходимые для разработки и тестирования приложений и используется так же, как любое стандартное Windows-меню.
Панель инструментов. Панель инструментов представляет собой набор кнопок для быстрого доступа к необходимой функции меню. На этой панели есть, в частности, кнопка сохранения проекта на диске, кнопка открытия проекта, кнопка запуска программы на выполнение.
Пользователь может изменить конфигурацию панели инструментов. Для этой цели используется окно пользовательских настроек, с помощью которого можно отображать, скрывать или менять положение на панели инструментов тех или иных инструментов.
Окно пользовательских настроек можно открыть, щелкнув правой кнопкой мыши на панели инструментов. С помощью появившегося контекстного меню можно произвести необходимые настройки.
Палитра компонентов устроена в виде наборов пиктограмм. На палитре компонентов, представляющей собой множественные тематические страницы, располагаются визуальные и невизуальные компоненты вашей будущей программы. Они составляют библиотеку визуальных компонентов (VCL – Visual Component Library).
Примечание. Невизуальные компоненты видны только при проектировании приложения.

Окно проектировщика формы

Окно проектировщика формы – главное место, где происходит сборка программы из компонентов, содержащихся в палитре компонентов. Сама форма – это уже готовая к исполнению программа. В указанное место формы будет вставлен объект - экземпляр компонента выбранного типа.

hello_html_267ba3c5.jpg

Окно инспектора объетов

Окно инспектора объектов (Object Inspector) - отображает свойства, активизированного щелчком мыши какого-либо компонента или самой формы. Имя активизированного компонента находится под заголовком окна.
Это окно имеет две закладки – Свойства ( Properties) и События ( Еvents).
На первой закладке ( Properties) постоянно отображаются все доступные свойства выбранного компонента. В левой колонке содержится список, а в правой – текущие значения по умолчанию.
На второй закладке ( Events) отображаются возможные обработчики событий для выбранного компонента. В левой колонке - названия, а в правой - соответствующие свойства или процедуры.
Что же такое свойства и реакции на события?

Каждый объект в Delphi, даже само окно разрабатываемого приложения, имеют определенные свойства: цвет, размер, отображаемый текст и т.п.
Эти свойства можно менять еще до запуска проектируемой программы на выполнение. В зависимости от изменяемого свойства результат можно просматривать уже сразу.
Реакции на события, это результат произошедшего системного события, например, щелчок мыши, нажатие на кнопку, открытие окна и т.п. Реакцию на событие назначают программно, указывая список действий, которые необходимо произвести. Например, если пользователь выполняет клик по кнопке, производится копирование файла.

Окно редактора кодов

hello_html_3103049.jpg

По ходу работы система формирует в окне Редактора кодов текст программы на языке Object Pascal, связанной с формой.
После загрузки Delphi это окно спрятано за окном формы, и его можно увидеть, щелкнув на кнопке Toggle Form/Unit в панели инструментов.

На момент первого запуска это окно имеет заголовок Unit1.
В редакторе кода могут быть открыты сразу несколько файлов. Каждый открытый файл размещается на отдельной странице, а его название отображается на вкладке в верхней части.
Если в вашей программе три окна, то они будут взаимодействовать в процессе работы с тремя так называемыми модулями (Unit). Все эти модули и отображаются в редакторе.
В окне кода программист непосредственно пишет текстовую часть программы.
Текстовая часть разбивается на несколькие части, называемые процедурами и функциями, которые работают отдельно одна от другой.
Пользователь может дополнять текст программы самостоятельно или по предложению системы в момент размещения объектов в форме.
Внимание!
Никогда не изменяйте текст, который уже написан. Можно только добавлять текст программы, но остерегайтесь изменять уже существующий.

План разработки программы, №1

Открыть новый проект.

Разместить в форме следующие компоненты: метку Label и две кнопки Button.

hello_html_m61d90bdc.jpg

Выделить кнопку Button2, перейти в Object Inspector на страницу Properties (свойства), найти Caption (заголовок) и изменить заголовок Button2 на заголовок Выход.

Перейти на страницу Events (события) Object Inspector, найти событие OnClick, справа от него дважды щелкнуть мышкой. Оказавшись в коде программы, точнее, в заготовке процедуры кнопки Button2, надо написать лишь одну команду:

procedure TForm1.Button2Click(Sender: TObject);
begin
Close;
end;

обязательно поставить точку с запятой после Close.

Сохранить проект под именем, например, Unit1.pas и Pr1.dpr.

Запустить программу, затем закрыть окно проекта кнопкой Выход.

Выделить форму, в Object Inspector в свойстве Caption заменить слово Form1 на Проект-1. Это и будет заголовком основного окна программы.

Выделить кнопку Button1, найти в Object Inspector свойство Caption и заменить слово Button1 на название копки Приветствие. При необходимости увеличить длину кнопки.

Перейти на страницу Events (события) Object Inspector и найти OnClick, справа от него дважды щелкнуть мышкой. Попав в код программы, но теперь в процедуру кнопки Button1, надо написать следующий код:

Сохранить проект окончательно, запустить и протестировать его.

VII Итог урока
Как запустить программу?
Из каких компонентов состоит окно программы?
С какими компонентами познакомились?
В чем отличие невизуальных от визуальных компонентов?
С помощью какого свойства меняется заголовок у компонента?
Что же такое свойства и реакции на события?
Проекты сохраняются в одном файле или нет?

Краткое описание плана разработки программы, №1

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

1. Открыть новый проект.

2. Разместить в форме следующие компоненты: метку Label и две кнопки Button.

hello_html_m40ae6b1c.jpg

3. Выполнить следующие действия:

Вкладка окна
Object Inspector

Имя свойства/
Имя события

4. Сохранить проект под именем, например, Unit1.pas и Pr1.dpr.

5. Запустить программу, затем закрыть окно проекта кнопкой Выход.

6. Выполнить следующие действия:

Вкладка окна
Object Inspector

Имя свойства/
Имя события

7. Сохранить проект, запустить и протестировать его.
Задание для самостоятельного выполнения

Задание

Подсказка

Сделать шрифт выводимой реплики "Первые успехи!" отличным от стандартного по виду, цвету и размеру.

В Object Inspector дважды щелкнуть справа от названия свойства Font.

Заменить вид кнопки Выход на более привлекательный.

Для замены кнопки надо удалить существующую, а другую найти в палитре компонентов на вкладке Additional. Она самая левая, называется BitBtn. Затем изменить ее вид с помощью свойства Kind.

Изменить значение свойств Caption метки Label1 при реакции кнопки Button1 на событие OnClick.

Запустить исполняемый файл Pr1.exe не в среде Delphi, а в Windows.

Запустить исполняемый файл Pr1.exe не в среде Delphi, а в Windows.

Листинг программы, №1
Для самоконтроля ниже приводится базовый текст программы.

uses
Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs,
StdCtrls, Buttons;

type
TForm1 = class(TForm)
Label1: TLabel;
Button1: TButton;
BitBtn1: TBitBtn;
procedure Button1Click(Sender: TObject);
private
< Private declarations >
public
< Public declarations >
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
Label1.Caption:=' Первые и не последние !';
end;

VII Итог урока
Как запустить программу?
Из каких компонентов состоит окно программы?
С какими компонентами познакомились?
В чем отличие невизуальных от визуальных компонентов?
С помощью какого свойства меняется заголовок у компонента?
Что же такое свойства и реакции на события?
Проекты сохраняются в одном файле или нет?
VIII Домашнее задание
Знать из каких элементов состоит окно программы.

Урок 3-4. Проектирование интерфейса оконного приложения с использованием элементов управления

1. Изучите теоретический материал, представленный на видео и в §3.

2. В вашей папке на Google диске создайте папку Урок 3-4 (в нее нужно будет копировать все файлы, полученные в результате выполнения заданий данного урока).

3. Из учебного пособия выполите упражения к §3 (упражение 1-6).

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

Введение

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

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

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

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

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

Функциональные требования

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

Следуйте рекомендациям по проектированию пользовательского интерфейса.

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

Убедитесь, что пользовательский интерфейс доступен.

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

Поддержка международного рынка.

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

Анализ пользователей

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

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

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

  • Кто наши пользователи? Какие навыки и знания у них есть?
  • Какие источники данных можно использовать для понимания их впечатления от работы?
  • Какие цели и задачи будут использовать наш продукт для выполнения?
  • Какие предположения мы делаем и как проверить их?
  • Какие источники данных у нас есть? (Примеры использования и эвристические вычисления — это хорошее место для начала.)

Проблемные операторы

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

Ниже приведены дополнительные примеры проблемных инструкций.

Если проблемные операторы достаточно широкие, то, вероятно, будет много инновационных и творческих способов их решения.

Приоритеты

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

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

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

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

Концептуальный проект

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

Логическая структура

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

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

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

Физическая структура

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

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

Читайте также: