[WebApp / Node Webkit] Example 2

04-20 06:25

Notice

Recent Posts

Recent Comments

Link

« 2024/04 »
일	월	화	수	목	금	토
	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

Tags more

Archives

Today

Total

관리 메뉴

Scientific Computing & Data Science

[WebApp / Node Webkit] Example 2 - Context Menu 본문

Programming/Web App

[WebApp / Node Webkit] Example 2 - Context Menu

cinema4dr12 2016. 1. 23. 12:49

지난 글에 Node-Webkit에 대하여 소개한 것에 이어 Node-Webkit의 공식 Documentation Site의 예제를 바탕으로 두번째 예제를 구성해 보았다.

시리즈 목차

1. Example 1 - HelloWorld

본 예제는 오른쪽 마우스 클릭 시 Context Menu를 화면에 출력하고 선택된 아이템 항목을 alert 명령을 통해 확인한다.

Source Code

package.json:

<span style="font-size: 12pt;">{
  "name": "context menu",
  "main": "index.html",
  "window": {
      "toolbar": false
  }
}
</span>

name: app의 이름을 지정한다.

main: 진입점을 정의한다. 진입점은 index.html로 지정하였다.

window: application window의 속성을 정의한다. "toolbar": false는 Toolbar를 제거함을 의미한다.

index.html:

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
<span style="font-size: 12pt;"><!DOCTYPE html>
 
<head>
  <title>Context Menu</title>
</head>
 
<p>'Right click' to show context menu.</p>
 
<script>
// Create an empty context menu
var nw = require('nw.gui');
var menu = new nw.Menu();
 
// Add some items with label
menu.append(new nw.MenuItem({
  label: 'Item A',
  click: function() {
    alert('You have clicked at "Item A"');
  }
}));
 
menu.append(new nw.MenuItem({ type: 'separator' }));
 
menu.append(new nw.MenuItem({
  label: 'Item B',
  click: function() {
    alert('You have clicked at "Item B"');
  }
}));
 
menu.append(new nw.MenuItem({ type: 'separator' }));
menu.append(new nw.MenuItem({
  label: 'Item C',
  click: function() {
    alert('You have clicked at "Item C"');
  }
}));
 
// Hooks the "contextmenu" event
document.body.addEventListener('contextmenu', function(ev) {
  // Prevent showing default context menu
  ev.preventDefault();
  // Popup the native context menu at place you click
  menu.popup(ev.x, ev.y);
 
  return false;
}, false);
 
</script>
</span>
Colored by Color Scripter
cs

var nw = require('nw.gui');

Node Webkit의 GUI 라이브러리를 로딩한다.

var menu = new nw.Menu();

Node Webkit의 GUI 라이브러리에서 Menu 인스턴스를 생성한다.

// Add some items with label
menu.append(new nw.MenuItem({
  label: 'Item A',
  click: function() {
    alert('You have clicked at "Item A"');
  }
}));
menu.append(new nw.MenuItem({ type: 'separator' }));
menu.append(new nw.MenuItem({
  label: 'Item B',
  click: function() {
    alert('You have clicked at "Item B"');
  }
}));
menu.append(new nw.MenuItem({ type: 'separator' }));
menu.append(new nw.MenuItem({
  label: 'Item C',
  click: function() {
    alert('You have clicked at "Item C"');
  }
}));

menu에 각각 'Item A', 'Item B', 'Item C'라는 이름으로 아이템들을 추가하되 Click 시 해당 아이템을 클릭했다는 메시지를 출력한다. 각 아이템 사이에는 구분선(separator)를 추가한다.

// Hooks the "contextmenu" event
document.body.addEventListener('contextmenu', function(ev) {
  // Prevent showing default context menu
  ev.preventDefault();
  // Popup the native context menu at place you click
  menu.popup(ev.x, ev.y);

  return false;
}, false);

마우스 우측 버튼을 클릭에 대한 이벤트를 처리한다. preventDefault()는 태그에 정의된 액션(링크 등)을 방지하는 메써드이다. menu.popup(ev.x, ev.y)는 마우스 우측 버튼이 클릭된 지점에 Context Menu가 팝업되도록 한다.

Result

On Mac OS

On Windows

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

[WebApp / Node Webkit] Example 4 - Using Node.JS File System (0)	2016.01.27
[WebApp / Node Webkit] Example 3 - Using Node.JS API (0)	2016.01.24
[WebApp / Node Webkit] Example 1 - HelloWorld (0)	2016.01.20
[WebApp / Express] Cookie를 사용하여 데이터 저장하기 (2)	2015.12.26
[WebApp / Express] 간단한 MongoDB Middleware 만들기 (0)	2015.12.19