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 controller.js, add the call to create a new window: | |
mkearney1
2013/02/12 22:22:11
Wrap controller.js in <code>.
Renato Mangini (chromium)
2013/02/13 22:55:33
Done.
| |
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 DropCtrl controller is a child of the TodoCtrl and inherits all the context of i ts parent.</p> | |
mkearney1
2013/02/12 22:22:11
Wrap controllers in <code>.
Renato Mangini (chromium)
2013/02/13 22:55:33
Done.
Renato Mangini (chromium)
2013/02/13 22:55:33
Done.
| |
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 |