OLD | NEW |
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 Loading... |
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 <iframe id="sandbox-frame" sandbox="allow-scripts" src="sandbox.html"></if
rame> | 127 <iframe id="sandbox-frame" sandbox="allow-scripts" src="sandbox.html"></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 Loading... |
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 Loading... |
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> |
OLD | NEW |