| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Target 7: Use <template>" | 3 title: "Target 7: Use <template>" |
| 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 --- | 8 --- |
| 9 | 9 |
| 10 {% capture whats_the_point %} | 10 {% capture whats_the_point %} |
| 11 | 11 |
| 12 * The Web UI package implements templates in HTML. | 12 * The Web UI package implements templates in HTML. |
| 13 * You can conditionally activate DOM elements declaratively. | 13 * You can conditionally activate DOM elements declaratively. |
| 14 * Use template loops to create UI elements from a Dart Iterable. | 14 * Use template loops to create UI elements from a Dart Iterable. |
| 15 | 15 |
| 16 {% endcapture %} | 16 {% endcapture %} |
| 17 | 17 |
| 18 {% capture sample_links %} | 18 {% capture sample_links %} |
| 19 | 19 |
| 20 <p> | 20 <p> |
| 21 Get the source code for the samples featured in this target:</p> | 21 Get the source code for the samples featured in this target:</p> |
| 22 | 22 |
| 23 <ul> | 23 <ul> |
| 24 <li> | 24 <li> |
| 25 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target07/adlibitum" | 25 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target07/adlibitum" |
| 26 target="_blank">adlibitum</a> | 26 target="_blank">adlibitum</a> (web_ui) |
| 27 </li> |
| 28 <li> |
| 29 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target07-polymer/adlibitum" |
| 30 target="_blank">adlibitum</a> (polymer) |
| 27 </li> | 31 </li> |
| 28 <li> | 32 <li> |
| 29 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target07/simplehangman" | 33 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target07/simplehangman" |
| 30 target="_blank">simplehangman</a> | 34 target="_blank">simplehangman</a> (web_ui) |
| 35 </li> |
| 36 <li> |
| 37 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target07-polymer/simplehangman" |
| 38 target="_blank">simplehangman</a> (polymer) |
| 31 </li> | 39 </li> |
| 32 <li> | 40 <li> |
| 33 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target07/hangman" | 41 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target07/hangman" |
| 34 target="_blank">hangman</a> | 42 target="_blank">hangman</a> (web_ui) |
| 43 </li> |
| 44 <li> |
| 45 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target07-polymer/hangman" |
| 46 target="_blank">hangman</a> (polymer) |
| 35 </li> | 47 </li> |
| 36 </ul> | 48 </ul> |
| 37 | 49 |
| 38 {% endcapture %} | 50 {% endcapture %} |
| 39 | 51 |
| 40 {% capture content %} | 52 {% capture content %} |
| 41 | 53 |
| 54 <hr> |
| 55 |
| 56 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> |
| 57 <font size="24"> |
| 58 <i class="icon-bullhorn"> </i> |
| 59 </font> |
| 60 |
| 61 The Dart Web UI team recently |
| 62 <a href="https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/6laXXxR
tA7k">announced</a> |
| 63 a port of the Polymer project: |
| 64 <a href="http://pub.dartlang.org/packages/polymer">polymer.dart</a>. |
| 65 |
| 66 We've converted most of the tutorial Web UI examples and compiled some |
| 67 <a href="https://github.com/dart-lang/dart-tutorials-samples/blob/master/web/t
o-polymer-notes.txt" target="_blank">notes</a> |
| 68 along the way. |
| 69 Here is source code for the polymer versions of the three examples from this t
arget: |
| 70 <ul> |
| 71 <li> |
| 72 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/w
eb/target07-polymer/adlibitum" |
| 73 target="_blank">adlibitum</a> |
| 74 </li> |
| 75 <li> |
| 76 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/w
eb/target07-polymer/simplehangman" |
| 77 target="_blank">simplehangman</a> |
| 78 </li> |
| 79 <li> |
| 80 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/w
eb/target07-polymer/hangman" |
| 81 target="_blank">hangman</a> |
| 82 </li> |
| 83 </ul> |
| 84 </aside> |
| 85 |
| 86 <hr> |
| 87 |
| 42 The Web UI package implements the <template> tag, | 88 The Web UI package implements the <template> tag, |
| 43 which you can use directly in your HTML. | 89 which you can use directly in your HTML. |
| 44 Templates define UI elements that are instantiated | 90 Templates define UI elements that are instantiated |
| 45 only under specific circumstances. | 91 only under specific circumstances. |
| 46 You can use templates to define the structure of a custom element, | 92 You can use templates to define the structure of a custom element, |
| 47 to instantiate UI elements based on a boolean condition, | 93 to instantiate UI elements based on a boolean condition, |
| 48 or to repeat UI elements by iterating over a Dart Iterable object. | 94 or to repeat UI elements by iterating over a Dart Iterable object. |
| 49 | 95 |
| 50 This target covers | 96 This target covers |
| 51 template conditionals and loops, | 97 template conditionals and loops, |
| (...skipping 258 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 310 </div> | 356 </div> |
| 311 <div class="span3"> | 357 <div class="span3"> |
| 312 <a href="/docs/tutorials/custom-elements/" class="pull-right">Define a Custom
DOM Tag <i class="icon-chevron-right"> </i> </a> | 358 <a href="/docs/tutorials/custom-elements/" class="pull-right">Define a Custom
DOM Tag <i class="icon-chevron-right"> </i> </a> |
| 313 </div> | 359 </div> |
| 314 </div> | 360 </div> |
| 315 | 361 |
| 316 | 362 |
| 317 {% endcapture %} | 363 {% endcapture %} |
| 318 | 364 |
| 319 {% include tutorial.html %} | 365 {% include tutorial.html %} |
| OLD | NEW |