最新消息:

node-webkit教程 native api 之Tray(托盘)

NW.js yvsm 1487浏览 0评论
文章目录
[隐藏]

前言

从本篇文章开始,为您介绍Platform Services些列的API,本系列由以下类别:
App – 每个应用运行时全局api
Clipboard – 剪贴板
Tray – 状态栏图标,消息通知
File dialogs-文件选择对话框
Shell – 桌面相关
Handling files and arguments-处理文件和相关参数

TRAY简介

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>

package.json内容如下:

{
	"name": "tray-demo",
	"main": "tray.html",
        "version": "0.1",
	"nodejs":true,
	"window": {
		"title": "trayDemo",
		"toolbar": true, 
		"width": 800, 
		"height": 600,
		"resizable":true,
		"show_in_taskbar":true,
		"frame":true,
		"kiosk":false,
		"icon": "img/ico.php"
  	},
  	"webkit":{
  		"plugin":true
  	}
}

TRAY的属性

Tray包含title、tooltip、icon、menu、alticon五个属性。
title属性只在mac系统下有效,会和icon图标一起显示在状态栏。
tooltip是当鼠标移动到tray上方时显示的提示语,在所有平台下都有效。
icon是tray显示在托盘中的图标。
menu是托盘中的菜单,是一个 gui.Menu对象(参考:node-webkit教程 native-ui-api-之menu菜单)。
alticon只有在mac下起作用,配置切换效果icon图标。

TRAY 的构造函数

new Tray(option)

option中用来初始化tray的属性值,但是只能配置title, tooltip, icon 和menu四个属性。如:

var tray = new gui.Tray({ title: 'Tray', icon: 'img/ico.png' });

所有的属性都可以通过对象直接获取或赋值,如:

tray.menu = menu;

初始化一个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: 'img/ico.png' });
        tray.tooltip = '点此打开';
        //添加一个菜单
        var menu = new gui.Menu();
        menu.append(new gui.MenuItem({type: 'normal',
        label: '显示/隐藏',
        click: function() {
            if(isShowWindow) {
                win.hide();
                isShowWindow = false;
            } else {
                win.show();
                isShowWindow = true;
            }
        }}));
        menu.append(new gui.MenuItem({ type: 'normal', label: '退出程序' ,click: function() {
            gui.App.quit();
        }}));

        tray.menu = menu;


        //click事件
        tray.on('click',function(){
                if(isShowWindow){
                    win.hide();
                    isShowWindow = false;
                }else{
                    win.show();
                    isShowWindow = true;
                }
            }
            );
</script>

运行效果如下:

点击托盘中的图标程序的窗体会相应的隐藏或者显示。

删除TRAY

很可惜的是,现在还没有办法临时隐藏Tray,只能删除它。
在删除需要调用remove方法,然后设置为null。如:

tray.remove();
tray = null;

小结

本文内容主要参考node-webkit的官方英文文档,做了适当的调整(https://github.com/rogerwang/node-webkit/wiki/Tray)。

转载请注明:缘境的博客 » node-webkit教程 native api 之Tray(托盘)

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址