Mensajes personalizados en ElectronJS

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.

Una de las formas en que una aplicación de Electron interactúa con el usuario es a través de cuadros de mensajes y alertas. A veces, durante la ejecución de la aplicación, surge una condición que necesita la atención del usuario o el código encuentra un error y el usuario debe ser consciente de ello. En tales casos, el flujo de ejecución no puede avanzar sin la intervención del usuario. Electron nos proporciona una técnica conveniente mediante la cual el usuario puede ser consciente del problema y tomar las medidas necesarias al respecto. Electron nos proporciona un módulo de diálogo incorporado para mostrar cuadros de mensajes personalizados y alertas para interactuar con el usuario. Este tutorial utilizará los métodos de instancia del módulo de diálogo para demostrar los mensajes personalizados 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.

Mensajes personalizados en Electron: El módulo de diálogo es parte del proceso principal . Para importar y usar el módulo de diálogo en el proceso Renderer , usaremos el módulo remoto Electron .

• Estructura del proyecto:
  

Ejemplo: siga los pasos dados para crear cuadros de mensajes personalizados en Electron.

• Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando,

  npm init

  Para generar el archivo package.json . Instale Electron usando npm si no está instalado.

  npm install electron --save

  Esto instalará las dependencias requeridas de node_modules . Copie cualquier archivo de imagen de su elección en la carpeta de activos y asígnele el nombre image.png . En este tutorial, utilizaremos el logotipo de Electron como archivo image.png .

  paquete.json:

  {
    "name": "electron-message",
    "version": "1.0.0",
    "description": "Custom Messages in Electron",
    "main": "main.js",
    "scripts": {
      "start": "electron ."
    },
    "keywords": [
      "electron"
    ],
    "author": "Radhesh Khanna",
    "license": "ISC",
    "dependencies": {
      "electron": "^8.2.5"
    }
  }
  

• Paso 2: para obtener el código estándar del archivo main.js , consulte este enlace . Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.

  principal.js:

  const { app, BrowserWindow } = require('electron')    function createWindow() {   // Create the browser window.   const win = new BrowserWindow({     width: 800,     height: 600,     webPreferences: {       nodeIntegration: true     }   })      // Load the index.html of the app.   win.loadFile('src/index.html')      // Open the DevTools.   win.webContents.openDevTools() }    // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. /* The 'dialog.showErrorBox()' method can be used before     this event occurs. */  // This method is equivalent to 'app.on('ready', function())' app.whenReady().then(createWindow)    // Quit when all windows are closed. app.on('window-all-closed',() => {      // On macOS it is common for applications and their menu bar   // To stay active until the user quits explicitly with Cmd + Q   if (process.platform !== 'darwin') {     app.quit()   } })    app.on('activate',() => {      // On macOS it's common to re-create a window in the    // app when the dock icon is clicked and there are no    // other windows open.   if (BrowserWindow.getAllWindows().length === 0) {     createWindow()   } })    // In this file, you can include the rest of your  // app's specific main process code. You can also  // Put them in separate files and require them here.

• Paso 3: Cree el archivo index.html y el archivo index.js dentro del directorio src . También copiaremos el código repetitivo para el archivo index.html del enlace mencionado anteriormente. Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.

  índice.html:

  <!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title>Hello World!</title>     <!-- https://electronjs.org/docs/tutorial                            /security#csp-meta-tag -->     <meta http-equiv="Content-Security-Policy"            content="script-src 'self' 'unsafe-inline';" />   </head>   <body>     <h1>Hello World!</h1>     We are using node      <script>         document.write(process.versions.node)     </script>, Chrome      <script>         document.write(process.versions.chrome)     </script>, and Electron      <script>         document.write(process.versions.electron)     </script>.        <h3>Custom Messages in Electron</h3>     <button id="show">Show Custom Message Box</button>        <br><br>     <button id="error">Show Error Message Box</button>            <!-- Adding Individual Renderer Process JS File -->     <script src="index.js"></script>   </body> </html>

  Salida: en este punto, nuestra aplicación está configurada y podemos iniciar la aplicación para verificar la salida de la GUI. Para iniciar la aplicación Electron, ejecute el comando.

  npm start

  

• Paso 4: el botón Mostrar cuadro de mensaje personalizado aún no tiene ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente código en el archivo index.js .

  El dialog.showMessageBox(browserWindow, options) se usa con todos los valores predeterminados/básicos para el objeto de opciones . El uso de este método de instancia muestra el cuadro de mensaje y bloqueará la ejecución de la aplicación hasta que el cuadro de mensaje se cierre correctamente con la acción adecuada por parte del usuario. Toma los siguientes parámetros.

  • browserWindow: BrowserWindow (Opcional) La instancia de BrowserWindow . Este argumento permite que el cuadro de diálogo se adjunte a la ventana principal, convirtiéndolo en un modal . Una ventana modal es una ventana secundaria que desactiva la ventana principal. Si no se muestra BrowserWindow , el cuadro de diálogo no se adjuntará. En tal caso, se mostrará como una ventana independiente. En el código anterior, la instancia de BrowserWindow no se pasa al cuadro de diálogo, por lo tanto, el cuadro de diálogo se abre como una ventana independiente al hacer clic en el botón Mostrar cuadro de mensaje personalizado .
  • opciones: Objeto Toma los siguientes parámetros,
    • tipo: String (Opcional) Puede contener los siguientes valores.
      • ninguna
      • información
      • error
      • pregunta
      • advertencia

      Cada uno de estos valores significa el tipo de cuadro de mensaje que desea mostrar al usuario. El valor predeterminado es ninguno . En Windows , la pregunta muestra el mismo icono que la información , a menos que la propiedad del icono se establezca explícitamente. En macOS , tanto la advertencia como el error muestran el mismo icono de advertencia. Cada uno de estos valores tiene asociado un sonido del sistema operativo predeterminado, excepto el valor predeterminado.

    • botones: String[] (Opcional) Representa un Array para las etiquetas de los Botones que desea mostrar en el cuadro de Mensaje Personalizado. Una array vacía dará como resultado que se muestre un botón, etiquetado como Aceptar .
    • defaultId: Integer (Opcional) El índice del botón en la buttonsarray que se seleccionará de forma predeterminada cuando se abra el cuadro Mensaje personalizado. Esta propiedad depende de la propiedad noLink . Esto se demuestra en los siguientes pasos.
    • título: string (opcional) El título que se mostrará en el cuadro de mensaje. Algunas plataformas de SO y sus respectivas versiones no admiten esta propiedad.
    • mensaje: String El contenido principal del cuadro Mensaje.
    • detalle: string (opcional) Información adicional que se mostrará en el cuadro Mensaje debajo de la propiedad del mensaje .
    • checkboxLabel: String (Opcional) Etiqueta de la casilla de verificación. Esta propiedad incluye automáticamente la casilla de verificación con la etiqueta dada en el cuadro de mensaje personalizado.
    • checkboxChecked: booleano (opcional) Esta propiedad representa el estado inicial de la casilla de verificación. El valor predeterminado de esta propiedad es falso .
    • icon: NativeImage (opcional) El icono que se mostrará en el cuadro de mensaje. Si se define esta propiedad, anulará los iconos del sistema predeterminados para la propiedad de tipo , independientemente de su valor. Esta propiedad toma una instancia de NativeImage o la ruta de archivo de una imagen. En este tutorial, pasaremos la ruta del archivo para el archivo image.png ubicado en la carpeta de activos usando el módulo de ruta .
    • cancelId: Integer (Opcional) El índice del botón que se devolverá cuando se cancele el diálogo, a través de la tecla Esc . De forma predeterminada, se asigna al primer botón con Cancelar o No como etiqueta en la propiedad de la array de botones . Si no existen tales botones etiquetados y esta opción no está configurada, se utilizará 0 como valor de retorno. Esto se demuestra en los siguientes pasos.
    • noLink: booleano (opcional) Esta propiedad solo se admite en Windows . Cuando se establece esta propiedad, Electron intentará averiguar automáticamente cuál de los botones son etiquetas de botón comunes, por ejemplo , Cancelar , Sí , No , Aceptar , etc., y mostrará las otras etiquetas de botón como enlaces de comando en el cuadro de diálogo. Esta propiedad se usa para hacer que la ventana de diálogo aparezca con estilo con las aplicaciones y temas modernos del sistema operativo Windows . De forma predeterminada, esta propiedad se establece en false . En caso de que se utilicen todas las etiquetas de botones comunes, esta propiedad no tendrá efecto. Esta propiedad se demuestra en los siguientes pasos.
    • normalizeAccessKeys: booleano (opcional) normaliza las teclas de acceso del teclado en todas las plataformas. El valor predeterminado es falso . Habilitar esta propiedad supone que se usa el comodín ‘&’ en las etiquetas de los botones. Estas etiquetas se convertirán para que funcionen en cada plataforma en consecuencia. Los caracteres ‘&’ se eliminan por completo en macOS , se convierten a _ en Linux y no se realiza ninguna acción en Windows .

  El dialog.showMessageBox(browserWindow, options) devuelve una Promesa . Se resuelve en un Objeto que contiene los siguientes parámetros,

  • respuesta: Entero El índice del botón en el que se hizo clic como se define en la propiedad de array de botones .
  • checkboxChecked: booleano El estado marcado de la casilla de verificación si se estableció la propiedad checkboxLabel . De forma predeterminada, devolverá falso .

  índice.js:

  const electron = require('electron'); const path = require('path');    // Importing dialog module using remote const dialog = electron.remote.dialog;    var showBox = document.getElementById('show');    showBox.addEventListener('click', (event) => {     // Resolves to a Promise<Object>     dialog.showMessageBox({         // option Object         type: 'none',         buttons: [],         defaultId: 0,         icon: '',         title: 'This is the Title',         message: 'This is a Message',         detail: 'This is extra Information',         checkboxLabel: 'Checkbox',         checkboxChecked: false,         cancelId: 0,         noLink: false,         normalizeAccessKeys: false,     }).then(box => {         console.log('Button Clicked Index - ', box.response);         console.log('Checkbox Checked - ', box.checkboxChecked);     }).catch(err => {         console.log(err)     });  });

  Salida: ahora deberíamos poder activar con éxito un cuadro de mensaje personalizado básico al hacer clic en el botón Mostrar cuadro de mensaje personalizado .
  

  Nota: Si el usuario intenta continuar con la ejecución de la aplicación sin cerrar con éxito el cuadro Mensaje personalizado, se muestra el siguiente mensaje en la consola:

  Attempting to call a function in a renderer window that 
  has been closed or released. Function provided here: undefined

• Paso 5: Ahora modificaremos las opciones Objeto del Cuadro de Mensaje Personalizado para ver las diferentes salidas,
  • type: String Definición de los diferentes tipos de cuadros de mensaje.
    • tipo: ‘información’
    • tipo: ‘advertencia’
      
    • error de tecleado’
      
  • botones: String[] Definiremos etiquetas personalizadas para la propiedad de array de botones y veremos las salidas respectivas cambiando la propiedad noLink .
    • botones: [‘Cancelar’, ‘Aceptar’, ‘Botón-1’, ‘Botón-2’] , noLink: false , defaultId: 0
      

      Nota: En este caso, la propiedad defaultId debe resaltar el botón Cancelar , pero en su lugar se selecciona la etiqueta Botón-1 . Esto se debe al comportamiento definido por la propiedad noLink .

    • botones: [‘Cancelar’, ‘Aceptar’, ‘Botón-1’, ‘Botón-2’] , noLink: true , defaultId: 0
      

      Nota: El botón Cancelar está seleccionado de forma predeterminada según el comportamiento esperado.

  • cancelId: Entero Evaluación del comportamiento de la propiedad cancelId . Este comportamiento se invoca presionando la tecla Esc en el teclado.
    • botones: [‘Cancelar’, ‘Aceptar’, ‘Botón-1’, ‘Botón-2’] , cancelId: 100 , noLink: verdadero

      

      Nota: El valor devuelto es 100 como se establece en la propiedad cancelId .

    • botones: [‘Cancelar’, ‘Aceptar’, ‘Botón-1’, ‘Botón-2’] , cancelId: 100 , noLink: falso
      

      Nota: El valor devuelto es 0 a pesar de establecer el valor de la propiedad cancelId en 100.

  • icon: NativeImage Pasaremos la ruta del archivo image.png ubicado en la carpeta de activos .
    • botones: [‘Cancelar’, ‘Aceptar’, ‘Botón-1’, ‘Botón-2’] , icono: ruta.unirse(__dirname, ‘../activos/imagen.png’) , noLink: verdadero
      
    • botones: [‘Cancelar’, ‘Aceptar’, ‘Botón-1’, ‘Botón-2’] , icono: ruta.join(__dirname, ‘../assets/image.png’) , noLink: false
      

    Nota: El uso de la propiedad icon desactiva el sonido del sistema operativo predeterminado para la propiedad type , independientemente de su valor.

  También podemos asignar diferentes comportamientos a cada botón en el cuadro Mensaje simplemente comparando el valor de índice de la propiedad de array de botones con el parámetro de respuesta devuelto por Promise .

  índice.js:

  .then(box => {     console.log('Button Clicked Index - ', box.response);     console.log('Checkbox Checked - ', box.checkboxChecked);        if (box.response === 0) {         console.log('Cancel Button was clicked');     } else if (box.response === 2) {         console.log('Button-1 was clicked');     }  }).catch(err => {     console.log(err)  });

  Producción:
  

• Paso 6: Electron también nos proporciona un método de instancia diseñado específicamente para mensajes de error. En el código anterior, el botón Mostrar cuadro de mensaje de error no tiene ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente código en el archivo index.js .

  El cuadro de diálogo.showErrorBox(título, información) toma los siguientes parámetros. No tiene ningún valor de retorno. Este método no se puede personalizar como el método dialog.showMessageBox() , pero se puede llamar a este método de manera segura antes de que se emita el evento listo del módulo de la aplicación . Consulte el código resaltado en el archivo main.js. Suele utilizarse para mostrar errores en las etapas de inicio de la aplicación. Si se llama antes del evento listo del módulo de la aplicación en Linux , el mensaje se emitirá a stderr y no aparecerá ningún cuadro de diálogo de GUI.

  • title: String El título del cuadro de error.
  • info: String La información de texto que se mostrará en el cuadro de error debajo de la propiedad del título .

  índice.js:

  var error = document.getElementById('error');    error.addEventListener('click', (event) => {     dialog.showErrorBox('This is the Title', 'This is the Content'); });

  Producción: