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 |