| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Get Started" | 3 title: "Get Started" |
| 4 description: "Get Dart and run two Dart applications" | 4 description: "Get Dart and run two Dart applications" |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 tutorial: | 6 tutorial: |
| 7 id: get-started | 7 id: get-started |
| 8 js: | 8 js: |
| 9 - url: /js/os-switcher.js | 9 - url: /js/os-switcher.js |
| 10 defer: true | 10 defer: true |
| (...skipping 14 matching lines...) Expand all Loading... |
| 25 * Run Dart web apps directly in Dartium. | 25 * Run Dart web apps directly in Dartium. |
| 26 * Compile Dart apps to JavaScript for other browsers. | 26 * Compile Dart apps to JavaScript for other browsers. |
| 27 * All Dart apps have a main() function. | 27 * All Dart apps have a main() function. |
| 28 * Dart supports top-level functions. | 28 * Dart supports top-level functions. |
| 29 | 29 |
| 30 {% endcapture %} | 30 {% endcapture %} |
| 31 | 31 |
| 32 {% capture sample_links %} | 32 {% capture sample_links %} |
| 33 | 33 |
| 34 <p> | 34 <p> |
| 35 Get the source code for the samples featured in this target:</p> | 35 Get the source code for the samples featured in this tutorial:</p> |
| 36 | 36 |
| 37 <ul> | 37 <ul> |
| 38 <li> | 38 <li> |
| 39 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target01/helloworld" | 39 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/get-started/helloworld" |
| 40 target="_blank">helloworld</a> | 40 target="_blank">helloworld</a> |
| 41 </li> | 41 </li> |
| 42 <li> | 42 <li> |
| 43 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target01/clickme" | 43 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/get-started/clickme" |
| 44 target="_blank">clickme</a> | 44 target="_blank">clickme</a> |
| 45 </li> | 45 </li> |
| 46 </ul> | 46 </ul> |
| 47 | 47 |
| 48 {% endcapture %} | 48 {% endcapture %} |
| 49 | 49 |
| 50 {% capture content %} | 50 {% capture content %} |
| 51 | 51 |
| 52 <div class="tute-target-title"> | 52 <div class="tute-target-title"> |
| 53 <h1>{{page.title}}</h1> | 53 <h1>{{page.title}}</h1> |
| 54 <h3>Get Dart. Run two apps.</h3> | 54 <h3>Get Dart. Run two apps.</h3> |
| 55 </div> | 55 </div> |
| 56 | 56 |
| 57 This target gets you ready | 57 This tutorial gets you ready |
| 58 to begin writing web apps in Dart. | 58 to begin writing web apps in Dart. |
| 59 Here you will download the Dart software, | 59 Here you will download the Dart software, |
| 60 and use Dart Editor to | 60 and use Dart Editor to |
| 61 create and run two small applications. | 61 create and run two small applications. |
| 62 | 62 |
| 63 * [Download the Dart software bundle](#download-dart) | 63 * [Download the Dart software bundle](#download-dart) |
| 64 * [What did you get?](#what-did-you-get) | 64 * [What did you get?](#what-did-you-get) |
| 65 * [Start Dart Editor](#start-dart-editor) | 65 * [Start Dart Editor](#start-dart-editor) |
| 66 * [About Dart applications](#what-is-app) | 66 * [About Dart applications](#what-is-app) |
| 67 * [Create a command-line app](#create-cmd-line) | 67 * [Create a command-line app](#create-cmd-line) |
| 68 * [Run a command-line app](#run-cmd-line) | 68 * [Run a command-line app](#run-cmd-line) |
| 69 * [Create a web app](#create-web-app) | 69 * [Create a web app](#create-web-app) |
| 70 * [Run a web app in Dartium](#run-web-app) | 70 * [Run a web app](#run-web-app) |
| 71 * [About the HTML, CSS, and Dart triumvirate](#source-files) | 71 * [About the HTML, CSS, and Dart triumvirate](#source-files) |
| 72 * [About main() and other top-level functions](#top-level-functions) | 72 * [About main() and other top-level functions](#top-level-functions) |
| 73 * [About file naming conventions](#file-names) | 73 * [About file naming conventions](#file-names) |
| 74 * [Other resources](#other-resources) | 74 * [Other resources](#other-resources) |
| 75 * [What next?](#what-next) |
| 75 | 76 |
| 76 ##Download the Dart software bundle {#download-dart} | 77 ##Download the Dart software bundle {#download-dart} |
| 77 | 78 |
| 78 Get Dart. | 79 Get Dart. |
| 79 The Dart download includes Dart Editor, | 80 The Dart download includes Dart Editor, |
| 80 which you'll be using | 81 which you'll be using |
| 81 throughout this tutorial. | 82 throughout this tutorial. |
| 82 | 83 |
| 83 <div align="center"> | 84 <div align="center"> |
| 84 {% include downloads/_dart-editor.html %} | 85 {% include downloads/_dart-editor.html %} |
| (...skipping 93 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 178 ## Start Dart Editor {#start-dart-editor} | 179 ## Start Dart Editor {#start-dart-editor} |
| 179 | 180 |
| 180 Invoke Dart Editor by double-clicking its icon | 181 Invoke Dart Editor by double-clicking its icon |
| 181 in your Dart installation directory | 182 in your Dart installation directory |
| 182 <img src="/imgs/Dart_Logo_21.png" | 183 <img src="/imgs/Dart_Logo_21.png" |
| 183 width="21" height="21" alt="Dart Editor icon">. | 184 width="21" height="21" alt="Dart Editor icon">. |
| 184 | 185 |
| 185 Dart Editor displays its Welcome Page | 186 Dart Editor displays its Welcome Page |
| 186 in a tab in the **Editor pane**. | 187 in a tab in the **Editor pane**. |
| 187 The following diagram highlights | 188 The following diagram highlights |
| 188 the features you need to know about now. | 189 some of the features of the editor. |
| 189 | 190 |
| 190 <img src="images/dart-editor-items.png" | 191 <img src="images/dart-editor-items.png" |
| 191 alt="Dart Editor's basic features"> | 192 alt="Dart Editor's basic features"> |
| 192 | 193 |
| 193 Send feedback button | 194 Send feedback button |
| 194 : Allows you to share bugs and requests | 195 : Allows you to share bugs and requests |
| 195 directly with the Dart Editor team | 196 directly with the Dart Editor team |
| 196 as well as the larger Dart team. | 197 as well as the larger Dart team. |
| 197 | 198 |
| 198 Search field | 199 Search field |
| 199 : Searches every file in your **Files view** for the entered text. | 200 : Searches every file in your **Files view** for the entered text. |
| 200 Results for text searches are displayed in a **Search view**. | 201 Results for text searches are displayed in a **Search view**. |
| 201 Within that view, | 202 Within that view, |
| 202 double-click a file to see it in the **Editor pane**. | 203 double-click a file to see it in the **Editor pane**. |
| 203 All occurrences of the search string in the **Editor pane** are highlighted. | 204 All occurrences of the search string in the **Editor pane** are highlighted. |
| 204 | 205 |
| 205 Run button | 206 Run button |
| 206 : Runs the application associated with the file | 207 : Runs the application associated with the file |
| 207 that is currently selected in the **Files view**. | 208 that is currently selected in the **Files view**. |
| 208 | 209 |
| 209 New application button | 210 New application button |
| 210 : Creates a directory and, within it, | 211 : Creates a directory and, within it, |
| 211 the files for a new application. | 212 the files for a new application. |
| 212 Alternatively, you can use the | 213 Alternatively, you can use the |
| 213 **File > New Application** menu item | 214 **File > New Application** menu item |
| 214 or the **Create a new application** button | 215 or the **Create an application** button |
| 215 on the Welcome page. | 216 on the Welcome page. |
| 216 | 217 |
| 218 Files view |
| 219 : Shows a hierarchical view of your Dart applications |
| 220 and their associated files. |
| 221 Double-click a file in the **Files view** to see its contents |
| 222 in the **Editor pane**. |
| 223 If you single-click a file in the **Files view**, |
| 224 the file is selected, |
| 225 but not necessarily displayed in the **Editor pane**. |
| 226 You must double-click the file. |
| 227 |
| 217 Editor pane | 228 Editor pane |
| 218 : Provides the basic editing functionality you'd expect, | 229 : Provides the basic editing functionality you'd expect, |
| 219 plus features such as Dart code completion, | 230 plus features such as Dart code completion, |
| 220 API browsing, and support for refactoring. | 231 API browsing, and support for refactoring. |
| 221 The first time you use Dart Editor, | 232 The first time you use Dart Editor, |
| 222 it shows the Welcome Page in the Editor pane, | 233 it shows the Welcome Page in the Editor pane, |
| 223 which provides quick access to Dart resources | 234 which provides quick access to Dart resources |
| 224 and some nifty samples. | 235 and some nifty samples. |
| 225 The Welcome Page is also available under the **Tools** menu. | 236 The Welcome Page is also available under the **Tools** menu. |
| 226 | 237 |
| 227 Files view | 238 Problems pane |
| 228 : Shows a hierarchical view of your Dart applications | 239 : Displays warning and error messages. |
| 229 and their associated files. | |
| 230 Double-click a file in the **Files view** to see its contents | |
| 231 in the **Editor pane**. | |
| 232 If you single-click a file in the **Files view**, | |
| 233 the file is selected, | |
| 234 but not necessarily displayed in the **Editor pane**. | |
| 235 You must double-click the file. | |
| 236 | 240 |
| 237 <aside class="alert alert-info"> | 241 <aside class="alert alert-info"> |
| 238 <b> Problems? </b> | 242 <b> Problems? </b> |
| 239 See <a href="/tools/editor/troubleshoot.html">Troubleshooting Dart Editor</a>. | 243 See <a href="/tools/editor/troubleshoot.html">Troubleshooting Dart Editor</a>. |
| 240 </aside> | 244 </aside> |
| 241 | 245 |
| 242 ##About Dart applications {#what-is-app} | 246 ##About Dart applications {#what-is-app} |
| 243 | 247 |
| 244 At minimum, a Dart application has | 248 At minimum, a Dart application has |
| 245 | 249 |
| 246 * one Dart source file—a | 250 * one Dart source file—a |
| 247 file with the .dart suffix that contains Dart code | 251 file with the .dart suffix that contains Dart code |
| 248 * one top-level main() function. | 252 * one top-level main() function. |
| 249 This is the entry point for your application. | 253 This is the entry point for your application. |
| 250 main() is typically in a Dart source file whose basename is the app name. | |
| 251 | 254 |
| 252 There are two kinds of Dart applications: | 255 There are two kinds of Dart applications: |
| 253 command-line applications and web applications. | 256 command-line applications and web applications. |
| 254 A command-line application is a standalone program | 257 A command-line application is a standalone program |
| 255 that you run in the Dart VM from the command-line. | 258 that you run in the Dart VM from the command-line in a terminal window. |
| 256 Web applications are hosted on a web page and run in a browser | 259 Web applications are hosted on a web page and run in a browser |
| 257 (either directly in a browser that supports Dart | 260 (either directly in a browser that supports Dart |
| 258 or by compiling to JavaScript). | 261 or by compiling to JavaScript). |
| 259 | 262 |
| 260 ###Command-line applications | 263 ###Command-line applications |
| 261 | 264 |
| 262 Dart command-line applications | 265 Dart command-line applications |
| 263 run standalone from the command-line, | 266 run standalone from the command-line, |
| 264 independent of a web browser. | 267 independent of a web browser. |
| 265 Command-line apps are often used | 268 Command-line apps are often used |
| 266 to provide server-side support to a web app, | 269 to provide server-side support to a web app, |
| 267 but they can also be scripts. | 270 but they can also be scripts. |
| 268 | 271 |
| 269 The Dart VM runs Dart code directly without intermediate compilation. | 272 The Dart VM runs Dart code directly without intermediate compilation. |
| 270 | 273 |
| 271 <img src="images/dartvm-cmd-line.png" | 274 <img src="images/dartvm-cmd-line.png" |
| 272 alt="Run a command-line application without compilation"> | 275 alt="Run a command-line application without compilation"> |
| 273 | 276 |
| 274 Conveniently, you can run command-line apps | 277 Conveniently, you can run command-line apps |
| 275 directly in Dart Editor with the click of the Run button | 278 directly in Dart Editor with the click of the Run button |
| 276 <img src="images/run.png" width="16" height="16" | 279 <img src="images/run.png" width="16" height="16" |
| 277 alt="Run button">. | 280 alt="Run button">. |
| 278 Alternatively, | 281 Alternatively, |
| 279 use the Dart VM tool | 282 use the Dart VM tool |
| 280 in the dart-sdk/bin directory in your Dart installation directory. | 283 in the `dart-sdk/bin` directory in your Dart installation directory. |
| 281 | 284 |
| 282 ###Web applications | 285 ###Web applications |
| 283 | 286 |
| 284 Dart web applications run inside of a browser page. | 287 Dart web applications run inside of a browser page. |
| 285 In addition to a .dart file, | 288 In addition to a Dart file, |
| 286 a web app requires a .html file to host the app. | 289 a web app requires an HTML file to host the app. |
| 287 Often, a web app provides the client-side | 290 Often, a web app provides the client-side |
| 288 user interface for a server. | 291 user interface for a server. |
| 289 | 292 |
| 290 You can run your Dart web app from Dart Editor | 293 You can run your Dart web app from Dart Editor |
| 291 by clicking the Run button | 294 by clicking the Run button |
| 292 <img src="images/run.png" width="16" height="16" | 295 <img src="images/run.png" width="16" height="16" |
| 293 alt="Run button">. | 296 alt="Run button">. |
| 294 By default, Dart Editor will invoke Dartium, | 297 By default, Dart Editor will invoke Dartium, |
| 295 which has the Dart VM embedded in it, | 298 which has the Dart VM embedded in it, |
| 296 and loads your .html file, | 299 and loads your HTML file, |
| 297 which in turn loads your app. | 300 which in turn loads your app. |
| 298 | 301 |
| 299 <img src="images/dartvm-web-app.png" | 302 <img src="images/dartvm-web-app.png" |
| 300 alt="Run a web application directly in a Dart-savvy browser"> | 303 alt="Run a web application directly in a Dart-savvy browser"> |
| 301 | 304 |
| 302 If you want to see your web app in a browser | 305 If you want to see your web app in a browser |
| 303 that does not yet support Dart, | 306 that does not yet support Dart, |
| 304 you can compile your Dart code to JavaScript | 307 you can compile your Dart code to JavaScript |
| 305 using the Dart-to-JavaScript compiler, | 308 using the Dart-to-JavaScript compiler, |
| 306 which is in the dart-sdk/bin directory in your Dart installation directory. | 309 which is in the `dart-sdk/bin` directory in your Dart installation directory. |
| 307 You then load the resulting .js file | 310 You then load the resulting JavaScript file |
| 308 into your browser of choice. | 311 into your browser of choice. |
| 309 Dart Editor makes this easy with launches, | 312 Dart Editor provides a convenient menu option for |
| 310 which you will learn about in the next target. | 313 running web apps as JavaScript. |
| 311 | 314 |
| 312 <img src="images/dartvm-js.png" | 315 <img src="images/dartvm-js.png" |
| 313 alt="Run a web application by compiling to JavaScript"> | 316 alt="Run a web application by compiling to JavaScript"> |
| 314 | 317 |
| 315 The rest of this target steps you through | 318 The rest of this tutorial steps you through |
| 316 creating and running first a command-line application | 319 creating and running first a command-line application |
| 317 and then a web application. | 320 and then a web application. |
| 318 | 321 |
| 319 ##Create a command-line app {#create-cmd-line} | 322 ##Create a command-line app {#create-cmd-line} |
| 320 | 323 |
| 321 In Dart Editor, click the New Application button | 324 In Dart Editor, choose **File->New Application** from the menu |
| 325 or click the New Application button |
| 322 <img src="images/newapp.png" width="17" height="16" alt="New App button"/>. | 326 <img src="images/newapp.png" width="17" height="16" alt="New App button"/>. |
| 323 A dialog appears. | 327 A dialog appears that looks like this: |
| 324 | 328 |
| 325 Follow these steps to create a command-line application: | |
| 326 <img src="images/new-helloworld.png" | 329 <img src="images/new-helloworld.png" |
| 327 alt="Create a new command-line application"/> | 330 alt="Create a new command-line application"/> |
| 328 | 331 |
| 329 <ol> | 332 <ol> |
| 330 <li markdown="1"> | 333 <li markdown="1"> |
| 331 Type helloworld in the **Application Name** text field. | 334 Type `helloworld` in the **Application Name** text field. |
| 332 By convention, application names are lowercase. | 335 By convention, application names are lowercase. |
| 333 This name is used for the app's directory | 336 This name is used for the app's directory |
| 334 and the basename for the files it creates. | 337 and the basename for the files it creates. |
| 335 </li> | 338 </li> |
| 336 | 339 |
| 337 <li markdown="1"> | 340 <li markdown="1"> |
| 338 Type or browse to the directory where you want to save the files. | 341 Type or browse to the directory where you want to save the files. |
| 339 By default, Dart Editor creates a new directory named `dart` | 342 By default, Dart Editor creates a new directory named `dart` |
| 340 in your home directory. | 343 in your home directory. |
| 341 </li> | 344 </li> |
| 342 | 345 |
| 343 <li markdown="1"> | 346 <li markdown="1"> |
| 344 Select **Generate sample content**. | 347 Select **Generate sample content**. |
| 345 Dart Editor will generate sample code | 348 Dart Editor generates sample code |
| 346 appropriate for the type of application you are creating. | 349 appropriate for the type of application you are creating. |
| 347 For a command-line application, | 350 For a command-line application, |
| 348 the sample code implements the standard 'Hello World' program. | 351 the sample code implements the standard 'Hello World' program. |
| 349 </li> | 352 </li> |
| 350 | 353 |
| 351 <li markdown="1"> | 354 <li markdown="1"> |
| 352 Select **Command-line application** from the list. | 355 Select **Command-line application** from the list. |
| 353 </li> | 356 </li> |
| 354 | 357 |
| 355 <li markdown="1"> | 358 <li markdown="1"> |
| 356 Click **Finish**. | 359 Click **Finish**. |
| 357 </li> | 360 </li> |
| 358 </ol> | 361 </ol> |
| 359 | 362 |
| 360 Dart Editor creates a directory called `helloworld` | 363 Dart Editor creates a directory for the application |
| 361 that contains boilerplate files and directories for a | 364 and boilerplate files for a small command-line app. |
| 362 simple command-line app. | 365 The **Files view** displays |
| 363 The main source file is named after the application and | 366 the file hierarchy for the application. |
| 364 is in a directory called `bin`. | |
| 365 The rest of the files and directories | |
| 366 are there for pub support; | |
| 367 they come into play if your application needs to use extra libraries. | |
| 368 You can ignore these files for now. | |
| 369 | |
| 370 The main Dart source file for the app | |
| 371 contains the top-level main() function | |
| 372 and is named after the app itself. | |
| 373 In this case, `helloworld.dart`. | |
| 374 The file hierarchy is displayed in the **Files view**. | |
| 375 | 367 |
| 376 <img src="images/helloworld-files.png" | 368 <img src="images/helloworld-files.png" |
| 377 alt="Dart Editor with new command-line app files"/> | 369 alt="Dart Editor with new command-line app files"/> |
| 378 | 370 |
| 379 The contents of helloworld.dart is shown in the **Editor pane**. | 371 Some of the files and directories in the helloworld application |
| 380 You might recognize it as the canonical Hello World program. | 372 include the following: |
| 381 This program prints | 373 |
| 382 `Hello, World!` to the standard output stream | 374 helloworld |
| 375 : Contains boilerplate files and directories for a |
| 376 simple command-line app. |
| 377 |
| 378 pubspec.yaml |
| 379 : Declares which libraries |
| 380 your application needs. |
| 381 The `packages` directories contain those libraries. |
| 382 The `pubspec.lock` file specifies the version numbers |
| 383 of the libraries on which the application depends. |
| 384 |
| 385 bin |
| 386 : Contains the source files for the application. |
| 387 The main source file for this example is `helloworld.dart`. |
| 388 |
| 389 helloworld.dart |
| 390 : Contains the Dart source code for this app. |
| 391 |
| 392 The **Editor pane** shows |
| 393 the contents of `helloworld.dart`. |
| 394 The program prints |
| 395 'Hello, World!' to the standard output stream |
| 383 using the print() function, | 396 using the print() function, |
| 384 which is provided by the dart:core library. | 397 which is provided by the dart:core library. |
| 385 The functions and objects defined in the core library | 398 The functions and objects defined in the core library |
| 386 are automatically available to all Dart applications. | 399 are automatically available to all Dart applications. |
| 387 | 400 |
| 388 ##Run a command-line app {#run-cmd-line} | 401 ##Run a command-line app {#run-cmd-line} |
| 389 | 402 |
| 390 Make sure either the helloworld directory or the helloworld.dart file | 403 To run the helloworld app from Dart Editor: |
| 391 is selected in the **Files view**, | 404 |
| 392 then click the Run button | 405 * Select the helloworld.dart file in the **Files view**. |
| 406 * Click the Run button |
| 393 <img src="images/run.png" width="16" height="16" | 407 <img src="images/run.png" width="16" height="16" |
| 394 alt="Run button">. | 408 alt="Run button">. |
| 395 | 409 |
| 396 Dart Editor opens a new panel, | 410 Dart Editor opens a new panel, |
| 397 called the **Output view**, | 411 called the **Output view**, |
| 398 and displays the output of the helloworld app. | 412 and displays the output of the helloworld app. |
| 399 | 413 |
| 400 <img src="images/helloworld-output.png" | 414 <img src="images/helloworld-output.png" |
| 401 alt="Dart Editor with helloworld output view"/> | 415 alt="Dart Editor with helloworld output view"/> |
| 402 | 416 |
| 403 ##Create a web app {#create-web-app} | 417 ##Create a web app {#create-web-app} |
| 404 | 418 |
| 405 Now let's create a web application. | 419 Now let's create a web application. |
| 406 As you did when creating a command-line application, | 420 As you did when creating a command-line application, |
| 407 click the **New Application** button | 421 click the **New Application** button |
| 408 <img src="images/newapp.png" width="17" height="16" alt="New App button"/>. | 422 <img src="images/newapp.png" width="17" height="16" alt="New App button"/>. |
| 423 Name the application `clickme`. |
| 409 This time you are creating a web app, | 424 This time you are creating a web app, |
| 410 so select **Web application** from the list. | 425 so select **Web application** from the list |
| 426 in the New Application dialog window: |
| 411 | 427 |
| 412 <img src="images/new-click-me.png" | 428 <img src="images/new-click-me.png" |
| 413 alt="Create a new web application"/> | 429 alt="Create a new web application"/> |
| 414 | 430 |
| 415 Dart Editor creates the directory and files needed | 431 Dart Editor creates the directory and files needed |
| 416 for a boilerplate web application. | 432 for a boilerplate web application. |
| 417 | 433 |
| 418 <img src="images/click-me-files.png" | 434 <img src="images/click-me-files.png" |
| 419 alt="Dart Editor with new web application files"/> | 435 alt="Dart Editor with new web application files"/> |
| 420 | 436 |
| 421 As before, the directory is named after your application. | 437 As before, the directory is named after your application. |
| 422 So is the Dart source file that contains the main() function. | 438 So is the Dart source file that contains the main() function. |
| 423 In addition, Dart Editor creates an HTML file that hosts the app. | 439 In addition, Dart Editor creates an HTML file that hosts the app. |
| 424 | 440 |
| 425 The main() function in the clickme app | 441 The main() function in the clickme app |
| 426 contains Dart code | 442 contains Dart code |
| 427 that puts text on the browser page | 443 that puts text on the browser page |
| 428 and registers an *event handler*—a function | 444 and registers an *event handler*—a function |
| 429 that responds to user-generated events like a mouse click. | 445 that responds to user-generated events like a mouse click. |
| 430 This code uses API defined in the Dart HTML library. | 446 This code uses API defined in the dart:html library. |
| 431 | 447 |
| 432 In the next target, | 448 In the next tutorial, |
| 433 you will build a mini app from scratch, | 449 you will build a mini app from scratch, |
| 434 creating the Dart source, the HTML source, | 450 creating the Dart source, the HTML source, |
| 435 and the CSS source yourself. | 451 and the CSS source yourself. |
| 436 Afterward, you can re-visit the code for clickme. | 452 Afterward, you can re-visit the code for clickme. |
| 437 | 453 |
| 438 ##Run a web app in Dartium {#run-web-app} | 454 ##Run a web app {#run-web-app} |
| 439 | 455 |
| 440 To run clickme from Dart Editor, | 456 To run the clickme app from Dart Editor: |
| 441 make sure either the clickme directory or any of its files | 457 |
| 442 is selected, | 458 * Select `clickme.html`. |
| 443 then click the Run button | 459 * Click the Run button |
| 444 <img src="images/run.png" width="16" height="16" | 460 <img src="images/run.png" width="16" height="16" |
| 445 alt="Run button">. | 461 alt="Run button">. |
| 446 Dart Editor invokes Dartium, | |
| 447 which loads the clickme app's HTML file, | |
| 448 and thus, loads the app. | |
| 449 | 462 |
| 450 Here is the clickme app running in a frame. | 463 Dart Editor invokes Dartium providing it with |
| 451 **Try it!** Click the text. | 464 the URL for the clickme app's HTML file. |
| 465 Dartium loads the clickme app's HTML file |
| 466 and the embedded app, which looks like this: |
| 452 | 467 |
| 453 <iframe class="running-app-frame" | 468 <iframe class="running-app-frame" |
| 454 style="height:510px;width:500px;" | 469 style="height:510px;width:500px;" |
| 455 src="http://dart-lang.github.io/dart-tutorials-samples/web/target01/clic
kme/web/clickme.html"> | 470 src="examples/clickme/clickme.html"> |
| 456 </iframe> | 471 </iframe> |
| 457 | 472 |
| 473 ###Run as JavaScript |
| 474 |
| 458 You can run Dart web applications in other browsers | 475 You can run Dart web applications in other browsers |
| 459 by compiling to JavaScript. | 476 by compiling to JavaScript. |
| 460 You will do this in the next target, | 477 Dart Editor provides a convenient menu option for doing so. |
| 461 when you learn about runtime configurations called launches. | 478 Right click on `clickme.html` |
| 479 and select **Run as JavaScript** from the menu. |
| 480 |
| 481 <img src="images/run-as-javascript-screenshot.png" |
| 482 alt="Run a web app as JavaScript"/> |
| 483 |
| 484 Dart Editor compiles the app to JavaScript and |
| 485 invokes your default browser, |
| 486 which runs the app. |
| 462 | 487 |
| 463 ##About the HTML, CSS and Dart triumvirate {#source-files} | 488 ##About the HTML, CSS and Dart triumvirate {#source-files} |
| 464 | 489 |
| 465 Typically three files—an HTML file, a Dart file, | 490 Typically three files—an HTML file, a Dart file, |
| 466 and a CSS file—together implement a Dart web application. | 491 and a CSS file—together implement a Dart web application. |
| 467 Each is written in a different language | 492 Each is written in a different language |
| 468 and each is responsible for a different aspect of the program: | 493 and each is responsible for a different aspect of the program: |
| 469 | 494 |
| 470 | Language | Purpose | | 495 | Language | Purpose | |
| 471 |---|---| | 496 |---|---| |
| (...skipping 22 matching lines...) Expand all Loading... |
| 494 manipulate the elements on a web page dynamically, | 519 manipulate the elements on a web page dynamically, |
| 495 and can save information. | 520 and can save information. |
| 496 | 521 |
| 497 ##About main() and other top-level functions {#top-level-functions} | 522 ##About main() and other top-level functions {#top-level-functions} |
| 498 | 523 |
| 499 Dart lets you define _top-level_ functions, | 524 Dart lets you define _top-level_ functions, |
| 500 that is, functions that are not encapsulated within a class or object. | 525 that is, functions that are not encapsulated within a class or object. |
| 501 All apps have at least one top-level function, | 526 All apps have at least one top-level function, |
| 502 namely the main() function. | 527 namely the main() function. |
| 503 | 528 |
| 504 The two apps you've seen in this target have other top-level functions. | 529 The two apps you've seen in this tutorial have other top-level functions. |
| 505 The Hello World example calls print(), | 530 The Hello World example calls print(), |
| 506 a top-level function defined in dart:core. | 531 a top-level function defined in dart:core. |
| 507 And the clickme app defines a top-level function called reverseText(). | 532 And the clickme app defines a top-level function called reverseText(). |
| 508 | 533 |
| 509 A function declaration | 534 A function declaration |
| 510 has two parts: a _signature_ and a _body_. | 535 has two parts: a _signature_ and a _body_. |
| 511 | 536 |
| 512 <img src="images/function-parts.png" | 537 <img src="images/function-parts.png" |
| 513 alt="Two parts of a function, the signature and the body"/> | 538 alt="Two parts of a function, the signature and the body"/> |
| 514 | 539 |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 553 | 578 |
| 554 You should also follow these conventions | 579 You should also follow these conventions |
| 555 when creating applications outside of Dart Editor. | 580 when creating applications outside of Dart Editor. |
| 556 | 581 |
| 557 ##Other resources | 582 ##Other resources |
| 558 | 583 |
| 559 <ul> | 584 <ul> |
| 560 <li> | 585 <li> |
| 561 <a href="/docs/dart-up-and-running/contents/ch04-tools-editor.html">Dart Edi
tor</a>, | 586 <a href="/docs/dart-up-and-running/contents/ch04-tools-editor.html">Dart Edi
tor</a>, |
| 562 an excerpt from | 587 an excerpt from |
| 563 <a href="/docs/dart-up-and-running/">Dart Up and Running</a>, | 588 <a href="/docs/dart-up-and-running/">Dart: Up and Running</a>, |
| 564 provides details about using Dart Editor. | 589 provides details about using Dart Editor. |
| 565 The excerpt includes, for example, | 590 The excerpt includes, for example, |
| 566 how to set up run-time environments, | 591 how to set up run-time environments, |
| 567 how to use power features such as autocompletion and refactoring, | 592 how to use power features such as autocompletion, |
| 593 debugging, refactoring, |
| 568 and so on. | 594 and so on. |
| 569 </li> | 595 </li> |
| 570 <li> | 596 <li> |
| 571 The <a href="/docs/">Programmer's Guide</a> | 597 The <a href="/docs/">Programmer's Guide</a> |
| 572 points you to docs, articles, | 598 points you to docs, articles, |
| 573 and other resources to help you as you create, | 599 and other resources to help you as you create, |
| 574 test, and deploy Dart code. | 600 test, and deploy Dart code. |
| 575 </li> | 601 </li> |
| 576 </ul> | 602 </ul> |
| 577 | 603 |
| 604 ##What next? |
| 605 |
| 606 The next tutorial, [Connect Dart & HTML](/docs/tutorials/connect-dart-html/), |
| 607 steps you through writing a tiny web app from scratch. |
| 608 |
| 578 {% endcapture %} | 609 {% endcapture %} |
| 579 | 610 |
| 580 {% include tutorial.html %} | 611 {% include tutorial.html %} |
| OLD | NEW |