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

Side by Side Diff: src/site/docs/tutorials/templates/index.markdown

Issue 20778002: more link tweaking (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: getting ready for push Created 7 years, 4 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 unified diff | Download patch
OLDNEW
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
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
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 ![Paragraph elements are conditionally instantiated](images/template-conditional .png) 126 ![Paragraph elements are conditionally instantiated](images/template-conditional .png)
127 127
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
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
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 ![Using template loops to display a list of strings](images/wrongletters-detail. png) 223 ![Using template loops to display a list of strings](images/wrongletters-detail. png)
224 224
225 The &lt;template&gt; tag has an attribute called `iterate`. 225 The &lt;template&gt; 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
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 %}
OLDNEW
« no previous file with comments | « src/site/docs/tutorials/shared-pkgs/index.markdown ('k') | src/site/docs/tutorials/web-ui/index.markdown » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698