Как сделать диалоговое окно
Добавил пользователь Валентин П. Обновлено: 05.10.2024
Диалоговые окна существуют модальные(modal dialog box создаются функцией DialogBox)и немодальные (modeless dialog box создаются функцией CreateDialog). Эти две функции загружают шаблон диалогового окна из исполняемого файла прикладной программы и создают выскакивающее окно, которое соответствует спецификации шаблона. Имеются и другие функции, которые создают диалоговое окно, используя шаблоны в памяти; они передают дополнительную информацию в процедуру диалогового окна, как создается диалоговое окно.
Чтобы создать или модальное, или немодальное диалоговое окно, прикладная программа должна снабдить блок диалога шаблоном, чтобы описать стиль и содержание диалогового окна; приложение должно также снабдить диалоговое окно процедурой, чтобы выполнять задачи. Шаблон диалогового окна (dialog box template) - бинарное описание диалогового окна и органов управления, которое оно содержит. Разработчик может создать этот шаблон как ресурс, который будет загружен из исполняемого файла прикладной программы, или создать в памяти, пока прикладная программа выполняется. Процедура диалогового окна (dialog box procedure) - определяемая программой функция повторного вызова, которую система вызывает, когда операционная система получает ввод данных для диалогового окна или задачу для выполнения в блоке диалога. Хотя процедура диалогового окна подобна оконной процедуре, у нее нет тех же самых обязанностей.
Шаблон диалогового окна - это двоичные данные, который описывают диалоговое окно, определяя его высоту, ширину, стиль и органы управления, который он содержит. Чтобы создать диалоговое окно, система или загружает его шаблон из ресурсов в исполняемом файле приложения, или использует шаблон, переданный приложением для неё в глобальной памяти. В любом случае, приложение при создании диалогового окна должно предоставлять шаблон. Разработчик создает ресурсы шаблона, используя компилятор ресурса или редактор диалогового окна. Компилятор ресурса преобразует описание текста в двоичный ресурс, а редактор диалогового окна сохраняет в интерактивном режиме созданное диалоговое окно как двоичный ресурс.
Органы управления диалогового окна
Шаблон устанавливает позицию, ширину, высоту, стиль, идентификаторы и класс окна для каждого органа управления в диалоговом окне. Система создает каждый орган управления путем передачи их данных в функцию CreateWindowEx. Органы управления создаются по порядку, в котором они определены в шаблоне. Шаблон должен определять соответствующее число, тип и порядок органов управления, чтобы гарантировать, что пользователь сможет сделать ввод необходимых данных, чтобы завершить задачу, связанную с диалоговым окном.
Для каждого органа управления шаблон устанавливает значения стиля, которые определяют внешний вид и работу органа управления. Каждый орган управления - это дочернее окно и, поэтому, должно иметь стиль WS_CHILD. Чтобы гарантировать, что орган управления видимый, когда на экране показывается диалоговое окно, каждый орган управления должен иметь также и стиль WS_VISIBLE. Другие, обычно используемые стили окна - это WS_BORDER для органов управления, которые не обязательно имеют рамки, WS_DISABLED для органов управления, которые должны быть блокированы, когда создается первоначальное диалоговое окно и WS_TABSTOP и WS_GROUP для органов управления, к которым можно обращаться, используя клавиатуру. Стили WS_TABSTOP и WS_GROUP используются совместно с клавиатурным интерфейсом диалога, рассмотренным позже в этой главе.
Система преобразует значения координат позиции, размеры ширины и высоты из базовых единиц измерения диалогового окна в пиксели, перед передачей их в функцию CreateWindowEx. Когда система создает орган управления, она определяет диалоговое окно как родительское окно. Это означает, что система всегда воспринимает координаты позиции органа управления как рабочие координаты, относительно верхнего левого угла рабочей области диалогового окна.
Чтобы разрешить пользователю закрыть диалоговое окно, шаблон должен установить, по крайней мере, одну командную кнопку и присвоить ей идентификатор управления IDCANCEL. Чтобы разрешить пользователю выбирать между завершением и отменой задачи связанной с диалоговым окном, шаблон должен установить две командные кнопки. с надписями ОК и Отменить (Cancel), с управляющими идентификаторами IDOK и IDCANCEL, соответственно.
Шаблон устанавливает также и необязательный текст и данные для создания органа управления. Текст обычно предназначен для обозначения кнопок управления или установки начального содержания текста статического органа управления. Данные для создания - это один или несколько байтов данных, которые система передает оконной процедуре органа управления, когда элемент управления создается. Данные для создания полезны для органов управления, которые требуют дополнительной информации о их начальном содержании или стиле, чем это дается другими данными. Например, прикладная программа может использовать данные для создания, чтобы установить начальные параметры и диапазон управления полосой прокрутки.
Процедуры диалогового окна
Каждая процедура диалогового окна имеет нижеследующую форму:
Параметры процедуры служат одной и той же цели, что и в оконной процедуре, параметр hwndDlg получает дескриптор окна блока диалога.
Модальные диалоговые окна блокируют работу всех остальных окон до тех пока они не будут закрыты. При создании модального диалогового окна, система делает его активным окном. Диалоговое окно остается активным до тех пор, пока процедура диалогового окна не вызовет функцию EndDialog, или система не активизирует окно в другом приложении. Ни пользователь, ни приложение не могут сделать окно владельца активным, пока модальное диалоговое окно не разрушится.
Пример WinAPI приложения. Нет главного окна. Все приложение построено на диалоговых окнах.
В следующем примере нам придется использовать MessageBoxButtons в качестве передаваемого аргумента. Однако он имеет несколько параметров:
- MessageBoxButtons.AbortRetryIgnore – Прервать | Повтор | Пропустить
- MessageBoxButtons.OK— ОК
- MessageBoxButtons.OKCancel — ОК | Отмена
- MessageBoxButtons.RetryCancel — Повтор | Отмена
- MessageBoxButtons.YesNo — Да | Нет
- MessageBoxButtons.YesNoCancel — Да | Нет | Отмена
Осваивайте профессию, начните зарабатывать, а платите через год!
Курсы Python Акция! Бесплатно!
Станьте хакером на Python за 3 дня
Веб-вёрстка. CSS, HTML и JavaScript
Курс Bootstrap 4
Станьте веб-разработчиком с нуля
Метод alert()
Окно предупреждения генерируется самим браузером, поэтому внешний вид окна в различных браузерах может несколько различаться.
Примечание: Окна, обладающие свойством останавливать все последующие действия пользователя и программ, называются модальными.
На заметку: JavaScript-программисты часто вставляют вызов метода alert() в программный код с целью диагностики возникающих проблем.
Метод confirm()
Синтаксис применения метода confirm() имеет следующий вид:
result — это логическое значение (true или false), указывающее, было ли выбрано OK или Cancel (Отмена).
Метод prompt()
Синтаксис применения метода prompt имеет следующий вид:
Если пользователь щелкает на кнопке OK , метод prompt() возвращает значение, введенное в текстовом поле, а если выбирается кнопка Cancel (Отмена) или окно закрывается иным образом, то возвращается null . Вот пример:
Конечно же сейчас есть куча jQuery плагинов которые помогают оформить диалоговые окна на сайте, но зачем лишне нагружать сайт всякими плагинами. Итак начнём.
Сначала подключим jQuery:
Теперь разберём HTML разметку:
Ну и наконец jQuery:
Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.
О песочнице
Если у вас есть приглашение, отправьте его автору понравившейся публикации — тогда её смогут прочитать и обсудить все остальные пользователи Хабра.
Чтобы исключить предвзятость при оценке, все публикации анонимны, псевдонимы показываются случайным образом.
Целью данной части главы будет закрепление навыков работы с оконными приложениями. Мы рассмотрим на примере, как создаются элементы меню, панели инструментов, увидим, как создаются и вызываются дополнительные диалоговые окна, как работать с окнами выбора файлов. Также мы познакомимся еще с несколькими элементами управления и научимся динамически загружать изображения в форму.
Первоначально, создайте новый проект, указав в качестве шаблона Windows Form Application и назовите second_application. Затем нажмите OK.
Перед нами откроется код функции обработчика:
Так как этот элемент меню отвечает за выход из приложения, добавим в него код, который будет генерировать MessageBox с вопросом о подтверждении выхода из приложения. Если пользователь подтвердит выход – приложение будет завершено.
Новый код функции с комментариями:
Теперь можно откомпилировать приложение и проверить работоспособность кнопки.
Часто панель управления (Toolbar) дублирует элементы меню для быстрого к ним доступа.
Нам снова нужно перейти к окну Toolbox (Панель инструментов) и развороту Menus & Toolbars. В этот раз мы выберем элемент ToolStrip (рис. 5).
Рисунок 5. Окно Toolbox.
Перетащите элемент управления на окно и вы увидите, как вдоль его верхней границы разместиться панель ToolBar (рис. 6).
Рисунок 6. Добавленный элемент Toolbar.
Мы изменим положение привязки нашего ToolBar’a. Для этого щелкнем по нему правой кнопкой и в открывшемся контекстном меню выберем пункт Свойства. Откроется окно свойств: здесь мы изменим привязку на левую часть окна, внеся изменения в параметр Dock, как показано на рисунке 7.
Рисунок 7. Привязка панели инструментов к левой стороне.
Теперь увеличим размеры кнопок на Toolbar'e. Для этого сначала необходимо в его свойствах установить параметр AutoSize равным false. Теперь мы можем изменить размеры самих кнопок: установим параметры Size - Width равным 44. Поле станет шире (рис. 8).
Рисунок 8. Установка размеров изображений, размещаемых на кнопках создаваемого Toolbar.
Теперь добавим 3 кнопки на наш ToolBar. Для этого щелкните по нему и в раскрывающемся списке элементов, которые мы можем добавить, выберите элемент button (рис. 9).
Рисунок 9. Добавление кнопок на панель элементов (Toolbar).
Повторите операцию, чтобы кнопок на панели стало две. Теперь поочередно выберите каждую кнопку и в ее свойствах установите AutoSize равный false. После это перейдите к полю Size и установите высоту равную 42. Теперь кнопки примут квадратный вид.
Мы будем использовать 3 следующих изображения:
Изображение для кнопки 1: будет назначено кнопке, отвечающей за открытие дополнительного диалогового окна.
Два следующих изображения будут назначены кнопкам, которые будут отвечать за загрузку файлов jpg и png.
Изображение для кнопки 2.
Изображение для кнопки 3.
(. ) Обратите внимание, что у данных изображений прозрачный фон.
2 кнопки будут дублировать меню с функциями загрузки изображений, 1-я кнопка будет предназначена для вызова окна, с отображением картинки, которую мы загрузили.
Теперь для установки изображений необходимо перейти в свойства картинки, после чего мы установим значение параметра ImageScaling равным none, чтобы изображение не масштабировалось. Теперь в параметре Image мы можем выбрать изображение для загрузки, как показано на рисунке 11.
Рисунок 11. Установка изображений на кнопки.
В процессе выбора откроется окно, показанное на рисунке 12.
Рисунок 12. Импорт рисунка для установки на кнопке.
Теперь щелкните на кнопке Import и выберите необходимый рисунок. Аналогично повторите с другими рисунками. В результате вы получите 3 красивые кнопки, как показано на рисунке 13.
Рисунок 13. Пример созданной панели инструментов.
Для того чтобы создать обработчики нажатий на кнопки этого ToolBox'а, достаточно совершить двойной щелчок мыши на каждом из них – MS Visual Studio автоматически сгенерирует код обработчик события и заготовки функций.
В будущем мы добавим вызов необходимых нам функций из этого обработчика.
Чтобы пользователь мог выбирать файл для загрузки через стандартное в Windows окно загрузки файлов, мы выполним следующие действия.
Перейдите к окну ToolBox (Панель элементов).
Теперь перетащите элемент управления OpenFileDialog (рис. 15) на форму.
Рисунок 15. Добавление элемента OpenFileDialog.
Местоположение, куда вы перетащите элемент, неважно: он добавится в поле под окном, к другим специфическим объектам (рис. 16).
Рисунок 16. Элемент OpenFileDialog, расположенный под редактируемой формой.
Как видно из рисунка 16, к дополнительным элементам, уже установленным на наше окно (меню и ToolBox), добавился еще и элемент OpenFileDialog1.
Теперь мы реализуем код открытия окна выбора файла, с необходимыми нам параметрами.
Если вы еще не создали обработчики нажатия на кнопки загрузки и элементы меню, так же предназначенные для загрузки, сделайте это с помощью двойных щелчков по ним.
Код сгенерированных функций выглядит следующим образом:
Теперь напишем следующую функцию LoadImage.
Далее функции обработчики нажатий пунктов меню и кнопок на панели управления реализуют вызов функции загрузки с необходимым флагом.
Добавление и вызов дополнительного диалогового окна
Для этого перейдите к окну Solution Explorer (Обозреватель решений), после чего щелкните на названии проекта правой кнопкой мыши и в открывшемся контекстном меню выберите Add->Form, как показано на рисунке 18.
Рисунок 18. Добавление в проект нового диалогового окна.
В открывшемся окне введите названия класса, который будет отвечать за генерацию нашего вспомогательного окна – Preview.cs (рис. 19).
Рисунок 19. Установка названия создаваемой формы для нового диалогового окна.
Теперь измените размер окна так, как показано на рисунке 20. Затем на форме разместите элемент panel. Внутри элемента panel разместите элемент pictureBox, как показано на рисунке 20.
Рисунок 20. Размещение элементов panel и picturebox на созданном диалоговом окне.
Данное окно будет получать при загрузке в качестве параметра ссылку на наше загруженное изображение. Затем оно будет устанавливать границы элемента pictureBox равными размерам полученного изображения, после чего устанавливать его в элемент pictureBox.
Перейдите к свойствам элемента panel и установите значение параметра AutoScroll равное true. Теперь, в том случае, если размер изображения будет превышать размер элемента panel1, будут появляться вертикальная и горизонтальная полоса прокрутки, с помощью которых можно будет просмотреть изображение.
Теперь рассмотрим исходный код, необходимый для реализации данных возможностей.
Первым делом назначим обработчик кнопки с изображением стрелки направленной вправо на нашем главном окне. Щелкните по ней дважды, после чего вы перейдете к редактированию кода функции, которая будет вызвана при щелчке по данной кнопке.
Он будет выглядеть следующим образом:
Как видно из исходного кода, класс Preview получает в качестве параметра наше загруженное изображение. Для правильной работы программы мы должны изменить конструктор класса Preview, а также реализовать остальную функциональность программы.
Перейдите к окну Preview, после чего сделайте двойной щелчок левой клавшей мыши на нем (НЕ на размещенных на нем объектах).
Откроется для редактирования функция:
Но мы сначала изменим код конструктора класса, теперь он будет выглядеть следующим образом:
Теперь отредактируем код функции Preview_Load. Он будет выглядеть следующим образом:
В заключении, самостоятельно добавьте обработчик нажатия кнопки закрыть. Функция закрытия будет выглядеть следующим образом:
В следующей главе мы познакомимся с методами создания многопоточных приложений на примере разработки двух приложений.
Читайте также: