node-webkit教程(8)Platform Service之Clipboard
node-webkit教程(8)Platform Service之Clipboard
文/玄魂
目录
node-webkit教程(8)Platform Service之Clipboard
前言
8.1 Clipboard 操作
8.6 小结
前言
几个月前,要开发一个简易的展示应用,要求支持离线播放(桌面应用)和在线播放(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。”
从本篇文章开始,为您介绍Platform Services些列的API,本系列由以下类别:
· App – 每个应用运行时全局api
· Clipboard – 剪贴板
· Tray – 状态栏图标,消息通知
· File dialogs-文件选择对话框
· Shell – 桌面相关
· Handling files and arguments-处理文件和相关参数
8.1 Clipboard 操作
Clipboard是对操作系统剪贴板的一个抽象,目前只支持获取和设置纯文本内容。
新建clip.html和package.json。
clip.html内容如下:
<html>
<head>
<title>appDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<h1>app api 测试</h1>
<button onclick="getText()">获取内容</button>
<button onclick="setText()">写入内容</button>
<button onclick="clearText()">清除内容</button>
<script>
var gui = require('nw.gui');
// We can not create a clipboard, we have to receive the system clipboard
var clipboard = gui.Clipboard.get();
function apendText(text) {
var element = document.createElement('div');
element.appendChild(document.createTextNode(text));
document.body.appendChild(element);
}
function clearText()
{
// And clear it!
clipboard.clear();
apendText('剪贴板内容已清除');
}
function setText()
{
// Or write something
clipboard.set('这是node-webkit向剪贴板写的内容', 'text');
}
function getText()
{
// Read from clipboard
var text = clipboard.get('text');
apendText(text);
}
</script>
</body>
</html>
package.json内容如下:
{
"name": "clip-demo",
"main": "clip.html",
"nodejs":true,
"window": {
"title": "clipDemo",
"toolbar": true,
"width": 800,
"height": 600,
"resizable":true,
"show_in_taskbar":true,
"frame":true,
"kiosk":false,
"icon": "2655716405282662783.png"
},
"webkit":{
"plugin":true
}
}
示例代码准备完毕之后,我们打开程序,如图:
程序有三个按钮,分别是获取、写入和清除剪贴板内容。在操作剪贴板之前,我们需要先获取clipboard对象:
var clipboard = gui.Clipboard.get();
现在我们先单击第二个按钮,向剪贴板写入内容,代码如下:
function setText()
{
// Or write something
clipboard.set('这是node-webkit向剪贴板写的内容', 'text');
}
clipboard.set方法接收两个参数,第一个参数是要写入的内容,第二个参数是内容类型,目前只支持text类型。
是否写入成功了呢?我们再单击第一个按钮,事件处理代码如下:
function getText()
{
// Read from clipboard
var text = clipboard.get('text');
apendText(text);
}
第一个按钮通过clipboard.get方法获取剪贴板内容然后输出,get方法接收一个参数,指明内容类型,目前只支持text类型。写入和获取都成功,会出现如下界面:
下面我们再看清楚内容的按钮做了什么:
function clearText()
{
// And clear it!
clipboard.clear();
apendText('剪贴板内容已清除');
}
调用了clipboard.clear()方法,清除剪贴板,想要验证是否清除成功,只需再次点击获取内容按钮,看是否有内容输出即可。
8.6 小结
本文内容主要参考node-webkit的官方英文文档,做了适当的调整(https://github.com/rogerwang/node-webkit/wiki/Clipboard)。
下一篇文章,介绍Tray。
鄙视不标明出处的转载,更多相关内容,欢迎访问玄魂的博客(www.xuanhun521.com)
更多相关内容,欢迎访问玄魂的博客(更多node-webkit相关内容 http://www.xuanhun521.com/Blog/Tag/node-webkit)
ps:nw.js,electron交流群 313717550
node-webkit教程(8)Platform Service之Clipboard的更多相关文章
- node-webkit教程(11)Platform Service之shell
node-webkit教程(11)Platform Service之shell 文/玄魂 目录 node-webkit教程(10)Platform Service之shell 前言 11.1 She ...
- node-webkit教程(10)Platform Service之File dialogs
node-webkit教程(10)Platform Service之File dialogs 文/玄魂 目录 node-webkit教程(10)Platform Service之File dialog ...
- node-webkit教程(7)Platform Service之APP
node-webkit教程(7)Platform Service之APP 文/玄魂 前言 几个月前,要开发一个简易的展示应用,要求支持离线播放(桌面应用)和在线播放(web应用). 当时第一想到的是f ...
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
- Node.js 教程 04 - 模块系统
前言: Node.js的模块系统类似于C/C++的文件引用,可以声明对象,也可以定义类 创建对象. 大家这么理解,就简单了. 定义: 为了让Node.js的文件可以相互调用,Node.js提供了一个简 ...
- Node.js教程系列~目录
Node.js这个东西在近几年火起来了,而且会一直火下去,无论在infoq还是在cnblogs,csdn上,都可以到处看到它的样子,它主推的应该就是异步式I/O 吧,是的,设计的很完美,很吸引人,虽然 ...
- [整理]Node入门 » 一本全面的Node.js教程 - Demo实践所遇到的问题
花了一个上午看完[转载]Node入门 » 一本全面的Node.js教程 根据里面的Demo自己手动实现过程中还是遇到了些问题,特整理在此. <1>.由于node.msi安装包已经自动添加了 ...
- 【转载】Node.js 教程(菜鸟教程系列)
很好的一篇教程:Node.js 教程 简单做下笔记 概述 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立 ...
- 实用的 Node.js 教程,工具和资源
这里分享一批实用的实用的 Node.js 教程,工具和资源. Node.js是一个建立在Chrome之上的JavaScript运行时平台,可方便地构建快速,可扩展的网络应用程序.Node.js使用事件 ...
随机推荐
- Linux_09------Linux上系统扫描和安全策略
先谢慕课网/** * linux系统扫描技术 * * 主机扫描.路由扫描.批量服务扫描.系统安全策略(防SYN和ddos攻击) */ /** * 主机扫描 * ping fping hping * * ...
- Icinga快速安装与配置
Icinga快速安装与配置/* body */body { margin: 20px; padding: 0; font-family: "Lucida Grande", &quo ...
- LCD如何显示图像
1.LCD显示主要相关概念 (1)像素(pixel) 整个图像是由一个个的像素组成的,像素就是一个显示点.像素就是组成图像的最基本元素,或者说显示中可以被控制的最小单位,整个图像就是由很多个像素组成的 ...
- .NET Remoting获取配置通道:
接上文: public static string ChannelManagerUrl { get { retu ...
- ios 项目引用全局pch文件
1.在项目中新建添加PCH文件 把这些记下来,下次直接粘贴:$(SRCROOT)/工程名/pch文件名
- 1.Java内存区域
Java虚拟机在执行java程序的过程中会把他管理的内存划分为若干个不同的数据区域各自用途.创建以及销毁时间各不相同.有的随着虚拟机进行的启动而存在,有的区域依赖于线程的启动和结束而建立以及销毁.如图 ...
- echo颜色显示
echo -e "\033[30m 黑色字 \033[0m" echo -e "\033[31m 红色字 \033[0m" echo -e "\033 ...
- Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据
用servlet实现一个注册的小功能 ,后台获取数据. 注册页面: 注册页面代码 : <!DOCTYPE html> <html> <head> <meta ...
- BIEE 11g学习
biee 11g学习1. 创建资料档案库文件(RPD) 文件数据库 1.1 创建数据源连接 运行Net Manager 用于BIEE的数据库服务 1.2 模型的建立 1.运行o ...
- Windows 设置扩展投影鼠标移出方向
1. 连接数据线,按下 “WINDOWS” + P 按钮,选择“扩展投影”: 2.更改鼠标移出屏幕的方向:桌面右键选择“屏幕分辨率” , 移动“更改显示器外观”中两个图的相对方向即可: