node-webki NATIVE UI API概览
3.1 NATIVE UI API概览
Native UI API,是提供了在代码中访问、控制应用程序界面显示的接口。和使用node.js模块类似,想要访问node-webkit的Native UI API,需要先加载“nw.gui”模块。node-webkit的模块命名遵循node.js规范,所以不必担心产生冲突。
下面我们创建本文的示例程序。
先创建guidemo.html,内容如下:
<html>
<head>
</head>
<body>
<h1>Hello GUI</h1>
<script>
</script>
</body>
</html>
package.json内容如下:
{
"name": "gui-demo",
"main": "guidemo.html",
"nodejs":true,
"width":100,
"height":200,
"window": {
"title": "GUI DEMO",
"toolbar": true,
"width": 800,
"height": 600,
"resizable":true,
"show_in_taskbar":true,
"frame":true,
"kiosk":false
},
"webkit":{
"plugin":true
}
}
若要访问native ui api,需要先加载“nw.gui”模块,代码如下:
var gui = require('nw.gui');
加载gui模块之后,就可以像创建普通的javascript对象一样,创建GUI元素了。例如,我们可以使用如下代码创建一个菜单:
var menu = new gui.Menu({ title: '菜单' });
下面,我们按如下内容修改guidemo.html:
<html>
<head>
<title>gui</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<h1>Hello GUI菜单</h1>
<script>
var gui = require('nw.gui');
var menubar = new gui.Menu({ type: 'menubar' });
var sub1 = new gui.Menu();
sub1.append(new gui.MenuItem({
label: '子菜单1',
click: function() {
var element = document.createElement('div');
element.appendChild(document.createTextNode('Test 1'));
document.body.appendChild(element);
}
}));
menubar.append(new gui.MenuItem({ label: '菜单1', submenu: sub1 }));
var win = gui.Window.get();
win.menu = menubar;
</script>
</body>
</html>
首先,通过
var gui = require('nw.gui');
加载nw.gui模块。
随后通过
var menubar = new gui.Menu({ type: 'menubar' });
创建了一个menubar类型的Menu,即菜单栏。有了菜单栏之后就可以向其中添加菜单了。我们创建了一个菜单“sub1”,通过添加MenuItem对象,添加该菜单的下拉选项,并定义了click事件。
随后通过
menubar.append(new gui.MenuItem({ label: '菜单1', submenu: sub1 }));
将sub1添加为菜单1的子菜单。
目前为止,菜单项创建完毕,需要将其添加到当前窗口上。通过
var win = gui.Window.get();
获取窗口对象,然后通过
win.menu = menubar;
设置窗口的菜单。
运行效果如下:
对于每个gui对象的属性,比如title、label、 icon 和menu,可以直接通过对象去访问和修改。比如下面的代码:
menu.title = 'New Title';
remove、append 和 insert方法,在每个GUI对象上都可以使用,例如:
menu.append(new gui.MenuItem({ label: 'Im an item' }));
menu.removeAt(0);
子元素通常被存储在items字段中,可以通过索引进行访问:
for (var i = 0; i < menu.items.length; ++i) {
console.log('MenuItem', i, menu.items[i]);
}
在上面的示例代码中,我们主要以menue为例进行介绍,native ui api大致可划分为如下的类别:
EXTENDED WINDOW APIS
· Window
· Frameless Window
· Handling files and arguments
· Show window after page is ready
· Preserve window state between sessions
3.2 注意事项
不要通过赋值的方式直接修改一个GUI对象,比如:
menu.items[0] = item
或者
item = new gui.MenuItem({})
想要替换一个元素,需要先remove再insert。
在调用gui api过程中出现的异常,目前node-webkit并没有做处理,程序会直接崩溃。要小心重复删除元素之类的操作。
删除一个对象之后,要将其设置为null值,如:
var tray = new gui.Tray(...);
// BLABLABLA...
// WE ARE DONE WITH IT
tray.remove();
tray = null; // THIS LINE IS VERY IMPORTANT
Do not change UI types' prototype(没明白具体指什么,望读者告知)
3.3 EVENTEMITTER
在node-webkit中,每一个ui元素都从node.js的EventEmitter继承而来,所以你可以用如下的方式监听元素的实践:
menuitem.on('click', function() {
console.log('Item is clicked');
});
3.4 小结
本文内容主要来自node-webkit的官方英文文档(https://github.com/rogerwang/node-webkit/wiki/API-Overview-and-Notices),做了适当的改编和调整。主要目的是从整体上认识Native UI API,同时了解基本用法。之后的文章,会对每一个类别的api做详细的介绍。
node-webki NATIVE UI API概览相关推荐
- node-webkit学习(4)Native UI API 之window
4.1 WINDOW API概述 node-webkit版本>= v0.3.0才支持window api. Native GUI API中的window是对DOM页面的windows的一个封装 ...
- Java JVM、JNI、Native Function Interface、Create New Process Native Function API Analysis
目录 1. JAVA JVM 2. Java JNI: Java Native Interface 3. Java Create New Process Native Function API Ana ...
- Android 设备管理API概览(Device Administration API)
原文:http://android.eoe.cn/topic/android_sdk Android 2.2通过提供Android设备管理API的支持来引入企业应用支持.在系统级的设备管理API提供了 ...
- node.js入门 - 9.api:http
node一个重要任务是用来创建web服务,接下来我们就学习与此相关的一个重要的api -- http.我们使用http.createServer()创建一个http服务的实例,用来处理来自客户的请求. ...
- element ui 图片上传_游民晚播报:PS5手柄续航情况测试 UI界面概览放出
各位朋友晚上好,现在为您带来今天的晚间播报.一起来回顾一下今天白天游戏圈内外都有哪些要闻.趣闻. 要闻回顾: 1.PS5 DualSense手柄续航情况 触觉反馈密集游戏更耗电 新闻原文:点击查看 P ...
- VC网络通信API概览
1.WinSock API Windows Sockets是在Windows环境下使用的一套网络编程规范,常常简称为Winsock. WinSock主要是基于socket来开发基于TCP/IP模型中各 ...
- html5中api有什么,HTML5中的API概览
HTML5中的API概览 整理一下HTML5中的常见API. 前言 HTML5中提供了一些功能强大的API,在不考虑兼容性的情况下,比起原生js实现更加简单,比起jQuery可以少引入包,这里整理几个 ...
- Trident API 概览
Trident API 概览 在网上看到了很多有TRIDENT相关API的翻译,看来看去,总觉得没有说清楚很多东西,所以自己结合使用的经验翻译了一篇出来:翻译完以后,也发现 在自己的翻译中也有很多地方 ...
- 如何使用Native Messaging API 打开window程序
问 如何使用Native Messaging API 打开window程序 cmd javascript terminal chrome Tychio 2013年03月26日提问 关注 1 关注 收藏 ...
最新文章
- 15 年来, 程序员升级打怪的路上,这些书始终与你并肩作战
- 测试Robotium
- 2018 Multi-University Training Contest 3 Problem F. Grab The Tree 【YY+BFS】
- redis 面试问题问答Top 10
- 盒子滤波/均值滤波NEON优化
- Leet Code OJ 118. Pascal's Triangle [Difficulty: Easy]
- 使用Azure云原生构建博客是怎样一种体验?(上篇)
- 创建txt文件指令_Linux云计算教程全套视频合集:WORKDIR 指令讲解
- Spark DataSource API
- 红米Note 8 Pro测评:论如何用1399元买到超大底四摄
- Treeview的文件目录配置
- css:电子数字显示
- 【c语言】产生一个1到1000的随机整数,用户进行猜测
- Mybatis的特性详解——四大操作标签
- Java问题---扑克牌
- RocketMQ报错:service not available now, maybe disk full
- 关于Sql语句中的模糊查询like关键字详解
- linux命令jps意思是什么
- 微信小程序定义公共方法
- wps论文参考文献变动时自动更新