使用Atom Shell创建跨平台桌面应用程序

1. Atom-shell是什么?

Atom Shell是一套开源的桌面应用构建框架,使用它能够将 HTML + JavaScript + CSS 的程序打包成跨平台的桌面应用程序。它基于node.js Chromium并且已经应用于Atom editor。你可以把它看作是Node.js运行时的变体,但是它关注的是桌面应用而不是WEB服务器。这并不意味着atom-shellJavascript绑定到GUI库,恰恰相反,它把web页面当做了自己的原生界面,因此你可以把它当做是用Javascript控制的Chromium小巧浏览器。

2. 有关浏览器端

如果你有使用Node.js 开发web应用的经验,那么你应该知道有两种Javascript脚本:服务器端和客户端。服务器端Javascript运行在Node.js 运行时上,而客户端运行于浏览器上。

在atom-shell中,也有类似概念:从web页面展示atom-shell的窗口时,就已经有脚本运行在web页面上,并且这些脚本运行在atom-shell运行时,运行时用来创建这些页面。就像Node.js,我们称之为客户端脚本和浏览器端脚本(这意味着浏览器代替了服务器端概念)。

在传统的Node.js应用中,服务器和客户端得通讯一般都是使用web sockets,在atom-shell中,有专门的ipc模块用来做通讯,并且远程模块比较容易支持RPC。

3. 网页和Node.js

一般来说,网页的设计都基于浏览器,它不太适合与本地系统进行交互。Atom-shell给页面提供了Node.js APIs,能够让你轻松使用页面来访问本地资源,这有些类似于Node-Webkit。

但是与Node-Webkit不同的是,你不能在网页上直接做原生界面相关操作,不过你可以在浏览器端发送消息给它或者使用远程模块来做这些事。

4. 写第一个atom-shell应用

一般来说,一个atom-shell应用的结构如下(可以参考示例hello-atom)。

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

其中package.json的main字段代表了应用中的启动脚本,它将运行在浏览器端,一般内容如下:

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

main.js将会创建一个窗口且控制系统事件,比较经典的写法如下:

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

// This method will be called when atom-shell has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    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>

5. 运行应用程序

在写好你的应用程序后,你可以按照应用程序分发引导来发布自己的应用并且执行,你也可以直接下载二进制atom-shell来执行您的应用程序。

Windows平台

$ .\atom-shell\atom.exe your-app\

Linux平台

$ ./atom-shell/atom your-app/

Mac OS X

$ ./Atom.app/Contents/MacOS/Atom your-app/

 

本文译自Atom-shell Quick Start

发表评论