Безрамное окно в ElectronJS

Опубликовано: 29 Июля, 2021

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows, macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.

В сложном настольном приложении может возникнуть ситуация, когда разработчикам, возможно, придется выполнять дополнительные фоновые процессы и вычислительные задачи в параллельных кадрах, не прерывая взаимодействия с пользователем. Эти фоновые процессы, выполняющиеся в параллельных фреймах, не должны быть видны пользователю как дополнительные окна графического интерфейса пользователя, но должны соответственно активироваться всякий раз, когда возникает необходимость. Мы можем наблюдать такое поведение во многих современных настольных приложениях, таких как веб-браузер Google Chrome. Кроме того, разработчики могут захотеть ограничить пользователя определенным фреймом с ограниченной функциональностью, например, при отображении окна лицензионного соглашения или условий и положений. В таких окнах панель заголовка, панель навигации, контекстные меню отключены, и пользователь не должен иметь возможность закрыть / пропустить / свернуть рамку окна. Electron предоставляет нам способ, с помощью которого мы можем открыть окно без панелей инструментов, границ или любых других графических компонентов или сделать все окно прозрачным, используя свойства в параметрах нового объекта BrowserWindow. Такие окна известны как бескаркасные окна в Электрон. Из этого туториала Вы узнаете, как создать безрамочное окно в Electron и каковы его возможности.

Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

  • Структура проекта:

Пример: следуйте инструкциям, приведенным в разделе «Динамическое оформление в ElectronJS», чтобы настроить базовое приложение «Электрон». Скопируйте код 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. Безрамное окно - это окно без хрома . Chrome - это любой видимый аспект окна, кроме самих веб-страниц (например, панели инструментов, строка меню, границы и т. Д.). Мы можем определить BrowserWindow Instance как Безрамные или прозрачное окно, указав свойство объекта BrowserWindow.

  • index.html : добавьте в этот файл следующий фрагмент.

html




< body style = "-webkit-app-region: drag" >
< h3 >Frameless Window in Electron</ h3 >
< button id = "frame" style = "-webkit-app-region: no-drag;" >
Create a Frameless Window
</ button >
< br >< br >
< button id = "frameless" style = "-webkit-app-region: no-drag;" >
Create a Frameless Dragable Window
</ button >
< br >< br >
<!-- Adding Individual Renderer Process JS File -->
< script src = "index.js" ></ script >
</ body > 
  •  index.js : кнопки «Создать безрамочное окно» и « Создать безрамочное перетаскиваемое окно» еще не имеют связанных с ними функций. Чтобы изменить это, добавьте следующий код в файл index.js.
 javascript 



 const electron = require( 'electron' )
 // Import BrowserWindow using Electron remote
 const BrowserWindow = electron.remote.BrowserWindow;
 // let win = BrowserWindow.getAllWindows()[0];
 
var frame = document.getElementById( 'frame' );
 frame.addEventListener( 'click' , (event) => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        // Creating a Frameless Window
        frame: false ,
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadURL( ' https://www.google.com/ ' );
 });
 
var frameless = document.getElementById( 'frameless' );
 frameless.addEventListener( 'click' , (event) => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        frame: false ,
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadFile( 'src/index.html' );
    win.show();
 });
 
Для создания безрамочного окна в Electron свойство frame: false устанавливается в параметрах экземпляра BrowserWindow. Установив это свойство, пользователю будет видна только сама веб-страница без каких-либо дополнительных компонентов Chrome или GUI. Обратитесь к выходным данным для лучшего понимания. По умолчанию безрамное окно нельзя перетаскивать . Приложениям необходимо указать свойство CSS -webkit-app-region: drag, чтобы сообщить Electron, какие области можно перетаскивать. Чтобы сделать все окно перетаскиваемым, для этого свойства CSS задан стиль тега body в HTML. Приложения также могут использовать свойство CSS -webkit-app-region: no-drag для обозначения области, которую нельзя перетаскивать. После того, как мы определили окно без рамки, мы можем настроить его в соответствии с нашим внешним видом и предоставить настраиваемый заголовок вместе с настраиваемыми элементами управления окном.
 Примечание. Когда свойство CSS -webkit-app-region: drag установлено для тега body , нам нужно установить свойство CSS -webkit-app-region: no-drag для кнопок или любых интерактивных компонентов в окне. В противном случае мы не сможем щелкнуть по этим интерактивным компонентам.
Примечание. Иногда в окнах без рамки поведение при перетаскивании может конфликтовать с выделением текста. Например, при перетаскивании окна через строку заголовка мы можем случайно выделить текст в строке заголовка. Это происходит, когда размер настраиваемой строки заголовка особенно мал. Чтобы предотвратить это, нам нужно отключить выделение текста с помощью -webkit-user-select: none; CSS свойство.
Примечание. Начиная с версии 8.3.0 для Electron, в настоящее время поддерживаются только прямоугольные формы для перетаскиваемых областей. Кроме того, известно, что свойство CSS -webkit-app-region: drag вызывает проблемы, пока открыты инструменты Chrome Dev.
 Примечание. В некоторых средах перетаскиваемая область в окне может рассматриваться как неклиентский фрейм . Это означает, что всякий раз, когда мы щелкаем правой кнопкой мыши по перетаскиваемой области, может открываться системное контекстное меню. Чтобы контекстное меню работало правильно, мы никогда не должны использовать настраиваемое контекстное меню для перетаскиваемых областей.
 Свойство frame: false экземпляра BrowserWindow поддерживается на всех платформах ОС. Кроме того, в macOS у нас есть еще несколько свойств для определения окон без хрома вместо свойства frame. Если мы используем свойство frame в macOS, оно отключает строку заголовка и элементы управления Windows (также известные как светофоры в macOS). Вместо этого мы можем использовать свойство titleBarStyle в параметрах экземпляра BrowserWindow, чтобы скрыть строку заголовка и заставить содержимое расширять весь размер окна, сохраняя при этом элементы управления окна.
  • titleBarStyle: 'hidden' Это свойство скрывает строку заголовка, заставляет содержимое расширять полный размер окна, но все же отображает элементы управления окна в верхнем левом углу окна без хрома.
  •  titleBarStyle: 'hiddenInset' Это свойство скрывает строку заголовка, но обеспечивает альтернативный вид, при котором элементы управления окнами расположены немного дальше от края окна без хрома.
  •  titleBarStyle: 'customButtonsOnHover' Это свойство использует миниатюрные кнопки в качестве элементов управления Windows и отображает настраиваемый ящик при наведении курсора рядом с левым верхним уголком окна без хрома. Это свойство можно использовать только вместе со свойством frame: false.
На данный момент, при запуске приложения Electron, мы должны иметь возможность активировать окно Безрамного и перемещаемое окно Безрамного в приложении. В этом руководстве мы загрузили внешний веб-сайт в безрамочное окно и файл index.html еще раз в безрамочное перетаскиваемое окно, соответственно, для демонстрационных целей.
 Выход:
  • index.html : Теперь мы увидим, как сделать окно без рамки полностью прозрачным в приложении, и увидим некоторые особенности и ограничения прозрачного окна в Electron.
 html 



 < body style = "-webkit-app-region: drag" >
 
< h3 >Frameless Window in Electron</ h3 >
 < button id = "transparent" style = "-webkit-app-region: no-drag;" >
    Create a Frameless Transparent Window
 </ button >
 <!-- Adding Individual Renderer Process JS File -->
 < script src = "index.js" ></ script >
 </ body > 
  •  index.js : кнопка «Создать безрамное прозрачное окно» еще не имеет связанных с ней функций. Чтобы изменить это, добавьте следующий код в файл index.js.
 javascript 



 const electron = require( 'electron' )
 // Import BrowserWindow using Electron remote
 const BrowserWindow = electron.remote.BrowserWindow;
 // let win = BrowserWindow.getAllWindows()[0];
 
var transparent = document.getElementById( 'transparent' );
 transparent.addEventListener( 'click' , (event) => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        frame: false ,
        webPreferences: {
            nodeIntegration: true
        },
        transparent: true ,
    });
    win.show();
 });
 
Объяснение: Чтобы создать прозрачное окно в Electron, свойство transparent: true устанавливается в параметрах экземпляра BrowserWindow. Эти прозрачные окна можно использовать для загрузки внешних скриптов, выполнения фоновых процессов и дополнительных вычислительных задач. Однако, начиная с версии 8.3.0 для Electron, существуют определенные ограничения, связанные с прозрачными окнами. Некоторые из наиболее важных ограничений перечислены ниже:
  •  Мы не можем щелкать через прозрачные окна.
  •  Размер прозрачных окон нельзя изменить. Установка свойства resizable : true в параметрах экземпляра BrowserWindow приводит к тому, что прозрачные окна перестают работать в некоторых средах ОС.
  •  Мы не можем применить фильтр размытия к содержимому под прозрачным окном, поскольку его можно применить только к самой веб-странице, и, следовательно, содержимое под прозрачным окном будет четко видно. Как упоминалось выше, мы также не сможем щелкнуть через прозрачное окно. Это также было продемонстрировано на выходе.
Чтобы получить текущий экземпляр BrowserWindow в процессе рендеринга, мы можем использовать некоторые статические методы, предоставляемые объектом BrowserWindow.
  •  BrowserWindow.getAllWindows (): этот метод возвращает массив активных / открытых экземпляров BrowserWindow. В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться из массива, как показано в коде.
  •  BrowserWindow.getFocusedWindow (): этот метод возвращает экземпляр BrowserWindow, который сфокусирован в приложении. Если текущий экземпляр BrowserWindow не найден, возвращается значение null . В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться с помощью этого метода, как показано в коде.
На этом этапе после запуска приложения Electron мы должны иметь возможность активировать прозрачное окно в приложении.
 Выход:
Примечание: при создании прозрачных окон, когда мы указываем свойство transparent: true в параметрах, но в то же время используем методы экземпляра win.loadFile (filepath) или win.loadURL (url) объекта BrowserWindow , методы экземпляра принимают приоритет и соответствующие окна с содержимым загружаются в приложение. Однако в случае метода экземпляра win.loadFile (filepath) в приложение загружается только содержимое файла без фона. Это также можно использовать для улучшения графического интерфейса приложения. Обратитесь к выходным данным ниже для лучшего понимания.
 Выход:

            

                            

                    
                                            Node.js
                                            JavaScript
                                            HTML
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ

                

                                            

                            
Что такое тернарный оператор?

                            
23 Января, 2024

                        

                                            

                            
Ember.js Свойство содержимого ArrayProxy

                            
24 Февраля, 2023

                        

                                            

                            
Ошибка «Объект не определен» при попытке повернуть объект в three.js

                            
24 Февраля, 2023

                        

                                            

                            
Модель запросов Mongoose.deleteOne() API

                            
24 Февраля, 2023

                        

                                            

                            
Mongoose SchemaType.prototype.ref() API

                            
24 Февраля, 2023

                        

                                            

                            
Проверка мангуста

                            
24 Февраля, 2023

                        

                                            

                            
Moment.js Настройка эпох

                            
24 Февраля, 2023

                        

                                            

                            
Moment.js Настройка первого дня недели и первой недели года

                            
24 Февраля, 2023