OLD | NEW |
1 --- | 1 --- |
2 layout: default | 2 layout: default |
3 title: "Use Templates" | 3 title: "Use Templates" |
4 description: "Use template loops and conditionals for declarative UI creation." | 4 description: "Use template loops and conditionals for declarative UI creation." |
5 has-permalinks: true | 5 has-permalinks: true |
6 tutorial: | 6 tutorial: |
7 id: web-ui-templates | 7 id: web-ui-templates |
8 next: custom-elements | 8 next: custom-elements/ |
9 next-title: "Define a Custom DOM Tag" | 9 next-title: "Define a Custom DOM Tag" |
10 prev: web-ui | 10 prev: web-ui/ |
11 prev-title: "Get Started with Web UI" | 11 prev-title: "Get Started with Web UI" |
12 --- | 12 --- |
13 | 13 |
14 {% capture whats_the_point %} | 14 {% capture whats_the_point %} |
15 | 15 |
16 * The Web UI package implements templates in HTML. | 16 * The Web UI package implements templates in HTML. |
17 * You can conditionally activate DOM elements declaratively. | 17 * You can conditionally activate DOM elements declaratively. |
18 * Use template loops to create UI elements from a Dart Iterable. | 18 * Use template loops to create UI elements from a Dart Iterable. |
19 | 19 |
20 {% endcapture %} | 20 {% endcapture %} |
(...skipping 28 matching lines...) Expand all Loading... |
49 </div> | 49 </div> |
50 | 50 |
51 <hr> | 51 <hr> |
52 | 52 |
53 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> | 53 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> |
54 <font size="24"> | 54 <font size="24"> |
55 <i class="icon-bullhorn"> </i> | 55 <i class="icon-bullhorn"> </i> |
56 </font> | 56 </font> |
57 | 57 |
58 The Dart Web UI team recently | 58 The Dart Web UI team recently |
59 <a href="https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/6laXXxR
tA7k">announced</a> | 59 <a href="https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/6laXXxR
tA7k" target="_blank">announced</a> |
60 a port of the Polymer project: | 60 a port of the Polymer project: |
61 <a href="http://pub.dartlang.org/packages/polymer">polymer.dart</a>. | 61 <a href="https://pub.dartlang.org/packages/polymer" target="_blank">polymer.da
rt</a>. |
62 | 62 |
63 We've converted most of the tutorial Web UI examples and compiled some | 63 We've converted most of the tutorial Web UI examples and compiled some |
64 <a href="https://github.com/dart-lang/dart-tutorials-samples/blob/master/web/t
o-polymer-notes.txt" target="_blank">notes</a> | 64 <a href="https://github.com/dart-lang/dart-tutorials-samples/blob/master/web/t
o-polymer-notes.txt" target="_blank">notes</a> |
65 along the way. | 65 along the way. |
66 Here is source code for the polymer versions of the three examples from this t
arget: | 66 Here is source code for the polymer versions of the three examples from this t
arget: |
67 <ul> | 67 <ul> |
68 <li> | 68 <li> |
69 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/w
eb/target07-polymer/adlibitum" | 69 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/w
eb/target07-polymer/adlibitum" |
70 target="_blank">adlibitum</a> | 70 target="_blank">adlibitum</a> |
71 </li> | 71 </li> |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
107 ##Using conditional instantiation | 107 ##Using conditional instantiation |
108 | 108 |
109 In the example application running below, | 109 In the example application running below, |
110 you provide six words to fill in the blanks of a hidden text. | 110 you provide six words to fill in the blanks of a hidden text. |
111 Try it! Type six items into the input fields. | 111 Try it! Type six items into the input fields. |
112 The results appear only after you have entered a value for all six items. | 112 The results appear only after you have entered a value for all six items. |
113 After you've entered all six items, delete one. The paragraph disappears. | 113 After you've entered all six items, delete one. The paragraph disappears. |
114 | 114 |
115 <iframe class="running-app-frame" | 115 <iframe class="running-app-frame" |
116 style="height:300px;width:300px;" | 116 style="height:300px;width:300px;" |
117 src="http://dart-lang.github.com/dart-tutorials-samples/web/target07/adl
ibitum/web/out/adlibitum.html"> | 117 src="http://dart-lang.github.io/dart-tutorials-samples/web/target07/adli
bitum/web/out/adlibitum.html"> |
118 </iframe> | 118 </iframe> |
119 | 119 |
120 You can find the complete source code for this sample on github at | 120 You can find the complete source code for this sample on github at |
121 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get07/adlibitum" target="_blank">adlibitum</a>. | 121 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get07/adlibitum" target="_blank">adlibitum</a>. |
122 | 122 |
123 The sample uses a template conditional | 123 The sample uses a template conditional |
124 to display the paragraphs under the input fields. | 124 to display the paragraphs under the input fields. |
125 | 125 |
126  | 126  |
127 | 127 |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
166 in which some of the text is bound to the values in input fields. | 166 in which some of the text is bound to the values in input fields. |
167 | 167 |
168 ##Using iteration with templates | 168 ##Using iteration with templates |
169 | 169 |
170 The sample running below | 170 The sample running below |
171 is a simplified version of the children's hangman game. | 171 is a simplified version of the children's hangman game. |
172 Try it! Type letters in the field to guess the word. | 172 Try it! Type letters in the field to guess the word. |
173 | 173 |
174 <iframe class="running-app-frame" | 174 <iframe class="running-app-frame" |
175 style="height:250px;width:300px;" | 175 style="height:250px;width:300px;" |
176 src="http://dart-lang.github.com/dart-tutorials-samples/web/target07/sim
plehangman/web/out/simplehangman.html"> | 176 src="http://dart-lang.github.io/dart-tutorials-samples/web/target07/simp
lehangman/web/out/simplehangman.html"> |
177 </iframe> | 177 </iframe> |
178 | 178 |
179 You can find the complete source code for this sample on github at | 179 You can find the complete source code for this sample on github at |
180 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get07/simplehangman" target="_blank">simplehangman</a>. | 180 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get07/simplehangman" target="_blank">simplehangman</a>. |
181 | 181 |
182 The hangman example uses template iteration in two places: | 182 The hangman example uses template iteration in two places: |
183 to reveal the correctly guessed letters in the | 183 to reveal the correctly guessed letters in the |
184 hyphenated version of the hidden word | 184 hyphenated version of the hidden word |
185 and to display the list of incorrectly guessed letters. | 185 and to display the list of incorrectly guessed letters. |
186 | 186 |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
219 The following diagram shows the relationship between | 219 The following diagram shows the relationship between |
220 the Dart code, the HTML code, and the UI | 220 the Dart code, the HTML code, and the UI |
221 that manages the list of incorrectly guessed letters. | 221 that manages the list of incorrectly guessed letters. |
222 | 222 |
223  | 223  |
224 | 224 |
225 The <template> tag has an attribute called `iterate`. | 225 The <template> tag has an attribute called `iterate`. |
226 The value of this attribute takes the form | 226 The value of this attribute takes the form |
227 <code><em>loopvar</em> in <em>iterable</em></code>, | 227 <code><em>loopvar</em> in <em>iterable</em></code>, |
228 where _iterable_ is a Dart expression that evaluates to an | 228 where _iterable_ is a Dart expression that evaluates to an |
229 <a href="http://api.dartlang.org/dart_core/Iterable.html" | 229 <a href="https://api.dartlang.org/dart_core/Iterable.html" |
230 target="_blank">Iterable</a> | 230 target="_blank">Iterable</a> |
231 object. | 231 object. |
232 The template iterates over the iterable object | 232 The template iterates over the iterable object |
233 and assigns each value to _loopvar_, | 233 and assigns each value to _loopvar_, |
234 a new variable that is in scope for the body of the template iterate element. | 234 a new variable that is in scope for the body of the template iterate element. |
235 The HTML code for this example | 235 The HTML code for this example |
236 uses one-way data binding to embed | 236 uses one-way data binding to embed |
237 the value of `wrongchar` in the page, | 237 the value of `wrongchar` in the page, |
238 thus displaying a list of characters. | 238 thus displaying a list of characters. |
239 | 239 |
240 ##Using iteration with other elements {#as-attributes} | 240 ##Using iteration with other elements {#as-attributes} |
241 | 241 |
242 The simplehangman example used the iterate attribute on a template node. | 242 The simplehangman example used the iterate attribute on a template node. |
243 You can use `template iterate` as an attribute on any type of element. | 243 You can use `template iterate` as an attribute on any type of element. |
244 This is particularly useful in tables | 244 This is particularly useful in tables |
245 because you cannot use templates in tables. | 245 because you cannot use templates in tables. |
246 In the future, the Web UI team intends to remove the extra `template` | 246 In the future, the Web UI team intends to remove the extra `template` |
247 attribute, and you will be able to use just `iterate` directly | 247 attribute, and you will be able to use just `iterate` directly |
248 on elements as well as on templates. | 248 on elements as well as on templates. |
249 | 249 |
250 Here's a new version of the hangman example. | 250 Here's a new version of the hangman example. |
251 Try it! Guess the word. | 251 Try it! Guess the word. |
252 | 252 |
253 <iframe class="running-app-frame" | 253 <iframe class="running-app-frame" |
254 style="height:250px;width:350px;" | 254 style="height:250px;width:350px;" |
255 src="http://dart-lang.github.com/dart-tutorials-samples/web/target07/han
gman/web/out/hangman.html"> | 255 src="http://dart-lang.github.io/dart-tutorials-samples/web/target07/hang
man/web/out/hangman.html"> |
256 </iframe> | 256 </iframe> |
257 | 257 |
258 You can find the complete source code for this sample on github at | 258 You can find the complete source code for this sample on github at |
259 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get07/hangman" target="_blank">hangman</a>. | 259 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get07/hangman" target="_blank">hangman</a>. |
260 | 260 |
261 The gallows is displayed using a table. | 261 The gallows is displayed using a table. |
262 The table uses `template iterate` as an attribute on | 262 The table uses `template iterate` as an attribute on |
263 the table body and on the table row to | 263 the table body and on the table row to |
264 display the characters in the hangman display. | 264 display the characters in the hangman display. |
265 | 265 |
(...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
334 Sigmund Cherem's article, | 334 Sigmund Cherem's article, |
335 <a href="/articles/dart-web-components/">Web UI Package</a>, | 335 <a href="/articles/dart-web-components/">Web UI Package</a>, |
336 contains several interactive examples on the page | 336 contains several interactive examples on the page |
337 and the corresponding source code. | 337 and the corresponding source code. |
338 </li> | 338 </li> |
339 </ul> | 339 </ul> |
340 | 340 |
341 {% endcapture %} | 341 {% endcapture %} |
342 | 342 |
343 {% include tutorial.html %} | 343 {% include tutorial.html %} |
OLD | NEW |