12-22 18:59
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
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 / Node Webkit] Example 6 - Tray Icon 본문

Programming/Web App

[WebApp / Node Webkit] Example 6 - Tray Icon

cinema4dr12 2016. 1. 30. 21:55

시리즈 목차


이번 글에서는 System Tray Menu를 생성하는 방법을 알아보도록 하겠다. Tray Icon은 Windows의 경우 하단 Task Bar에 Mac OS의 경우 상단에 존재하는 Icon을 의미한다.

Codes

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Context Menu</title>
</head>
<body style="width: 100%; height: 100%;">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<p>Tray menu.</p>

<script>
// create node-webkit gui
var gui = require('nw.gui');

// create a tray icon
var tray = new gui.Tray({
    title: "Tray Icon",
    icon: "img/icon.png"
});

// give it a menu
var menu = new gui.Menu();
menu.append(new gui.MenuItem({
    type: 'checkbox',
    label: 'tray icon 1',
    click: function() {
        console.log("Tray icon 1 clicked.");
    }
}));

menu.append(new gui.MenuItem({
    type: 'checkbox',
    label: 'tray icon 2',
    click: function() {
        console.log("Tray icon 2 clicked.");
    }
}));

menu.append(new gui.MenuItem({ type: 'separator' }));

menu.append(new gui.MenuItem({
    type: 'checkbox',
    label: 'Quit',
    click: function() {
        gui.App.quit();
    }
}));

tray.menu = menu;

// docment started
$(document).ready(function() {
    console.log('App has started.');
});

</script>  
</body>
</html>

// create node-webkit gui
var gui = require('nw.gui');


Node Webkit GUI 라이브러리를 불러온다.


// create a tray icon
var tray = new gui.Tray({
    title: "Tray Icon",
    icon: "./img/icon.png"
});


Tray Icon을 생성한다.


// give it a menu
var menu = new gui.Menu();
menu.append(new gui.MenuItem({
    type: 'checkbox',
    label: 'tray icon',
    click: function() {
        console.log("Tray menu item clicked.");
    }
}));


Tray Icon 클릭 시 제공되는 메뉴를 생성한다.


tray.menu = menu;


Tray에 Menu를 등록한다. 다음은 Tray Icon을 제거하는 코드이다.


// Remove the tray
tray.remove();
tray = null;


Results

Mac OS의 경우 다음과 같이 실행된다. (상단 Task Bar를 주목하도록 한다.)


Windows의 다음과 같이 실행될 것이다.


 

Tray Icon은 다음 이미지를 다운받아 사용한다: 

icon.zip


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

[WebApp / Node Webkit] Example 7 - Custom Window Control  (0) 2016.02.07
[WebApp / Node Webkit] Tutorials from nodehead  (0) 2016.01.31
[WebApp / Node Webkit] Example 5 - Submenu  (0) 2016.01.30
[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
공유하기 링크
'Programming/Web App' Related Articles more
Comments