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

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

Issue 12221067: Move Chrome Apps Codelab docs to developer.chrome.com (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: fixed references to github, accordingly to the new github angularjs subdirectories; added a link to… Created 7 years, 10 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 | Annotate | Revision Log
OLDNEW
(Empty)
1 <h1 id="lab_5_manage_data">Lab 5 - Manage Data</h1>
2
3 <p>The sample from Lab 3 uses a static array of Todos. Every time your app resta rts, whatever you&#39;ve changed is lost. In this section, we will save every ch ange using <a href="http://developer.chrome.com/trunk/apps/storage.html">chrome. storage.sync</a>. This lets you store <em>small things</em> that automatically s ync to the cloud if you are online and logged in to Chrome. If you are offline o r unlogged, it saves locally and transparently: you don&#39;t have to handle onl ine check and offline fallback in your application.</p>
mkearney1 2013/02/12 22:22:11 Link to Lab 3 doc here.
Renato Mangini (chromium) 2013/02/13 22:55:33 Done.
4
5 <h2 id="you_should_also_read">You should also read</h2>
6
7 <p><a href="http://developer.chrome.com/apps/app_storage.html">Manage Data</a> i n Chrome app docs</p>
8
9 <h2 id="save_your_todos_in_the_cloud">Save your Todos in the cloud</h2>
10
11 <p class="note"><b>Note:</b> Chrome Sync Storage is not intended to be used as a generic database. There are several restrictions on the amount of information you can save, so it is more appropriate to save settings and other small chunks of data. </p>
12
13 <ol>
14 <li><p>Request permission to use storage in your <a href="https://github.com/Goo gleChrome/chrome-app-codelab/blob/master/lab5_data/angularjs/1_storage_sync/mani fest.json">manifest.json</a>:
15 <pre>
16 {
17 ... ,
18 &quot;permissions&quot;: [&quot;storage&quot;]
19 }
20 </pre></p></li>
21 <li><p>Change your <a href="https://github.com/GoogleChrome/chrome-app-codelab/b lob/master/lab5_data/angularjs/1_storage_sync/controller.js">controller.js</a> a nd, instead of a static list, get the Todo list from the syncable storage:
22 <pre>
23 // Notice that chrome.storage.sync.get is asynchronous
24 chrome.storage.sync.get(&#39;todolist&#39;, function(value) {
25 // The $apply is only necessary to execute the function inside Angular scope
26 $scope.$apply(function() {
27 $scope.load(value);
28 });
29 });
30
31 // If there is saved data in storage, use it. Otherwise, bootstrap with sample t odos
32 $scope.load = function(value) {
33 if (value &amp;&amp; value.todolist) {
34 $scope.todos = value.todolist;
35 } else {
36 $scope.todos = [
37 {text:&#39;learn angular&#39;, done:true},
38 {text:&#39;build an angular app&#39;, done:false}];
39 }
40 }
41
42 $scope.save = function() {
43 chrome.storage.sync.set({&#39;todolist&#39;: $scope.todos});
44 };
45 </pre></li><li>In the HTML, call save() whenever the data changes. There are man y other ways of doing this in Angular, like using $watchers on the scope. The on e used here makes the save() calls explicit.
mkearney1 2013/02/12 22:22:11 save() * 2 and $watchers should be wrapped in <cod
Renato Mangini (chromium) 2013/02/13 22:55:33 Done.
46 <pre>
47 ...
48 [ &lt;a href=&quot;&quot; ng-click=&quot;archive() || save()&quot;&gt;arc hive&lt;/a&gt; ]
49 ...
50 &lt;input type=&quot;checkbox&quot; ng-model=&quot;todo.done&quot; n g-change=&quot;save()&quot;&gt;
51 ...
52 &lt;form ng-submit=&quot;addTodo() || save()&quot;&gt;
53 ...
54 </pre></li>
55 <li>Check the results by reloading the app: open the app, right-click and select Reload App.
56 You can now add Todo items, close the app, and the new items will still be there when you reopen the app.</li>
57 </ol>
58
59 <p class="note"><b>Note:</b> If you get stuck and want to see the app in action ,
60 go to <code>chrome://extensions</code>, load the unpacked <a href="https://githu b.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/angularjs/1_storage_ sync">1_storage_sync</a> app,
61 and launch the app from a new tab.</p>
62
63 <h2 id="handle_drag_and_dropped_files_and_urls">Handle drag-and-dropped files an d URLs</h2>
64
65 Suppose you want to create Todos associated with local files and/or URLs. The na tural way of doing this is to accept dropped items. It&#39;s simple enough to ad d drag-and-drop support in a Chrome app using the standard HTML5 Drag-and-Drop A PI.
66
67 <ol>
68 <li>In <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/l ab5_data/angularjs/2_drop_files/controller.js">controller.js</a>, add code to ha ndle the events of dragover, dragleave and drop:
69 <pre>
70 var defaultDropText = &quot;Or drop files here...&quot;;
71 $scope.dropText = defaultDropText;
72
73 // on dragOver, we will change the style and text accordingly, depending on
74 // the data being transferred
75 var dragOver = function(e) {
76 e.stopPropagation();
77 e.preventDefault();
78 var valid = e.dataTransfer &amp;&amp; e.dataTransfer.types
79 &amp;&amp; ( e.dataTransfer.types.indexOf(&#39;Files&#39;) &gt;= 0
80 || e.dataTransfer.types.indexOf(&#39;text/uri-list&#39;) &gt;=0 )
81 $scope.$apply(function() {
82 $scope.dropText = valid ? &quot;Drop files and remote images and they will b ecome Todos&quot;
83 : &quot;Can only drop files and remote images here&quot;;
84 $scope.dropClass = valid ? &quot;dragging&quot; : &quot;invalid-dragging&quo t;;
85 });
86 }
87
88 // reset style and text to the default
89 var dragLeave = function(e) {
90 $scope.$apply(function() {
91 $scope.dropText = defaultDropText;
92 $scope.dropClass = &#39;&#39;;
93 });
94 }
95
96 // on drop, we create the appropriate TODOs using dropped data
97 var drop = function(e) {
98 e.preventDefault();
99 e.stopPropagation();
100
101 var newTodos=[];
102 if (e.dataTransfer.types.indexOf(&#39;Files&#39;) &gt;= 0) {
103 var files = e.dataTransfer.files;
104 for (var i = 0; i &lt; files.length; i++) {
105 var text = files[i].name+&#39;, &#39;+files[i].size+&#39; bytes&#39;;
106 newTodos.push({text:text, done:false, file: files[i]});
107 }
108 } else { // uris
109 var uri=e.dataTransfer.getData(&quot;text/uri-list&quot;);
110 newTodos.push({text:uri, done:false, uri: uri});
111 }
112
113 $scope.$apply(function() {
114 $scope.dropText = defaultDropText;
115 $scope.dropClass = &#39;&#39;;
116 for (var i = 0; i &lt; newTodos.length; i++) {
117 $scope.todos.push(newTodos[i]);
118 }
119 $scope.save();
120 });
121 }
122
123 document.body.addEventListener(&quot;dragover&quot;, dragOver, false);
124 document.body.addEventListener(&quot;dragleave&quot;, dragLeave, false);
125 document.body.addEventListener(&quot;drop&quot;, drop, false);
126 </pre></li><li>To make all the area of the window accept the drop event and stil l work on the same scope, let&#39;s move the Angular scope definition from the d iv to the body in the <a href="https://github.com/GoogleChrome/chrome-app-codela b/blob/master/lab5_data/angularjs/2_drop_files/index.html">index.html</a> file.
127 Also, let&#39;s associate the body&#39;s CSS class with the Angular controller&# 39;s class, so we can change the class directly in the scope and have it automat ically changed in the DOM:
128 <pre>
129 &lt;body ng-controller=&quot;TodoCtrl&quot; ng-class=&quot;dropClass&quot;&gt;
130 &lt;!-- remember to remove the ng-controller attribute from the div where it was before --&gt;
131 </pre></li>
132 <li>Add a message placeholder (in <code>index.html</code>) to warn the user that some types of dragging are not allowed:
133 <pre>
134 &lt;div&gt;
135 &#123;&#123;dropText&#125;&#125;
136 &lt;/div&gt;
137 </pre></li>
138 <li>Add appropriate styling for the <code>dragging</code> and <code>invalid-drag ging</code> CSS classes in <a href="https://github.com/GoogleChrome/chrome-app-c odelab/blob/master/lab5_data/angularjs/2_drop_files/todo.css">todo.css</a>. Here we used a green or red background color animation:
139 <pre>
140 @-webkit-keyframes switch-green {
141 from { background-color: white;} to {background-color: rgb(163, 255, 163);}
142 }
143 @-webkit-keyframes switch-red {
144 from { background-color: white;} to {background-color: rgb(255, 203, 203);}
145 }
146 .dragging {
147 -webkit-animation: switch-green 0.5s ease-in-out 0 infinite alternate;
148 }
149
150 .invalid-dragging {
151 -webkit-animation: switch-red 0.5s ease-in-out 0 infinite alternate;
152 }
153 </pre></p></li><li><p>Check the results by reloading the app: open the app, righ t-click and select Reload App.
154 You can now drag files into the Todo list.</p></li>
155 </ol>
156
157 <p class="note"><b>Note:</b> If you get stuck and want to see the app in action ,
158 go to <code>chrome://extensions</code>, load the unpacked <a href="https://githu b.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/angularjs/2_drop_fil es">2_drop_files</a> app,
159 and launch the app from a new tab.</p>
160
161 <h1 id="challenge_">Challenge:</h1>
162
163 <p>The current code only saves the file reference, but it doesn&#39;t open the f ile. Using the <a href="http://www.html5rocks.com/en/tutorials/file/filesystem/" >HTML5 Filesystem API</a>, save the file contents in a sandboxed filesystem. Whe n the Todo item is archived, remove the corresponding file from the sandboxed fi lesystem. Add an &quot;open&quot; link on each Todo that has an associated file. When the item is clicked and the file exists in the sandboxed filesystem, use t he Chrome app <a href="http://developer.chrome.com/apps/fileSystem.html">Filesys tem extension</a> to request a writable FileEntry from the user. Save the file d ata from the sandboxed filesystem into that entry.</p>
164
165 <p class="note"><b>Tip:</b> managing file entries using the raw HTML5 Filesyste m API is not trivial. You might want to use a wrapper library, like Eric Bidelma n&#39;s <a href="https://github.com/ebidel/filer.js">filer.js</a>.</p>
166
167 <h1 id="takeaways_">Takeaways:</h1>
168
169 <ul>
170 <li><p>Use chrome.storage.sync to save small data that you need to be sync&#39;e d among devices, like configuration options, application state, etc. The sync is automatic, as long as the same user is logged into Chrome on all devices.</p></ li>
mkearney1 2013/02/12 22:22:11 This should link to the storage API.
Renato Mangini (chromium) 2013/02/13 22:55:33 Done.
171 <li><p>Chrome apps support almost all HTML5 APIs, such as drag and drop. HTML Fi lesystem API is also supported, with extra features from the Chrome app&#39;s Fi lesystem API extension, like asking the user to pick files on her local disk for read and write. The vanilla HTML5 Filesystem API only allows access to a sandbo xed filesystem.</p></li>
mkearney1 2013/02/12 22:22:11 This should link to the Chrome fileSystem API.
Renato Mangini (chromium) 2013/02/13 22:55:33 Done.
172 </ul>
173
174 <h1 id="what_39_s_next_">What&#39;s next?</h1>
175
176 <p>In <a href="app_codelab6_lifecycle.html">lab6_lifecycle</a>, you will learn t he basics of the Chrome app lifecycle. </p>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698