| OLD | NEW |
|---|
| 1 --- | 1 --- |
| 2 layout: homepage | 2 layout: homepage |
| 3 googleapi: true | 3 googleapi: true |
| 4 js: | 4 js: |
| 5 - url: /js/display-news.js | 5 - url: /js/display-news.js |
| 6 - url: /js/os-switcher.js | 6 - url: /js/os-switcher.js |
| 7 defer: true | 7 defer: true |
| 8 - url: /js/editor-downloads-analytics.js | 8 - url: /js/editor-downloads-analytics.js |
| 9 defer: true | 9 defer: true |
| 10 - url: /js/editor-version.js | 10 - url: /js/editor-version.js |
| (...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 91 </div> | 91 </div> |
| 92 </div> | 92 </div> |
| 93 </div> | 93 </div> |
| 94 <div class="row-fluid"> | 94 <div class="row-fluid"> |
| 95 <div class="span6"> | 95 <div class="span6"> |
| 96 <div class="media"> | 96 <div class="media"> |
| 97 <a class="pull-left" href="/articles/web-ui/"> | 97 <a class="pull-left" href="/articles/web-ui/"> |
| 98 <i class="icon-road icon-large media-object"></i> | 98 <i class="icon-road icon-large media-object"></i> |
| 99 </a> | 99 </a> |
| 100 <div class="media-body"> | 100 <div class="media-body"> |
| 101 <b><a href="/articles/web-ui/">Web UI</a></b> | 101 <b><a href="/polymer-dart/">Polymer.dart</a></b> |
| 102 lets you use future web APIs today, | 102 lets you use future web APIs today, |
| 103 with support for proposed standards | 103 with support for web components, custom elements, |
| 104 such as web components, MDV, and shadow DOM. | 104 data binding, and more. |
| 105 </div> | 105 </div> |
| 106 </div> | 106 </div> |
| 107 </div> | 107 </div> |
| 108 <div class="span6"> | 108 <div class="span6"> |
| 109 <div class="media"> | 109 <div class="media"> |
| 110 <a class="pull-left" href="#"> | 110 <a class="pull-left" href="#"> |
| 111 <i class="icon-globe icon-large media-object"></i> | 111 <i class="icon-globe icon-large media-object"></i> |
| 112 </a> | 112 </a> |
| 113 <div class="media-body"> | 113 <div class="media-body"> |
| 114 <b>All modern browsers</b> | 114 <b>All modern browsers</b> |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 147 You can also experiment with Dart right in your browser: | 147 You can also experiment with Dart right in your browser: |
| 148 <a href="http://try.dartlang.org" target="_blank">try.dartlang.org</a> | 148 <a href="http://try.dartlang.org" target="_blank">try.dartlang.org</a> |
| 149 </p> | 149 </p> |
| 150 | 150 |
| 151 <div class="tabbable"> | 151 <div class="tabbable"> |
| 152 <ul class="nav nav-tabs"> | 152 <ul class="nav nav-tabs"> |
| 153 <li class="active"><a href="#syntax" data-toggle="tab">Syntax</a></li> | 153 <li class="active"><a href="#syntax" data-toggle="tab">Syntax</a></li> |
| 154 <li><a href="#types" data-toggle="tab">Optional types</a><
/li> | 154 <li><a href="#types" data-toggle="tab">Optional types</a><
/li> |
| 155 <li><a href="#classes" data-toggle="tab">Classes</a></li> | 155 <li><a href="#classes" data-toggle="tab">Classes</a></li> |
| 156 <li><a href="#futures" data-toggle="tab">Futures</a></li> | 156 <li><a href="#futures" data-toggle="tab">Futures</a></li> |
| 157 <li><a href="#webui" data-toggle="tab">Web UI</a></li> | 157 <li><a href="#polymer" data-toggle="tab">Polymer.dart</a><
/li> |
| 158 </ul> | 158 </ul> |
| 159 | 159 |
| 160 <div class="tab-content"> | 160 <div class="tab-content"> |
| 161 <div class="tab-pane active" id="syntax"> | 161 <div class="tab-pane active" id="syntax"> |
| 162 <p> | 162 <p> |
| 163 Dart aims to be unsurprising, | 163 Dart aims to be unsurprising, |
| 164 but it does add a few language features | 164 but it does add a few language features |
| 165 to keep your code succinct yet understandable. | 165 to keep your code succinct yet understandable. |
| 166 Read all about Dart syntax in the | 166 Read all about Dart syntax in the |
| 167 <a href="/docs/dart-up-and-running/contents/ch02.html">Dart language tou
r</a>. | 167 <a href="/docs/dart-up-and-running/contents/ch02.html">Dart language tou
r</a>. |
| (...skipping 114 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 282 File file = new File("dailyNewsDigest.txt"); | 282 File file = new File("dailyNewsDigest.txt"); |
| 283 [[highlight]]file.readAsString()[[/highlight]] // readAsStrin
g() returns a Future. | 283 [[highlight]]file.readAsString()[[/highlight]] // readAsStrin
g() returns a Future. |
| 284 [[highlight]].then[[/highlight]]((content) => print(content)) // Handle succ
essful completion. | 284 [[highlight]].then[[/highlight]]((content) => print(content)) // Handle succ
essful completion. |
| 285 [[highlight]].catchError[[/highlight]]((error) => // Handle fail
ure. | 285 [[highlight]].catchError[[/highlight]]((error) => // Handle fail
ure. |
| 286 print("Sorry, no news today. Here's why:\n$error")); | 286 print("Sorry, no news today. Here's why:\n$error")); |
| 287 } | 287 } |
| 288 {% endprettify %} | 288 {% endprettify %} |
| 289 </div> | 289 </div> |
| 290 </div> | 290 </div> |
| 291 </div> | 291 </div> |
| 292 <div class="tab-pane" id="webui"> | 292 <div class="tab-pane" id="polymer"> |
| 293 <p> | 293 <p> |
| 294 Here's an example of implementing a web app using the Web UI package. | 294 Here's an example of implementing a web app using the |
| 295 To learn about web programming with Dart, try our | 295 <a href="/polymer-dart/">polymer.dart</a> |
| 296 <a href="/docs/tutorials/">Dart tutorials</a>. | 296 package. |
| 297 </p> | 297 </p> |
| 298 | 298 |
| 299 <div class="row-fluid"> | 299 <div class="row-fluid"> |
| 300 <div class="span6" id="dart-code"> | 300 <div class="span6" id="dart-code"> |
| 301 {% prettify dart %} | 301 {% prettify dart %} |
| 302 // Dart code: | 302 <head> |
| 303 import 'package:web_ui/web_ui.dart'; | 303 <link rel="import" href="[[highlight]]click_counter.html[[/highlight]]"> |
| 304 <script src="packages/polymer/boot.js"></script> |
| 305 </head> |
| 304 | 306 |
| 305 @observable | 307 <body> |
| 306 var [[highlight]]shout[[/highlight]] = new Shout(); | 308 [[highlight]]<click-counter></click-counter>[[/highlight]] |
| 307 | 309 </body> |
| 308 @observable | |
| 309 class Shout { | |
| 310 String [[highlight]]myString[[/highlight]] = ''; | |
| 311 String get [[highlight]]shouted[[/highlight]] => myString.toUpperCase(); | |
| 312 String get [[highlight]]palindrome[[/highlight]] => | |
| 313 myString + myString.split('').reversed.join(); | |
| 314 } | |
| 315 {% endprettify %} | 310 {% endprettify %} |
| 316 </div> | 311 </div> |
| 317 <div class="span6" id="html-code"> | 312 <div class="span6" id="html-code"> |
| 318 {% prettify html %} | 313 {% prettify html %}{% raw %} |
| 319 <!-- HTML code: --> | 314 <polymer-element name="[[highlight]]click-counter[[/highlight]]"> |
| 320 <template id="stringManipulation" | 315 <template> |
| 321 instantiate="if [[highlight]]shout[[/highlight]] != null"> | 316 <button on-click="increment">Click Me</button> |
| 322 <input type="text" | 317 <p>You clicked the button {{count}} times.</p> |
| 323 bind-value="shout.[[highlight]]myString[[/highlight]]" | 318 </template> |
| 324 placeholder="Type here"> | 319 <script type="application/dart"> |
| 325 | 320 import 'package:polymer/polymer.dart'; |
| 326 <div> Shouted: {{'{{'}}shout.[[highlight]]shouted[[/highlight]]}} </div> | 321 import 'dart:html'; |
| 327 <div> Palindromic: {{'{{'}}shout.[[highlight]]palindrome[[/highlight]]}} </div
> | 322 |
| 328 </template> | 323 @CustomTag('click-counter') |
| 329 {% endprettify %} | 324 class ClickCounterElement extends PolymerElement with ObservableMixin { |
| 330 {% comment %} | 325 @observable int count = 0; |
| 331 Beginning double curlies are processed by liquid, | 326 |
| 332 so you have to surround them in single quotes, | 327 void increment(Event e, var detail, Node target) { |
| 333 surrounded by double curlies. Yup. | 328 count += 1; |
| 334 {% endcomment %} | 329 } |
| 330 } |
| 331 </script> |
| 332 </polymer-element> |
| 333 {% endraw %}{% endprettify %} |
| 335 </div> | 334 </div> |
| 336 </div> <!-- code --> | 335 </div> <!-- code --> |
| 337 </div> | 336 </div> |
| 338 </div> | 337 </div> |
| 339 </div> | 338 </div> |
| 340 </section> | 339 </section> |
| 341 | 340 |
| 342 | 341 |
| 343 <section id="get-started"> | 342 <section id="get-started"> |
| 344 | 343 |
| (...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 420 You can write Dart apps using any recent version of | 419 You can write Dart apps using any recent version of |
| 421 {% include os-choices.html %} | 420 {% include os-choices.html %} |
| 422 The Dart development tools <b>do not support Windows XP</b>. | 421 The Dart development tools <b>do not support Windows XP</b>. |
| 423 Dart Editor requires Java version 6 or higher. | 422 Dart Editor requires Java version 6 or higher. |
| 424 </aside> | 423 </aside> |
| 425 | 424 |
| 426 </section> | 425 </section> |
| 427 | 426 |
| 428 </article> <!-- /.homepage --> | 427 </article> <!-- /.homepage --> |
| 429 | 428 |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 23619013:
start talking about polymer.dart (Closed)
Base URL: git@github.com:dart-lang/dartlang.org.git@master