El componente gui BrowserWindow tiene muchas opciones como eventos, métodos, etc que no podemos ver todos en detalles, solo nos enfocaremos en ver como funciona en forma general. Este componente nos permite crear ventanas con ciertas propiedades.
Por ejemplo si deseamos crear una ventana de 1024x768 pixels lo hacemos de la siguiente forma.
var ventana = new electron.BrowserWindow({ width: 1024, height: 768 });
Valores de dimensiones del BrowserWindow
Si deseamos definir los rangos de dimensiones de las ventanas, estos son algunos valores que podemos utilizar.
var ventana = new electron.BrowserWindow({
width: 1024,
height: 768,
minWidth: 600,
minHeight: 320,
maxWidth: 2048,
maxHeight: 1024,
});
Ahora ademas de agregas las dimensiones iniciales de la ventana, también podemos indicarle a Electron cuales son los tamaños mínimos y máximos permitidos para dicha ventana de forma que el usuario no podrá hacer mas pequeña o mas grande la ventana de los rangos establecidos.
Valores de los comportamientos de BrowserWindow
También existen algunos comportamientos de las ventanas que podemos controlar.
var ventana = new electron.BrowserWindow({
resizable: true,
movable: true,
minimizable: true,
maximizable: true,
closable: true,
focusable: true,
fullscreenable: true,
});
Cada una de estas propiedades son muy sencillas de interpretar.
- resizable
- ¿Se puede cambiar el tamaño de la ventana?
- movable
- ¿Se puede mover la posición de la ventana?
- minimizable
- ¿Se puede minimizar la ventana?
- maximizable
- ¿Se puede maximizar la ventana?
- closable
- ¿Se puede cerrar la ventana?
- focusable
- ¿Se puede enfocar la ventana?
- fullscreenable
- ¿Se puede expandir la ventana en modo pantalla completa?
Muchas de estas opciones de comportamiento no son compatibles en Linux.
Configuración de apariencia del BrowserWindow
Ahora vamos a ver como podemos modificar la apariencia de nuestra ventana.
new electron.BrowserWindow({
icon: path.join(__dirname, "icono.ico"),
title: "Titulo de mi aplicacion",
fullscreen: false,
frame: true,
backgroundColor: "#dedede",
});
Las propiedades permiten hacer lo siguiente con la ventana.
- icon
- Permite asignar un icono personalizado a la ventana.
- title
- Define el título que muestra la ventana.
- fullscreen
- Determina si la ventana abre en modo pantalla completa al iniciar.
- frame
- Provee las utilizadas para el control de ventanas del sistema operativo, como minimizar, maximizar y cerrar una ventana.
- backgroundColor
- Acepta un código hexadecimal para definir el color de fondo de la aplicación.
Eventos del BrowserWindow
Al cerrar (on close)
El BrowserWindow emite una gran cantidad de eventos que pueden ser monitoreados para ajustar el comportamiento de la aplicación.
var ventana = new electron.BrowserWindow({ width: 1024, height: 768 });
ventana.addEventListener("close", function () {
console.log("La ventana se ha cerrado");
});
En este ejemplo hemos indicado que cuando la ventana se cierre se imprima en consola el mensaje “La ventana se ha cerrado”.
Al estar listo (on ready to show)
Si has utilizado jquery probablemente estés familiarizado con el evento on('ready'). En electron existe el evento on('ready-to-show') que indica que la aplicación esta lista para ser desplegada.
ventana.addEventListener("ready-to-show", function () {
ventana.show();
});
Aquí le hemos indicado que la ventana se despliegue apenas este lista para poder hacerlo.