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

Side by Side Diff: src/site/docs/tutorials/fetchdata/index.markdown

Issue 27070003: removing links to github in favor of downloading a zipfile from github (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: ZIP is all caps Created 7 years, 2 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
OLDNEW
1 --- 1 ---
2 layout: default 2 layout: default
3 title: "Fetch Data Dynamically" 3 title: "Fetch Data Dynamically"
4 description: "Use HttpRequest to fetch data from a file or a server." 4 description: "Use HttpRequest to fetch data from a file or a server."
5 has-permalinks: true 5 has-permalinks: true
6 tutorial: 6 tutorial:
7 id: fetchdata 7 id: fetchdata
8 next: forms/ 8 next: forms/
9 next-title: "Get Input from a Form" 9 next-title: "Get Input from a Form"
10 prev: polymer-intro/ 10 prev: polymer-intro/
11 prev-title: "Define a Custom Element" 11 prev-title: "Define a Custom Element"
12 --- 12 ---
13 13
14 {% capture whats_the_point %} 14 {% capture whats_the_point %}
15 15
16 * Data on the web is often formatted in JSON. 16 * Data on the web is often formatted in JSON.
17 * JSON is text based and human readable. 17 * JSON is text based and human readable.
18 * The dart:convert library provides support for JSON. 18 * The dart:convert library provides support for JSON.
19 * Use HttpRequest to dynamically load data. 19 * Use HttpRequest to dynamically load data.
20 20
21 {% endcapture %} 21 {% endcapture %}
22 22
23 {% capture sample_links %} 23 {% capture sample_links %}
24 24
25 <p> This tutorial features these examples:</p>
26 * its_all_about_you
27 * portmanteaux_simple
28 * portmanteaux
29
25 <p> 30 <p>
26 Get the source code for the samples featured in this tutorial:</p> 31 Don't have the source code?
27 32 <a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip" >
28 <ul> 33 Download it.
29 <li> 34 </a>
30 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /fetchdata/its_all_about_you"
31 target="_blank">its_all_about_you</a>
32 </li>
33 <li>
34 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /fetchdata/portmanteaux_simple"
35 target="_blank">portmanteaux_simple</a>
36 </li>
37 <li>
38 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /fetchdata/portmanteaux"
39 target="_blank">portmanteaux</a>
40 </li>
41 </ul>
42 35
43 {% endcapture %} 36 {% endcapture %}
44 37
45 {% capture content %} 38 {% capture content %}
46 39
47 <div class="tute-target-title"> 40 <div class="tute-target-title">
48 <h1>{{page.title}}</h1> 41 <h1>{{page.title}}</h1>
49 <h3>Get data from a file or server.</h3> 42 <h3>Get data from a file or server.</h3>
50 </div> 43 </div>
51 44
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
87 The app running below, `its_all_about_you`, 80 The app running below, `its_all_about_you`,
88 displays the JSON string for data of various types. 81 displays the JSON string for data of various types.
89 Change the values of the input elements 82 Change the values of the input elements
90 and check out the JSON format for each data type. 83 and check out the JSON format for each data type.
91 84
92 <iframe class="running-app-frame" 85 <iframe class="running-app-frame"
93 style="height:500px;width:700px;" 86 style="height:500px;width:700px;"
94 src="examples/its_all_about_you/out/web/index.html"> 87 src="examples/its_all_about_you/out/web/index.html">
95 </iframe> 88 </iframe>
96 89
97 The complete source code is available on github:
98 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/fet chdata/its_all_about_you"
99 target="_blank">its_all_about_you</a>.
100
101 The dart:convert library contains two convenient functions 90 The dart:convert library contains two convenient functions
102 for working with JSON strings: 91 for working with JSON strings:
103 92
104 | dart:convert function | Description | 93 | dart:convert function | Description |
105 |---|---| 94 |---|---|
106 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.deco de()</a> | Builds Dart objects from a string containing JSON data. | 95 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.deco de()</a> | Builds Dart objects from a string containing JSON data. |
107 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.enco de()</a> | Serializes a Dart object into a JSON string. | 96 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.enco de()</a> | Serializes a Dart object into a JSON string. |
108 {: .table} 97 {: .table}
109 98
110 To use these functions, 99 To use these functions,
(...skipping 171 matching lines...) Expand 10 before | Expand all | Expand 10 after
282 the app makes a GET request of the server 271 the app makes a GET request of the server
283 and loads the file. 272 and loads the file.
284 273
285 **Try it!** Click the button. 274 **Try it!** Click the button.
286 275
287 <iframe class="running-app-frame" 276 <iframe class="running-app-frame"
288 style="height:400px;width:300px;" 277 style="height:400px;width:300px;"
289 src="examples/portmanteaux_simple/portmanteaux_simple.html"> 278 src="examples/portmanteaux_simple/portmanteaux_simple.html">
290 </iframe> 279 </iframe>
291 280
292 You can find the complete source code for this sample on github at
293 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/fet chdata/portmanteaux_simple/"
294 target="_blank">portmanteaux_simple</a>.
295
296 This program uses a convenience method, 281 This program uses a convenience method,
297 `getString()`, 282 `getString()`,
298 provided by the HttpRequest class 283 provided by the HttpRequest class
299 to request the file from the server. 284 to request the file from the server.
300 285
301 ![Use the getString() function to make a request](images/getstringfunction.png) 286 ![Use the getString() function to make a request](images/getstringfunction.png)
302 287
303 The getString() method uses a Future object to handle the request. 288 The getString() method uses a Future object to handle the request.
304 You can use the code above as an idiom 289 You can use the code above as an idiom
305 and provide your own code for the body of the processString() function 290 and provide your own code for the body of the processString() function
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after
361 ##Using an HttpRequest object to load a file {#making-a-get-request} 346 ##Using an HttpRequest object to load a file {#making-a-get-request}
362 347
363 The getString() method is good for an HTTP GET request that returns 348 The getString() method is good for an HTTP GET request that returns
364 a string loaded from the resource. 349 a string loaded from the resource.
365 For different cases, 350 For different cases,
366 you need to create an HttpRequest object, 351 you need to create an HttpRequest object,
367 configure its header and other information, 352 configure its header and other information,
368 and use the `send()` method to make the request. 353 and use the `send()` method to make the request.
369 354
370 This section looks at a new 355 This section looks at a new
371 version of the portmanteaux example 356 version of the portmanteaux example,
357 called portmanteaux,
372 that has been rewritten 358 that has been rewritten
373 to use an explicitly constructed HttpRequest object. 359 to use an explicitly constructed HttpRequest object.
374 You can find the complete source code for the modified version
375 on github at
376 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/fet chdata/portmanteaux/"
377 target="_blank">portmanteaux</a>.
378 360
379 ###Setting up the HttpRequest object 361 ###Setting up the HttpRequest object
380 362
381 The mouse-click handler for the button 363 The mouse-click handler for the button
382 creates an HttpRequest object, 364 creates an HttpRequest object,
383 configures it with a URI and callback function, 365 configures it with a URI and callback function,
384 and then sends the request. 366 and then sends the request.
385 Let's take a look at the Dart code: 367 Let's take a look at the Dart code:
386 368
387 ![Making an HTTP GET request](images/portmanteaux-code.png) 369 ![Making an HTTP GET request](images/portmanteaux-code.png)
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
426 the code easily converts the JSON-formatted list of words 408 the code easily converts the JSON-formatted list of words
427 to a Dart list of strings, 409 to a Dart list of strings,
428 creates a new LIElement for each one, 410 creates a new LIElement for each one,
429 and adds it to the &lt;ul&gt; element on the page. 411 and adds it to the &lt;ul&gt; element on the page.
430 412
431 ![Getting the response text from an HTTP GET request](images/portmanteaux-callba ck.png) 413 ![Getting the response text from an HTTP GET request](images/portmanteaux-callba ck.png)
432 414
433 ###Populating the UI from JSON 415 ###Populating the UI from JSON
434 416
435 The data file in the portmanteaux example, 417 The data file in the portmanteaux example,
436 <a href="https://github.com/dart-lang/dart-tutorials-samples/master/web/fetchdat a/portmanteaux/web/portmanteaux.json" 418 portmanteaux.json,
437 target="_blank">portmanteaux.json</a>,
438 contains a JSON-formatted list of strings. 419 contains a JSON-formatted list of strings.
439 420
440 {% highlight dart %} 421 {% highlight dart %}
441 [ 422 [
442 "portmanteau", "fantabulous", "spork", "smog", 423 "portmanteau", "fantabulous", "spork", "smog",
443 "spanglish", "gerrymander", "turducken", "stagflation", 424 "spanglish", "gerrymander", "turducken", "stagflation",
444 "Brangelina", "freeware", "oxbridge", "palimony", 425 "Brangelina", "freeware", "oxbridge", "palimony",
445 "brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank" 426 "brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank"
446 ] 427 ]
447 {% endhighlight %} 428 {% endhighlight %}
(...skipping 20 matching lines...) Expand all
468 The next tutorial, 449 The next tutorial,
469 [Get Input from a Form](/docs/tutorials/forms/), 450 [Get Input from a Form](/docs/tutorials/forms/),
470 contains a client/server example that 451 contains a client/server example that
471 shows you how to use a form to get data from the user, 452 shows you how to use a form to get data from the user,
472 and using JSON, send that form to a server, 453 and using JSON, send that form to a server,
473 and handle the server's response. 454 and handle the server's response.
474 455
475 {% endcapture %} 456 {% endcapture %}
476 457
477 {% include tutorial.html %} 458 {% include tutorial.html %}
OLDNEW
« no previous file with comments | « src/site/docs/tutorials/connect-dart-html/index.markdown ('k') | src/site/docs/tutorials/forms/index.markdown » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698