node-webkit教程(9)native api 之Tray(托盤)
文/玄魂html
目錄html5
node-webkit教程(9)native api 之Tray(托盤)node
前言ios
9.1 Tray簡介git
9.2 tray的屬性github
9.3 tray 的構造函數web
9.4 初始化一個trayjson
9.5 刪除traywindows
9.6 小結api
幾個月前，要開發一個簡易的展現應用，要求支持離線播放（桌面應用）和在線播放（web應用）。
當時第一想到的是flex，同一套代碼（或者只需少許的更改）就能夠同時運行在桌面和瀏覽器上。因爲不少展示效果要全新開發，我想到了impress.js(https://github.com/bartaz/impress.js/)。若是選擇impress.js，就意味着要將html5做爲桌面應用，當時想到要封裝webkit，可是本人對這方面也不是很熟悉，時間也頗有限，就又沿着這個方向搜索，找到了node-webkit(https://github.com/rogerwang/node-webkit)。
node-webkit解決了我經過html和js來編寫桌面應用的難題。
至於node-webkit的定義，按照做者的說法：
「 基於node.js和chromium的應用程序實時運行環境，可運行經過HTML(5)、CSS(3)、Javascript來編寫的本地應用程序。node.js和webkit的結合體，webkit提供DOM操做，node.js提供本地化操做；且將兩者的context徹底整合，可在HTML代碼中直接使用node.js的API。」
從本篇文章開始，爲您介紹Platform Services些列的API，本系列由如下類別：
· App – 每一個應用運行時全局api
· Clipboard – 剪貼板
· Tray – 狀態欄圖標，消息通知
· File dialogs-文件選擇對話框
· Shell – 桌面相關
· Handling files and arguments-處理文件和相關參數
Tray在不一樣的平臺下的展示形式不同，一般以一個ICON的形式展示在操做系統狀態通知的位置。在Mac下稱之爲Status Item，GTK環境下稱爲Status Icon，windows叫系統托盤。
新建tray.html 和package.json做爲本文的示例程序。
tray.html內容以下：
<html>
<head>
<title>trayDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<h1>Tray 測試</h1>
<script>
// Load native UI library
var gui = require('nw.gui');
</script>
</body>
</html>
package.json內容以下：
{
"name": "tray-demo",
"main": "tray.html",
"nodejs":true,
"window": {
"title": "trayDemo",
"toolbar": true,
"width": 800,
"height": 600,
"resizable":true,
"show_in_taskbar":true,
"frame":true,
"kiosk":false,
"icon": "2655716405282662783.png"
},
"webkit":{
"plugin":true
}
}
9.2 tray的屬性
Tray包含title、tooltip、icon、menu、alticon五個屬性。
title屬性只在mac系統下有效，會和icon圖標一塊兒顯示在狀態欄。
tooltip是當鼠標移動到tray上方時顯示的提示語，在全部平臺下都有效。
icon是tray顯示在托盤中的圖標。
menu是托盤中的菜單，是一個 gui.Menu對象（參考：node-webkit教程6native-ui-api-之menu菜單）。
alticon只有在mac下起做用，配置切換效果icon圖標。
9.3 tray 的構造函數
new Tray(option)
option中用來初始化tray的屬性值，可是隻能配置title, tooltip, icon 和menu四個屬性。如：
var tray = new gui.Tray({ title: 'Tray', icon: 'img/icon.png' });
全部的屬性均可以經過對象直接獲取或賦值，如：
tray.menu = menu;
9.4 初始化一個tray
如今咱們修改tray.html：
<script>
var isShowWindow = true;
// Load native UI library
var gui = require('nw.gui');
var win = gui.Window.get();
var tray = new gui.Tray({ title: '玄魂的軟件', icon: '2655716405282662783.png' });
tray.tooltip = '點此打開';
//添加一個菜單
var menu = new gui.Menu();
menu.append(new gui.MenuItem({ type: 'checkbox', label: '選擇我' }));
tray.menu = menu;
//click事件
tray.on('click',
function()
{
if(isShowWindow)
{
win.hide();
isShowWindow = false;
}
else
{
win.show();
isShowWindow = true;
}
}
);
</script>
運行效果以下：
點擊托盤中的圖標程序的窗體會相應的隱藏或者顯示。
9.5 刪除tray
很惋惜的是，如今尚未辦法臨時隱藏Tray，只能刪除它。
在刪除須要調用remove方法，而後設置爲null。如：
tray.remove();
tray = null;
本文內容主要參考node-webkit的官方英文文檔，作了適當的調整（https://github.com/rogerwang/node-webkit/wiki/Tray）。
下一篇文章，介紹Tray。
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
更多相關內容，歡迎訪問玄魂的博客(更多node-webkit相關內容 http://www.xuanhun521.com/Blog/Tag/node-webkit)
ps：nw.js，electron交流羣 313717550
- 1. node-webkit,nwjs 系統托盤【Tray】實踐
- 2. # 2021-01-10 #「GNOME」- 啓用系統托盤圖標（System Tray）
- 3. outlook 2007最小化到系統托盤去(tray)
- 4. Qt之自定義托盤
- 5. NodeWebkit Windows下一鍵打包
- 6. 托盤編程例子
- 7. 系統托盤
- 8. 【Qt開發】實現系統托盤，托盤菜單，托盤消息
- 9. 托盤檢測
- 10. winform 托盤
- 更多相關文章...
- • Git 教程 - Git 教程
- • SQLite 教程 - SQLite教程
- • Github 簡明教程
- • Java 8 Stream 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。