| 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 |