Electron - własne menu

Stronę tą wyświetlono już: 166 razy

Defultowe menu nie za bardzo się przydaje, no chyba tylko jako pokazówka. Warto więc jest obczaić jak dodać własne menu oraz własne skróty klawiaturowe! Oto prosty przykład kodu z dodanym menu:

Listing 1
  1. /** importowanie instanji aplikacji i klasy BrowserWindow umożliwiającej
  2. * tworzenie nowego okna programu oraz obiektu menu
  3. */
  4. const { app, BrowserWindow, Menu } = require("electron");
  5. // ustawia produkcyjną wersję
  6. process.env.NODE_ENV = 'dev'; // 'production';
  7. let win
  8. /**
  9. * Funkcja tworząca okno programu
  10. */
  11. function createWindow() {
  12. win = new BrowserWindow({
  13. width: 800,
  14. height: 600,
  15. webPreferences: {
  16. nodeIntegration: true,
  17. },
  18. });
  19. /**
  20. * Tutaj wskazywany jest plik widoku okna
  21. */
  22. win.loadFile("index.html");
  23. /**
  24. * Tworzenie menu
  25. */
  26. const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
  27. /**
  28. * Dodanie menu do okna
  29. */
  30. Menu.setApplicationMenu(mainMenu);
  31. }
  32. /**
  33. * Gdy aplikacja jest gotowa można utworzyć okno programu
  34. */
  35. app.whenReady().then(createWindow);
  36. /**
  37. * Na zdarzenie zamknięcia wszystkich okien programu należy zakończyć
  38. * żywot programu
  39. */
  40. app.on("window-all-closed", () => {
  41. if (process.platform !== "darwin") {
  42. app.quit();
  43. }
  44. });
  45. /**
  46. * Gdy program jest aktywowany a liczba okien jest równa 0 to utwórz okno programu
  47. */
  48. app.on("activate", () => {
  49. if (BrowserWindow.getAllWindows().length === 0) {
  50. createWindow();
  51. }
  52. });
  53. const mainMenuTemplate = [
  54. {
  55. label: "Program",
  56. submenu: [
  57. {
  58. label: "Zamknij",
  59. accelerator: process.platform === "darwin" ? "Command+Q" : "Ctrl+Q",
  60. click() {
  61. app.quit();
  62. },
  63. },
  64. ],
  65. },
  66. ];
  67. // jeżeli mac to dodaj pusty obiekt do menu, żeby się poprawnie wyświeltało
  68. if (process.platform === "darwin") {
  69. mainMenuTemplate.unshift({});
  70. }
  71. // dodaj narzędzia deweloperskie, jeżeli nie jesteś w trybie deweloperskim
  72. if (process.env.NODE_ENV !== 'production') {
  73. mainMenuTemplate.push(
  74. {
  75. label: 'Developer tools',
  76. submenu: [
  77. {
  78. label: 'Toogle dev tools',
  79. accelerator: process.platform === "darwin" ? "Command+I" : "Ctrl+I",
  80. click(
  81. item,
  82. focusedWindow
  83. ) {
  84. win.webContents.openDevTools()
  85. }
  86. }
  87. ]
  88. }
  89. )
  90. }
Electron - dodanie własnego menu
Rys. 1
Electron - dodanie własnego menu
Strony powiązane
strony powiązane
  1. github.com/Obliczeniowo/Electron-basic-project - gałąź repozytorium zawierająca menu

Komentarze