Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(465)

Side by Side Diff: chrome/common/extensions/docs/templates/articles/sencha_framework.html

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <meta name="doc-family" content="apps"> 1 <meta name="doc-family" content="apps">
2 <h1>Build Apps with Sencha Ext JS</h1> 2 <h1>Build Apps with Sencha Ext JS</h1>
3 3
4 <p> 4 <p>
5 The goal of this doc is to get you started 5 The goal of this doc is to get you started
6 on building Chrome Apps with the 6 on building Chrome Apps with the
7 <a href="http://www.sencha.com/products/extjs">Sencha Ext JS</a> framework. 7 <a href="http://www.sencha.com/products/extjs">Sencha Ext JS</a> framework.
8 To achieve this goal, 8 To achieve this goal,
9 we will dive into a media player app built by Sencha. 9 we will dive into a media player app built by Sencha.
10 The <a href="https://github.com/GoogleChrome/sencha-video-player-app">source cod e</a> 10 The <a href="https://github.com/GoogleChrome/sencha-video-player-app">source cod e</a>
11 and <a href="http://senchaprosvcs.github.com/GooglePlayer/docs/output/#!/api">AP I Documentation</a> are available on GitHub. 11 and <a href="http://senchaprosvcs.github.com/GooglePlayer/docs/output/#!/api">AP I Documentation</a> are available on GitHub.
12 </p> 12 </p>
13 13
14 <p> 14 <p>
15 This app discovers a user's available media servers, 15 This app discovers a user's available media servers,
16 including media devices connected to the pc and 16 including media devices connected to the pc and
17 software that manages media over the network. 17 software that manages media over the network.
18 Users can browse media, play over the network, 18 Users can browse media, play over the network,
19 or save offline. 19 or save offline.
20 </p> 20 </p>
21 21
22 <p>Here are the key things you must do 22 <p>Here are the key things you must do
23 to build a media player app using Sencha Ext JS: 23 to build a media player app using Sencha Ext JS:
24 </p> 24 </p>
25 25
26 <ul> 26 <ul>
27 <li>Create manifest, <code>manifest.json</code>.</li> 27 <li>Create manifest, <code>manifest.json</code>.</li>
28 <li>Create <a href="app_lifecycle.html#eventpage">event page</a>, 28 <li>Create <a href="app_lifecycle#eventpage">event page</a>,
29 <code>background.js</code>.</li> 29 <code>background.js</code>.</li>
30 <li><a href="app_external.html#sandboxing">Sandbox</a> app's logic.</li> 30 <li><a href="app_external#sandboxing">Sandbox</a> app's logic.</li>
31 <li>Communicate between Chrome App and sandboxed files.</li> 31 <li>Communicate between Chrome App and sandboxed files.</li>
32 <li>Discover media servers.</li> 32 <li>Discover media servers.</li>
33 <li>Explore and play media.</li> 33 <li>Explore and play media.</li>
34 <li>Save media offline.</li> 34 <li>Save media offline.</li>
35 </ul> 35 </ul>
36 36
37 <h2 id="first">Create manifest</h2> 37 <h2 id="first">Create manifest</h2>
38 38
39 <p> 39 <p>
40 All Chrome Apps require a 40 All Chrome Apps require a
41 <a href="manifest.html">manifest file</a> 41 <a href="manifest">manifest file</a>
42 which contains the information Chrome needs to launch apps. 42 which contains the information Chrome needs to launch apps.
43 As indicated in the manifest, 43 As indicated in the manifest,
44 the media player app is "offline_enabled"; 44 the media player app is "offline_enabled";
45 media assets can be saved locally, 45 media assets can be saved locally,
46 accessed and played regardless of connectivity. 46 accessed and played regardless of connectivity.
47 </p> 47 </p>
48 48
49 <p> 49 <p>
50 The "sandbox" field is used 50 The "sandbox" field is used
51 to sandbox the app's main logic in a unique origin. 51 to sandbox the app's main logic in a unique origin.
52 All sandboxed content is exempt from the Chrome App 52 All sandboxed content is exempt from the Chrome App
53 <a href="contentSecurityPolicy.html">Content Security Policy</a>, 53 <a href="contentSecurityPolicy">Content Security Policy</a>,
54 but cannot directly access the Chrome App APIs. 54 but cannot directly access the Chrome App APIs.
55 The manifest also includes the "socket" permission; 55 The manifest also includes the "socket" permission;
56 the media player app uses the <a href="socket.html">socket API</a> 56 the media player app uses the <a href="socket">socket API</a>
57 to connect to a media server over the network. 57 to connect to a media server over the network.
58 </p> 58 </p>
59 59
60 <pre data-filename="manifest.json"> 60 <pre data-filename="manifest.json">
61 { 61 {
62 "name": "Video Player", 62 "name": "Video Player",
63 "description": "Features network media discovery and playlist management", 63 "description": "Features network media discovery and playlist management",
64 "version": "1.0.0", 64 "version": "1.0.0",
65 "manifest_version": 2, 65 "manifest_version": 2,
66 "offline_enabled": true, 66 "offline_enabled": true,
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after
110 chrome.app.window.create('index.html', opt, function (win) { 110 chrome.app.window.create('index.html', opt, function (win) {
111 win.launchData = launchData; 111 win.launchData = launchData;
112 }); 112 });
113 113
114 }); 114 });
115 </pre> 115 </pre>
116 116
117 <h2 id="three">Sandbox app's logic</h2> 117 <h2 id="three">Sandbox app's logic</h2>
118 118
119 <p>Chrome Apps run in a controlled environment 119 <p>Chrome Apps run in a controlled environment
120 that enforces a strict <a href="contentSecurityPolicy.html">Content Security Pol icy (CSP)</a>. 120 that enforces a strict <a href="contentSecurityPolicy">Content Security Policy ( CSP)</a>.
121 The media player app needs some higher privileges to render the Ext JS component s. 121 The media player app needs some higher privileges to render the Ext JS component s.
122 To comply with CSP and execute the app logic, 122 To comply with CSP and execute the app logic,
123 the app's main page, <code>index.html</code>, creates an iframe 123 the app's main page, <code>index.html</code>, creates an iframe
124 that acts as a sandbox environment: 124 that acts as a sandbox environment:
125 125
126 <pre data-filename="index.html"> 126 <pre data-filename="index.html">
127 &lt;iframe id="sandbox-frame" sandbox="allow-scripts" src="sandbox.html">&lt;/if rame> 127 &lt;iframe id="sandbox-frame" sandbox="allow-scripts" src="sandbox.html">&lt;/if rame>
128 </pre> 128 </pre>
129 129
130 <p>The iframe points to <a href="https://github.com/GoogleChrome/sencha-video-pl ayer-app/blob/master/sandbox.html">sandbox.html</a> which includes the files req uired for the Ext JS application: 130 <p>The iframe points to <a href="https://github.com/GoogleChrome/sencha-video-pl ayer-app/blob/master/sandbox.html">sandbox.html</a> which includes the files req uired for the Ext JS application:
(...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after
246 At a high level, the discovery workflow is initiated 246 At a high level, the discovery workflow is initiated
247 by a user action to search for available media servers. 247 by a user action to search for available media servers.
248 The <a href="https://github.com/GoogleChrome/sencha-video-player-app/blob/master /app/controller/MediaServers.js">MediaServer controller</a> 248 The <a href="https://github.com/GoogleChrome/sencha-video-player-app/blob/master /app/controller/MediaServers.js">MediaServer controller</a>
249 posts a message to <code>index.js</code>; 249 posts a message to <code>index.js</code>;
250 <code>index.js</code> listens for this message and when received, 250 <code>index.js</code> listens for this message and when received,
251 calls <a href="https://github.com/GoogleChrome/sencha-video-player-app/blob/mast er/lib/Upnp.js">Upnp.js</a>. 251 calls <a href="https://github.com/GoogleChrome/sencha-video-player-app/blob/mast er/lib/Upnp.js">Upnp.js</a>.
252 </p> 252 </p>
253 253
254 <p> 254 <p>
255 The <code>Upnp library</code> uses the Chrome App 255 The <code>Upnp library</code> uses the Chrome App
256 <a href="app_network.html">socket API</a> 256 <a href="app_network">socket API</a>
257 to connect the media player app with any discovered media servers 257 to connect the media player app with any discovered media servers
258 and receive media data from the media server. 258 and receive media data from the media server.
259 <code>Upnp.js</code> also uses 259 <code>Upnp.js</code> also uses
260 <a href="https://github.com/GoogleChrome/sencha-video-player-app/blob/master/lib /soapclient.js">soapclient.js</a> 260 <a href="https://github.com/GoogleChrome/sencha-video-player-app/blob/master/lib /soapclient.js">soapclient.js</a>
261 to parse the media server data. 261 to parse the media server data.
262 The remainder of this section describes this workflow in more detail. 262 The remainder of this section describes this workflow in more detail.
263 </p> 263 </p>
264 264
265 <h3 id="post">Post message</h3> 265 <h3 id="post">Post message</h3>
266 266
(...skipping 302 matching lines...) Expand 10 before | Expand all | Expand 10 after
569 } 569 }
570 ); 570 );
571 </pre> 571 </pre>
572 572
573 <p> 573 <p>
574 When the download process is finished, 574 When the download process is finished,
575 <code>MediaExplorer</code> updates the media file list and the media player tree panel. 575 <code>MediaExplorer</code> updates the media file list and the media player tree panel.
576 </p> 576 </p>
577 577
578 <p class="backtotop"><a href="#top">Back to top</a></p> 578 <p class="backtotop"><a href="#top">Back to top</a></p>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698