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 |