| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Define a Custom DOM Tag" | 3 title: "Define a Custom DOM Tag" |
| 4 description: "Define a custom DOM element tag with help from the Web UI package" | 4 description: "Define a custom DOM element tag with help from the Web UI package" |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 tutorial: | 6 tutorial: |
| 7 id: web-components | 7 id: web-components |
| 8 next: fetchdata | 8 next: fetchdata/ |
| 9 next-title: "Fetch Data Dynamically" | 9 next-title: "Fetch Data Dynamically" |
| 10 prev: templates | 10 prev: templates/ |
| 11 prev-title: "Use Templates" | 11 prev-title: "Use Templates" |
| 12 --- | 12 --- |
| 13 | 13 |
| 14 {% capture whats_the_point %} | 14 {% capture whats_the_point %} |
| 15 | 15 |
| 16 * Make your own DOM element tags with the <element> tag. | 16 * Make your own DOM element tags with the <element> tag. |
| 17 * A custom element requires a template and can have a script. | 17 * A custom element requires a template and can have a script. |
| 18 * Use data binding to connect Dart variables to content. | 18 * Use data binding to connect Dart variables to content. |
| 19 * Directly attach event handlers in HTML. | 19 * Directly attach event handlers in HTML. |
| 20 | 20 |
| (...skipping 25 matching lines...) Expand all Loading... |
| 46 </div> | 46 </div> |
| 47 | 47 |
| 48 <hr> | 48 <hr> |
| 49 | 49 |
| 50 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> | 50 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> |
| 51 <font size="24"> | 51 <font size="24"> |
| 52 <i class="icon-bullhorn"> </i> | 52 <i class="icon-bullhorn"> </i> |
| 53 </font> | 53 </font> |
| 54 | 54 |
| 55 The Dart Web UI team recently | 55 The Dart Web UI team recently |
| 56 <a href="https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/6laXXxR
tA7k">announced</a> | 56 <a href="https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/6laXXxR
tA7k" target="_blank">announced</a> |
| 57 a port of the Polymer project: | 57 a port of the Polymer project: |
| 58 <a href="http://pub.dartlang.org/packages/polymer">polymer.dart</a>. | 58 <a href="https://pub.dartlang.org/packages/polymer" target="_blank">polymer.da
rt</a>. |
| 59 | 59 |
| 60 We've converted most of the tutorial Web UI examples and compiled some | 60 We've converted most of the tutorial Web UI examples and compiled some |
| 61 <a href="https://github.com/dart-lang/dart-tutorials-samples/blob/master/web/t
o-polymer-notes.txt" target="_blank">notes</a> | 61 <a href="https://github.com/dart-lang/dart-tutorials-samples/blob/master/web/t
o-polymer-notes.txt" target="_blank">notes</a> |
| 62 along the way. | 62 along the way. |
| 63 Check out source code for the polymer version of the | 63 Check out source code for the polymer version of the |
| 64 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/t
arget08-polymer/drseuss" | 64 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/t
arget08-polymer/drseuss" |
| 65 target="_blank">drseuss</a> | 65 target="_blank">drseuss</a> |
| 66 example. | 66 example. |
| 67 </aside> | 67 </aside> |
| 68 | 68 |
| 69 <hr> | 69 <hr> |
| 70 | 70 |
| 71 Custom elements are one kind of web component | 71 Custom elements are one kind of web component |
| 72 defined in the Web Components model. | 72 defined in the Web Components model. |
| 73 Using templates and scripts, | 73 Using templates and scripts, |
| 74 a custom element defines a new DOM tag | 74 a custom element defines a new DOM tag |
| 75 that extends an existing tag. | 75 that extends an existing tag. |
| 76 This target shows you how to define a custom element | 76 This target shows you how to define a custom element |
| 77 and how to create an instance of that element. | 77 and how to create an instance of that element. |
| 78 Dart's implementation of custom elements is in the | 78 Dart's implementation of custom elements is in the |
| 79 <a href="http://pub.dartlang.org/packages/web_ui" | 79 <a href="https://pub.dartlang.org/packages/web_ui" |
| 80 target="blank">Web UI package</a>, | 80 target="blank">Web UI package</a>, |
| 81 which is required to run the examples in this target. | 81 which is required to run the examples in this target. |
| 82 A previous target, | 82 A previous target, |
| 83 <a href="/docs/tutorials/web-ui/">Get Started with Web UI</a>, | 83 <a href="/docs/tutorials/web-ui/">Get Started with Web UI</a>, |
| 84 shows you how to install the Web UI package. | 84 shows you how to install the Web UI package. |
| 85 | 85 |
| 86 * [About custom elements](#about-custom-elements) | 86 * [About custom elements](#about-custom-elements) |
| 87 * [Connecting the files](#connecting-the-files) | 87 * [Connecting the files](#connecting-the-files) |
| 88 * [Instantiating a custom element](#instantiating-a-custom-element) | 88 * [Instantiating a custom element](#instantiating-a-custom-element) |
| 89 * [Defining a custom element](#defining-a-custom-element) | 89 * [Defining a custom element](#defining-a-custom-element) |
| (...skipping 29 matching lines...) Expand all Loading... |
| 119 You can also create a complex, | 119 You can also create a complex, |
| 120 reusable element by bundling elements together inside the custom element. | 120 reusable element by bundling elements together inside the custom element. |
| 121 Running below is an instance of a custom element, called `x-converter`, | 121 Running below is an instance of a custom element, called `x-converter`, |
| 122 that extends the <div> tag | 122 that extends the <div> tag |
| 123 and contains several elements within it. | 123 and contains several elements within it. |
| 124 Everything within the yellow box is part of the x-converter element. | 124 Everything within the yellow box is part of the x-converter element. |
| 125 Try it! Type a number into one of the fields and press return. | 125 Try it! Type a number into one of the fields and press return. |
| 126 | 126 |
| 127 <iframe class="running-app-frame" | 127 <iframe class="running-app-frame" |
| 128 style="height:100px;width:400px;" | 128 style="height:100px;width:400px;" |
| 129 src="http://dart-lang.github.com/dart-tutorials-samples/web/target08/drs
euss/web/out/drseuss.html"> | 129 src="http://dart-lang.github.io/dart-tutorials-samples/web/target08/drse
uss/web/out/drseuss.html"> |
| 130 </iframe> | 130 </iframe> |
| 131 | 131 |
| 132 You can find the complete source code for this sample on github at | 132 You can find the complete source code for this sample on github at |
| 133 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get08/drseuss" target="_blank">drseuss</a>. | 133 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get08/drseuss" target="_blank">drseuss</a>. |
| 134 | 134 |
| 135 This repository includes the pubspec.yaml and build.dart | 135 This repository includes the pubspec.yaml and build.dart |
| 136 files necessary to install the Web UI package and build the app. | 136 files necessary to install the Web UI package and build the app. |
| 137 Refer to | 137 Refer to |
| 138 <a href="/docs/tutorials/web-ui/">Get Started with Web UI</a> | 138 <a href="/docs/tutorials/web-ui/">Get Started with Web UI</a> |
| 139 for instructions. | 139 for instructions. |
| (...skipping 23 matching lines...) Expand all Loading... |
| 163 ##Connecting the files | 163 ##Connecting the files |
| 164 | 164 |
| 165 The embedded app just below contains | 165 The embedded app just below contains |
| 166 three x-converter elements, | 166 three x-converter elements, |
| 167 each configured with different labels and | 167 each configured with different labels and |
| 168 a different ratio. | 168 a different ratio. |
| 169 Try it! Enter numbers into each of the fields. | 169 Try it! Enter numbers into each of the fields. |
| 170 | 170 |
| 171 <iframe class="running-app-frame" | 171 <iframe class="running-app-frame" |
| 172 style="height:225px;width:400px;" | 172 style="height:225px;width:400px;" |
| 173 src="http://dart-lang.github.com/dart-tutorials-samples/web/target08/con
vertthis/web/out/convertThis.html"> | 173 src="http://dart-lang.github.io/dart-tutorials-samples/web/target08/conv
ertthis/web/out/convertThis.html"> |
| 174 </iframe> | 174 </iframe> |
| 175 | 175 |
| 176 You can find the complete source code for this sample on github at | 176 You can find the complete source code for this sample on github at |
| 177 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get08/convertthis" target="_blank">convertthis</a>. | 177 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get08/convertthis" target="_blank">convertthis</a>. |
| 178 | 178 |
| 179 This app is implemented with these Dart and HTML files: | 179 This app is implemented with these Dart and HTML files: |
| 180 | 180 |
| 181 | File | Description| | 181 | File | Description| |
| 182 |---|---| | 182 |---|---| |
| 183 | <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/t
arget08/convertthis/web/converter-element.html" target="_blank">converter-elemen
t.html</a> | Defines the UI for the x-converter custom element | | 183 | <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/t
arget08/convertthis/web/converter-element.html" target="_blank">converter-elemen
t.html</a> | Defines the UI for the x-converter custom element | |
| (...skipping 223 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 407 The Web UI package contains several examples, | 407 The Web UI package contains several examples, |
| 408 including a version of | 408 including a version of |
| 409 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc" | 409 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc" |
| 410 target="_blank">TodoMVC</a>. | 410 target="_blank">TodoMVC</a>. |
| 411 </li> | 411 </li> |
| 412 </ul> | 412 </ul> |
| 413 | 413 |
| 414 {% endcapture %} | 414 {% endcapture %} |
| 415 | 415 |
| 416 {% include tutorial.html %} | 416 {% include tutorial.html %} |
| OLD | NEW |