From: Cheng Zhao Date: Wed, 30 Apr 2014 09:28:36 +0000 (+0800) Subject: :memo: Update the quick start on writing the app. X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=98a49fa1559f5e7a4e7c2a997fd8cf2e2c5272fa;p=platform%2Fframework%2Fweb%2Fcrosswalk-tizen.git :memo: Update the quick start on writing the app. --- diff --git a/docs/tutorial/quick-start.md b/docs/tutorial/quick-start.md index 8e3051786..7cee03da4 100644 --- a/docs/tutorial/quick-start.md +++ b/docs/tutorial/quick-start.md @@ -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 +## 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/ @@ -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: + +```html + + + + Hello World! + + +

Hello World!

+ We are using node.js + and atom-shell . + + +``` + +## 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/ @@ -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.