05-16 05:44
Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Scientific Computing & Data Science

[WebApp / Electron] Menu 만들기 본문

Programming/Web App

[WebApp / Electron] Menu 만들기

cinema4dr12 2016. 7. 1. 10:03

이번 글에서는 지난 글(Creating Desktop Apps with Electron)에 이어 Electron Desktop App에서 메뉴를 만드는 방법에 대하여 알아보도록 하겠다.

App 초기화

Terminal에 "npm init" 명령을 통해 다음과 같이 입력한다.


$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (menu)
version: (1.0.0)
description: electron example
entry point: (main.js)
test command:
git repository:
keywords:
author: cinema4dr12
license: (ISC)
About to write to {YOUR_ELECTRON_APP_PATH}/package.json:

{
  "name": "menu",
  "version": "1.0.0",
  "description": "electron example",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "cinema4dr12",
  "license": "ISC"
}


Is this ok? (yes)


package.json 파일이 생성되면 다음과 같이 살짝 수정해 준다.


packge.json

{
  "name": "Electron-App-Example",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "cinema4dr12",
  "license": "ISC",
  "devDependencies": {
    "electron-prebuilt": "^1.2.5"
  }
}

"main.js"가 App의 진입점(Entry Point)로 설정되었다.



Electron App 모듈 설치

Node Package Manager 명령을 통해 Electron App 모듈을 설치한다.


$ sudo npm i electron-prebuilt --save-dev



main.js 정의

main.js는 다음과 같이 작성한다.


main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;
 
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
 
function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 1920, height: 1080});
 
  // and load the index.html of the app.
  mainWindow.loadURL('file://' + __dirname + '/index.html');
 
  // Open the DevTools.
  //mainWindow.webContents.openDevTools();
 
  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  })
}
 
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
 
// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
})
 
app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
})
 
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
cs


main.js에서 Line 16에서 index.html을 로딩하도록 하였고, 이 파일이 존재하지 않으므로 작성하도록 한다.


index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <style>
  h1 {
    color: red;
  }
  </style>
  <body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using node <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>

  <script>
    // You can also require other files to run in this process
    require('./renderer.js');
  </script>
</html>


위의 index.html의 <script> 태그를 살펴보면 외부 JS 파일을 로딩하는데 있어 src='./renderer.js' 속성(attribute) 대신 require('./renderer.js')를 사용하고 있다.


Electron App은 CommonJS를 따르므로, src='./renderer.js' 대신 require('./renderer.js')를 사용하도록 한다.



renderer.js 작성

index.html에서 로딩할 renderer.js 파일을 작성하도록 한다. 이 파일에 메뉴를 추가하는 코드가 포함되어 있다.


renderer.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const {remote} = require('electron');
const {Menu} = remote;
 
var onPrefsClicked1 = function() {
  alert('You clicked Prefs-1');
}
 
var onPrefsClicked2 = function() {
  alert('You clicked Prefs-2');
}
 
var onPrefsClicked3 = function() {
  alert('You clicked Prefs-3');
}
 
// define template
const template = [
  {
    label: 'Electron-1',
    submenu: [
      {
        label: 'Prefs-1',
        click: function() {
          onPrefsClicked1();
        },
        accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I'
      }
    ]
  },
  {
    label: 'Electron-2',
    submenu: [
      {
        label: 'Prefs-2',
        click: function() {
          onPrefsClicked2();
        }
      },
      {
        label: 'Prefs-3',
        click: function() {
          onPrefsClicked3();
        }
      }
    ]
  }
];
 
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
 
 
cs



[Line 1-2] :

Electron App의 Menu를 생성할 모듈 패키지를 로딩한다.

Electron의 버전이 업그레이드 되면서 remote 패키지가 Electron 패키지 자체에 포함되었다.


[Line 16-47] :

생성할 Menu Template을 정의한다.

label은 Menu에 표시되는 이름이며,

submenu는 Menu의 하위 메뉴이다.

click은 해당 메뉴 클릭 시의 동작을 정의하며,

accelerator는 단축키를 정의한다.

Line 26에 보면 platform을 판단하는 부분이 있는데, Electron App은 Chromium을 기반으로 하므로, Chromium의 단축키를 기본으로 사용한다.

따라서, Mac OS(platform === 'darwin')의 경우 'Alt + Cmd + I', Windows의 경우 'Ctrl + Shift + I'를 누르면, 개발자 도구(Developer Tool)을 오픈한다.

개발 과정 중에는 문제가 되지 않지만, 배포 시에는 개발자 도구가 열리는 것은 곤란하기에 배포 전에 이 단축키를 어딘가에 맵핑하는 것이 필요할 것이다.


[Line 49-50] :

Template으로부터 Menu를 빌드하여 menu 변수에 저장하고, 이를 Application Menu로 등록한다.



App 실행

Terminal에서 다음과 같이 명령을 입력한다.


$ npm start

MacOS에서 실행


Windows에서 실행





'Programming > Web App' 카테고리의 다른 글

[WebApp / Electron] Electron App Template  (0) 2016.07.09
[WebApp / Node.js] How to setup Visual Studio to write Node.js C++ Addons  (0) 2016.07.02
[WebApp / Electron] Creating Desktop Apps with Electron  (0) 2016.06.29
[WebApp / Electron] Creating Desktop Apps with Electron - YouTUbe Tutorials  (0) 2016.06.24
[WebApp / Node Webkit] Example 12 - Notifications Example  (0) 2016.02.13
공유하기 링크
'Programming/Web App' Related Articles more
Comments