Окно перехода по клику в ElectronJS
ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows, macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.
В сложном настольном приложении может возникнуть ситуация, в которой разработчикам может потребоваться заморозить текущее окно или область текущего окна, которое отображается пользователю. В таких случаях окно становится статическим, и пользователь не сможет выполнять какие-либо оконные операции, такие как закрытие, сворачивание, развертывание и т. Д., В окне, и оно останется открытым на экране. Это означает, что окно или область окна перестают обращать внимание на любые события мыши, которые могут произойти в нем. Такое поведение может показаться знакомым для отключения нажатия кнопок с помощью HTML, CSS и JavaScript, но решающее различие здесь состоит в том, что окно или область окна перестают реагировать на все события мыши, включая движения мыши по этой области. Такое окно известно как окно перехода по щелчку . Electron предоставляет нам способ, с помощью которого мы можем создать или сделать существующее окно окном Click-Through, используя методы экземпляра объекта BrowserWindow. Это руководство продемонстрирует, как создать окно перехода в Electron.
Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.
- Структура проекта:
Пример: следуйте инструкциям в разделе Как найти текст на странице в ElectronJS? для настройки основного приложения Electron. Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Кроме того, внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Основные шаги, необходимые для настройки приложения Electron, остаются прежними.
package.json:
{
"name": "электронный переход",
"версия": "1.0.0",
"description": "Окно перехода в электронном виде",
"main": "main.js",
"scripts": {
"старт": "электрон".
},
"ключевые слова": [
"электрон"
],
«автор»: «Радхеш Ханна»,
"лицензия": "ISC",
"dependencies": {
"электрон": "^ 8.3.0"
}
}
Выход:
Окно перехода по клику в Electron: Экземпляр BrowserWindow является частью основного процесса . Чтобы импортировать и использовать BrowserWindow в процессе рендеринга, мы будем использовать удаленный модуль Electron. Как упоминалось выше, окно с переходом по клику игнорирует все происходящие в нем события мыши. Чтобы выйти из окна Click-Through, нам нужно завершить экземпляр BrowserWindow или закрыть задачу.
- index.html : добавьте в этот файл следующий фрагмент.
html
< h3 >Click-Through Window in Electron</ h3 > < button id = "disable" > Disable Mouse Events on Current Window </ button > < br >< br > < button id = "forward" > Forwarding Mouse Events </ button ><!-- Adding Individual Renderer Process Script File -->< script src = "index.js" ></ script > |
- index.js : кнопки «Отключить события мыши в текущем окне» и « Пересылка событий мыши» пока не имеют связанных с ними функций. Чтобы изменить это, добавьте следующий код в файл index.js
javascript
const electron = require( 'electron' )// Import BrowserWindow using Electron remoteconst BrowserWindow = electron.remote.BrowserWindow; const win = BrowserWindow.getFocusedWindow();// let win = BrowserWindow.getAllWindows()[0]; var disable = document.getElementById( 'disable' )disable.addEventListener( 'click' , (event) => { win.setIgnoreMouseEvents( true );}); var forward = document.getElementById( 'forward' );forward.addEventListener( 'mouseenter' , () => { console.log( 'Mouse Entered the Region...Disabling Click' ) win.setIgnoreMouseEvents( true , { forward: true });}); forward.addEventListener( 'mouseleave' , () => { console.log( 'Mouse Left the Region...Event Emitted' ) win.setIgnoreMouseEvents( false );}); |
Explanation: Чтобы создать простое окно Click-Through в Electron, мы используем метод экземпляра win.setIgnoreMouseEvents (ignore, options) объекта BrowserWindow. Вызов этого метода экземпляра для объекта BrowserWindow заставляет окно не обращать внимания на все эмиттеры событий мыши. Этот метод не имеет возвращаемого типа. Все события мыши, которые происходят в этом окне, теперь будут передаваться в окно или содержимое, которое находится под этим окном, но если это окно Click-Through имеет фокус, оно все равно будет получать события клавиатуры, которые происходят в нем. Прежде чем мы рассмотрим параметры, которые передаются этому методу экземпляра, есть дополнительная функция для окна Click-Through, которая поддерживается только в операционной системе Windows.
Как упоминалось выше, окно Click-Through не обращает внимания на все события мыши, включая движения мыши по этому окну или той области окна. В ОС Windows мы можем передать дополнительные параметры: параметр Object этому методу экземпляра, который можно использовать для пересылки сообщений мыши на веб-страницу, что позволяет генерировать события движения мыши, такие как mouseleave и mouseenter, в экземпляре BrowserWindow. Эта концепция известна как пересылка и становится полезной в ситуации, когда мы хотим сделать только часть окна Click-Through, а не весь экземпляр BrowserWindow. Это помогает разработчикам более детально контролировать окно или области окна. В этом руководстве мы применили пересылку к кнопке «Пересылка событий мыши». Следовательно, события движения мыши будут применяться к этой кнопке, но сама кнопка по-прежнему не будет реагировать на mouseClick. Проще говоря, это заставляет веб-страницу переходить по ссылкам при наведении на кнопку HTML, но возвращается в нормальное состояние за ее пределами. Обратитесь к выходным данным для лучшего понимания. При нажатии кнопки « Отключить события мыши в текущем окне» текущий экземпляр BrowserWindow становится окном с переходом по щелчку.
Метод экземпляра win.setIgnoreMouseEvents (ignore, options) объекта BrowserWindow принимает следующие параметры.
- ignore: Boolean Этот параметр делает окно окном для перехода по клику.
- options: Object (Необязательно) Этот параметр поддерживается только в Windows. Этот параметр является необязательным и отвечает за пересылку, как описано выше. Он принимает следующие параметры.
- forward: Boolean (Необязательно) Этот параметр имеет значение true , пересылает сообщения о перемещении мыши в Chromium, позволяя генерировать события, связанные с перемещением мыши, такие как mouseenter и mouseleave . Этот параметр можно использовать, только если для параметра ignore установлено значение true . Если параметр ignore false , пересылка всегда отключена независимо от этого значения.
Чтобы получить текущий экземпляр BrowserWindow в процессе рендеринга, мы можем использовать некоторые статические методы, предоставляемые объектом BrowserWindow.
- BrowserWindow.getAllWindows (): этот метод возвращает массив активных / открытых экземпляров BrowserWindow. В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться из массива, как показано в коде.
- BrowserWindow.getFocusedWindow (): этот метод возвращает экземпляр BrowserWindow, который сфокусирован в приложении. Если текущий экземпляр BrowserWindow не найден, возвращается значение null . В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться с помощью этого метода, как показано в коде.
Выход: