Chromium Code Reviews Chromium Code Reviews
Issue 219213007:
Remove .html extension from links (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| 1 <h1 id="lab_2_work_with_code">Create Basic App</h1> | 1 <h1 id="lab_2_work_with_code">Create Basic App</h1> |
| 2 | 2 |
| 3 <p>There are three core pieces to any Chrome App:</p> | 3 <p>There are three core pieces to any Chrome App:</p> |
| 4 | 4 |
| 5 <ul> | 5 <ul> |
| 6 <li>The manifest that describes meta-information about your application: | 6 <li>The manifest that describes meta-information about your application: |
| 7 name, description, version number and how to launch your application</li> | 7 name, description, version number and how to launch your application</li> |
| 8 <li>The background script, | 8 <li>The background script, |
| 9 which sets up how your application responds to system events | 9 which sets up how your application responds to system events |
| 10 such as the user installing and launching the app and the system suspending it</ li> | 10 such as the user installing and launching the app and the system suspending it</ li> |
| (...skipping 28 matching lines...) Expand all Loading... | |
| 39 } | 39 } |
| 40 </pre> | 40 </pre> |
| 41 | 41 |
| 42 <h2 id="background">Create background script</h2> | 42 <h2 id="background">Create background script</h2> |
| 43 | 43 |
| 44 <p>In the same directory, | 44 <p>In the same directory, |
| 45 create the background script: <a href="https://github.com/GoogleChrome/chrome-ap p-codelab/blob/master/lab2_basic/main.js">main.js</a> | 45 create the background script: <a href="https://github.com/GoogleChrome/chrome-ap p-codelab/blob/master/lab2_basic/main.js">main.js</a> |
| 46 | 46 |
| 47 <pre data-filename="main.js"> | 47 <pre data-filename="main.js"> |
| 48 chrome.app.runtime.onLaunched.addListener(function() { | 48 chrome.app.runtime.onLaunched.addListener(function() { |
| 49 chrome.app.window.create('index.html', { | 49 chrome.app.window.create('index', { |
| 50 bounds: { | 50 bounds: { |
| 51 width: 500, | 51 width: 500, |
| 52 height: 309 | 52 height: 309 |
| 53 } | 53 } |
| 54 }); | 54 }); |
| 55 }); | 55 }); |
| 56 </pre> | 56 </pre> |
| 57 | 57 |
| 58 <h2 id="view">Create view</h2> | 58 <h2 id="view">Create view</h2> |
| 59 | 59 |
| 60 <p>Create the user interface: <a href="https://github.com/GoogleChrome/chrome-ap p-codelab/blob/master/lab2_basic/index.html">index.html</a> | 60 <p>Create the user interface: <a href="https://github.com/GoogleChrome/chrome-ap p-codelab/blob/master/lab2_basic/index">index</a> |
|
mkearney1
2014/04/09 19:43:29
Does it matter that this is a GitHub repo? I'm try
| |
| 61 | 61 |
| 62 <pre data-filename="index.html"> | 62 <pre data-filename="index"> |
|
mkearney1
2014/04/09 19:43:29
Keep .html here, as it separates this from .js fil
| |
| 63 <html> | 63 <html> |
| 64 <head> | 64 <head> |
| 65 <meta charset="utf-8"> | 65 <meta charset="utf-8"> |
| 66 <title>Hello World</title> | 66 <title>Hello World</title> |
| 67 </head> | 67 </head> |
| 68 <body> | 68 <body> |
| 69 <h1>Hello, World!</h1> | 69 <h1>Hello, World!</h1> |
| 70 </body> | 70 </body> |
| 71 </html> | 71 </html> |
| 72 </pre> | 72 </pre> |
| (...skipping 14 matching lines...) Expand all Loading... | |
| 87 If you have enabled Developer mode in <code>chrome://extensions</code>, | 87 If you have enabled Developer mode in <code>chrome://extensions</code>, |
| 88 your apps can be inspected and debugged using the Chrome Developer Tools. | 88 your apps can be inspected and debugged using the Chrome Developer Tools. |
| 89 Just like any standard web page, right-click on page and select Inspect Element. | 89 Just like any standard web page, right-click on page and select Inspect Element. |
| 90 For the background page which doesn't have UI, | 90 For the background page which doesn't have UI, |
| 91 you can either right-click on any app window and | 91 you can either right-click on any app window and |
| 92 select <code>Inspect Background Page</code> or | 92 select <code>Inspect Background Page</code> or |
| 93 go to <code>chrome://extensions</code> and click on Inspect Views...</p> | 93 go to <code>chrome://extensions</code> and click on Inspect Views...</p> |
| 94 | 94 |
| 95 <ol> | 95 <ol> |
| 96 <li><p>Change the text "Hello world" | 96 <li><p>Change the text "Hello world" |
| 97 to "My first app" in index.html.</p></li> | 97 to "My first app" in index.</p></li> |
|
mkearney1
2014/04/09 19:43:29
Keep .html here, as it's a file reference in sampl
| |
| 98 <li><p>Change the | 98 <li><p>Change the |
| 99 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_bas ic/main.js">main.js</a> background script to create two windows instead of one. | 99 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_bas ic/main.js">main.js</a> background script to create two windows instead of one. |
| 100 Don't bother to create another html. | 100 Don't bother to create another html. |
| 101 For now, you can open index.html on both.</p></li> | 101 For now, you can open index on both.</p></li> |
|
mkearney1
2014/04/09 19:43:29
Keep .html here as it's a file reference in sample
| |
| 102 <li><p>After changing code, | 102 <li><p>After changing code, |
| 103 right-click on your app and select Reload App to reload the changed files. | 103 right-click on your app and select Reload App to reload the changed files. |
| 104 All Developer Tools windows will be reopened when you reload your app.</p></li> | 104 All Developer Tools windows will be reopened when you reload your app.</p></li> |
| 105 <li><p>Launch the app in a new tab page. | 105 <li><p>Launch the app in a new tab page. |
| 106 Move the top window and you will see the second window behind it.</p></li> | 106 Move the top window and you will see the second window behind it.</p></li> |
| 107 </ol> | 107 </ol> |
| 108 | 108 |
| 109 <h2 id="takeaways">Takeaways</h2> | 109 <h2 id="takeaways">Takeaways</h2> |
| 110 | 110 |
| 111 <ul> | 111 <ul> |
| 112 <li>Chrome Apps have three basic pieces. | 112 <li>Chrome Apps have three basic pieces. |
| 113 The first and foremost is the manifest, which describes your app, | 113 The first and foremost is the manifest, which describes your app, |
| 114 requests special permissions, defines important meta information and much more. | 114 requests special permissions, defines important meta information and much more. |
| 115 The second part is the background script, | 115 The second part is the background script, |
| 116 which contains all logic not tied to a specific user interface. | 116 which contains all logic not tied to a specific user interface. |
| 117 The last part is the user interface: HTML, CSS, JavaScripts related to the inter face, images, etc.</li> | 117 The last part is the user interface: HTML, CSS, JavaScripts related to the inter face, images, etc.</li> |
| 118 <li>Chrome Apps can be debugged just like standard web pages | 118 <li>Chrome Apps can be debugged just like standard web pages |
| 119 using the Chrome Developer Tools. | 119 using the Chrome Developer Tools. |
| 120 But since an app doesn't have the Reload control of a browser, | 120 But since an app doesn't have the Reload control of a browser, |
| 121 a Reload App option has been added when you run in Developer mode.</li> | 121 a Reload App option has been added when you run in Developer mode.</li> |
| 122 </ul> | 122 </ul> |
| 123 | 123 |
| 124 <h2 id="you_should_also_read">You should also read</h2> | 124 <h2 id="you_should_also_read">You should also read</h2> |
| 125 | 125 |
| 126 <ul> | 126 <ul> |
| 127 <li><a href="first_app.html">Create Your First App</a> tutorial</li> | 127 <li><a href="first_app">Create Your First App</a> tutorial</li> |
| 128 <li><a href="app.runtime.html">chrome.app.runtime</a> reference</li> | 128 <li><a href="app.runtime">chrome.app.runtime</a> reference</li> |
| 129 <li><a href="app.window.html">chrome.app.window</a> reference</li> | 129 <li><a href="app.window">chrome.app.window</a> reference</li> |
| 130 </ul> | 130 </ul> |
| 131 | 131 |
| 132 <h2 id="what_39_s_next_">What's next?</h2> | 132 <h2 id="what_39_s_next_">What's next?</h2> |
| 133 | 133 |
| 134 <p>In <a href="app_codelab3_mvc.html">3 - Create MVC</a>, | 134 <p>In <a href="app_codelab3_mvc">3 - Create MVC</a>, |
| 135 you will use either pure JavaScript or | 135 you will use either pure JavaScript or |
| 136 <a href="http://angularjs.org/">AngluarJS</a> | 136 <a href="http://angularjs.org/">AngluarJS</a> |
| 137 to build your app's model, view, and controller.</p> | 137 to build your app's model, view, and controller.</p> |
| OLD | NEW |
