Differences between revisions 5 and 9 (spanning 4 versions)
⇤ ← Revision 5 as of 2021-11-20 22:23:07 →
Size: 4118
Editor: DominicRicottone
Comment:
← Revision 9 as of 2023-03-02 17:38:53 → ⇥
Size: 739
Editor: DominicRicottone
Comment:
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:
== Building == == Installation ==
Line 11: Line 13:


=== Electron Builder ===

Upstream strongly recommends using '''`yarn(1)`''' (not `npm(1)`) to install '''Electron Builder'''.		 Using `npm(1)`:
Line 18: Line 16:
yarn add electron-builder --dev npm install --save-dev electron
Line 20: Line 18:

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.
Line 35: Line 25:
A basic Election application looks like:
Line 37: Line 26:
{{{
const { app, BrowserWindow } = require("electron");
const path = require("path");
Line 41: Line 27:
let win;
function init() {
  win = NewBrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false,
      preload: path.join(__dirname, "preload.js")
    }
  });		 === Utilities ===
Line 53: Line 29:
  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/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 77: Line 39:
=== Menu Bar === === Distribution ===
Line 79: Line 41:
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. TODO: copy from [[https://www.electronjs.org/docs/tutorial/application-distribution#manual-distribution]].
Line 81: Line 43:
{{{
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()
      }
    ]
  }
]
}}}		 See also [[Node/ElectronBuilder|electron-builder]].

Electron

electron(1) is a framework for Node application.

Contents

  1. Electron
    1. Installation
    2. Usage
      1. Utilities
      2. Distribution

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.

See also electron-builder.

CategoryRicottone

Node/Electron (last edited 2023-03-02 17:38:53 by DominicRicottone)