OLD | NEW |
(Empty) | |
| 1 <h1 id="lab_9_multiple_views">Lab 9 - Multiple Views</h1> |
| 2 |
| 3 <p>Unlike standard web apps, a Chrome app has complete control of its windows. I
t can create any number of windows at arbitrary screen locations, control the wi
ndow's look and feel, minimize, maximize and much more.</p> |
| 4 |
| 5 <p>In this lab, we will move the Drop area of our current application to another
window. Here you can see how windows talk to each other and to the event page d
irectly, synchronously, because they are all in the same thread.</p> |
| 6 |
| 7 <ol> |
| 8 <li><p>Let's adapt our code then. Start by removing the droptext <code><d
iv></code> from <a href="https://github.com/GoogleChrome/chrome-app-codelab/b
lob/master/lab9_multipleviews/angularjs/index.html">index.html</a>.</p></li> |
| 9 <li><p>Create a new HTML with the drop area: <a href="https://github.com/GoogleC
hrome/chrome-app-codelab/blob/master/lab9_multipleviews/angularjs/droparea.html"
>droparea.html</a> |
| 10 <pre> |
| 11 <html ng-app ng-csp> |
| 12 <head> |
| 13 <script src="angular.min.js"></script> |
| 14 <script src="droparea.js"></script> |
| 15 <link rel="stylesheet" href="todo.css"> |
| 16 <title>File Drop</title> |
| 17 </head> |
| 18 <body ng-controller="DropCtrl" ng-class="dropClass"> |
| 19 <h2>Drop Area</h2> |
| 20 <div>{{dropText}}</div> |
| 21 </body> |
| 22 </html> |
| 23 </pre></p></li> |
| 24 <li><p>Move all drop-related functionality from <a href="https://github.com/Goog
leChrome/chrome-app-codelab/blob/master/lab9_multipleviews/angularjs/controller.
js">controller.js</a> to a new file, <a href="https://github.com/GoogleChrome/ch
rome-app-codelab/blob/master/lab9_multipleviews/angularjs/droparea.js">droparea.
js</a>: |
| 25 <pre> |
| 26 function DropCtrl($scope) { |
| 27 // move here the variable initializations for defaultDropText and $scope.dropT
ext |
| 28 // move here the methods dragOver, dragLeave and drop |
| 29 } |
| 30 </pre></p></li> |
| 31 <li><p>In the existing <code>controller.js</code>, add the call to create a new
window: |
| 32 <pre> |
| 33 chrome.app.window.create('droparea.html', |
| 34 {id: 'dropArea', width: 200, height: 200 }, |
| 35 function(dropWin) { |
| 36 dropWin.contentWindow.$parentScope = $scope; |
| 37 }); |
| 38 </pre></p></li> |
| 39 </ol> |
| 40 |
| 41 <p>And that's all. Thanks to the hierarchical scope support on Angular, the
<code>DropCtrl</code> controller is a child of the <code>TodoCtrl</code> and inh
erits all the context of its parent.</p> |
| 42 |
| 43 <p>To test, open the app, right-click, and select Reload App. Move the top view
to the right, and you can see the additional view.</p> |
| 44 |
| 45 <p class="note"><b>Note:</b> If you get stuck and want to see the app in action
, go to <code>chrome://extensions</code>, load the unpacked <a href="app_codelab
9_multipleviews.html">lab9_multipleviews</a>, and launch the app from a new tab.
</p> |
| 46 |
| 47 <h1 id="takeaway_">Takeaway:</h1> |
| 48 |
| 49 <ul> |
| 50 <li>Web developers usually have a mindset of one-window-per-webapp. |
| 51 The Chrome app platform opens more possibilities for your creativity. |
| 52 A document editor, for example, can have one window per opened document, a more
natural metaphor for native-like apps.</li> |
| 53 </ul> |
| 54 |
| 55 <h1 id="what_39_s_next_">What's next?</h1> |
| 56 |
| 57 <p>In <a href="app_codelab_10_publishing.html">lab_10_publishing</a>, we finish
off with instructions on how to publish your app in the Chrome Web Store.</p> |
OLD | NEW |