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

Side by Side Diff: src/site/docs/tutorials/polymer-intro/index.markdown

Issue 27070003: removing links to github in favor of downloading a zipfile from github (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: ZIP is all caps Created 7 years, 2 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: "Define a Custom Element" 3 title: "Define a Custom Element"
4 description: "Create a custom HTML element using Polymer." 4 description: "Create a custom HTML element using Polymer."
5 has-permalinks: true 5 has-permalinks: true
6 tutorial: 6 tutorial:
7 id: polymer-intro 7 id: polymer-intro
8 next: fetchdata 8 next: fetchdata
9 next-title: "Fetch Data Dynamically" 9 next-title: "Fetch Data Dynamically"
10 prev: shared-pkgs 10 prev: shared-pkgs
11 prev-title: "Install Shared Packages" 11 prev-title: "Install Shared Packages"
12 --- 12 ---
13 13
14 {% capture whats_the_point %} 14 {% capture whats_the_point %}
15 15
16 * Polymer.dart is the next evolution of Web UI. 16 * Polymer.dart is the next evolution of Web UI.
17 * Everything in Polymer.dart is an element. 17 * Everything in Polymer.dart is an element.
18 * Custom elements provide semantically meaningful encapsulation. 18 * Custom elements provide semantically meaningful encapsulation.
19 * Use Polymer.dart to build custom elements. 19 * Use Polymer.dart to build custom elements.
20 * Bind Dart data to HTML elements. 20 * Bind Dart data to HTML elements.
21 * Declaratively bind event handlers to elements. 21 * Declaratively bind event handlers to elements.
22 22
23 {% endcapture %} 23 {% endcapture %}
24 24
25 {% capture sample_links %} 25 {% capture sample_links %}
26 26
27 <p> This tutorial features this example:</p>
28 * stopwatch
29
27 <p> 30 <p>
28 Get the source code for the samples featured in this target:</p> 31 Don't have the source code?
29 32 <a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip" >
30 <ul> 33 Download it.
31 <li> 34 </a>
32 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /polymer-intro/stopwatch"
33 target="_blank">stopwatch</a>
34 </li>
35 </ul>
36 35
37 {% endcapture %} 36 {% endcapture %}
38 37
39 {% capture content %} 38 {% capture content %}
40 39
41 <div class="tute-target-title"> 40 <div class="tute-target-title">
42 <h1>{{page.title}}</h1> 41 <h1>{{page.title}}</h1>
43 <h3>Create a custom HTML element using Polymer</h3> 42 <h3>Create a custom HTML element using Polymer</h3>
44 </div> 43 </div>
45 44
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after
111 With custom elements, you can easily create new kinds of elements 110 With custom elements, you can easily create new kinds of elements
112 that have semantically meaningful tags and that are easy to share, 111 that have semantically meaningful tags and that are easy to share,
113 reuse, and read. 112 reuse, and read.
114 113
115 ###Overview of the example files 114 ###Overview of the example files
116 115
117 Three main source files implement the Stopwatch example: 116 Three main source files implement the Stopwatch example:
118 117
119 <dl> 118 <dl>
120 <dt> 119 <dt>
121 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /polymer-intro/stopwatch/web/index.html" target="_blank">index.html</a> 120 index.html
122 </dt> 121 </dt>
123 <dd> 122 <dd>
124 The primary HTML file for the app. 123 The primary HTML file for the app.
125 Includes the Polymer bootstrap script and instantiates the custom element. 124 Includes the Polymer bootstrap script and instantiates the custom element.
126 </dd> 125 </dd>
127 <dt> 126 <dt>
128 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /polymer-intro/stopwatch/web/tute_stopwatch.html" target="_blank">tute_stopwatch .html</a> 127 tute_stopwatch.html
129 </dt> 128 </dt>
130 <dd> 129 <dd>
131 The HTML code that defines the custom element. 130 The HTML code that defines the custom element.
132 </dd> 131 </dd>
133 <dt> 132 <dt>
134 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /polymer-intro/stopwatch/web/tute_stopwatch.dart" target="_blank">tute_stopwatch .dart</a> 133 tute_stopwatch.dart
135 </dt> 134 </dt>
136 <dd> 135 <dd>
137 The Dart class that implements the custom element. 136 The Dart class that implements the custom element.
138 </dd> 137 </dd>
139 </dl> 138 </dl>
140 139
141 The following diagram shows the structure of the example 140 The following diagram shows the structure of the example
142 app and its use of custom elements. 141 app and its use of custom elements.
143 142
144 ![The connections between Dart and HTML](images/connections.png) 143 ![The connections between Dart and HTML](images/connections.png)
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after
199 198
200 ![Instantiate a custom element with a custom tag](images/polymer-element-instant iation.png) 199 ![Instantiate a custom element with a custom tag](images/polymer-element-instant iation.png)
201 200
202 Using best practices, 201 Using best practices,
203 the custom element definition is in a separate file. 202 the custom element definition is in a separate file.
204 Use `link [rel="import"]` to import the HTML definition file as shown. 203 Use `link [rel="import"]` to import the HTML definition file as shown.
205 204
206 ##Defining a custom element {#define-element} 205 ##Defining a custom element {#define-element}
207 206
208 The definition for the &lt;tute-stopwatch&gt; element is 207 The definition for the &lt;tute-stopwatch&gt; element is
209 in 208 in tute_stopwatch.html.
210 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/pol ymer-intro/stopwatch/web/tute_stopwatch.html" target="_blank">tute_stopwatch.htm l</a>.
211 A custom element definition should be in its own 209 A custom element definition should be in its own
212 source file so that it can be included by other files. 210 source file so that it can be included by other files.
213 An HTML file that contains the definition for a custom element 211 An HTML file that contains the definition for a custom element
214 does not need &lt;html&gt;, &lt;head&gt;, or &lt;body&gt; tags. 212 does not need &lt;html&gt;, &lt;head&gt;, or &lt;body&gt; tags.
215 213
216 To define a custom element, 214 To define a custom element,
217 use the &lt;polymer-element&gt; tag and provide a name. 215 use the &lt;polymer-element&gt; tag and provide a name.
218 216
219 {% prettify html %} 217 {% prettify html %}
220 <polymer-element name="tute-stopwatch"> 218 <polymer-element name="tute-stopwatch">
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
256 The template can include CSS styles within a &lt;style&gt; tag. 254 The template can include CSS styles within a &lt;style&gt; tag.
257 </dd> 255 </dd>
258 256
259 <dt> &lt;script&gt; </dt> 257 <dt> &lt;script&gt; </dt>
260 <dd markdown="1"> Specifies a Dart script. 258 <dd markdown="1"> Specifies a Dart script.
261 For custom elements, the Dart script is a Dart class 259 For custom elements, the Dart script is a Dart class
262 that implements the behavior of the element. 260 that implements the behavior of the element.
263 The class typically overrides some 261 The class typically overrides some
264 life-cycle methods and provides event handlers 262 life-cycle methods and provides event handlers
265 that join the UI with its programmatic behavior. 263 that join the UI with its programmatic behavior.
266 In this example, the script is in 264 In this example, the script is in tute_stopwatch.dart.
267 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /polymer-intro/stopwatch/web/tute_stopwatch.dart" target="_blank">tute_stopwatch .dart</a>.
268 </dd> 265 </dd>
269 </dl> 266 </dl>
270 267
271 ##Providing a template for the custom element {#providing-a-template} 268 ##Providing a template for the custom element {#providing-a-template}
272 269
273 Here's the template code for the tute-stopwatch element: 270 Here's the template code for the tute-stopwatch element:
274 271
275 ![The template code for the tute-stopwatch element](images/template-code.png) 272 ![The template code for the tute-stopwatch element](images/template-code.png)
276 273
277 The tute-stopwatch template uses a &lt;style&gt; tag, which is optional. 274 The tute-stopwatch template uses a &lt;style&gt; tag, which is optional.
(...skipping 199 matching lines...) Expand 10 before | Expand all | Expand 10 after
477 Any CSS selectors within the template need to be unique only within the template . 474 Any CSS selectors within the template need to be unique only within the template .
478 475
479 For further details about styling custom elements, 476 For further details about styling custom elements,
480 refer to 477 refer to
481 [A Guide to Styling Elements](http://www.polymer-project.org/articles/styling-el ements.html) 478 [A Guide to Styling Elements](http://www.polymer-project.org/articles/styling-el ements.html)
482 479
483 ##Other resources 480 ##Other resources
484 481
485 Use these other resources to learn more about Polymer: 482 Use these other resources to learn more about Polymer:
486 483
487 * The tutorial
488 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web"
489 target="_blank">github repo</a>
490 contains many examples that use Polymer,
491 including samples that have been converted from Web UI.
492
493 * The 484 * The
494 <a href="http://www.dartlang.org/polymer-dart/" 485 <a href="http://www.dartlang.org/polymer-dart/"
495 target="_blank">Polymer.dart</a> homepage provides information 486 target="_blank">Polymer.dart</a> homepage provides information
496 specific to the Dart port of the Polymer project. 487 specific to the Dart port of the Polymer project.
497 488
498 * The Polymer project website 489 * The Polymer project website
499 <a href="http://www.polymer-project.org/" 490 <a href="http://www.polymer-project.org/"
500 target="_blank">polymer-project.org</a> 491 target="_blank">polymer-project.org</a>
501 contains information about the Polymer project as a whole. 492 contains information about the Polymer project as a whole.
502 493
503 ##What next? 494 ##What next?
504 495
505 [Two-way data binding with Polymer](/docs/tutorials/forms/#binding-data) 496 [Two-way data binding with Polymer](/docs/tutorials/forms/#binding-data)
506 in the tutorial about forms shows how to use two-way data binding 497 in the tutorial about forms shows how to use two-way data binding
507 with various types of input elements such as text fields, color pickers, 498 with various types of input elements such as text fields, color pickers,
508 and so on. 499 and so on.
509 500
510 Check out these other tutorial examples that use Polymer: 501 Check out these other tutorial examples that use Polymer:
511 502
512 * <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/f etchdata/its_all_about_you" 503 * its_all_about_you
513 target="_blank">its_all_about_you</a> 504 * slambook
514 * <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/f orms/slambook" 505 * count_down
515 target="_blank">slambook</a>
516 * <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/i ndexeddb/count_down"
517 target="_blank">count_down</a>
518 506
519 The next tutorial, 507 The next tutorial,
520 [Fetch Data Dynamically](/docs/tutorials/fetchdata/), 508 [Fetch Data Dynamically](/docs/tutorials/fetchdata/),
521 shows you how to fetch data 509 shows you how to fetch data
522 and use JSON to encode and decode 510 and use JSON to encode and decode
523 that data. 511 that data.
524 512
525 {% endcapture %} 513 {% endcapture %}
526 514
527 {% include tutorial.html %} 515 {% include tutorial.html %}
OLDNEW
« no previous file with comments | « src/site/docs/tutorials/indexeddb/index.markdown ('k') | src/site/docs/tutorials/remove-elements/index.markdown » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698