| 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, |
| 67 "app": { | 67 "app": { |
| 68 "background": { | 68 "background": { |
| 69 "scripts": [ | 69 "scripts": [ |
| 70 "background.js" | 70 "background.js" |
| 71 ] | 71 ] |
| 72 } | 72 } |
| 73 }, | 73 }, |
| 74 ... | 74 ... |
| 75 | 75 |
| 76 "sandbox": { | 76 "sandbox": { |
| 77 "pages": ["sandbox.html"] | 77 "pages": ["sandbox"] |
| 78 }, | 78 }, |
| 79 "permissions": [ | 79 "permissions": [ |
| 80 "experimental", | 80 "experimental", |
| 81 "http://*/*", | 81 "http://*/*", |
| 82 "unlimitedStorage", | 82 "unlimitedStorage", |
| 83 { | 83 { |
| 84 "socket": [ | 84 "socket": [ |
| 85 "tcp-connect", | 85 "tcp-connect", |
| 86 "udp-send-to", | 86 "udp-send-to", |
| 87 "udp-bind" | 87 "udp-bind" |
| 88 ] | 88 ] |
| 89 } | 89 } |
| 90 ] | 90 ] |
| 91 } | 91 } |
| 92 </pre> | 92 </pre> |
| 93 | 93 |
| 94 <h2 id="second">Create event page</h2> | 94 <h2 id="second">Create event page</h2> |
| 95 | 95 |
| 96 <p> | 96 <p> |
| 97 All Chrome Apps require <code>background.js</code> | 97 All Chrome Apps require <code>background.js</code> |
| 98 to launch the application. | 98 to launch the application. |
| 99 The media player's main page, <code>index.html</code>, | 99 The media player's main page, <code>index</code>, |
| 100 opens in a window with the specified dimensions: | 100 opens in a window with the specified dimensions: |
| 101 </p> | 101 </p> |
| 102 | 102 |
| 103 <pre data-filename="background.js"> | 103 <pre data-filename="background.js"> |
| 104 chrome.app.runtime.onLaunched.addListener(function(launchData) { | 104 chrome.app.runtime.onLaunched.addListener(function(launchData) { |
| 105 var opt = { | 105 var opt = { |
| 106 width: 1000, | 106 width: 1000, |
| 107 height: 700 | 107 height: 700 |
| 108 }; | 108 }; |
| 109 | 109 |
| 110 chrome.app.window.create('index.html', opt, function (win) { | 110 chrome.app.window.create('index', 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</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"> |
| 127 <iframe id="sandbox-frame" sandbox="allow-scripts" src="sandbox.html"></if
rame> | 127 <iframe id="sandbox-frame" sandbox="allow-scripts" src="sandbox"></iframe> |
| 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">sandbox</a> which includes the files required for
the Ext JS application: |
| 131 </p> | 131 </p> |
| 132 | 132 |
| 133 <pre data-filename="sandbox.html"> | 133 <pre data-filename="sandbox"> |
| 134 <html> | 134 <html> |
| 135 <head> | 135 <head> |
| 136 <link rel="stylesheet" type="text/css" href="resources/css/app.css" />' | 136 <link rel="stylesheet" type="text/css" href="resources/css/app.css" />' |
| 137 <script src="sdk/ext-all-dev.js"></script>' | 137 <script src="sdk/ext-all-dev.js"></script>' |
| 138 <script src="lib/ext/data/PostMessage.js"></script>' | 138 <script src="lib/ext/data/PostMessage.js"></script>' |
| 139 <script src="lib/ChromeProxy.js"></script>' | 139 <script src="lib/ChromeProxy.js"></script>' |
| 140 <script src="app.js"></script> | 140 <script src="app.js"></script> |
| 141 </head> | 141 </head> |
| 142 <body></body> | 142 <body></body> |
| 143 </html> | 143 </html> |
| 144 </pre> | 144 </pre> |
| 145 | 145 |
| 146 <p> | 146 <p> |
| 147 The <a href="http://senchaprosvcs.github.com/GooglePlayer/docs/output/source/app
.html#VP-Application">app.js</a> script executes all the Ext JS code and renders
the media player views. | 147 The <a href="http://senchaprosvcs.github.com/GooglePlayer/docs/output/source/app
#VP-Application">app.js</a> script executes all the Ext JS code and renders the
media player views. |
| 148 Since this script is sandboxed, it cannot directly access the Chrome App APIs. | 148 Since this script is sandboxed, it cannot directly access the Chrome App APIs. |
| 149 Communication between <code>app.js</code> and non-sandboxed files is done using
the | 149 Communication between <code>app.js</code> and non-sandboxed files is done using
the |
| 150 <a href="https://developer.mozilla.org/en-US/docs/DOM/window.postMessage">HTML5
Post Message API</a>. | 150 <a href="https://developer.mozilla.org/en-US/docs/DOM/window.postMessage">HTML5
Post Message API</a>. |
| 151 </p> | 151 </p> |
| 152 | 152 |
| 153 <h2 id="four">Communicate between files</h2> | 153 <h2 id="four">Communicate between files</h2> |
| 154 | 154 |
| 155 <p> | 155 <p> |
| 156 In order for the media player app to access Chrome App APIs, | 156 In order for the media player app to access Chrome App APIs, |
| 157 like query the network for media servers, <code>app.js</code> posts messages | 157 like query the network for media servers, <code>app.js</code> posts messages |
| (...skipping 88 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 |