Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Updates to Dart guide chapter 3 #42

Closed
wants to merge 1 commit into from
Closed

Updates to Dart guide chapter 3 #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified public/docs/dart/latest/guide/user-input-example1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
225 changes: 151 additions & 74 deletions public/docs/dart/latest/guide/user-input.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,79 @@
.l-main-section
p.
You can make your application respond to user input by associating events with functions in your controller
using the event syntax using <strong>()</strong> to surround the name of an event.
Use the event syntax <strong>(<em>eventName</em>)</strong> to
make your application respond to user input.
p.
For a particular control like an input you can have it call methods on your controller on keyup event like so:
You can specify the event handler—a method in the component controller—like this:

pre.prettyprint.lang-html
code.
&lt;input (keyup)="myControllerMethod()"&gt;
p.
As in previous examples, you can make element references available to other parts of the template as a local
variable using the # syntax. With this and events, we can do the old "update text as you type" example:
As in previous examples, you can make element references available to
other parts of the template as a local
variable using the <b>#</b> syntax.
Using <code>#</code> and events,
you can write the old "update text as you type" example:
<!-- PENDING: make sure we use recommended word separation scheme.
my-name doesn't work, but my_name does. Would myName work? -->

pre.prettyprint.lang-html
code.
&lt;input #my-name (keyup)&gt;
&lt;p&gt;{{my-name.value}}&lt;/p&gt;
&lt;input #myname (keyup)&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;

p.text-body(ng-non-bindable).
The <code>#my-name</code> creates a local variable in the template that we'll refer to below in the
<code>&lt;p&gt;</code> element. The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
event. And the <code>{{my-name.value}}</code> binds the text node of the <code>&lt;p&gt;</code> element to the
In that example, <code>#myname</code> creates a local variable in the template that
the <code>&lt;p&gt;</code> element can refer to.
The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
event. And <code>{{myname.value}}</code> binds the text node of the
<code>&lt;p&gt;</code> element to the
input's value property.
p Let's do something a little more complex where users enter items and add them to a list like this:

p.
Let's do something a little more complex, where the user enters items
that the app adds to a list:
figure.image-display
img(src='user-input-example1.png')


.l-main-section
h2#section-create-an-array-property Create an array property
h2#section-create-an-array-property Create a list property
p.
With the default bootstrapping in place, create a TodoController class that will manage interactions with the
list. Inside TodoController, add an array with an initial list of items. Then add a method that pushes new items
on the array when called.
With the default files in place,
create a TodoController class to manage interactions with the
list. Inside TodoController, add a list with some initial items.
Then add a method that adds new items
to the list.

pre.prettyprint.linenums.lang-dart
pre.prettyprint.lang-dart
code.
class TodoList {
List&lt;String&gt; todos =
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];

addTodo(String todo) {
todos.add(todo);
}
}
}

.callout.is-helpful
header Production Best Practice
p.
As with the previous example, in a production application you will separate your model out into another class
and inject it into <code>TodoController</code>. We've omitted it here for brevity.
As shown in the previous example, a production application you would
separate the model out into another class
and inject it into <code>TodoController</code>.
We've omitted that here for brevity.

<br><br><!-- PENDING: fix formatting of main sections after callouts -->

.l-main-section
h2#section-display-the-list-of-todos Display the list of todos
p.
Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos array and set
Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos list and set
its text to the value.

pre.prettyprint.linenums.lang-html
pre.prettyprint.lang-html
code.
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
Expand All @@ -74,64 +91,124 @@
code.
&lt;input #todotext&gt;
p.
Lastly, specify the target of the click event binding as your controller's <code>addTodo()</code> method and pass
it the value. Since you created a reference called <code>todotext</code>, you can get the value with
<code>todotext.value.</code>
Specify the target of the click event binding as your controller's
<code>addTodo()</code> method and pass
it the value. Since you created a reference called <code>todotext</code>,
you can get the value with <code>todotext.value.</code>

pre.prettyprint.lang-html
code.
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;

p And then create the doneTyping() method on TodoList and handle adding the todo text.
p.
To make pressing Enter do something useful,
you can add a keyup event handler to the input field.
This event handler needs to use APIs defined in
<a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>,
so be sure to import that library.

.code-box
pre.prettyprint.lang-dart(data-name="todo_list.dart")
code.
&lt;input #todotext (keyup)="doneTyping($event)">
...
doneTyping(KeyboardEvent event) {
if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target;
addTodo(e.value);
e.value = null;
}
}
pre.prettyprint.lang-dart(data-name="main.dart")
code.
library user_input;

import 'dart:html';
...

pre.prettyprint.lang-dart
code.
doneTyping(KeyboardEvent event) {
if (event.which == 13) {
InputElement e = event.target;
addTodo(e.value);
e.value = null;
}
}

.l-main-section
h2#section-final-code Final Code
p Here's the final <code>todo_list.dart</code>
pre.prettyprint.lang-dart
code.
part of user_input;

@Component(
selector: 'todo-list'
)
@View(
// Without r before ''' (a raw string), $event breaks Angular!
// An alternative is to use \$event instead.
template: '''
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;

&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
''',
directives: const[For]
)
class TodoList {
List&lt;String&gt; todos =
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];

addTodo(String todo) {
todos.add(todo);
}

doneTyping(KeyboardEvent event) {
if (event.which == 13) {
InputElement e = event.target;
addTodo(e.value);
e.value = null;
}
}
}
h2#section-final-code Final code

.code-box
pre.prettyprint.lang-dart(data-name="todo_list.dart")
code.
// web/todo_list.dart
part of user_input;

@Component(
selector: 'todo-list'
)
@View(
// Without r before ''' (a raw string), $event breaks Angular.
// An alternative to a raw string is to use \$event instead.
template: '''
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;

&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
''',
directives: const[For]
)
class TodoList {
List&lt;String&gt; todos =
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];

addTodo(String todo) {
todos.add(todo);
}

doneTyping(KeyboardEvent event) {
if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target;
addTodo(e.value);
e.value = null;
}
}
}
pre.prettyprint.lang-dart(data-name="main.dart")
code.
// web/main.dart
library user_input;

import 'dart:html';

import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;

part 'todo_list.dart';

main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(TodoList);
}
pre.prettyprint.lang-html(data-name="html")
code.
&lt;!-- web/index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;todo-list&gt;&lt;/todo-list&gt;

&lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
pre.prettyprint.lang-yaml(data-name="yaml")
code.
# pubspec.yaml
name: user_input
description: Dart version of Angular 2 example, Responding to User Input
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.20
browser: any