Aprende a crear una barra de título personalizada (como la implementada en Visual Studio Code) en tu aplicación Electron Framework.

Cómo crear una barra de título personalizada (inspirada en la barra de título de Visual Studio Code) en Electron Framework

En la mayoría de las aplicaciones de escritorio que usan barras de título personalizadas, normalmente no usan el kit gráfico predeterminado de Windows, Mac o Linux, ya que normalmente no se puede personalizar con una sola aplicación. Entonces, la solución más común para este tipo de aplicaciones que necesitan personalizarla, es básicamente replicar el comportamiento de la barra de título con componentes de su propia GUI, eliminando la original y trabajando con una ventana sin marco. Para una aplicación de Electron, no hay ninguna excepción, por lo que si también está dispuesto a personalizar la barra de título, deberá trabajar con una ventana sin marco y crear la barra de título con HTML, CSS y JavaScript. Afortunadamente para usted, ya existe un módulo que implementa esta característica interesante y se puede instalar y personalizar fácilmente como desee.

En este artículo, le explicaremos cómo implementar una barra de título personalizada inspirada en la barra de título de Visual Studio Code.

1. Cree una ventana enmarcada con integración de Node.js

Como primer paso, deberá definir algunas propiedades en la ventana donde desea implementar esta barra de título personalizada. Harás esto en el proceso principal de Electron (el archivo donde inicializas la primera ventana) como propiedades del objeto de configuración que recibe específicamente la BrowserWindowinstancia.

Tenemos que resaltar este paso como en versiones anteriores de Electron, la integración de nodo estaba habilitada por defecto, sin embargo ahora no lo está, siempre saldrá con este atributo configurado en falso, así que asegúrese de habilitarlo para poder requieren el módulo en el proceso de renderizado. Un ejemplo de cómo se ve la función createWindow en el archivo main.js con el marco deshabilitado y nodeIntegrationconfigurado en true:

// Módulos para controlar la vida de la aplicación y crear una ventana de navegador nativa
const { app, BrowserWindow } = require('electron')
const path = require('path')

// Mantenga una referencia global del objeto de ventana, si no lo hace, la ventana
// se cerrará automáticamente cuando el objeto JavaScript sea recolectado como basura.
let mainWindow

function createWindow() {

    // Crea la ventana del navegador.
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,

        // 1. Quita el marco de la ventana
        frame: false,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),

            // 2. Habilita la integración de Node.js
            nodeIntegration: true
        }
    })

    // .... ///
}

Una vez que esté seguro de haber configurado estas propiedades, proceda con la instalación del módulo.

2. Instale la barra de título de Electron personalizada

La electrónica de la barra de título personalizada es traído a usted por @AlexTorresSk . Este proyecto es una biblioteca de mecanografiado bastante útil para Electron que le permite configurar una barra de título totalmente personalizable que es compatible en todas las plataformas, ya que se implementa con HTML, CSS y JavaScript (no utiliza módulos nativos para que funcione en todas las plataformas ).

Instale el módulo en su proyecto Electron usando el siguiente comando:

npm install custom-electron-titlebar

Para obtener más información sobre este módulo, visite el repositorio oficial en Github aquí .

3. Configurar e inicializar la barra de título

Para inicializar la barra de título, debe solicitar el módulo y crear una nueva instancia de la subclase de la barra de título. La clase espera como argumento en el constructor un objeto con la configuración de la barra de título. La única propiedad requerida es backgroundColorpara inicializar la barra y puede actualizar el título de la ventana usando el método updateTitle de la instancia almacenada:

// 1. Requerir el módulo instalado
const customTitlebar = require('custom-electron-titlebar');

// 2. Crea la barra de título personalizada con tu propia configuración
// Para que funcione, solo necesitamos proporcionar la propiedad Color de fondo
// Otras propiedades son opcionales.
let MyTitleBar = new customTitlebar.Titlebar({
    backgroundColor: customTitlebar.Color.fromHex('#03a9f4')
});

// 3. Actualizar el texto de la barra de título
MyTitleBar.updateTitle('Our Code World Tutorials Rock !');

Puede personalizar algunas propiedades de la barra de título proporcionándolas en el objeto de configuración como primer argumento de la clase Titlebar:

Parámetro Tipo Descripción Defecto
backgroundColor (obligatorio) Color El color de fondo de la barra de título. # 444444
icon texto El icono que se muestra en el lado izquierdo de la barra de título. nulo
iconsTheme Tema Estilo de los iconos. Themebar.win
shadow booleano La sombra de la barra de título. falso
drag booleano Defina si puede o no arrastrar la ventana manteniendo pulsado el clic en la barra de título. cierto
minimizable booleano Habilita o deshabilita la opción de minimizar la ventana haciendo clic en el botón correspondiente en la barra de título. cierto
maximizable booleano Habilita o deshabilita la opción de maximizar y des-maximizar la ventana haciendo clic en el botón correspondiente en la barra de título. cierto
closeable booleano Habilita o deshabilita la opción de cerrar ventana haciendo clic en el botón correspondiente en la barra de título. cierto
order texto Establezca el orden de los elementos en la barra de título. ( inverted, first-buttons) nulo
titleHorizontalAlignment texto Establece la alineación horizontal del título de la ventana. ( left, center, right) centrar
menu Electron.Menu El menú que se mostrará en la barra de título. Menu.getApplicationMenu ()
menuPosition texto La posición de la barra de menú en la barra de título. izquierda
enableMnemonics booleano Habilite los mnemónicos en la barra de menú y los elementos del menú. cierto
itemBackgroundColor Color El color de fondo cuando el mouse está sobre el elemento. rgba (0, 0, 0, .14)
overflow texto El desbordamiento del recipiente ( auto, visible, hidden) auto

Recuerda que necesita ejecutar el código en el proceso del renderizador (en el index.htmlarchivo):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello World!</h1>

        <!-- Renderer process logic -->
        <script>
            // 1. Requerir el módulo instalado
            const customTitlebar = require('custom-electron-titlebar');

            // 2. Cree la barra de título personalizada con su propia configuración
            //    Para que funcione, solo necesitamos proporcionar la propiedad backgroundColor
            //    Otras propiedades son opcionales.
            let MyTitleBar = new customTitlebar.Titlebar({
                backgroundColor: customTitlebar.Color.fromHex('#03a9f4'),
                shadow: true,
                icon: './icon.svg'
            });
            
            // 3. Actualizar el texto de la barra de título
            MyTitleBar.updateTitle('Our Code World Tutorials Rock !');
        </script>
    </body>
</html>

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores