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

Unified Diff: src/site/docs/tutorials/forms/index.markdown

Issue 26922002: removing Web UI tutorials, updating remaining 4 to current release, + review pass (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: merge with master 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 side-by-side diff with in-line comments
Download patch
Index: src/site/docs/tutorials/forms/index.markdown
diff --git a/src/site/docs/tutorials/forms/index.markdown b/src/site/docs/tutorials/forms/index.markdown
index 1059a55c0dff97c6cebb0b7cce5f10631cf2a545..b5444b573fa9a2d49543cb0a58def9dab4a9a63c 100644
--- a/src/site/docs/tutorials/forms/index.markdown
+++ b/src/site/docs/tutorials/forms/index.markdown
@@ -69,6 +69,15 @@ several classes from the core Dart library,
including streams, Futures, HttpRequest, and so on.
The server uses CORS headers to allow cross-origin requests.
+<aside class="alert alert-info" markdown="1">
+ <strong>Note:</strong>
+ This tutorial assumes that you have read
+ [Define a Custom Elment](/docs/tutorials/polymer-intro/)
+ and [Fetch Data Dynamically](/docs/tutorials/fetchdata/)
+ and are familiar with Polymer, JSON, and HttpRequest.
+</aside>
+
+
* [About forms, generally](#about-forms)
* [About the slambook example, specifically](#about-the-slambook-example)
* [Submitting a form](#submitting-a-form)
@@ -78,8 +87,9 @@ The server uses CORS headers to allow cross-origin requests.
* [Setting CORS headers](#setting-cors-headers)
* [Handling POST requests](#handling-post-requests)
* [Recipe for client-server web apps](#recipe)
-* [Binding data to different kinds of inputs](#binding-data)
+* [Two-way data binding using Polymer](#binding-data)
* [Other resources](#other-resources)
+* [What next?](#what-next)
##About forms, generally {#about-forms}
@@ -92,18 +102,17 @@ programmatically.
Let's begin with a basic, HTML-only form to learn a little bit about
action, method, input elements, and the default behavior of forms.
-The search_form app running below provides a useful form that
-you can add to your website pages.
-It uses Google to search the specified website
-if the checkbox is selected,
-or the web if it is not,
+The form below uses Google to search the website
+specified in the &lt;form&gt; tag
+if the checkbox is selected
+(or the web if it is not),
for the text entered by the user.
In this example,
called `search_form`,
the default is to search
[dartlang.org](http://www.dartlang.org)
for "Cookbook",
-another useful resource for learning about Dart.
+a useful resource for learning about Dart.
<iframe class="running-app-frame"
style="height:100px;width:500px;"
@@ -208,11 +217,11 @@ running from a different origin.
the client program,
called `slambook`,
provides a form into which users can enter some information.
-It uses Polymer data binding to bind the input data to Dart variables.
+It uses Polymer two-way data binding to bind the input data to Dart variables.
When the user clicks the submit button,
the Dart code formats the data into a JSON string,
-sends it to slambookserver using an OPTIONS request to
-get access first and then a POST request to send the data.
+sends an OPTIONS request to get permission from the server,
+and then a POST request to send the data.
When the response from the server is ready,
the client displays it.
@@ -284,7 +293,7 @@ On the server side, the sections cover
##Submitting a form
-Let's first take a look at how that data is submitted to the server.
+Let's first take a look at how the data is submitted to the server.
Recall that the search_form example relies on the `action` and
`method` attributes to set the destination and method for the form request.
@@ -302,17 +311,18 @@ the automatic behavior of the submit button.
with help from the Dart libraries.
The form in the slambook example is
-a custom element called `x-slambook-form`
+a custom element called `tute-slambook-form`
that's instantiated with this HTML code:
{% prettify html %}
<div class="container">
- <form is="x-slambook-form" id="slambookform"></form>
+ <form is="tute-slambook-form" id="slambookform"></form>
</div>
{% endprettify %}
Note the absence of either an `action` or a `method` attribute.
-Instead, the behavior for the submit button is coded in Dart.
+Instead, the behavior for the submit button is coded in a Dart
+mouse click handler.
Below is the HTML code that creates the submit button
and binds it to a Dart mouse click handler.
@@ -431,7 +441,8 @@ First the code checks whether the request is complete and successful.
If it is, the code puts the server's response in a string,
called `serverResponse`, which is bound to the value of a textarea
in the slambook app's UI.
-When the string changes, the UI is automatically updated.
+When the string changes, the UI is automatically updated,
+and the message is displayed for the user.
If the request is complete but unsuccessful,
the program sets `serverResponse` to an error message,
@@ -439,13 +450,10 @@ thus displaying it to the user.
##Resetting a form
-The reset button is a special input type that, by default,
+The reset button is a special HTML input type that, by default,
clears the values of all inputs within the form.
-Currently,
-this automatic behavior clears the input elements
-as expected,
-but any bound Dart values do not get updated.
-
+Instead, we want the button to reset the values in the form
+to their initial value.
So, the mouse click handler for the reset button
needs to suppress the automatic behavior
and reset the form with neutral data explicitly.
@@ -466,7 +474,7 @@ void resetForm(Event e) {
theData['catOrDog'] = 'cat';
theData['music'] = 0;
theData['zombies'] = false;
- serverResponse = "Data cleared.";
+ serverResponse = "Data reset.";
}
{% endprettify %}
@@ -514,7 +522,7 @@ The second, `printError`, is called if the binding fails.
An error might occur if, for example,
another program is already listening on the same port.
-The code for gotMessage(), shown below, triages the request
+The code for gotMessage(), shown below, filters the request
and calls other methods to handle each specific kind of request.
{% prettify dart %}
@@ -535,9 +543,10 @@ void gotMessage(_server) {
}
{% endprettify %}
-To handle other types of requests,
-you could simply add more `case` statements.
-For example, `case 'GET'` for HTTP GET requests.
+To handle other types of requests
+such as `GET` requests,
+you could simply add more `case` statements,
+such as `case 'GET'`.
###About Futures, briefly
@@ -562,7 +571,7 @@ two things happen:
and returns an uncompleted Future object immediately.
</li>
<li>
- Later, when a value is available,
+ Later, when the value is available,
the Future object completes with that value or with an error.
</li>
</ul>
@@ -745,23 +754,26 @@ and one in dart:io (for servers).
| <a href="https://api.dartlang.org/dart_io/HttpResponse.html" target="_blank">HttpResponse</a> | dart:io | Server-side object to carry response to client requests |
| <a href="https://api.dartlang.org/dart_async/Stream.html" target="_blank">Streams</a> | dart:async | A stream of data |
| <a href="https://api.dartlang.org/dart_async/Future.html" target="_blank">Future</a> | dart:async | A way to get a value asynchronously |
-| <a href="https://api.dartlang.org/dart_json.html" target="_blank">stringify()</a> | dart:json | How you format an object into a JSON string |
+| <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 JSON string |
| <a href="https://api.dartlang.org/polymer.html" target="_blank">Polymer</a> | Polymer | Custom elements, data binding, templates |
{: .table}
-##Binding data to different kinds of inputs {#binding-data}
+##Two-way data binding using Polymer {#binding-data}
-The slambook sample uses Polymer to
+The slambook sample uses Polymer's two-way data binding to
bind the values of input elements to Dart variables.
If the user changes the value in an input element,
the bound variable in the Dart code automatically changes.
Or if the Dart code changes the value of the bound variable,
the UI automatically updates.
[Define a Custom Element](/docs/tutorials/polymer-intro/)
-provides introductory details
-about data binding with Polymer.
+provides introductory details about Polymer and
+about data binding.
-With this example,
+The example also uses declarative event handler mapping to hook
+event handler functions to input elements.
+
+With the slambook example,
you can see two-way data binding used with a variety of input elements,
including new HTML5 elements.
This table summarizes the two-way data binding attributes
@@ -769,19 +781,19 @@ you can use with Polymer:
| Attribute | Dart type | Input element |
|---|---|
-| bind-value | String | any <br>with special considerations for elements <br> that allow multiple selection,<br> such as a group of radio buttons and &lt;select&gt; elements |
-| bind-selected-index | integer | a &lt;select&gt; element in which only one choice is allowed |
-| bind-checked | bool | individual radio buttons or checkboxes |
-{: .table .nowraptable}
+| value | String | any |
+| selectedIndex | integer | a &lt;select&gt; element in which only one choice is allowed |
+| checked | bool | individual radio buttons or checkboxes |
+{: .table}
-###Using bind-value with any input element
+###Using value with any input element
-The `bind-value` attribute works with any input element
+The `value` attribute works with any input element
and binds the value to a Dart string.
-This example uses `bind-value` with a text field, a text area,
+This example uses `value` with a text field, a text area,
a color picker, a date chooser, and a range element.
-![Two-way data binding with bind-value and strings](images/bind-value.png)
+![Two-way data binding with value and strings](images/bind-value.png)
(Note that some surrounding code,
such as that for the labels,
@@ -793,13 +805,13 @@ to make the bindings.
The map contains a key-value pair for each input element,
where the key is a string.
-The values in the map can be of any type
-but the values for elements bound with `bind-value` are all strings.
+The values for elements bound with `value` are all strings.
The HTML refers to the items in the map
using their Dart names (identifiers).
For example, the value of the color picker is bound to
`theData['favoriteColor']`.
+{% comment %}
####Special case: Using bind-value with a group of radio buttons
The slambook form contains three radio buttons,
@@ -812,7 +824,6 @@ the bound string reflects the value of the entire group.
![bind-value with a group of radio buttons](images/radio-bindings.png)
-{% comment %}
####Special case: Not using bind-value with a multiple select element
By default a &lt;select&gt; element allows
@@ -909,25 +920,25 @@ the `books` map, because the getter uses the map.
When `books` changes, the UI updates the unnumbered list of selected books.
{% endcomment %}
-###Using bind-selected-index with a pull-down menu
+###Using selectedIndex with a pull-down menu
A &lt;select&gt; element contains one or more &lt;option&gt; elements,
only one of which, by default, can be selected at a time.
A single-select element is usually implemented as a pull-down menu.
-You can use the `bind-selected-index` attribute
+You can use the `selectedIndex` attribute
to bind a Dart integer to a pull-down menu.
The integer indicates the index of the selected item.
Indices begin at 0.
-![bind-selected-index with a single-selection pull-down menu](images/bind-selected.png)
+![The selectedIndex attribute with a single-selection pull-down menu](images/bind-selected.png)
-###Using bind-checked with checkboxes
+###Using checked with checkboxes
-You can use the `bind-checked` attribute
+You can use the `checked` attribute
to bind a Dart boolean to a single checkbox.
Here each checkbox is bound to a separate boolean value within a map.
-![bind-checked with individual checkboxes](images/bind-checked.png)
+![The checked attribute with individual checkboxes](images/bind-checked.png)
##Other resources
@@ -954,10 +965,10 @@ Here each checkbox is bound to a separate boolean value within a map.
###What next?
-Try our
-<a href="/codelabs/web-ui-writer/index.html" target="_blank"><i class="icon-beaker"> </i>Codelab</a>.
-In this step-by-step guide, you’ll build a simple,
-single­-page, modern web app for desktop and mobile.
+The next tutorial,
+[Use IndexedDB](/docs/tutorials/indexeddb),
+describes how to save data on the client
+in the browser's Indexed Database.
{% endcapture %}
« no previous file with comments | « src/site/docs/tutorials/forms/images/radio-bindings.png ('k') | src/site/docs/tutorials/get-started/index.markdown » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698