| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 description: "A beginner's guide to building web apps with Dart." | 3 description: "A beginner's guide to building web apps with Dart." |
| 4 has-permalinks: true | 4 has-permalinks: true |
| 5 rel: | 5 rel: |
| 6 author: | 6 author: |
| 7 - mary-campione | 7 - mary-campione |
| 8 tutorial: | 8 tutorial: |
| 9 id: tut-home | 9 id: tut-home |
| 10 article: | 10 article: |
| 11 written_on: 2012-10-01 | 11 written_on: 2012-10-01 |
| 12 updated_on: 2013-07-01 | 12 updated_on: 2013-07-01 |
| 13 collection: everyday-dart | 13 collection: everyday-dart |
| 14 next: get-started | 14 next: get-started/ |
| 15 next-title: "Get Started" | 15 next-title: "Get Started" |
| 16 --- | 16 --- |
| 17 | 17 |
| 18 {% capture content %} | 18 {% capture content %} |
| 19 | 19 |
| 20 <img src="images/banner.png"> | 20 <img src="images/banner.png"> |
| 21 | 21 |
| 22 **A Game of Darts** | 22 **A Game of Darts** |
| 23 is a collection of tutorials, _targets_, | 23 is a collection of tutorials, _targets_, |
| 24 that teaches you how to build mobile web applications | 24 that teaches you how to build mobile web applications |
| (...skipping 147 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 172 <p>Activate UI elements with loops and conditionals.</p> | 172 <p>Activate UI elements with loops and conditionals.</p> |
| 173 <img src="images/hangman-screenshot.png" width="300"> | 173 <img src="images/hangman-screenshot.png" width="300"> |
| 174 </section> | 174 </section> |
| 175 </div> | 175 </div> |
| 176 </div> <!-- end row-fluid --> | 176 </div> <!-- end row-fluid --> |
| 177 | 177 |
| 178 <div class="row-fluid"> | 178 <div class="row-fluid"> |
| 179 <!-- Custom Elements --> | 179 <!-- Custom Elements --> |
| 180 <div class="span6"> | 180 <div class="span6"> |
| 181 <section> | 181 <section> |
| 182 <h4><a href="custom-elements"><img src="images/target.png" height="20"
width="20"> Define a Custom DOM Tag</a></h4> | 182 <h4><a href="custom-elements/"><img src="images/target.png" height="20
" width="20"> Define a Custom DOM Tag</a></h4> |
| 183 <p>Create new HTML tags with custom elements.</p> | 183 <p>Create new HTML tags with custom elements.</p> |
| 184 <img src="images/convert-screenshot.png" width="300"> | 184 <img src="images/convert-screenshot.png" width="300"> |
| 185 </section> | 185 </section> |
| 186 </div> | 186 </div> |
| 187 <div class="span6"> | 187 <div class="span6"> |
| 188 </div> | 188 </div> |
| 189 </div> <!-- end row-fluid --> | 189 </div> <!-- end row-fluid --> |
| 190 </div> <!-- end WEB UI tab --> | 190 </div> <!-- end WEB UI tab --> |
| 191 | 191 |
| 192 <!-- POLYMER TAB --> | 192 <!-- POLYMER TAB --> |
| 193 <!-- | 193 <!-- |
| 194 <div class="tab-pane" id="polymer"> | 194 <div class="tab-pane" id="polymer"> |
| 195 <div class="row-fluid"> | 195 <div class="row-fluid"> |
| 196 | 196 |
| 197 <div class="span6" style="border-right:1px solid Lavender"> | 197 <div class="span6" style="border-right:1px solid Lavender"> |
| 198 <section> | 198 <section> |
| 199 <h4><a href="polymer"><img src="images/target.png" height="20" width="
20"> Polymer</a></h4> | 199 <h4><a href="polymer/"><img src="images/target.png" height="20" width=
"20"> Polymer</a></h4> |
| 200 <p>Polymer - a shiny new package!</p> | 200 <p>Polymer - a shiny new package!</p> |
| 201 <img src="images/countdown-screenshot.png" width="300"> | 201 <img src="images/countdown-screenshot.png" width="300"> |
| 202 </section> | 202 </section> |
| 203 </div> | 203 </div> |
| 204 | 204 |
| 205 <div class="span6"> | 205 <div class="span6"> |
| 206 </div> | 206 </div> |
| 207 | 207 |
| 208 </div> | 208 </div> |
| 209 </div> | 209 </div> |
| 210 --> | 210 --> |
| 211 | 211 |
| 212 <!-- FORMS TAB --> | 212 <!-- FORMS TAB --> |
| 213 <div class="tab-pane" id="forms"> | 213 <div class="tab-pane" id="forms"> |
| 214 | 214 |
| 215 Various classes in the Dart libraries help you get, send and receive, | 215 Various classes in the Dart libraries help you get, send and receive, |
| 216 and save user data. | 216 and save user data. |
| 217 You can use input elements within forms to get data from users. | 217 You can use input elements within forms to get data from users. |
| 218 You can use JSON to format data and HttpRequest to send requests and recei
ve responses. | 218 You can use JSON to format data and HttpRequest to send requests and recei
ve responses. |
| 219 And, finally, you can save data on the client with IndexedDB. | 219 And, finally, you can save data on the client with IndexedDB. |
| 220 | 220 |
| 221 <div class="row-fluid"> | 221 <div class="row-fluid"> |
| 222 | 222 |
| 223 <!-- Fetch Data --> | 223 <!-- Fetch Data --> |
| 224 <div class="span6" style="border-right:1px solid Lavender"> | 224 <div class="span6" style="border-right:1px solid Lavender"> |
| 225 <section> | 225 <section> |
| 226 <h4><a href="fetchdata"><img src="images/target.png" height="20" width
="20"> Fetch Data Dynamically</a></h4> | 226 <h4><a href="fetchdata/"><img src="images/target.png" height="20" widt
h="20"> Fetch Data Dynamically</a></h4> |
| 227 <p>Load data from a static file or from a server.</p> | 227 <p>Load data from a static file or from a server.</p> |
| 228 <img src="images/allaboutyou-screenshot.png" width="300"> | 228 <img src="images/allaboutyou-screenshot.png" width="300"> |
| 229 </section> | 229 </section> |
| 230 </div> | 230 </div> |
| 231 | 231 |
| 232 <!-- Forms --> | 232 <!-- Forms --> |
| 233 <div class="span6" style="border-right:1px solid Lavender"> | 233 <div class="span6" style="border-right:1px solid Lavender"> |
| 234 <section> | 234 <section> |
| 235 <h4><a href="forms/"><img src="images/target.png" height="20" width="2
0"> Get Input from a Form</a></h4> | 235 <h4><a href="forms/"><img src="images/target.png" height="20" width="2
0"> Get Input from a Form</a></h4> |
| 236 <p>Use forms and input elements to get data.</p> | 236 <p>Use forms and input elements to get data.</p> |
| (...skipping 16 matching lines...) Expand all Loading... |
| 253 </div> <!-- end row-fluid --> | 253 </div> <!-- end row-fluid --> |
| 254 </div> <!-- end FORMS tab --> | 254 </div> <!-- end FORMS tab --> |
| 255 | 255 |
| 256 <!-- MOBILE TAB --> | 256 <!-- MOBILE TAB --> |
| 257 <!-- | 257 <!-- |
| 258 <div class="tab-pane" id="mobile"> | 258 <div class="tab-pane" id="mobile"> |
| 259 <div class="row-fluid"> | 259 <div class="row-fluid"> |
| 260 | 260 |
| 261 <div class="span6" style="border-right:1px solid Lavender"> | 261 <div class="span6" style="border-right:1px solid Lavender"> |
| 262 <section> | 262 <section> |
| 263 <h4><a href="mobile"><img src="images/target.png" height="20" width="2
0"> Write for Mobile Devices</a></h4> | 263 <h4><a href="mobile/"><img src="images/target.png" height="20" width="
20"> Write for Mobile Devices</a></h4> |
| 264 <p>Mobile devices are taking over the world!</p> | 264 <p>Mobile devices are taking over the world!</p> |
| 265 <img src="images/countdown-screenshot.png" width="300"> | 265 <img src="images/countdown-screenshot.png" width="300"> |
| 266 </section> | 266 </section> |
| 267 </div> | 267 </div> |
| 268 | 268 |
| 269 <div class="span6"> | 269 <div class="span6"> |
| 270 </div> | 270 </div> |
| 271 | 271 |
| 272 </div> | 272 </div> |
| 273 </div> | 273 </div> |
| 274 --> | 274 --> |
| 275 | 275 |
| 276 </div> <!-- end tab content--> | 276 </div> <!-- end tab content--> |
| 277 </div> <!--end tabbable --> | 277 </div> <!--end tabbable --> |
| 278 </div> <!-- end of tute-tabs --> | 278 </div> <!-- end of tute-tabs --> |
| 279 | 279 |
| 280 {% endcapture %} | 280 {% endcapture %} |
| 281 | 281 |
| 282 {% include tutorial_main_page.html %} | 282 {% include tutorial_main_page.html %} |
| OLD | NEW |