node-webkit学习(3)Native UI API概览

时间 2019-11-13

标签 node webkit 学习 native api 概览繁體版

原文原文链接

node-webkit学习(3)Native UI API概览

文/玄魂javascript

目录html

node-webkit学习(3)Native UI API概览... 1html5

前言... 1java

3.1 Native UI api概览... 2node

Extended Window APIs. 7ios

Menus. 7git

Platform Services. 7github

Tips. 7web

3.2 注意事项... 8json

3.3 EventEmitter. 8

3.4 小结... 9

前言

几个月前，要开发一个简易的展现应用，要求支持离线播放（桌面应用）和在线播放（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。”

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>

</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>

</head>

<body >

<h1>Hello GUI菜单</h1>

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

Menus

· Menu

· MenuItem

· Window menu

Platform Services

· App – 每个应用均可以访问的全局函数

· Clipboard – 剪贴板

· Tray – 状态显示与通知

· File dialogs-文件对话框

· Shell

· Handling files and arguments

Tips

· Show window after page is ready

· Minimize to tray

· Preserve window state between sessions

3.2 注意事项

鄙视不标明出处的转载，更多相关内容，欢迎访问玄魂的博客www.xuanhun521.com(node webkit学习(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-webkit学习(3)Native UI API概览

node-webkit学习(3)Native UI API概览

前言

3.1 Native UI api概览

Extended Window APIs

Menus

Platform Services

Tips

3.2 注意事项

鄙视不标明出处的转载，更多相关内容，欢迎访问玄魂的博客www.xuanhun521.com(node webkit学习(2)基本结构和配置)

3.3 EventEmitter

3.4 小结

更多相关内容，欢迎访问玄魂的博客 www.xuanhun521.com