Index: chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html |
diff --git a/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html b/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html |
deleted file mode 100644 |
index 4ead662ef6e80cdde5704c3d08612eb0c43cc7fe..0000000000000000000000000000000000000000 |
--- a/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html |
+++ /dev/null |
@@ -1,137 +0,0 @@ |
-<h1 id="lab_2_work_with_code">Create Basic App</h1> |
- |
-<p>There are three core pieces to any Chrome App:</p> |
- |
-<ul> |
-<li>The manifest that describes meta-information about your application: |
-name, description, version number and how to launch your application</li> |
-<li>The background script, |
-which sets up how your application responds to system events |
-such as the user installing and launching the app and the system suspending it</li> |
-<li>The view |
-(which is optional, but you normally need to show the user something)</li> |
-</ul> |
- |
-<p>Let's look at each of these components at their simplest level.</p> |
- |
-<p class="note"><b>Tip:</b> |
-If you use the Sublime Text editor with |
-<a href="http://www.youtube.com/watch?v=x_FTILqlbsg&hd=1">our plugin</a>, |
-you can create these three files with a click (Chrome -> New App -> Hello World). |
-</p> |
- |
-<h2 id="manifest">Create manifest</h2> |
- |
-<p>In an empty directory (let's call it <code><myappdir></code>), |
-create the manifest file: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/manifest.json">manifest.json</a> |
-</p> |
- |
-<pre data-filename="manifest.json"> |
-{ |
- "manifest_version": 2, |
- "name": "My first app", |
- "version": "1", |
- "app": { |
- "background": { |
- "scripts": ["main.js"] |
- } |
- } |
-} |
-</pre> |
- |
-<h2 id="background">Create background script</h2> |
- |
-<p>In the same directory, |
-create the background script: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/main.js">main.js</a> |
- |
-<pre data-filename="main.js"> |
-chrome.app.runtime.onLaunched.addListener(function() { |
- chrome.app.window.create('index.html', { |
- bounds: { |
- width: 500, |
- height: 309 |
- } |
- }); |
-}); |
-</pre> |
- |
-<h2 id="view">Create view</h2> |
- |
-<p>Create the user interface: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/index.html">index.html</a> |
- |
-<pre data-filename="index.html"> |
-<html> |
- <head> |
- <meta charset="utf-8"> |
- <title>Hello World</title> |
- </head> |
- <body> |
- <h1>Hello, World!</h1> |
- </body> |
-</html> |
-</pre> |
- |
-<h2 id="install">Install and execute sample app</h2> |
- |
-<ul> |
-<li>Go to <code>chrome://extensions</code>.</li> |
-<li>Load unpacked extension...</li> |
-<li>Select the <code><myappdir></code> directory.</li> |
-<li>Open a new Chrome tab.</li> |
-<li>Click on the "My First App" icon.</li> |
-</ul> |
- |
-<h2 id="debug_fix_and_reload_app">Debug, fix, and reload</h2> |
- |
-<p class="note"><b>Tip:</b> |
-If you have enabled Developer mode in <code>chrome://extensions</code>, |
-your apps can be inspected and debugged using the Chrome Developer Tools. |
-Just like any standard web page, right-click on page and select Inspect Element. |
-For the background page which doesn't have UI, |
-you can either right-click on any app window and |
-select <code>Inspect Background Page</code> or |
-go to <code>chrome://extensions</code> and click on Inspect Views...</p> |
- |
-<ol> |
-<li><p>Change the text "Hello world" |
-to "My first app" in index.html.</p></li> |
-<li><p>Change the |
-<a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/main.js">main.js</a> background script to create two windows instead of one. |
-Don't bother to create another html. |
-For now, you can open index.html on both.</p></li> |
-<li><p>After changing code, |
-right-click on your app and select Reload App to reload the changed files. |
-All Developer Tools windows will be reopened when you reload your app.</p></li> |
-<li><p>Launch the app in a new tab page. |
-Move the top window and you will see the second window behind it.</p></li> |
-</ol> |
- |
-<h2 id="takeaways">Takeaways</h2> |
- |
-<ul> |
-<li>Chrome Apps have three basic pieces. |
-The first and foremost is the manifest, which describes your app, |
-requests special permissions, defines important meta information and much more. |
-The second part is the background script, |
-which contains all logic not tied to a specific user interface. |
-The last part is the user interface: HTML, CSS, JavaScripts related to the interface, images, etc.</li> |
-<li>Chrome Apps can be debugged just like standard web pages |
-using the Chrome Developer Tools. |
-But since an app doesn't have the Reload control of a browser, |
-a Reload App option has been added when you run in Developer mode.</li> |
-</ul> |
- |
-<h2 id="you_should_also_read">You should also read</h2> |
- |
-<ul> |
-<li><a href="first_app">Create Your First App</a> tutorial</li> |
-<li><a href="app.runtime">chrome.app.runtime</a> reference</li> |
-<li><a href="app.window">chrome.app.window</a> reference</li> |
-</ul> |
- |
-<h2 id="what_39_s_next_">What's next?</h2> |
- |
-<p>In <a href="app_codelab3_mvc">3 - Create MVC</a>, |
-you will use either pure JavaScript or |
-<a href="http://angularjs.org/">AngluarJS</a> |
-to build your app's model, view, and controller.</p> |