MZhou's blog

Atom-Shell 入门

现在已经有很多框架可以让我们用JavaScript、HTML和CSS来编写跨平台桌面应用,Atom Shell便是其中之一。Atom Shell基于nodejs和Chromium实现,Github的开源编辑器Atom便是基于Atom shell和Coffee scrpit开发的。

Chromium浏览器可以分为两个部分:Browser端和Render端。Browser端负责与本地系统交互:创建窗口、控制托盘图标等等。Render端负责绘制页面。两者通过IPC交互。Atom Shell的实现是在Browser端和Render端分别嵌入了nodejs。这样Browser和Render两部分就都可以使用nodejs提供的api了,也可以在Browser端用javascript来调用本地系统相关的API。

Browser端

在Web app中我们通常会有两种javascript脚本:服务器端脚本和客户端端脚本。客户端端脚本运行于浏览器中,服务器端脚本运行于nodejs中。在Atom Shell中有类似的概念,运行于Render端页面中的脚本和运行于browser端中的脚本。分别可以称它们为:Render端脚本和Browser端脚本。

在传统的Web app中,服务器端脚本和客户端脚本通常使用web sockets来通信。在Atom Shell中,Render端脚本需要使用ipc模块来发送信息给rowser端。同时Atom Shell还提供了一个更易用的remote模块来支持通信。

Render端

普通的网页是无法操作浏览器以外的本地系统的。而在Atom Shell中nodejs api可以在网页中使用,所以开发者可以在网页中访问本地资源,就像Node-Webkit一样。

但是和Node-Webkit不一样的是:不能直接在网页中(Render端)操作本地资源,只能通过remote模块调用Browser端脚本操作本地资源。

DEMO

通常一个Atom Shell app的文件目录如下:

your-app/
├── package.json
├── main.js
└── index.html

package.json的格式和普通的Node模块中的一样。其中属性main的值表示app的入口脚本,这个脚本会运行在Browser端中。如下是package.json文件的样例:

{
    "name"    : "your-app",
    "version" : "0.1.0",
    "main"    : "main.js"
}

main.js中应该创建窗口并处理相应的系统事件,下面是一个典型的样例:

// 用于控制app的life circle
var app = require('app');
// 用于创建本地窗口的模块
var BrowserWindow = require('browser-window');    
// 把app的crash情况发送给服务器
require('crash-reporter').start();

// 保持一个全局的window对象引用,
// 如果你不这么做,window对象会在GC启动后被自动垃圾收集机制释放
var mainWindow = null;

// 在所有窗口关闭后关闭app
app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

// 这个方法会在Atom Shell初始化结束后调用回调函数
app.on('ready', function() {
  // 创建窗口
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载index.html
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // 在窗口关闭时触发
  mainWindow.on('closed', function() {
      // 移除window对象的引用
      // 通常如果是多窗口的app,你需要把window对象存储到一个数组里面,而在close时把对应的window对象移除掉
    mainWindow = null;
  });
});

最后创建需要在窗口中显示的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node.js <script>document.write(process.version)</script> and atom-shell <script>document.write(process.versions['atom-shell'])</script>.
  </body>
</html>

运行App

首先下载Atom Shell的可执行文件。然后运行如下命令执行app:

  1. windows:.\atom-shell\atom.exe your-app\
  2. Linux: ./atom-shell/atom your-app/
  3. Mac OS X: ./Atom.app/Contents/MacOS/Atom your-app/

打包

你只需要把app的文件夹命名为app,并把它放在Atom Shell的资源目录下。在OS X系统中为Atom.app/Contents/Resources/,在Linux和Windows上为resources/。然后执行Atom.app(在Linux中为atom,在windows中为atom.exe)即可。然后把atom-shell文件夹压缩打包分发给用户即可。

如果你用的打包工具是grunt,那么可以用grunt-download-atom-shell来自动下载对应平台的Atom Shell。

MZhou's blog - Taste of life.

zmmbreeze / @zhoumm