| OLD | NEW |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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  | 336  |
| 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 Loading... |
| 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 Loading... |
| 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 %} |
| OLD | NEW |