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

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

Issue 51473002: update polymer related info to 0.8.7 (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: Created 7 years, 1 month 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: "Get Input from a Form" 3 title: "Get Input from a Form"
4 description: "Using HTML forms and input elements to send data to a server" 4 description: "Using HTML forms and input elements to send data to a server"
5 has-permalinks: true 5 has-permalinks: true
6 tutorial: 6 tutorial:
7 id: forms 7 id: forms
8 next: indexeddb/ 8 next: indexeddb/
9 next-title: "Use IndexedDB" 9 next-title: "Use IndexedDB"
10 prev: fetchdata/ 10 prev: fetchdata/
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after
62 (a form with many kinds of input elements), 62 (a form with many kinds of input elements),
63 and keep the interface in sync with Dart data. 63 and keep the interface in sync with Dart data.
64 The client and server communicate using 64 The client and server communicate using
65 several classes from the core Dart library, 65 several classes from the core Dart library,
66 including streams, Futures, HttpRequest, and so on. 66 including streams, Futures, HttpRequest, and so on.
67 The server uses CORS headers to allow cross-origin requests. 67 The server uses CORS headers to allow cross-origin requests.
68 68
69 <aside class="alert alert-info" markdown="1"> 69 <aside class="alert alert-info" markdown="1">
70 <strong>Note:</strong> 70 <strong>Note:</strong>
71 This tutorial assumes that you have read 71 This tutorial assumes that you have read
72 [Define a Custom Elment](/docs/tutorials/polymer-intro/) 72 [Define a Custom Element](/docs/tutorials/polymer-intro/)
73 and [Fetch Data Dynamically](/docs/tutorials/fetchdata/) 73 and [Fetch Data Dynamically](/docs/tutorials/fetchdata/)
74 and are familiar with Polymer, JSON, and HttpRequest. 74 and are familiar with Polymer, JSON, and HttpRequest.
75 </aside> 75 </aside>
76 76
77 77
78 * [About forms, generally](#about-forms) 78 * [About forms, generally](#about-forms)
79 * [About the slambook example, specifically](#about-the-slambook-example) 79 * [About the slambook example, specifically](#about-the-slambook-example)
80 * [Submitting a form](#submitting-a-form) 80 * [Submitting a form](#submitting-a-form)
81 * [Resetting a form](#resetting-a-form) 81 * [Resetting a form](#resetting-a-form)
82 * [Creating a server and listening on a port](#creating-a-server) 82 * [Creating a server and listening on a port](#creating-a-server)
(...skipping 147 matching lines...) Expand 10 before | Expand all | Expand 10 after
230 Enter some data and push the **Submit** button. 230 Enter some data and push the **Submit** button.
231 231
232 <iframe class="running-app-frame" 232 <iframe class="running-app-frame"
233 style="height:500px;width:525px;" 233 style="height:500px;width:525px;"
234 src="examples/slambook/out/web/slambook.html"> 234 src="examples/slambook/out/web/slambook.html">
235 </iframe> 235 </iframe>
236 236
237 <aside class="alert"> 237 <aside class="alert">
238 <strong>Version Note:</strong> The slambook app 238 <strong>Version Note:</strong> The slambook app
239 is compatible with 239 is compatible with
240 <a href="https://pub.dartlang.org/packages/polymer#versions">polymer.dart 0.8.1< /a>. 240 <a href="https://pub.dartlang.org/packages/polymer#versions">polymer.dart 0.8.7< /a>.
241 </aside> 241 </aside>
242 242
243 The request gives you an innocent stare and displays "No server" 243 The request gives you an innocent stare and displays "No server"
244 because you are not running the server on your machine. 244 because you are not running the server on your machine.
245 Let's fix that. 245 Let's fix that.
246 246
247 ###Run the server 247 ###Run the server
248 248
249 Get the source code for the basic server program, 249 Get the source code for the basic server program,
250 slambookserver.dart, 250 slambookserver.dart,
(...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after
319 {% endprettify %} 319 {% endprettify %}
320 320
321 Note the absence of either an `action` or a `method` attribute. 321 Note the absence of either an `action` or a `method` attribute.
322 Instead, the behavior for the submit button is coded in a Dart 322 Instead, the behavior for the submit button is coded in a Dart
323 mouse click handler. 323 mouse click handler.
324 Below is the HTML code that creates the submit button 324 Below is the HTML code that creates the submit button
325 and binds it to a Dart mouse click handler. 325 and binds it to a Dart mouse click handler.
326 326
327 {% prettify html %} 327 {% prettify html %}
328 <div class="submitarea"> 328 <div class="submitarea">
329 <input type="submit" value="Submit" on-click="submitForm($event)"> 329 <input type="submit" value="Submit" on-click="{%raw%}{{submitForm}}{%endraw%}" >
330 ... 330 ...
331 </div> 331 </div>
332 {% endprettify %} 332 {% endprettify %}
333 333
334 Here's the code for the submitForm() mouse click handler: 334 Here's the code for the submitForm() mouse click handler:
335 335
336 ![Making a post request](images/post-request.png) 336 ![Making a post request](images/post-request.png)
337 337
338 Let's walk through the click handler's code. 338 Let's walk through the click handler's code.
339 339
(...skipping 405 matching lines...) Expand 10 before | Expand all | Expand 10 after
745 and one in dart:io (for servers). 745 and one in dart:io (for servers).
746 746
747 | Resource | Library | Description | 747 | Resource | Library | Description |
748 |---|---| 748 |---|---|
749 | <a href="https://api.dartlang.org/dart_html/HttpRequest.html" target="_blank"> HttpRequest</a> | dart:html | Client-side HTTP request | 749 | <a href="https://api.dartlang.org/dart_html/HttpRequest.html" target="_blank"> HttpRequest</a> | dart:html | Client-side HTTP request |
750 | <a href="https://api.dartlang.org/dart_io/HttpRequest.html" target="_blank">Ht tpRequest</a> | dart:io | Server-side HTTP request | 750 | <a href="https://api.dartlang.org/dart_io/HttpRequest.html" target="_blank">Ht tpRequest</a> | dart:io | Server-side HTTP request |
751 | <a href="https://api.dartlang.org/dart_io/HttpServer.html" target="_blank">Htt pServer</a> | dart:io | Server-side object to handle HTTP communication with cli ents | 751 | <a href="https://api.dartlang.org/dart_io/HttpServer.html" target="_blank">Htt pServer</a> | dart:io | Server-side object to handle HTTP communication with cli ents |
752 | <a href="https://api.dartlang.org/dart_io/HttpResponse.html" target="_blank">H ttpResponse</a> | dart:io | Server-side object to carry response to client reque sts | 752 | <a href="https://api.dartlang.org/dart_io/HttpResponse.html" target="_blank">H ttpResponse</a> | dart:io | Server-side object to carry response to client reque sts |
753 | <a href="https://api.dartlang.org/dart_async/Stream.html" target="_blank">Stre ams</a> | dart:async | A stream of data | 753 | <a href="https://api.dartlang.org/dart_async/Stream.html" target="_blank">Stre ams</a> | dart:async | A stream of data |
754 | <a href="https://api.dartlang.org/dart_async/Future.html" target="_blank">Futu re</a> | dart:async | A way to get a value asynchronously | 754 | <a href="https://api.dartlang.org/dart_async/Future.html" target="_blank">Futu re</a> | dart:async | A way to get a value asynchronously |
755 | <a href="https://api.dartlang.org/dart_json.html" target="_blank">stringify()< /a> | dart:convert | A library with resources for converting an object into a JS ON string | 755 | <a href="https://api.dartlang.org/dart_convert.html#JSON" target="_blank">JSON </a> | dart:convert | The default implementation of a JSON converter |
756 | <a href="https://api.dartlang.org/polymer.html" target="_blank">Polymer</a> | Polymer | Custom elements, data binding, templates | 756 | <a href="https://api.dartlang.org/polymer.html" target="_blank">Polymer</a> | Polymer | Custom elements, data binding, templates |
757 {: .table} 757 {: .table}
758 758
759 ##Two-way data binding using Polymer {#binding-data} 759 ##Two-way data binding using Polymer {#binding-data}
760 760
761 The slambook sample uses Polymer's two-way data binding to 761 The slambook sample uses Polymer's two-way data binding to
762 bind the values of input elements to Dart variables. 762 bind the values of input elements to Dart variables.
763 If the user changes the value in an input element, 763 If the user changes the value in an input element,
764 the bound variable in the Dart code automatically changes. 764 the bound variable in the Dart code automatically changes.
765 Or if the Dart code changes the value of the bound variable, 765 Or if the Dart code changes the value of the bound variable,
(...skipping 194 matching lines...) Expand 10 before | Expand all | Expand 10 after
960 ###What next? 960 ###What next?
961 961
962 The next tutorial, 962 The next tutorial,
963 [Use IndexedDB](/docs/tutorials/indexeddb), 963 [Use IndexedDB](/docs/tutorials/indexeddb),
964 describes how to save data on the client 964 describes how to save data on the client
965 in the browser's Indexed Database. 965 in the browser's Indexed Database.
966 966
967 {% endcapture %} 967 {% endcapture %}
968 968
969 {% include tutorial.html %} 969 {% include tutorial.html %}
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698