| OLD | NEW |
| 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 Loading... |
| 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  | 143  |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 199 | 198 |
| 200  | 199  |
| 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 <tute-stopwatch> element is | 207 The definition for the <tute-stopwatch> 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 <html>, <head>, or <body> tags. | 212 does not need <html>, <head>, or <body> tags. |
| 215 | 213 |
| 216 To define a custom element, | 214 To define a custom element, |
| 217 use the <polymer-element> tag and provide a name. | 215 use the <polymer-element> 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 Loading... |
| 256 The template can include CSS styles within a <style> tag. | 254 The template can include CSS styles within a <style> tag. |
| 257 </dd> | 255 </dd> |
| 258 | 256 |
| 259 <dt> <script> </dt> | 257 <dt> <script> </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  | 272  |
| 276 | 273 |
| 277 The tute-stopwatch template uses a <style> tag, which is optional. | 274 The tute-stopwatch template uses a <style> tag, which is optional. |
| (...skipping 199 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 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 %} |
| OLD | NEW |