| OLD | NEW |
| (Empty) |
| 1 Polymer.dart | |
| 2 ============ | |
| 3 | |
| 4 Polymer.dart is a set of comprehensive UI and utility components | |
| 5 for building web applications. | |
| 6 With Polymer.dart's custom elements, templating, data binding, | |
| 7 and other features, | |
| 8 you can quickly build structured, encapsulated, client-side web apps. | |
| 9 | |
| 10 Polymer.dart is a Dart port of | |
| 11 [Polymer][polymer] created and maintained by the Dart team. | |
| 12 The Dart team is collaborating with the Polymer team to ensure that polymer.dart | |
| 13 elements and polyfills are fully compatible with Polymer. | |
| 14 | |
| 15 Polymer.dart replaces Web UI, which has been deprecated. | |
| 16 | |
| 17 | |
| 18 Learn More | |
| 19 ---------- | |
| 20 | |
| 21 * The [Polymer.dart][home_page] homepage | |
| 22 contains a list of features, project status, | |
| 23 installation instructions, tips for upgrading from Web UI, | |
| 24 and links to other documentation. | |
| 25 | |
| 26 * See our [TodoMVC][] example by opening up the Dart Editor's Welcome Page and | |
| 27 selecting "TodoMVC". | |
| 28 | |
| 29 * For more information about Dart, see <http://www.dartlang.org/>. | |
| 30 | |
| 31 * When you use this package, | |
| 32 you automatically get the | |
| 33 [polymer_expressions][] package, | |
| 34 which provides an expressive syntax for use with templates. | |
| 35 | |
| 36 | |
| 37 Try It Now | |
| 38 ----------- | |
| 39 Add the polymer.dart package to your pubspec.yaml file: | |
| 40 | |
| 41 ```yaml | |
| 42 dependencies: | |
| 43 polymer: ">=0.16.0 <0.17.0" | |
| 44 ``` | |
| 45 | |
| 46 Instead of using `any`, we recommend using version ranges to avoid getting your | |
| 47 project broken on each release. Using a version range lets you upgrade your | |
| 48 package at your own pace. You can find the latest version number at | |
| 49 <https://pub.dartlang.org/packages/polymer>. | |
| 50 | |
| 51 | |
| 52 Building and Deploying | |
| 53 ---------------------- | |
| 54 | |
| 55 To build a deployable version of your app, add the polymer transformers to your | |
| 56 pubspec.yaml file: | |
| 57 | |
| 58 ```yaml | |
| 59 transformers: | |
| 60 - polymer | |
| 61 ``` | |
| 62 | |
| 63 Then, run `pub build`. The polymer transformers assume all files under `web` | |
| 64 are possible entry points, this can be adjusted with arguments in your | |
| 65 pubspec.yaml file. For example, you can say only `web/index.html` is an entry | |
| 66 point as follows: | |
| 67 | |
| 68 ```yaml | |
| 69 transformers: | |
| 70 - polymer: | |
| 71 entry_points: web/index.html | |
| 72 ``` | |
| 73 | |
| 74 Here is a list of arguments used by the polymer transformers: | |
| 75 * js: whether to load JS code directly. By default polymer converts your app's | |
| 76 html file to load the compiled JS code directly. Setting this parameter to | |
| 77 false will keep a dart script tag and the `dart.js` script tag on the page. | |
| 78 | |
| 79 * csp: whether to load a Content Security Policy (CSP) compliant JS file. | |
| 80 Dart2js generates two JS files, one that is not CSP compilant and one that is. | |
| 81 By default, polymer uses the former becuase it's likely more efficient, but | |
| 82 you can choose the latter by setting this flag. | |
| 83 | |
| 84 * entry_points: can be a list of entry points or, for convenience, a single | |
| 85 entry point as shown above. | |
| 86 | |
| 87 For example, this specification includes 2 entrypoints and chooses the CSP | |
| 88 compliant JS file: | |
| 89 | |
| 90 ```yaml | |
| 91 transformers: | |
| 92 - polymer: | |
| 93 entry_points: | |
| 94 - web/index.html | |
| 95 - web/index2.html | |
| 96 csp: true | |
| 97 ``` | |
| 98 | |
| 99 Testing | |
| 100 ------- | |
| 101 | |
| 102 Polymer elements can be tested using either the original `unittest` or new `test
` packages. In both cases the easiest way to create a test is by using the defau
lt main from `polymer/init.dart` and then defining all your tests inside of a me
thod marked with an `@whenPolymerReady` annotation. | |
| 103 | |
| 104 ```dart | |
| 105 import 'package:polymer/polymer.dart'; | |
| 106 export 'package:polymer/init.dart'; | |
| 107 | |
| 108 @whenPolymerReady | |
| 109 void runTests() { | |
| 110 // Define your tests here. | |
| 111 } | |
| 112 ``` | |
| 113 | |
| 114 You will also need to define a custom html file for your test (see the README fo
r the testing package you are using for more information on this). | |
| 115 | |
| 116 **Note**: If you are using the new `test` package, it is important that you add
the `test` transformer after the polymer transformer, so it should look roughly
like this: | |
| 117 | |
| 118 ```yaml | |
| 119 transformer: | |
| 120 - polymer: | |
| 121 entry_points: | |
| 122 - test/my_test.html | |
| 123 - test/pub_serve: | |
| 124 $include: test/**_test{.*,}.dart | |
| 125 ``` | |
| 126 | |
| 127 Contacting Us | |
| 128 ------------- | |
| 129 | |
| 130 Please file issues in our [Issue Tracker][issues] or contact us on the | |
| 131 [Dart Web UI mailing list][mailinglist]. | |
| 132 | |
| 133 We also have the [Web UI development list][devlist] for discussions about | |
| 134 internals of the code, code reviews, etc. | |
| 135 | |
| 136 [wc]: http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html | |
| 137 [pub]: http://www.dartlang.org/docs/pub-package-manager/ | |
| 138 [cs]: http://www.chromium.org/developers/testing/webkit-layout-tests | |
| 139 [cs_lucid]: http://gsdview.appspot.com/dartium-archive/continuous/drt-lucid64.zi
p | |
| 140 [cs_mac]: http://gsdview.appspot.com/dartium-archive/continuous/drt-mac.zip | |
| 141 [cs_win]: http://gsdview.appspot.com/dartium-archive/continuous/drt-win.zip | |
| 142 [dartium_src]: http://code.google.com/p/dart/wiki/BuildingDartium | |
| 143 [TodoMVC]: http://todomvc.com/ | |
| 144 [issues]: https://github.com/dart-lang/polymer-dart/issues/new | |
| 145 [mailinglist]: https://groups.google.com/a/dartlang.org/forum/?fromgroups#!forum
/web-ui | |
| 146 [devlist]: https://groups.google.com/a/dartlang.org/forum/?fromgroups#!forum/web
-ui-dev | |
| 147 [overview]: http://www.dartlang.org/articles/dart-web-components/ | |
| 148 [tools]: https://www.dartlang.org/articles/dart-web-components/tools.html | |
| 149 [spec]: https://www.dartlang.org/articles/dart-web-components/spec.html | |
| 150 [features]: https://www.dartlang.org/articles/dart-web-components/summary.html | |
| 151 [home_page]: https://www.dartlang.org/polymer-dart/ | |
| 152 [polymer_expressions]: http://pub.dartlang.org/packages/polymer_expressions | |
| 153 [polymer]: http://www.polymer-project.org/ | |
| OLD | NEW |