ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.
En una aplicación de escritorio compleja, puede ocurrir una situación en la que los desarrolladores tengan que llevar a cabo procesos en segundo plano y tareas computacionales adicionales en marcos paralelos sin interrumpir la experiencia del usuario. Estos procesos en segundo plano que se ejecutan dentro de marcos paralelos no deben ser visibles para el usuario como ventanas GUI adicionales, pero deben activarse en consecuencia siempre que surja la necesidad. Podemos ver este comportamiento en muchas aplicaciones de escritorio modernas, como el navegador web Google Chrome. Además, es posible que los desarrolladores deseen restringir al usuario a un marco específico con funcionalidad limitada, como cuando se muestra un Acuerdo de licencia o una ventana de Términos y condiciones. En dichas ventanas, la barra de título, la barra de navegación y los menús contextuales están deshabilitados y el usuario no debería poder cerrar/saltar/minimizar el marco de la ventana.opciones de un nuevo objeto BrowserWindow . Estas ventanas se conocen como ventanas sin marco en Electron. Este tutorial demostrará cómo crear y las características de una ventana sin marco en Electron.
Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.
- Estructura del proyecto:
Ejemplo: Siga los pasos dados en Estilo dinámico en ElectronJS para configurar la aplicación electrónica básica. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Además, realice los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos.
paquete.json:
{
"name": "electron-frameless",
"version": "1.0.0",
"description": "Frameless Window in Electron",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [
"electron"
],
"author": "Radhesh Khanna",
"license": "ISC",
"dependencies": {
"electron": "^8.3.0"
}
}
Producción:
Ventana sin marco en Electron: la instancia de BrowserWindow es parte del proceso principal . Para importar y usar BrowserWindow en el proceso Renderer , usaremos el módulo remoto Electron . Una ventana sin marco es una ventana que no tiene cromo . Chrome es cualquier aspecto visible de una ventana aparte de las propias páginas web (p. ej., barras de herramientas, barra de menú, bordes, etc.). Podemos definir una instancia de BrowserWindow como una ventana sin marco o transparente especificando las propiedades del objeto BrowserWindow .
- index.html : agregue el siguiente fragmento en ese archivo.
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 Draggable Window </button> <br><br> <!-- Adding Individual Renderer Process JS File --> <script src="index.js"></script> </body>
- index.js : los botones Crear una ventana sin marco y Crear una ventana arrastrable sin marco aún no tienen ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente código en el archivo 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();
});
Para crear una ventana sin marco en Electron, la propiedad frame: false se establece en las opciones de la instancia de BrowserWindow . Al configurar esta propiedad, solo la página web en sí será visible para el usuario sin ningún componente adicional de Chrome o GUI. Consulte la salida para una mejor comprensión. De forma predeterminada, la ventana sin marco no se puede arrastrar . Las aplicaciones deben especificar la propiedad CSS -webkit-app-region: drag para decirle a Electron qué regiones se pueden arrastrar. Para hacer que toda la ventana se pueda arrastrar, esta propiedad CSS se establece en el estilo de la etiqueta del cuerpo en HTML. Las aplicaciones también pueden usar -webkit-app-region: no-dragPropiedad CSS para indicar el área no arrastrable. Una vez que hemos definido una ventana sin marco, podemos personalizarla a nuestra apariencia y proporcionar una barra de título personalizada junto con controles de ventana personalizados.
Nota : cuando la propiedad CSS -webkit-app-region: drag se establece en la etiqueta del cuerpo , debemos establecer la propiedad CSS -webkit-app-region: no-drag en los botones o cualquier componente en el que se pueda hacer clic dentro de la ventana. De lo contrario, no podremos hacer clic en esos componentes en los que se puede hacer clic.
Nota: A veces, en las ventanas sin marco, el comportamiento de arrastre puede entrar en conflicto con la selección de texto. Por ejemplo, al arrastrar una ventana a través de la barra de título, podemos seleccionar accidentalmente el texto de la barra de título. Esto ocurre cuando el tamaño de la barra de título personalizada es especialmente pequeño. Para evitar esto, debemos deshabilitar la selección de texto usando -webkit-user-select: none; Propiedad CSS.
Nota: A partir de la versión 8.3.0 de Electron, actualmente solo se admiten formas rectangulares para las regiones que se pueden arrastrar. Además, se sabe que la propiedad -webkit-app-region: drag CSS tiene problemas mientras las herramientas de desarrollo de Chrome están abiertas.
Nota : en algunos entornos, la región que se puede arrastrar dentro de una ventana se puede tratar como un marco que no es del cliente . Esto significa que cada vez que hacemos clic con el botón derecho en la región que se puede arrastrar, se puede abrir el menú contextual del sistema. Para que el menú contextual se comporte correctamente, nunca debemos usar un menú contextual personalizado en regiones arrastrables.
El marco: propiedad falsa de BrowserWindowLa instancia es compatible con todas las plataformas de SO. Además, en macOS, tenemos algunas propiedades más para definir ventanas sin marco en lugar de la propiedad del marco . Si usamos la propiedad de marco en macOS, deshabilita la barra de título y los controles de Windows (también conocidos como semáforos en macOS). En su lugar, podemos usar la propiedad titleBarStyle en las opciones de la instancia de BrowserWindow para ocultar la barra de título y hacer que el contenido amplíe todo el tamaño de la ventana mientras conserva los controles de la ventana.
- titleBarStyle: ‘hidden’ Esta propiedad oculta la barra de título, hace que el contenido se extienda al tamaño completo de la ventana, pero aún muestra los controles de la ventana en la esquina superior izquierda de la ventana sin marco.
- titleBarStyle: ‘hiddenInset’ Esta propiedad oculta la barra de título pero proporciona una apariencia alternativa en la que los controles de las ventanas están un poco más insertados desde el borde de la ventana sin bordes.
- titleBarStyle: ‘customButtonsOnHover’ Esta propiedad utiliza botones en miniatura como controles de ventanas y muestra un cajón personalizado al pasar el mouse cerca de la parte superior izquierda de la ventana sin bordes. Esta propiedad solo se puede usar junto con el marco: propiedad falsa.
En este punto, al iniciar la aplicación Electron, deberíamos poder activar una ventana sin marco y una ventana arrastrable sin marco en la aplicación. En este tutorial, hemos cargado un sitio web externo en la ventana sin marco y el archivo index.html una vez más en la ventana arrastrable sin marco, respectivamente, con fines de demostración.
Producción:
- index.html : ahora veremos cómo hacer que una ventana sin marco sea completamente transparente en la aplicación y veremos algunas de las características y limitaciones de una ventana transparente en 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 : el botón Crear una ventana transparente sin marco aún no tiene ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente código en el archivo 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();
});
Explicación: Para crear una ventana transparente en Electron, la propiedad transparent: true se establece en las opciones de la instancia de BrowserWindow . Estas ventanas transparentes se pueden usar para cargar scripts externos, realizar procesos en segundo plano y tareas de cálculo adicionales. Sin embargo, a partir de la versión 8.3.0 de Electron, existen ciertas limitaciones asociadas con las ventanas transparentes. Algunas de las limitaciones más importantes se enumeran a continuación:
- No podemos hacer clic a través de ventanas transparentes.
- Las ventanas transparentes no son redimensionables. Establecer la propiedad resizable : true en las opciones de la instancia de BrowserWindow hace que las ventanas transparentes dejen de funcionar en algunos entornos de sistema operativo.
- No podemos aplicar el filtro de desenfoque a los contenidos debajo de la ventana transparente, ya que solo se puede aplicar a la propia página web y, por lo tanto, los contenidos debajo de la ventana transparente serán claramente visibles. Como se mencionó anteriormente, tampoco podremos hacer clic en la ventana transparente. Esto también se ha demostrado en la salida.
Para obtener la instancia actual de BrowserWindow en el proceso Renderer , podemos usar algunos métodos estáticos proporcionados por el objeto BrowserWindow .
- BrowserWindow.getAllWindows(): este método devuelve una array de instancias de BrowserWindow activas/abiertas. En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente desde la array como se muestra en el código.
- BrowserWindow.getFocusedWindow(): este método devuelve la instancia de BrowserWindow que está enfocada en la aplicación. Si no se encuentra ninguna instancia de BrowserWindow actual, devuelve nulo . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia a ella directamente mediante este método, como se muestra en el código.
En este punto, al iniciar la aplicación Electron, deberíamos poder activar una ventana transparente en la aplicación.
Producción:
Nota: Al crear ventanas transparentes, cuando especificamos la propiedad transparent: true en las opciones pero al mismo tiempo usamos los métodos de instancia win.loadFile(filepath ) o win.loadURL(url) del objeto BrowserWindow , los métodos de instancia toman Se cargan en la aplicación la precedencia y las respectivas ventanas con el contenido. Sin embargo, en el caso del método de instancia win.loadFile(filepath) , solo se carga en la aplicación el contenido del archivo sin antecedentes. Esto también se puede utilizar para mejorar la GUI de la aplicación. Consulte el resultado a continuación para una mejor comprensión.
Producción:
Publicación traducida automáticamente
Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA