Как создать окно для приложения
- Окно Toolbox (Панель элементов управления) - элементы управления вы можете разместить на создаваемой форме.
- Окно Solution Explorer (Обозреватель решений) - здесь вы сможете увидеть следующие узлы: Properties - настройки проекта, Links (Ссылки) - подключенные к проекту библиотеки, а также созданные и подключенные к проекту файлы исходных кодов (с расширением .cs) и подключенные к проекту формы (например, Form1).
- Окно Class View (Окно классов) - здесь представлены все созданные в программе классы.
- Окно Properties (Свойства) - выбрав любой элемент управления или даже форму, вы сможете увидеть все параметры данного объекта, а также изменить значения, установленные в них по умолчанию.
Создание оконных приложений сводится к созданию всех необходимых диалоговых окон, а также к размещению на них необходимых элементов. В дальнейшем мы настраиваем обработку событий, создаваемых пользователем, и настраиваем технические аспекты работы программы. В нашем случае сначала разместим все необходимые элементы управления на главной форме, после чего добавим обработчик события перемещения мыши и обработку нажатия кнопок.
Добавление новых элементов управления на форму
Итак, после того как вы ввели имя проекта, установили необходимый шаблон и нажали кнопку ОК, MS Visual Studio автоматически создаст каркас оконного приложения, после чего мы сможем добавить на него новые оконные элементы.
Для этого необходимо перетащить необходимый оконный элемент из окна инструментов (ToolBox).
Нашему окну потребуется 2 элемента поля для ввода, в которые мы будем выводить координаты указателя мыши, что облегчит нам понимание работы программы.
В центре окна будет находиться надпись, которую мы создадим с помощью элемента Label.
Снизу будут расположены 2 кнопки.
Перейдите в свойства строки Label1, где измените текст на «Вы стремитесь сделать мир лучше?». Также измените тип шрифта, для этого найдите свойство Font (рис. 5).
Рисунок 5. Свойство Font элемента Label.
После чего установите тип шрифта Tahoma, ширину шрифта Bold и размер равный 16 (рис. 6).
Рисунок 6. Установки шрифта.
Далее измените текст на кнопках, используя свойство Text.
Техническая часть работы программы
- Сначала мы добавим обработчик события перемещения мыши и реализуем вывод ее координат x и y в два созданных поля ввода.
- Далее мы создадим функции обработчики щелчка по каждой из клавиш мыши (особенно усердные пользователи все же смогут попасть по кнопке «Да, конечно!»).
- Далее мы добавим код, реализующий случайное перемещение окна в том случае, если курсор приблизиться к кнопке «Да, конечно!».
Определение перемещения указателя мыши по форме
Щелкните непосредственно на части формы создаваемого приложения (НЕ на одном из элементов).
Теперь перейдите к свойствам формы с помощью щелчка правой кнопки мыши -> контекстное меню свойства.
Данная функция, обрабатывающая событие перемещения указателя мыши над формой, получает 2 параметра: объект отправитель и экземпляр класса MouseEventsArgs, содержащий информацию о координатах указателя мыши и других текущих свойствах.
textBox1 и textBox2 это экземпляры класса textbox, реализующие управление нашими элементами поля для ввода.
Член данных экземпляров Text позволяет установить текст в данных полях.
Таким образом, если теперь откомпилировать программу (F5), при перемещении указателя мыши по форме окна мы будем видеть координаты указателя (внутри формы), которые будут непрерывно изменяться.
Добавьте следующие строки кода:
Теперь снова вернитесь к конструктору и добавьте вторую кнопку, также с помощью двойного щелчка по ней.
Она будет содержать следующий код:
Теперь нам осталось только реализовать перемещение окна в тот момент, когда мышь приближается к кнопке «Да, конечно».
Для этого мы добавим код в функцию:
private void Form1_MouseMove(object sender, MouseEventArgs)
Принцип очень прост: получая координаты движения мыши, мы проверяем не входят ли они в квадрат, очерчивающий нашу кнопку с небольшим запасом. Если да, то мы генерируем 2 случайных числа, которые будут использованы для перемещения окна.
Также нам понадобится объявить несколько "рабочих" переменных, которые мы будем в дальнейшем использовать.
Генерация случайных чисел
Random rnd = new Random();
Здесь мы объявили экземпляр класса Random (rnd), с помощью которого мы будем генерировать случайные числа. В дальнейшем мы будем использовать код, вида rnd.Next (диапазон_генерации) или rnd.Next (от, до -1) для генерации случайного числа.
Также мы объявим еще несколько переменных, часть из которых сразу будет инициализирована.
tmp_location объявляется для того, чтобы в будущем временно хранить текущее положение окна.
Также нам следует подумать о том, что при случайном перемещении, наше окно может выйти далеко за пределы экрана.
_h и _w будут хранить в себе размеры экрана пользователя, которые определяются при их инициализации.
Теперь код этой функции будет выглядеть следующим образом:
Вот, собственно, и все. Откомпеллировав приложение, можете попробовать нажать на кнопку "Да, конечно". Это будет крайне трудно.
Класс окна определяет набор поведений, которые могут встречаться в нескольких окнах. Например, в группе кнопок каждая кнопка имеет аналогичное поведение, когда пользователь нажимает кнопку. Конечно, кнопки не полностью идентичны; Каждая кнопка отображает собственную текстовую строку и имеет собственные экранные координаты. Данные, уникальные для каждого окна, называются данными экземпляра.
Каждое окно должно быть связано с классом окна, даже если программа создает только один экземпляр этого класса. Важно понимать, что класс окна не является "классом" в смысле C++. Вместо этого это структура данных, используемая внутри операционной системы. Классы окон регистрируются в системе во время выполнения. Чтобы зарегистрировать новый класс окна, начните с заполнения структуры вндкласс :
Необходимо задать следующие члены структуры:
- лпфнвндпрок — это указатель на определяемую приложением функцию, называемую процедурой окна или «процедурой окна». Процедура окна определяет большую часть поведения окна. Далее мы рассмотрим процедуру Windows. Сейчас просто рассматривайте это как прямую ссылку.
- HINSTANCE — это обработчик экземпляра приложения. Получите это значение из параметра HINSTANCE объекта wWinMain.
- лпсзкласснаме — это строка, идентифицирующая класс окна.
Имена классов являются локальными для текущего процесса, поэтому имя должно быть уникальным только в пределах процесса. однако стандартные элементы управления Windows также имеют классы. При использовании любого из этих элементов управления необходимо выбрать имена классов, которые не конфликтуют с именами классов элементов управления. Например, класс окна для элемента управления Button называется "Button".
Структура вндкласс содержит другие элементы, не показанные здесь. Можно задать для них нулевое значение, как показано в этом примере, или заполнить их в. Эта структура подробно описана в документации по вндкласс .
Затем передайте адрес структуры вндкласс в функцию registerClass . Эта функция регистрирует класс окна в операционной системе.
Создание окна
Чтобы создать новый экземпляр окна, вызовите функцию CreateWindowEx :
Подробное описание параметров можно прочитать в документации по функции CreateWindowEx , но вот краткий обзор:
- Первый параметр позволяет указать некоторые необязательные поведения для окна (например, прозрачные окна). Присвойте этому параметру значение 0 для поведения по умолчанию.
- CLASS_NAME имя класса окна. Определяет тип создаваемого окна.
- Текст окна используется различными способами для различных типов окон. Если окно содержит заголовок, текст отображается в заголовке окна.
- Стиль окна — это набор флагов, определяющих некоторый вид окна. Константа WS _ оверлаппедвиндов фактически является несколько флагов в сочетании с побитовой или. Вместе эти флаги предоставляют окну строку заголовка, границу, системное меню, а также кнопки сворачивания и развертывания . Этот набор флагов является наиболее распространенным стилем для окна приложения верхнего уровня.
- Для расположения и размера константа во вт. _ уседефаулт означает использование значений по умолчанию.
- Следующий параметр задает родительское окно или окно-владелец для нового окна. Если вы создаете дочернее окно, задайте родительский элемент. Для окна верхнего уровня задайте значение NULL.
- Для окна приложения следующий параметр определяет меню для окна. В этом примере не используется меню, поэтому значение равно null.
- HINSTANCE — это обработчик экземпляра, описанный выше. (См. статью WinMain: точка входа приложения.)
- Последний параметр является указателем на произвольные данные типа void *. Это значение можно использовать для передачи структуры данных в оконную процедуру. Мы покажем один из возможных способов использования этого параметра в разделе Управление состоянием приложения.
CreateWindowEx возвращает маркер в новое окно или нуль, если функция завершается ошибкой. Чтобы отобразить окно, т. е. сделать окно видимым, передайте в функцию ShowWindow маркер окна:
Параметр HWND — это дескриптор окна, возвращаемый функцией CreateWindowEx. Параметр нкмдшов можно использовать для сворачивания или разворачивания окна. Операционная система передает это значение в программу с помощью функции wWinMain .
Ниже приведен полный код для создания окна. Помните, что WindowProc все еще является прямым объявлением функции.
Многие программы на сегодняшний день используют графический интерфейс, который более интуитивен и удобен для пользователя, чем консоль. И с помощью языка программирования Python также можно создавать графические программы. Для этого в Python по умолчанию применяется специальный тулкит - набор компонентов, который называется tkinter .
Тулкит tkinter доступен в виде отдельного встроенного модуля, который содержит все необходимые графические компоненты - кнопки, текстовые поля и т.д.
Базовым моментом в построении графических программ является создание окна. Затем в окно добавляются все остальные компоненты графического интерфейса. Поэтому создадим вначале простейшее окно. Для этого определим следующий скрипт:
Для создания графического окна применяется конструктор Tk() , который определен в модуле tkinter. Создаваемое окно присваивается переменной root, и через эту переменную мы можем управлять атрибутами окна. В частности, с помощью метода title() можно установить заголовок окна.
С помощью метода geometry() - размер окна. Для установки размера в метод geometry() передается строка в формате "Ширина x Высота". Если при создании окна приложения метод geometry() не вызывается, то окно занимает то пространство, которое необходимо для размещения внутреннего содержимого.
Для отображения окна надо вызвать у него метод mainloop() , который запускает цикл обработки событий окна для взаимодействия с пользователем.
В результате при запуске скрипта мы увидим такое пустое окошко:
Начальная позиция окна
По умолчанию окно позиционируется в верхний левый угол экрана. Но мы можем изменить его положение, передав нужные значения в метод geometry() :
Теперь строка в методе geometry имеет следующий формат: "Ширина x Высота + координатаX + координатаY". То есть при запуске окно будет находиться на 300 пикселей вправо и на 250 пикселей вниз от верхнего левого угла экрана.
Приветствую! Если вы зашли на эту статью, значит скорее всего вам крайне неохота лезть в официальную документацию (а очень зря. Она и написана подробно, и имеет перевод на русский язык) и вы пришли за простым решением вашей проблемы — написание кросс-платформенного приложения для компьютера с использованием лишь Web технологий. предлагаю не тянуть, и сразу начать. Но т. к. это первая статья, думаю стоит рассказать в двух словах о том, что же вообще такое Electron JS и для чего оно нужно.
Если Вы можете сделать сайт, то Вы сможете сделать настольное приложение. Electron это фреймворк для создания нативных приложений с веб-технологиями, такими как: JavaScript, HTML и CSS. Он заботится о трудных частях, так что Вы можете сосредоточиться на главных элементах Вашего приложения.
Приложения, созданные посредством Electron – это обычные веб-сайты, которые запускаются посредством предустановленного веб-обозревателя Chromium. В добавок к классическим стандартам API HTML5, есть возможность применять весь список модулей Node.js и уникальных функций Electron. Модули сервиса как раз и обеспечивают доступ к ОС.
Да, сперва вам было-бы не плохо ознакомиться с тем, как создаются сайты. Я не буду заострять внимание на деталях кода на HTML и CSS.
Так-же рекомендую ознакомиться со списком приложений, написанных на Electron JS. Среди них такие известные вам программы как: Skype, Visual Studio Code, Slack и многие другие.
Теперь можем приступить к созданию самого приложения.
И начать я предлагаю с организации среды разработки. Я буду использовать Visual Studio Code.
Создадим папку для проекта, пропишем в терминале команду
и следуем инструкциям (я оставил все поля пустыми, они заполняются автоматически).
Если не работает команда npm или ранее вы не использовали Node.JSЕсли ранее вы никогда не использовали Node.JS и при выполнении команды npm init вы получаете ошибку, то вам нужно установить Node.JS на свой компьютер. Для этого перейдите на официальны сайт Node.JS и установите его. По понятным причинам рекомендую устанавливать LTS версию. Установка на MacOS и на Windows происходит как установка самой обыкновенной программы, никаких сложностей возникнуть не должно"
И в нашей папке появляется файл:
В нем нужно добавить строчку:
Что бы получилось вот так:
Это нужно для того, что бы запускать нашу программу по одной команде. Рассмотрим это позже. Сейчас нам нужно установить непосредственно Electron JS. Для начала установим Electron глобально:
И после этого установим его локально
После установки библиотеки в папке появится еще один файл — package-lock.json и папка — node_modules . С ними нам ничего делать не нужно. А нужно нам создать файл, который будет непосредственно запускать программу. В файле package.json есть строчка:
Она говорит нам о том, что вся программа будет запускаться из файла "index.js". Давайте создадим этот файл:
В данной статье я не буду рассказывать о том, что означает каждая строчка программы выше, отмечу лишь пару моментов:
- Параметры "width" и "height" отвечают за размер окна которое мы создаем. в моем случае это 700 в ширину и 500 в высоту.
- pathname: path.join(__dirname, 'index.html') говорит нам о том, что программа "index.js" вызывает файл, находящийся в той же директории с названием "index.html"
- Поскольку мы работаем с простым веб-обозревателем Chromium строка win.webContents.openDevTools(); вызывает известный всем разработчикам Chrome DevTools.
Со всем остальным вы можете ознакомиться в официальной документации (или же в моих будущих статьях о чем будет cказанно в конце).
Теперь давайте создадим файл index.html и в тег <body> запишем, конечно-же, Hello world :
И наконец мы можем запустить только-что написанное приложение. Для этого нам нужно прописать в терминал команду:
Как вы помните, мы добавили команду start в файл package.json . Запускаем. Ждем. Видим запущенное приложение:
Вот и все, мы с вами создали графическое приложение. Пока, правда, оно не очень функционально и полезно, но если вы имеете опыт в Web разработке или готовы изучать новые технологии, то вам будет не сложно сделать из этого приложения нечто большее.
Читайте также: