mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

📝 Update the quick start on writing the app.

Browse source
This commit is contained in:
Cheng Zhao 2014-04-30 17:28:36 +08:00
parent aa54df7e44
commit 98a49fa155
1 changed files with 61 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

92
docs/tutorial/quick-start.md
View file

@ -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 pages, instead you need to do them on the browser side by sending messages or
use the easy [remote](../api/renderer/remote.md) module. use the easy [remote](../api/renderer/remote.md) module.
## Write your first atom-shell app ## Write your first atom-shell app
### The architecture of an app Generally, an atom-shell app would be like this:
Generally, an app of atom-shell should contains at least following files:
```text ```text
app/ app/
@ -61,20 +60,21 @@ this:
```json ```json
{ {
"name" : "atom", "name" : "your-app",
"version" : "0.1.0", "version" : "0.1.0",
"main" : "main.js" "main" : "main.js"
} }
``` ```
The `main.js` will be executed, and in which you should do the initialization The `main.js` should create windows and handle system events, and an typical
work. To give the developers more power, atom-shell works by exposing example is:
necessary Content APIs in javascript, so developers can precisely control
every piece of the app. An example of `main.js` is:
```javascript ```javascript
var app = require('app'); // Module to control application life. 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 // Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed. // be closed automatically when the javascript object is GCed.
@ -82,27 +82,20 @@ var mainWindow = null;
// Quit when all windows are closed. // Quit when all windows are closed.
app.on('window-all-closed', function() { 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 // This method will be called when atom-shell has done everything
// initialization and ready for creating browser windows. // initialization and ready for creating browser windows.
app.on('ready', function() { app.on('ready', function() {
// Create the browser window, // Create the browser window.
mainWindow = new Window({ width: 800, height: 600 }); mainWindow = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app. // and load the index.html of the app.
mainWindow.loadUrl('file://' + __dirname + '/index.html'); mainWindow.loadUrl('file://' + __dirname + '/index.html');
// Catch the event when web page in the window changes its title. // Emitted when the window is closed.
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.
mainWindow.on('closed', function() { mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows // Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time // 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 Finally the `index.html` is the web page you want to show:
actually don't need to provide it, you can just make the window load url of a
remote page.
### 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 ## Run your app
`app`, and put it under `Atom.app/Contents/Resources/`, like this:
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 ```text
Atom.app/Contents/Resources/app/ Atom.app/Contents/Resources/app/
@ -128,6 +159,5 @@ Atom.app/Contents/Resources/app/
└── index.html └── index.html
``` ```
Then atom-shell will automatically read your `package.json`. If there is no Then execute `Atom.app` (or `atom` on Linux, and `atom.exe` on Window), and
`Atom.app/Contents/Resources/app/`, atom-shell will load the default empty atom-shell will start as your app.
app, which is `Atom.app/Contents/Resources/browser/default_app/`.