Differences between revisions 3 and 10 (spanning 7 versions)
⇤ ← Revision 3 as of 2021-08-09 22:11:47 →
Size: 3880
Editor: DominicRicottone
Comment:
← Revision 10 as of 2025-12-19 20:30:38 → ⇥
Size: 590
Editor: DominicRicottone
Comment: Cleanup
Deletions are marked like this. Additions are marked like this.
Line 2: Line 2:

'''`electron(1)`''' is a framework for Node application.
Line 9: Line 11:
== electron-store == == Installation ==
Line 11: Line 13:
A simple data persistence solution for Electron apps, using minimal dependencies. It writes to `config.json` in `app.getPath('userData')`.

If the renderer needs access to the store, try:		 Using `npm(1)`:
Line 16: Line 16:
const win = new BrowserWindow({ enableRemoteModule: true }) npm install --save-dev electron
Line 23: Line 23:
== An Application Template == == Tool Chain ==
Line 25: Line 25:
=== main.js ===

{{{
const { app, BrowserWindow } = require("electron");
const path = require("path");

let win;
function init() {
  win = NewBrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false,
      preload: path.join(__dirname, "preload.js")
    }
  });

  win.loadFile(path.join(__dirname, "index.html"));

  win.on("closed", () => {
    win = null;
  });
}

app.on("ready", init);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (win === null) {
    init()
  }
});
}}}

----		  * [[Node/ElectronBuilder|electron-builder]]
Line 68: Line 28:
== APIs ==
Line 69: Line 30:
== Menu Bar ==

The menu bar is composed of menus and sub-menus. Design a 'template' (see below) and have it built into a menu, then apply the menu to the application.

{{{
const { app, BrowserWindow, menu, shell } = require("electron");

const template = [
  {
    label: 'File',
    submenu: [
      {
        label: 'Exit',
        click() {
          app.quit()
        }
      }
    ]
  },
  {
    label: 'Help',
    submenu: [
      {
        label: 'Learn More',
        click: async () => {
          await shell.openExternal('https://example.org');
        }
      }
    ]
  }
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
}}}

The above example features two ways to define the corresponding action for a menu item, and it also demonstrates how an async function can be used.



=== Platform-Specific Menus ===

Using conditional logic and array unpacking, platform-specific menus can be maintained in the same codebase.

{{{
const { app, BrowserWindow, menu } = require("electron");
const isMac = process.platform === 'darwin';

const template = [
  ...(isMac ? [{
    label: app.name,
    submenu: [
      { role: 'about' },
      { role: 'quit' }
    ]
  }] : []),
  {
    label: 'File',
    submenu: [
      isMac ? { role: 'close' } : { role: 'quit' }
    ]
  }
];
}}}

----



== Keyboard Shortcuts ==

=== Built-in Method ===

Follow the above example for menu items, but add an `accelerator` option to the corresponding menu item.

{{{
const { app, BrowserWindow, menu } = require("electron");

const template = [
  {
    label: 'File',
    submenu: [
      {
        label: 'Save',
        accelerator: 'CmdOrCtrl+S',
        click: saveFile()
      }
    ]
  }
]
}}}



=== electron-localshortcut ===

A simpler method is to use the `electron-localshortcut` package.

{{{
const { app, BrowserWindow } = require("electron");
const shortcut = require("electron-shortcut");

shortcut.register(win, "CmdOrCtrl+S", () => {
  saveFile();
});
}}}



=== Platform-Specific Shortcuts ===

Apople computers famously have a different keyboard. Unfortunately, those end users will expect the Command key to work like the Control key for everyone else.

The helper modifier `CmdOrCtrl` exists to simplify this need as shown in the above examples. Nonetheless, it is possible to re-invent the wheel.

{{{
const { app, BrowserWindow, menu } = require("electron");
const isMac = process.platform === 'darwin';

const template = [
  {
    label: 'File',
    submenu: [
      {
        role: 'Save File',
        accelerator: isMac ? 'Cmd+S' : 'Ctrl+S',
        click: saveFile()
      }
    ]
  }
]
}}}		  * [[Node/Electron/App|app]]
 * [[Node/Electron/BrowserWindow|BrowserWindow]]
 * [[Node/Electron/Dialog|dialog]]
 * [[Node/Electron/IpcMain|ipcMain]]
 * [[Node/Electron/IpcRenderer|ipcRenderer]]
 * [[Node/Electron/Menu|Menu]]
 * [[Node/Electron/Shell|shell]]

Electron

electron(1) is a framework for Node application.

Contents

  1. Electron
    1. Installation
    2. Tool Chain
    3. APIs

Installation

Using npm(1): 

npm install --save-dev electron

Tool Chain

APIs

CategoryRicottone

Node/Electron (last edited 2025-12-19 20:30:38 by DominicRicottone)