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  注意事项

3.3 EventEmitter

3.4 小结

前言

几个月前,要开发一个简易的展示应用,要求支持离线播放(桌面应用)和在线播放(web应用)。

当时第一想到的是flex,同一套代码(或者只需少量的更改)就可以同时运行在桌面和浏览器上。由于很多展现效果要全新开发,我想到了impress.js(https://github.com/bartaz/impress.js/)。如果选择impress.js,就意味着要将html5作为桌面应用,当时想到要封装webkit,但是本人对这方面也不是很熟悉,时间也很有限,就又沿着这个方向搜索,找到了node-webkit(https://github.com/rogerwang/node-webkit)。

node-webkit解决了我通过htmljs来编写桌面应用的难题

至于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>

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

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做详细的介绍。

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

ps:nw.js,electron交流群 313717550

node-webkit学习(3)Native UI API概览的更多相关文章

  1. node-webkit学习(4)Native UI API 之window

    node-webkit学习(4)Native UI API 之window 文/玄魂 目录 node-webkit学习(4)Native UI API 之window 前言 4.1  window a ...

  2. NODE-WEBKIT教程(6)NATIVE UI API 之MENU(菜单)

    node-webkit教程(6)Native UI API 之Menu(菜单) 文/玄魂 目录 node-webkit教程(6)Native UI API 之Menu(菜单) 前言 6.1  Menu ...

  3. NODE-WEBKIT教程(5)NATIVE UI API 之FRAMELESS WINDOW

    node-webkit教程(5)Native UI API 之Frameless window 文/玄魂 原文链接:http://www.xuanhun521.com/Blog/2014/4/15/n ...

  4. node-webkit教程<>Native UI API 之Menu(菜单)

    node-webkit教程(6)Native UI API 之Menu(菜单)1 前言... 2 6.1  Menu 概述... 3 6.2  menu api6 6.2.1  new Menu([o ...

  5. Jboss EAP:native management API学习

    上一节已经学习了CLI命令行来控制JBOSS,如果想在程序中以编码方式来控制JBOSS,可以参考下面的代码,实际上在前面的文章,用代码控制Jboss上的DataSource,已经有所接触了,API与C ...

  6. Salesforce LWC学习(六) @salesforce & lightning/ui*Api Reference

    上一篇中我们在demo中使用了很多的 @salesforce 以及 lightning/ui*Api的方法,但是很多没有细节的展开.其实LWC中针对这些module提供了很多好用的方法,下面对这两种进 ...

  7. Java JVM、JNI、Native Function Interface、Create New Process Native Function API Analysis

    目录 . JAVA JVM . Java JNI: Java Native Interface . Java Create New Process Native Function API Analys ...

  8. 我的Node.js学习历程

    学习一门技术,每个人都有每个人的方法.我的方法很简单,做项目. 基本概念 在搭建一个node网站之前,还是要掌握一些基本的概念的,这里列举一下,具体的内容大家自己到网上去查: npm bower ex ...

  9. 学习React Native必看的几个开源项目

    学习React native ,分享几个不错的开源项目,相信你学完之后,一定会有所收获.如果还没有了解RN的同学们可以参考手把手教你React Native 实战之开山篇<一> 1.Fac ...

随机推荐

  1. MySQL8.0的安装与配置(Windows 10)

    MySQL的下载 进入MySQL官网 https://www.mysql.com/ 选择 DOWNLOAD 到页面底部找到 MySQL Community Edition (GPL) 找到MySQL ...

  2. windows mysql主 Linux mysql 从 主从同步,读写分离

    Mysql –master linux-slave 一.My.ini: Server-id=1 relay-log=relay-bin relay-log-index=relay-bin-index ...

  3. MySQL复制(Replication)

    引自:http://www.cnblogs.com/hustcat/archive/2009/12/19/1627525.html 1.复制概述 1.1.复制解决的问题数据复制技术有以下一些特点:(1 ...

  4. coocsCreator杂记

    判断是否继承 cc.isChildClassOf = function (subclass, superclass) { 获取所有super classes CCClass.getInheritanc ...

  5. 获取JavaScript异步函数的返回值

    今天研究一个小问题: 怎么拿到JavaScript异步函数的返回值? 1.错误尝试 当年未入行时,我的最初尝试: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <s ...

  6. 绝对强大的三个linux指令: ar, nm, objdump

    前言如果普通编程不需要了解这些东西,如果想精确控制你的对象文件的格式或者你想查看一下文件对象里的内容以便作出某种判断,刚你可以看一下下面的工具:objdump, nm, ar.当然,本文不可能非常详细 ...

  7. SPRING 集成 activemq 的 topic 模式

    概要 activemq 支持两种模式: 1.队列模式 2. 发布订阅者模式,topic有一个主题可以有多个订阅者.这种情况可以将一个消息,分发到多个消费者. 比如我有这样一个案例,用户需要同步,而且需 ...

  8. boost-智能指针

    使用boost的智能指针需要包含头文件"boost/smart_ptr.hpp",c++11中需要包含头文件<memory> 1.auto_ptr.scoped_ptr ...

  9. Manacher算法,最长回文串

    给你10000长度字符串,然你求最长回文字串,输出长度,暴力算法肯定超时 #include <iostream> #include <string> #include < ...

  10. HDU 5468 Puzzled Elena (dfs + 莫比乌斯反演)

    题意:给定一棵带权树,求每个点与其子树结点的权值互质的个数. 析:首先先要进行 dfs 遍历,len[i] 表示能够整除 i 的个数,在遍历的前和遍历后的差值就是子树的len值,有了这个值,就可以使用 ...