Cómo establecer un nombre de ventana en Electron
En el desarrollo de aplicaciones con Electron, es esencial personalizar las ventanas de tu aplicación para ofrecer una mejor experiencia de usuario. Uno de los detalles más importantes es establecer el nombre o título de la ventana, que aparece en la barra de título del sistema operativo.
¿Cómo se establece un nombre de ventana en Electron?
El título de la ventana en una aplicación de Electron se configura mediante la propiedad title en las opciones de creación de una ventana (BrowserWindow) o con el método setTitle() durante la ejecución.
Configuración inicial del título
Al crear una nueva ventana en Electron, puedes especificar el título directamente en el objeto de configuración:
const { app, BrowserWindow } = require('electron');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
title: 'Mi aplicación con Electron', // Aquí defines el título
});
mainWindow.loadFile('index.html');
});Cambiar el título dinámicamente
Si necesitas actualizar el título después de que la ventana haya sido creada, utiliza el método setTitle() del objeto de la ventana:
mainWindow.setTitle('Nuevo título dinámico');Esto resulta útil si el título debe reflejar cambios dinámicos, como el nombre de un documento abierto en la aplicación.
Ejemplos prácticos
1. Establecer un título estático al iniciar la aplicación:
const { BrowserWindow } = require('electron');
let ventana = new BrowserWindow({
width: 1024,
height: 768,
title: 'Bienvenido a mi app',
});2. Actualizar el título basado en eventos:
const { ipcMain } = require('electron');
ipcMain.on('cambiar-titulo', (event, nuevoTitulo) => {
mainWindow.setTitle(nuevoTitulo);
});En este ejemplo, el título se actualiza cuando se recibe un mensaje del proceso de renderizado.
Referencia oficial
Consulta la documentación oficial de BrowserWindow para más detalles sobre las opciones y métodos disponibles.
Jorge García
Fullstack developer