| OLD | NEW |
|---|
| (Empty) | |
| 1 --- |
| 2 layout: default |
| 3 title: "Polymer.dart" |
| 4 description: "Standards-based web components: |
| 5 custom elements, templates, |
| 6 and data binding for Dart web apps. A Dart port of Polymer." |
| 7 has-permalinks: true |
| 8 --- |
| 9 |
| 10 <style> |
| 11 |
| 12 .features h2 { |
| 13 color: gray; |
| 14 } |
| 15 |
| 16 .features i { |
| 17 font-size: 5em; |
| 18 } |
| 19 |
| 20 ol { |
| 21 margin-left: 11px; |
| 22 } |
| 23 |
| 24 .sidenav.affix { |
| 25 top: 55px; |
| 26 } |
| 27 |
| 28 hr { |
| 29 margin: 44px 0; |
| 30 } |
| 31 |
| 32 @media (min-width: 768px) and (max-width: 979px) { |
| 33 .sidenav.affix { |
| 34 top: 0; |
| 35 } |
| 36 } |
| 37 |
| 38 @media (max-width: 767px) { |
| 39 .sidenav.affix { |
| 40 position: static; |
| 41 width: auto; |
| 42 top: 0; |
| 43 } |
| 44 } |
| 45 |
| 46 .hero-unit h1 { |
| 47 margin-bottom: 22px; |
| 48 } |
| 49 |
| 50 </style> |
| 51 |
| 52 <div class="hero-unit"> |
| 53 <h1> {{page.title}} </h1> |
| 54 <p> |
| 55 Build structured, encapsulated, client-side web apps with Dart and |
| 56 web components.<br> |
| 57 <em>A Dart port of |
| 58 <a href="http://www.polymer-project.org">Polymer</a>.</em> |
| 59 </p> |
| 60 </div> |
| 61 |
| 62 <div class="row-fluid" markdown="1"> |
| 63 |
| 64 <div class="span3" markdown="1"> |
| 65 |
| 66 <div class="sidenav" data-spy="affix" data-offset-top="250" markdown="1"> |
| 67 |
| 68 1. ToC |
| 69 {:toc .toc .nav .nav-list} |
| 70 |
| 71 </div> |
| 72 |
| 73 </div> |
| 74 |
| 75 <div class="span8" markdown="1"> |
| 76 |
| 77 ## Features |
| 78 |
| 79 First up: ports of _Polymer Foundation_ |
| 80 and _Polymer Core_, offering: |
| 81 |
| 82 <div class="row-fluid features"> |
| 83 |
| 84 <div class="span4 text-center"> |
| 85 |
| 86 <i class="icon icon-code"> </i> |
| 87 |
| 88 <h2 class="no-permalink">Custom tags</h2> |
| 89 |
| 90 Create your own HTML tags to encapsulate |
| 91 style, structure, and behavior. |
| 92 |
| 93 </div> |
| 94 |
| 95 <div class="span4 text-center"> |
| 96 |
| 97 <i class="icon icon-exchange"> </i> |
| 98 |
| 99 <h2 class="no-permalink">Data binding</h2> |
| 100 |
| 101 Live, two-way bindings between Dart objects and DOM nodes. |
| 102 |
| 103 </div> |
| 104 |
| 105 <div class="span4 text-center"> |
| 106 |
| 107 <i class="icon icon-leaf"> </i> |
| 108 |
| 109 <h2 class="no-permalink">Future proof</h2> |
| 110 |
| 111 Built on emerging web standards, |
| 112 available to you today. |
| 113 |
| 114 </div> |
| 115 |
| 116 </div> |
| 117 |
| 118 <hr> |
| 119 |
| 120 ## Examples |
| 121 |
| 122 ### Custom elements |
| 123 |
| 124 Extend the lexicon of HTML with your own custom elements. |
| 125 |
| 126 Below is a simple custom element. More advanced custom elements |
| 127 can contain their own styles, custom behavior, data binding, and more. |
| 128 |
| 129 {% prettify html %} |
| 130 <head> |
| 131 <link rel="import" href="[[highlight]]hello_world.html[[/highlight]]"> |
| 132 <script src="packages/polymer/boot.js"></script> |
| 133 </head> |
| 134 |
| 135 <body> |
| 136 [[highlight]]<hello-world></hello-world>[[/highlight]] |
| 137 </body> |
| 138 {% endprettify %} |
| 139 |
| 140 {% prettify html %}{% raw %} |
| 141 <polymer-element name="[[highlight]]hello-world[[/highlight]]"> |
| 142 <template> |
| 143 <p>Hello from inside a custom element!<p> |
| 144 </template> |
| 145 <script type="application/dart" src="hello_world.dart"></script> |
| 146 </polymer-element> |
| 147 {% endraw %}{% endprettify %} |
| 148 |
| 149 {% prettify dart %} |
| 150 import 'package:polymer/polymer.dart'; |
| 151 |
| 152 @CustomTag('hello-world') |
| 153 class HelloWorldElement extends PolymerElement { |
| 154 } |
| 155 {% endprettify %} |
| 156 |
| 157 <hr> |
| 158 |
| 159 ### Data binding |
| 160 |
| 161 Synchronize DOM nodes and object models using live, two-way data binding. |
| 162 |
| 163 In this sample, the `count` field of `ClickCounterElement` is |
| 164 bound to the `{% raw %}{{count}}{% endraw %}` placeholder in the custom |
| 165 element's `<template>`. When the `count` field changes, the text also |
| 166 changes. |
| 167 |
| 168 {% prettify html %}{% raw %} |
| 169 <polymer-element name="click-counter"> |
| 170 <template> |
| 171 <button on-click="increment">Click Me</button> |
| 172 <p>You clicked the button [[highlight]]{{count}}[[/highlight]] times.</p> |
| 173 </template> |
| 174 <script type="application/dart" src="click_counter.dart"></script> |
| 175 </polymer-element> |
| 176 {% endraw %}{% endprettify %} |
| 177 |
| 178 {% prettify dart %} |
| 179 import 'package:polymer/polymer.dart'; |
| 180 import 'dart:html'; |
| 181 |
| 182 @CustomTag('click-counter') |
| 183 class ClickCounterElement extends PolymerElement with ObservableMixin { |
| 184 [[highlight]]@observable int count[[/highlight]] = 0; |
| 185 |
| 186 void increment(Event e, var detail, Node target) { |
| 187 count += 1; |
| 188 } |
| 189 } |
| 190 {% endprettify %} |
| 191 |
| 192 <hr> |
| 193 |
| 194 ### Template conditionals |
| 195 |
| 196 Control the UI with declarative conditionals in templates. |
| 197 |
| 198 Template conditionals are part of the data binding infrastructure. If |
| 199 `count` changes, the templates are automatically re-evaluated. |
| 200 |
| 201 {% prettify html %}{% raw %} |
| 202 <polymer-element name="click-counter"> |
| 203 <template> |
| 204 <button on-click="increment">Click Me</button> |
| 205 <template [[highlight]]if="{{count <= 0}}"[[/highlight]]> |
| 206 <p>Click the button. It's fun!</p> |
| 207 </template> |
| 208 <template [[highlight]]if="{{count > 0}}"[[/highlight]]> |
| 209 <p>You clicked the button {{count}} times.</p> |
| 210 </template> |
| 211 </template> |
| 212 <script type="application/dart" src="click_counter.dart"></script> |
| 213 </polymer-element> |
| 214 {% endraw %}{% endprettify %} |
| 215 |
| 216 {% prettify dart %} |
| 217 import 'package:polymer/polymer.dart'; |
| 218 import 'dart:html'; |
| 219 |
| 220 @CustomTag('click-counter') |
| 221 class ClickCounterElement extends PolymerElement with ObservableMixin { |
| 222 @observable int count = 0; |
| 223 |
| 224 void increment(Event e, var detail, Node target) { |
| 225 count += 1; |
| 226 } |
| 227 } |
| 228 {% endprettify %} |
| 229 |
| 230 <hr> |
| 231 |
| 232 ### Template loops |
| 233 |
| 234 Loop through a collection, instantiating a template for every item in the |
| 235 collection. |
| 236 |
| 237 Template loops are part of the data binding infrastructure. If an item is |
| 238 added or removed from `fruits`, the contents of `<ul>` are automatically |
| 239 updated. |
| 240 |
| 241 {% prettify html %}{% raw %} |
| 242 <polymer-element name="fav-fruits"> |
| 243 <template> |
| 244 <ul> |
| 245 <template [[highlight]]repeat="{{fruit in fruits}}"[[/highlight]]> |
| 246 <li> |
| 247 I like {{ fruit }}. |
| 248 </li> |
| 249 </template> |
| 250 </ul> |
| 251 </template> |
| 252 <script type="application/dart" src="fav_fruits.dart"></script> |
| 253 </polymer-element> |
| 254 {% endraw %}{% endprettify %} |
| 255 |
| 256 {% prettify dart %} |
| 257 import 'package:polymer/polymer.dart'; |
| 258 |
| 259 @CustomTag('fav-fruits') |
| 260 class FavFruitsElement extends PolymerElement with ObservableMixin { |
| 261 final List [[highlight]]fruits = toObservable[[/highlight]](['apples', 'pears'
, 'bananas']); |
| 262 } |
| 263 {% endprettify %} |
| 264 |
| 265 <hr> |
| 266 |
| 267 ### Packaging |
| 268 |
| 269 Reuse and share custom elements with |
| 270 [pub](https://www.dartlang.org/docs/dart-up-and-running/contents/ch04-tools-pub.
html), |
| 271 the Dart package manager. |
| 272 |
| 273 {% prettify bash %}{% raw %} |
| 274 > pub install fancy_button |
| 275 {% endraw %}{% endprettify %} |
| 276 |
| 277 {% prettify html %}{% raw %} |
| 278 <head> |
| 279 <link [[highlight]]rel="import"[[/highlight]] |
| 280 href="packages/fancy_button/fancy_button.html"> |
| 281 </head> |
| 282 <body> |
| 283 <button [[highlight]]is="fancy-button"[[/highlight]]>Click me!</button> |
| 284 </body> |
| 285 {% endraw %}{% endprettify %} |
| 286 |
| 287 <hr> |
| 288 |
| 289 ## Installation |
| 290 |
| 291 Get polymer.dart from [pub](http://pub.dartlang.org), |
| 292 the Dart package hosting service. Add the following to |
| 293 your `pubspec.yaml` file: |
| 294 |
| 295 dependencies: |
| 296 polymer: any |
| 297 |
| 298 Then, run `pub install` to download the package and link it into your app. |
| 299 |
| 300 View the [polymer.dart pub page](http://pub.dartlang.org/packages/polymer) |
| 301 to learn more. |
| 302 |
| 303 <hr> |
| 304 |
| 305 ## Tools |
| 306 |
| 307 Polymer.dart offers a validator that reports syntax or usage warnings. |
| 308 The validator can be connected to Dart Editor to display warnings directly |
| 309 at the source. |
| 310 |
| 311 More information to come. |
| 312 |
| 313 <hr> |
| 314 |
| 315 ## Upgrading from Web UI |
| 316 |
| 317 Polymer.dart is the next evolution of Web UI. |
| 318 |
| 319 [Upgrading to polymer.dart from Web UI](upgrading-to-polymer-from-web-ui.html) |
| 320 provides a non-exhaustive set of tips to help you upgrade. |
| 321 |
| 322 <hr> |
| 323 |
| 324 ## Compatibility |
| 325 |
| 326 Polymer.dart is tested against IE9, IE10, Safari 6, latest Chrome, |
| 327 latest Firefox, and latest Chrome for Android. |
| 328 |
| 329 The Dart team collaborates with the Polymer team to |
| 330 ensure that polymer.dart elements and polyfills |
| 331 (code that implements features not yet built into a web browser) |
| 332 are fully compatible with Polymer. |
| 333 |
| 334 <hr> |
| 335 |
| 336 ## Support |
| 337 |
| 338 We actively encourage your feedback and questions. |
| 339 |
| 340 * Ask your [how-to questions][so] on StackOverflow |
| 341 * Join the [general discussion about polymer.dart][web-ui-list] on our mailing |
| 342 list |
| 343 * Send [feedback on the web components family of specifications][polymer-dev-lis
t] |
| 344 to the polymer-dev mailing list |
| 345 (Not Dart specific.) |
| 346 * Please file [bugs and feature requests][dartbug] for polymer.dart |
| 347 |
| 348 <hr> |
| 349 |
| 350 ## Source code |
| 351 |
| 352 Polymer.dart is open source. You can view the source to polymer.dart, |
| 353 and its many component packages, at [dart.googlecode.com/](https://code.google.c
om/p/dart/source/browse/branches/bleeding_edge/dart/pkg/). |
| 354 [Get the source](https://code.google.com/p/dart/wiki/GettingTheSource) |
| 355 to inspect the code and contribute patches. |
| 356 |
| 357 <hr> |
| 358 |
| 359 ## Status |
| 360 |
| 361 Polymer.dart is a work in progress, just like Polymer. |
| 362 |
| 363 ### Web UI parity |
| 364 |
| 365 Web UI is the precursor to polymer.dart. Polymer.dart is not quite |
| 366 at feature parity with Web UI. Below is a list of Web UI features |
| 367 that have not yet been implemented in polymer.dart: |
| 368 |
| 369 * Value of index variable available inside of loops |
| 370 * Initialization of custom attributes with literal values |
| 371 |
| 372 ### Polymer parity |
| 373 |
| 374 One of our goals is to make all of Polymer available |
| 375 to Dart developers. |
| 376 |
| 377 | Feature | Dart port parity |
| 378 |-- |
| 379 | Custom Elements | Tracking |
| 380 | Shadow DOM | Tracking |
| 381 | Observers | Tracking |
| 382 | Node.bind() | Tracking |
| 383 | Template Binding | Tracking |
| 384 | HTML imports | Tracking |
| 385 | Polymer Expressions | Tracking |
| 386 | [Polymer Core](https://github.com/Polymer/polymer) | Ramping up |
| 387 | Pointer events | Not started |
| 388 | Web animations | Not started |
| 389 | [Polymer base elements](https://github.com/Polymer/polymer-elements) | Not sta
rted |
| 390 | [Polymer UI elements](https://github.com/Polymer/polymer-elements) | Not start
ed |
| 391 {: .table} |
| 392 |
| 393 <hr> |
| 394 |
| 395 ## Additional reading |
| 396 |
| 397 The cultured Dartisan studies the specifications and articles that cover |
| 398 the lower-level primitives and features of the polymer.dart libraries. |
| 399 |
| 400 ### Polymer |
| 401 |
| 402 * Read Polymer's [guiding principles](http://www.polymer-project.org/#guiding-pr
inciples) |
| 403 * Watch the [Hello, Polymer!](http://www.youtube.com/watch?v=irGDN5Ysi_A) |
| 404 video featuring some of the lead members of Polymer. |
| 405 |
| 406 ### Articles |
| 407 |
| 408 * [HTML5Rocks - Shadow DOM 101](http://www.html5rocks.com/en/tutorials/webcompon
ents/shadowdom/) |
| 409 |
| 410 * [HTML5Rocks - Shadow DOM 201: CSS and Styling](http://www.html5rocks.com/tutor
ials/webcomponents/shadowdom-201/) |
| 411 |
| 412 * [HTML5Rocks - Shadow DOM 301: Advanced Concepts & DOM APIs](http://www.html5ro
cks.com/tutorials/webcomponents/shadowdom-301/) |
| 413 |
| 414 * [Custom elements - defining new elements in HTML](http://www.html5rocks.com/en
/tutorials/webcomponents/customelements/) |
| 415 |
| 416 ### Specifications |
| 417 |
| 418 Much of polymer.dart is built upon new and emerging web specifications. |
| 419 Polymer.dart offers polyfills for the following features. |
| 420 |
| 421 Head's up: these are specs written for implementors. Lots of details ahead. |
| 422 |
| 423 [Custom elements][custom-elements-spec] |
| 424 : A method for enabling the author to define and use new types of DOM elements. |
| 425 |
| 426 [Shadow DOM][shadow-dom-spec] |
| 427 : An encapsulation primitive for DOM subtrees. It provides a method of |
| 428 establishing and maintaining functional boundaries between DOM trees and how |
| 429 these trees interact with each other within a document, thus enabling better |
| 430 functional encapsulation within the DOM. |
| 431 |
| 432 [Template element][template-spec] |
| 433 : A method for declaring inert DOM subtrees in HTML and manipulating them |
| 434 to instantiate document fragments with identical contents. |
| 435 |
| 436 [HTML Imports][html-imports-spec] |
| 437 : A way to include and reuse HTML documents in other HTML documents. |
| 438 |
| 439 |
| 440 </div> |
| 441 |
| 442 </div> |
| 443 |
| 444 [polymer]: http://www.polymer-project.org |
| 445 [so]: http://stackoverflow.com/tags/dart |
| 446 [web-ui-list]: http://example.com/tbd |
| 447 [polymer-dev-list]: http://example.com/tbd |
| 448 [dartbug]: http://dartbug.com/new |
| 449 [custom-elements-spec]: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/c
ustom/index.html |
| 450 [shadow-dom-spec]: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow
/index.html |
| 451 [html-imports-spec]: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/impo
rts/index.html |
| 452 [template-spec]: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/template
s/index.html |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 23619013:
start talking about polymer.dart (Closed)
Base URL: git@github.com:dart-lang/dartlang.org.git@master