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 |