📝 Update the quick start on writing the app.
This commit is contained in:
Cheng Zhao
parent
aa54df7e44
commit
98a49fa155
1 changed files with 61 additions and 31 deletions
|
|
@ -41,11 +41,10 @@ But unlike node-webkit, you could not do native GUI related operations in web
|
|||
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
|
||||
|
||||
Generally, an app of atom-shell should contains at least following files:
|
||||
Generally, an atom-shell app would be like this:
|
||||
|
||||
```text
|
||||
app/
|
||||
|
|
@ -61,20 +60,21 @@ this:
|
|||
|
||||
```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.
|
||||
|
|
@ -82,27 +82,20 @@ var mainWindow = null;
|
|||
|
||||
// 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
|
||||
|
|
@ -112,14 +105,52 @@ app.on('ready', function() {
|
|||
});
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
### Package your app in atom-shell
|
||||
```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>
|
||||
```
|
||||
|
||||
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:
|
||||
## 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
|
||||
```
|
||||
|
||||
## Distribute your app
|
||||
|
||||
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/
|
||||
|
|
@ -128,6 +159,5 @@ 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.
|
||||
|
|
|
|||
Loading…
Reference in a new issue