Differences between revisions 4 and 9 (spanning 5 versions)
⇤ ← Revision 4 as of 2021-08-09 22:12:21 →
Size: 3578
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:
== An Application Template == == Installation ==
Line 11: Line 13:
=== main.js === Using `npm(1)`:
Line 14: Line 16:
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()
  }
});		 npm install --save-dev electron
Line 55: Line 23:
== 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.		 == Usage ==
Line 95: Line 27:
=== Platform-Specific Menus === === Utilities ===
Line 97: Line 29:
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' }
    ]
  }
];
}}}

----		  * [[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 124: Line 39:
== Keyboard Shortcuts == === Distribution ===
Line 126: Line 41:
=== Built-in Method === TODO: copy from [[https://www.electronjs.org/docs/tutorial/application-distribution#manual-distribution]].
Line 128: Line 43:
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)