Differences between revisions 5 and 8 (spanning 3 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 5 as of 2021-11-20 22:23:07 → 
  Size: 4118
  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:
-== Building ==
+== Example ==
-Line 11:
+Line 13:
-=== Electron Builder ===

Upstream strongly recommends using '''`yarn(1)`''' (not `npm(1)`) to install '''Electron Builder'''.

{{{
yarn add electron-builder --dev
}}}

See [[ElectronBuilder|here]] for details on how to use `electron-builder` in a project.



=== Manual Building ===

See [[https://www.electronjs.org/docs/tutorial/application-distribution#manual-distribution|here]] for instructions on manually building an Electron app, optionally with source code obfuscation.

----



== Usage ==

A basic Election application looks like:
+A basic `election` application looks like:
-Line 75:
+Line 53:
-=== 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.
+----
-Line 117:
+Line 57:
-==== Platform-Specific Menus ====
+== Installation ==
-Line 119:
+Line 59:
-Using conditional logic and array unpacking, platform-specific menus can be maintained in the same codebase.
+Using `npm(1)`:
-Line 122:
+Line 62:
-const { app, BrowserWindow, menu } = require("electron");
const isMac = process.platform === 'darwin';
+npm install --save-dev electron
}}}
-Line 125:
+Line 65:
-const template = [
  ...(isMac ? [{
    label: app.name,
    submenu: [
      { role: 'about' },
      { role: 'quit' }
    ]
  }] : []),
  {
    label: 'File',
    submenu: [
      isMac ? { role: 'close' } : { role: 'quit' }
    ]
  }
];
}}}
+----
-Line 144:
+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 169:
+Line 73:
-==== electron-localshortcut ====
+=== Utilities ===
-Line 171:
+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 184:
+Line 85:
-==== Platform-Specific Shortcuts ====
+=== Distribution ===
-Line 186:
+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 188:
+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