Differences between revisions 3 and 8 (spanning 5 versions)

Electron

electron(1) is a framework for Node application.

Contents

Electron

Example

A basic election application looks like:

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()
  }
});

Installation

Using npm(1):

npm install --save-dev electron

Usage

Utilities

Distribution

TODO: copy from https://www.electronjs.org/docs/tutorial/application-distribution#manual-distribution.

-  ⇤ ← Revision 3 as of 2021-08-09 22:11:47 → 
  Size: 3880
  Editor: DominicRicottone
  Comment:
+   ← Revision 8 as of 2023-01-08 17:49:36 → ⇥
  Size: 1473
  Editor: DominicRicottone
  Comment:
-Deletions are marked like this.
+Additions are marked like this.
 Line 2:
+'''`electron(1)`''' is a framework for Node application.
-Line 9:
+Line 11:
-== electron-store ==
+== Example ==
-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:

{{{
const win = new BrowserWindow({ enableRemoteModule: true })
}}}

----



== An Application Template ==

=== main.js ===
+A basic `election` application looks like:
-Line 69:
+Line 57:
-== Menu Bar ==
+== Installation ==
-Line 71:
+Line 59:
-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.
+Using `npm(1)`:
-Line 74:
+Line 62:
-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' }
    ]
  }
];
+npm install --save-dev electron
-Line 138:
+Line 69:
-== 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()
      }
    ]
  }
]
}}}
+== Usage ==
-Line 163:
+Line 73:
-=== electron-localshortcut ===
+=== Utilities ===
-Line 165:
+Line 75:
-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();
});
}}}
+ * [[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]]
-Line 178:
+Line 85:
-=== Platform-Specific Shortcuts ===
+=== Distribution ===
-Line 180:
+Line 87:
-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.
+TODO: copy from [[https://www.electronjs.org/docs/tutorial/application-distribution#manual-distribution]].
-Line 182:
+Line 89:
-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()
      }
    ]
  }
]
}}}
+See also [[Node/ElectronBuilder|electron-builder]].

Diff for "Node/Electron"

Electron

Example

Installation

Usage

Utilities

Distribution