|
Size: 3578
Comment:
|
← Revision 10 as of 2025-12-19 20:30:38 ⇥
Size: 590
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: |
| == 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 == | == Tool Chain == |
| Line 57: | Line 25: |
| 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. |
* [[Node/ElectronBuilder|electron-builder]] |
| Line 94: | Line 28: |
| == APIs == | |
| Line 95: | Line 30: |
| === 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
Installation
Using npm(1):
npm install --save-dev electron
Tool Chain