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();
获取窗口对象，然后通过
设置窗口的菜单。
运行效果如下：
对于每个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大致可划分为如下的类别：
· Window
· Frameless Window
· Menu
· MenuItem
· Window menu
· App – 每一个应用都可以访问的全局函数
· Clipboard – 剪贴板
· Tray – 状态显示与通知
· File dialogs-文件对话框
· Shell
· Handling files and arguments
· Show window after page is ready
· Minimize to tray
· Preserve window state between sessions
不要通过赋值的方式直接修改一个GUI对象，比如：
或者
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（没明白具体指什么，望读者告知）
在node-webkit中，每一个ui元素都从node.js的EventEmitter继承而来，所以你可以用如下的方式监听元素的实践：
menuitem.on('click', function() {
console.log('Item is clicked');
});
本文内容主要来自node-webkit的官方英文文档（https://github.com/rogerwang/node-webkit/wiki/API-Overview-and-Notices），做了适当的改编和调整。主要目的是从整体上认识Native UI API，同时了解基本用法。之后的文章，会对每一个类别的api做详细的介绍。
分享到：
相关推荐
信息 包裹 nwk-样板 描述 Node Webkit Boilerplate 可帮助您构建快速、强大且适应性强的 Web/桌面应用程序或应用程序。 将 100 多位开发人员的知识和努力结合起来，在一个方便的小程序...$ npm install -g node-webki
1、判断浏览器内核（IE、Gecko、webki-Operat、webki-Safari、Chrome、webki）。 2、判断IE浏览器版本（支持IE6、IE7、IE8、IE9、IE10、IE11均已测试通过）。
本文实例讲述了css实现叶子形状loading效果的方法。分享给大家供大家参考。具体实现方法如下： 复制代码代码如下:<!... <head> <style type=”text/css”>... @-webkit-keyframes loadRotate{ from{ -webki
具体就不做详细讲解了，直接上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.webkfa.com/" /> <...-webki
css filter effect之前项目开发中遇到要把图片模糊的需求，于是google了一把，采用了`filter-blur`来做，后发现`filter`是个好家伙啊，能处理很多图片特效，不仅仅是blur(敢情浏览器是想把...CSS兼容：.gray { -webki
#animated_div { width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1; -moz-animation:...-webki
通过这种方式，开发者可以为JavaScript环境提供更多的功能，打破浏览器的安全限制，实现与本地系统的交互，如调用操作系统API、读写文件等。不过，这样的扩展需要谨慎操作，因为可能会带来安全风险，必须确保遵循...
这个库提供了丰富的UI控件和布局管理机制，使得开发者能够轻松创建出美观且响应迅速的界面。Webkit内核浏览器控件是Duilib的一个扩展，它允许在应用程序中嵌入一个基于WebKit的浏览器引擎，使用户能够在应用内部浏览...
### CSS Hack针对WebKit核心浏览器（如Chrome与Safari）的应用详解 #### 一、引言 随着前端技术的发展，浏览器兼容性一直是开发者面临的重要问题之一。由于不同浏览器内核对CSS的支持程度存在差异，为了确保网页在...
tappable, 一个简单的独立库，用于调用触摸友好网络浏览器的tap事件 TappableTappable是一个简单的独立库，用于调用触摸友好的web浏览器的事件。 目前它仅在 iOS Mobile Safari 上测试... codebase //fioravanti webki