| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Dart Tutorials" | 3 title: "Dart Tutorials" |
| 4 description: "The Dart Tutorials—Your guide to building great web apps." | 4 description: "The Dart Tutorials—Your guide to building great web apps." |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 rel: | 6 rel: |
| 7 author: | 7 author: |
| 8 - mary-campione | 8 - mary-campione |
| 9 tutorial: | 9 tutorial: |
| 10 id: tut-home | 10 id: tut-home |
| (...skipping 118 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 129 <p>Organize and share code at <a href="http://pub.dartlang.org/">pub.d
artlang.org</a>.</p> | 129 <p>Organize and share code at <a href="http://pub.dartlang.org/">pub.d
artlang.org</a>.</p> |
| 130 <img src="images/add-packages-screenshot.png" width="300"> | 130 <img src="images/add-packages-screenshot.png" width="300"> |
| 131 </section> | 131 </section> |
| 132 </div> | 132 </div> |
| 133 <div class="span6"> | 133 <div class="span6"> |
| 134 | 134 |
| 135 </div> | 135 </div> |
| 136 </div> | 136 </div> |
| 137 </div> <!-- end Packages tab --> | 137 </div> <!-- end Packages tab --> |
| 138 | 138 |
| 139 <!-- DEPRECATED: WEB UI TAB --> | |
| 140 <!-- | |
| 141 <div class="tab-pane" id="webui"> | |
| 142 | |
| 143 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> | |
| 144 <font size="24"> | |
| 145 <i class="icon-bullhorn"> </i> | |
| 146 </font> | |
| 147 Web UI is being upgraded to | |
| 148 <a href="/polymer-dart/" target="_blank">Polymer.dart</a>. | |
| 149 We've just added a tutorial about | |
| 150 <a href="/docs/tutorials/polymer/">Polymer Elements</a>, | |
| 151 one key feature of Polymer. | |
| 152 We've also provided Polymer.dart versions of the tutorial's Web UI apps. | |
| 153 Check out the | |
| 154 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/" | |
| 155 target="_blank">tutorials's code repo</a> on github. | |
| 156 </aside> | |
| 157 | |
| 158 Web components and templates are the next great ideas in web application d
evelopment. | |
| 159 Together they provide the building blocks to create richer and more dynami
c web applications. | |
| 160 With the Dart team’s <a href="http://pub.dartlang.org/packages/web_ui">Web
UI package</a>, | |
| 161 you can get started using web components and templates now. | |
| 162 | |
| 163 <div class="row-fluid"> | |
| 164 | |
| 165 <div class="span6" style="border-right:1px solid Lavender"> | |
| 166 <section> | |
| 167 <h4><a href="web-ui/"><img src="images/target.png" height="20" width="
20"> Get Started with Web UI</a></h4> | |
| 168 <p>Bind Dart variables to UI elements.</p> | |
| 169 <img src="images/shout-screenshot.png" width="300"> | |
| 170 </section> | |
| 171 </div> | |
| 172 | |
| 173 <div class="span6" style="border-right:1px solid Lavender"> | |
| 174 <section> | |
| 175 <h4><a href="templates/"><img src="images/target.png" height="20" widt
h="20"> Use Templates</a></h4> | |
| 176 <p>Activate UI elements with loops and conditionals.</p> | |
| 177 <img src="images/hangman-screenshot.png" width="300"> | |
| 178 </section> | |
| 179 </div> | |
| 180 </div> | |
| 181 | |
| 182 <div class="row-fluid"> | |
| 183 <div class="span6"> | |
| 184 <section> | |
| 185 <h4><a href="custom-elements/"><img src="images/target.png" height="20
" width="20"> Define a Custom DOM Tag</a></h4> | |
| 186 <p>Create new HTML tags with custom elements.</p> | |
| 187 <img src="images/convert-screenshot.png" width="300"> | |
| 188 </section> | |
| 189 </div> | |
| 190 <div class="span6"> | |
| 191 </div> | |
| 192 </div> | |
| 193 </div> | |
| 194 --> | |
| 195 | |
| 196 <!-- POLYMER TAB --> | 139 <!-- POLYMER TAB --> |
| 197 <div class="tab-pane" id="polymer"> | 140 <div class="tab-pane" id="polymer"> |
| 198 <!-- | 141 <!-- |
| 199 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> | 142 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> |
| 200 <font size="24"> | 143 <font size="24"> |
| 201 <i class="icon-bullhorn"> </i> | 144 <i class="icon-bullhorn"> </i> |
| 202 </font> | 145 </font> |
| 203 <a href="/polymer-dart/" target="_blank">Polymer.dart</a>. | 146 <a href="/polymer-dart/" target="_blank">Polymer.dart</a>. |
| 204 supersedes Web UI. | 147 supersedes Web UI. |
| 205 <a href="/docs/tutorials/polymer/">Polymer Elements</a>, | 148 <a href="/docs/tutorials/polymer/">Polymer Elements</a>, |
| (...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 290 </div> | 233 </div> |
| 291 --> | 234 --> |
| 292 | 235 |
| 293 </div> <!-- end tab content--> | 236 </div> <!-- end tab content--> |
| 294 </div> <!--end tabbable --> | 237 </div> <!--end tabbable --> |
| 295 </div> <!-- end of tute-tabs --> | 238 </div> <!-- end of tute-tabs --> |
| 296 | 239 |
| 297 {% endcapture %} | 240 {% endcapture %} |
| 298 | 241 |
| 299 {% include tutorial_main_page.html %} | 242 {% include tutorial_main_page.html %} |
| OLD | NEW |