pages, instead you need to do them on the browser side by sending messages or
use the easy [remote](../api/renderer/remote.md) module.
-## Write your first atom-shell app
-### The architecture of an app
+## Write your first atom-shell app
-Generally, an app of atom-shell should contains at least following files:
+Generally, an atom-shell app would be like this:
```text
app/
```json
{
- "name" : "atom",
+ "name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
```
-The `main.js` will be executed, and in which you should do the initialization
-work. To give the developers more power, atom-shell works by exposing
-necessary Content APIs in javascript, so developers can precisely control
-every piece of the app. An example of `main.js` is:
+The `main.js` should create windows and handle system events, and an typical
+example is:
```javascript
var app = require('app'); // Module to control application life.
-var Window = require('window'); // Module to create native browser window.
+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.
// Quit when all windows are closed.
app.on('window-all-closed', function() {
- app.terminate();
+ 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 Window({ width: 800, height: 600 });
+ // 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');
- // Catch the event when web page in the window changes its title.
- mainWindow.on('page-title-updated', function(event, title) {
- // Prevent the default behaviour of 'page-title-updated' event.
- event.preventDefault();
-
- // Add a prefix for the window's original title.
- this.setTitle('Atom Shell - ' + title);
- });
-
- // Hook to when the window is closed.
+ // 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
});
```
-Finally the `index.html` is the web page you want to show, in fact you
-actually don't need to provide it, you can just make the window load url of a
-remote page.
+Finally the `index.html` is the web page you want to show:
+
+```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>
+```
+
+## Run your app
+
+After done writing your app, you could create a distribution of your app by
+following next section and then execute the packaged binary, or you can just
+use the downloaded atom-shell binary to execute your app.
+
+On Window:
+
+```cmd
+$ .\atom-shell\atom.exe app
+```
+
+On Linux:
+
+```bash
+$ ./atom-shell/atom app
+```
+
+On Mac OS X:
+
+```bash
+$ ./Atom.app/Contents/MacOS/Atom app
+```
-### Package your app in atom-shell
+## Distribute your app
-To make atom-shell run your app, you should name the folder of your app as
-`app`, and put it under `Atom.app/Contents/Resources/`, like this:
+To distribute your app with atom-shell, you should name the folder of your app
+as `app`, and put it under atom-shell's resources directory (on OS X it is
+`Atom.app/Contents/Resources/`, and on Linux and Windows it is `resources/`),
+like this:
```text
Atom.app/Contents/Resources/app/
└── index.html
```
-Then atom-shell will automatically read your `package.json`. If there is no
-`Atom.app/Contents/Resources/app/`, atom-shell will load the default empty
-app, which is `Atom.app/Contents/Resources/browser/default_app/`.
+Then execute `Atom.app` (or `atom` on Linux, and `atom.exe` on Window), and
+atom-shell will start as your app.
projects / platform / framework / web / crosswalk-tizen.git / commitdiff