|
Size: 2857
Comment:
|
← Revision 9 as of 2023-03-02 17:38:53 ⇥
Size: 739
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: |
| == electron-store == | == Installation == |
| 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: |
Using `npm(1)`: |
| Line 16: | Line 16: |
| const win = new BrowserWindow({ enableRemoteModule: true }) | npm install --save-dev electron |
| Line 23: | 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 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 61: | Line 27: |
| === Platform-Specific Menus === | === Utilities === |
| Line 63: | Line 29: |
| Using conditional logic and array unpacking, platform-specific menus can be maintained in the same codebase. {{{ 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 89: | Line 39: |
| == Keyboard Shortcuts == | === Distribution === |
| Line 91: | Line 41: |
| === Built-in Method === | TODO: copy from [[https://www.electronjs.org/docs/tutorial/application-distribution#manual-distribution]]. |
| Line 93: | Line 43: |
| Follow the above example for menu items, but add an `accelerator` option to the corresponding menu item. {{{ 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 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 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
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.