| Index: src/site/articles/trydart/index.markdown.safe
|
| diff --git a/src/site/articles/trydart/index.markdown.safe b/src/site/articles/trydart/index.markdown.safe
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..e2a25684aa2defb316f54c385f3fb07d1397b62f
|
| --- /dev/null
|
| +++ b/src/site/articles/trydart/index.markdown.safe
|
| @@ -0,0 +1,553 @@
|
| +---
|
| +layout: default
|
| +title: "Try Dart"
|
| +description: "Write some Dart code. Learn some stuff."
|
| +has-permalinks: true
|
| +tutorial:
|
| + id: trydart
|
| +js:
|
| +- url: /js/os-switcher.js
|
| + defer: true
|
| +- url: /js/editor-downloads-analytics.js
|
| + defer: true
|
| +- url: /js/editor-version.js
|
| + defer: true
|
| +---
|
| +
|
| +# {{ page.title }}
|
| +
|
| +## Got an hour? Write a Dart app.
|
| +
|
| +In this code lab,
|
| +you build a pirate badge generator from a skeleton app.
|
| +
|
| +<strong>Learn how to build this app!</strong>
|
| +
|
| +<iframe class="running-app-frame"
|
| + style="height:220px;width:530px;"
|
| + src="examples/piratebadge/piratebadge.html">
|
| +</iframe>
|
| +
|
| +<hr>
|
| +
|
| +## The Plan
|
| +
|
| +* [Set up](#set-up)
|
| +* [Step one: Look at the code for the skeleton app](#step-one)
|
| +* [Step two: Add an input field](#step-two)
|
| +* [Step three: Add a button](#step-three)
|
| +* [Step four: Generate random names](#step-four)
|
| +* [Step five: Create a class for pirate names](#step-five)
|
| +* [Step six: Add radio buttons](#step-six)
|
| +* [Step seven: Read the names from a JSON file with HttpRequest](#step-seven)
|
| +
|
| +<hr>
|
| +
|
| +## Set up {#set-up}
|
| +
|
| +### To do list {#setup-todolist}
|
| +
|
| +<ol>
|
| +<li>
|
| +If you haven't already done so,
|
| +get the Dart download.
|
| +
|
| + {% include downloads/_dart-editor.html %}
|
| +
|
| + The Dart tools
|
| + work in recent versions of
|
| + {% include os-choices.html %}
|
| +
|
| + <br> <strong>Having trouble?</strong> Go to the [XXX: troubleshooting page].
|
| +</li>
|
| +<li>
|
| +Start Dart Editor by double clicking its icon
|
| +<img src="/imgs/Dart_Logo_21.png"
|
| + width="21" height="21" alt="Dart Editor icon">.
|
| +</li>
|
| +<li>
|
| +<a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip">
|
| + Download
|
| +</a>
|
| +the sample code.
|
| +Unzip the ZIP file.
|
| +</li>
|
| +
|
| +<li markdown="1">
|
| +In Dart Editor,
|
| +open the `piratebadge` directory from the ZIP file
|
| +with **File>Open Existing Folder...**.
|
| +</li>
|
| +</ol>
|
| +
|
| +<div class="row">
|
| + <div class="span7" markdown="1">
|
| +
|
| +
|
| +
|
| + </div>
|
| + <div class="span5" markdown="1">
|
| +
|
| +<i class="icon-info-sign"> </i> <strong> Information Treasure Trove </strong>
|
| +
|
| +* Dart web apps use the public `browser` package to run on a web page.
|
| +This project has all of the package dependencies set up for you
|
| +and the packages installed.
|
| +The packages directory, the `pubspec.yaml`, and `pubspec.lock` files are
|
| +all related to library dependencies.
|
| +
|
| +* Several numbered directories contain the completed code for each step.
|
| +`1-blankbadge` contains the skeletal version of the app that you begin with.
|
| +`6-piratebadge_json` contains the final version of the app.
|
| +
|
| +* The `piratebadge.css` file
|
| +provides the CSS styles for all steps of the app.
|
| +You don't change this file during this code lab.
|
| +
|
| + {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
|
| +
|
| + </div>
|
| +</div>
|
| +
|
| +<hr>
|
| +
|
| +##Step one: Look at the code for the skeleton app {#step-one}
|
| +
|
| +### To do list for step one {#step-one-todolist}
|
| +
|
| +1. Expand the `1-blankbadge` directory,
|
| +which contains two files, `piratebadge.html` and `piratebadge.dart`.
|
| +You edit both of these files in each step of this code lab.
|
| +
|
| +2. Open both files by double-clicking the filename in Dart Editor.
|
| +
|
| +3. Run the app in Dart Editor by clicking the Run button
|
| +<img src="images/run.png" width="16" height="16"
|
| + alt="Run button">.
|
| +It's just a boilerplate app, so it doesn't do anything.
|
| +
|
| +4. Get familiar with the HTML and Dart code.
|
| +
|
| +#### piratebadge.html
|
| +
|
| +<div class="row">
|
| + <div class="span7" markdown="1">
|
| +
|
| +{% prettify html%}
|
| +<html>
|
| + <head>
|
| + <meta charset="utf-8">
|
| + <title>Pirate badge</title>
|
| + <link rel="stylesheet" href="../piratebadge.css">
|
| + </head>
|
| + <body>
|
| + <h1>Pirate badge</h1>
|
| +
|
| + <div class="container">
|
| + <div class="entry">
|
| + [[highlight]]<span>TO DO: Put the UI widgets here.</span>[[/highlight]]
|
| + </div>
|
| + <div class="outer">
|
| + <div class="boilerplate">
|
| + Arrr! Me name is
|
| + </div>
|
| + <div class="name">
|
| + [[highlight]]<span id="badgeName"> </span>[[/highlight]]
|
| + </div>
|
| + </div>
|
| + </div>
|
| +
|
| + [[highlight]]<script type="application/dart" src="piratebadge.dart"></script>[[/highlight]]
|
| + [[highlight]]<script src="packages/browser/dart.js"></script>[[/highlight]]
|
| + </body>
|
| +</html>
|
| +{% endprettify %}
|
| +
|
| + </div>
|
| + <div class="span5" markdown="1">
|
| +
|
| +<strong>What am I looking at?</strong>
|
| +
|
| +* During the code lab,
|
| +all the changes you make to this file are within
|
| +the <div> element identfied with the class `entry`.
|
| +
|
| +* When you give the app some UI widgets in the next step,
|
| +the <span> element with the ID `badgename`
|
| +is programmatically updated by Dart
|
| +based on user input.
|
| +
|
| +* The script `piratebadge.dart` provides the main program for the app.
|
| +
|
| +* The script `packages/browser/dart.js` is a bootstrap script
|
| +that takes care of turning on the Dart VM,
|
| +as well as compatibility with non-Dart browsers.
|
| +
|
| +XXX: use fancy code highlighter for hover
|
| +
|
| + </div>
|
| +
|
| +</div>
|
| +
|
| +#### piratebadge.dart
|
| +
|
| +<div class="row">
|
| + <div class="span7" markdown="1">
|
| +
|
| +{% prettify dart %}
|
| +[[highlight]]void main() {
|
| + // Your app starts here.
|
| +}
|
| +[[/highlight]]
|
| +{% endprettify %}
|
| +
|
| + </div>
|
| + <div class="span5" markdown="1">
|
| +
|
| +* This file is included in the HTML file
|
| +with the <script> tag.
|
| +
|
| +* The `main()` function is a top-level function.
|
| + Dart calls this function when your app starts.
|
| +
|
| + {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
|
| + </div>
|
| +
|
| +</div>
|
| +
|
| +<hr>
|
| +
|
| +##Step two: Add an input field {#step-two}
|
| +
|
| +[<a href="#step-two-todolist">Go to the <strong>To do list</strong> for step two.</a>]
|
| +
|
| +### Concepts for step two {#step-two-concepts}
|
| +
|
| +In this step, you add an input field to the HTML code
|
| +so that the user can type in a name to display on the badge.
|
| +
|
| +<strong>Try it!</strong> Type in the text field. [XXX: why oh why is this broken?]
|
| +
|
| +<iframe class="running-app-frame"
|
| + style="height:220px;width:530px;"
|
| + src="examples/2-inputnamebadge/piratebadge.html">
|
| +</iframe>
|
| +
|
| +You provide the the input field with a Dart _input event handler_—a
|
| +function that gets called when the user types a character in the text field.
|
| +The event handler changes the badge
|
| +by changing the text of
|
| +the <span> element with the ID `badgeName`.
|
| +
|
| +
|
| +
|
| +### To do list for step two {#step-two-todolist}
|
| +
|
| +#### 1. Add the highlighted code to piratebadge.html as shown:
|
| +
|
| +<div class="row">
|
| +
|
| + <div class="span7" markdown="1">
|
| +{% prettify html %}
|
| +...
|
| +<div class="entry">
|
| +[[highlight]]<div>
|
| + <input type="text" id="inputName" value="Anne">
|
| + </div>[[/highlight]]
|
| +</div>
|
| +...
|
| +{% endprettify %}
|
| + </div>
|
| + <div class="span5" markdown="1">
|
| +
|
| +* The ID for the input element is `inputName`.
|
| +The Dart code gets this element by querying the DOM for this ID.
|
| +
|
| + {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
|
| + </div>
|
| +</div>
|
| +
|
| +#### 2. Edit piratebadge.dart.
|
| +
|
| +Edit the Dart source code so that it contains the code shown below.
|
| +
|
| +<div class="row">
|
| + <div class="span7" markdown="1">
|
| +{% prettify dart %}
|
| +import 'dart:html';
|
| +
|
| +InputElement inputNameElement;
|
| +
|
| +void main() {
|
| + inputNameElement = query('#inputName');
|
| + inputNameElement.onInput.listen(generateBadge);
|
| +}
|
| +
|
| +void generateBadge(Event event) {
|
| + query('#badgeName').text = inputNameElement.value;
|
| +}
|
| +{% endprettify %}
|
| +
|
| + </div>
|
| + <div class="span5" markdown="1">
|
| +
|
| +* The dart:html library provides HTML elements and access to the DOM.
|
| +
|
| +* The `query()` function gets an element from the DOM.
|
| +This program uses an ID to specify which element.
|
| +
|
| +* The code registers an input event handler on the input field.
|
| +Note the use of cascading operators.
|
| +
|
| +* The generateBadge function is a top-level function.
|
| +It is also an event handler based on its signature.
|
| +
|
| +* Set the text of the badgeName element using the value of the input field.
|
| +
|
| + {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
|
| + </div>
|
| +</div>
|
| +
|
| +##Step three: Add a button {#step-three}
|
| +
|
| +##Step four: Add a check box {#step-four}
|
| +
|
| +In this step you add a checkbox to the app.
|
| +
|
| +<strong>Try it!</strong>
|
| +
|
| +<iframe class="running-app-frame"
|
| + style="height:220px;width:530px;"
|
| + src="examples/3-randombadge/piratebadge.html">
|
| +</iframe>
|
| +
|
| +### To do list for step three {#step-three-todolist}
|
| +
|
| +#### 1. Edit piratebadge.html as shown:
|
| +
|
| +<div class="row">
|
| + <div class="span7">
|
| +
|
| +{% prettify html %}
|
| +...
|
| +<div class="entry">
|
| + <div>
|
| + <input type="text" id="inputName" value="Anne">
|
| + </div>
|
| +[[highlight]]
|
| + <div>
|
| + <input type="checkbox" id="useRandomName">
|
| + <label for="useRandomName">Use random name.</label>
|
| + </div>
|
| + <div>
|
| + <button id="generateButton">Generate badge</button>
|
| + </div>
|
| +[[/highlight]]
|
| +</div>
|
| +...
|
| +{% endprettify %}
|
| +
|
| + </div>
|
| + <div class="span5">
|
| +Add a checkbox and a button to the HTML code.
|
| +
|
| +The checkbox and the button each have an ID so that
|
| +the Dart code can query the DOM for these elements.
|
| + </div>
|
| +</div>
|
| +
|
| +#### 2. Add the highlighted code to piratebadge.dart:
|
| +
|
| +<div class="row">
|
| + <div class="span7">
|
| +
|
| +{% prettify dart %}
|
| +[[highlight]]import 'dart:math';[[/highlight]]
|
| +{% endprettify %}
|
| +
|
| + </div>
|
| + <div class="span5">
|
| +Import the `dart:math` library, which includes
|
| +<a href="https://api.dartlang.org/dart_math/Random.html" target="_blank">Random</a>,
|
| +a random number generator.
|
| + </div>
|
| +</div>
|
| +<div class="row">
|
| + <div class="span7">
|
| +{% prettify %}
|
| +InputElement inputNameElement;
|
| +[[highlight]]bool useRandomName = false;[[/highlight]]
|
| +[[highlight]]
|
| +List names = [ "Anne", "Bette", "Cate", "Dawn",
|
| + "Elise", "Faye", "Ginger", "Harriot",
|
| + "Izzy", "Jane", "Kaye", "Liz",
|
| + "Maria", "Nell", "Olive", "Pat",
|
| + "Queenie", "Rae", "Sal", "Tam",
|
| + "Uma", "Violet", "Wilma", "Xana", "Yvonne", "Zelda"];
|
| +[[/highlight]]
|
| +{% endprettify %}
|
| + </div>
|
| + <div class="span5">
|
| +Add two top-level variables, a list literal and a boolean.
|
| + </div>
|
| +</div>
|
| +<div class="row">
|
| + <div class="span7">
|
| +{% prettify dart %}
|
| +
|
| +void main() {
|
| +[[highlight]]
|
| + query('#generateButton').onClick.listen(generateBadge);
|
| + query('#useRandomName').onClick.listen(useRandomNameClickHandler);
|
| +[[/highlight]]
|
| + inputNameElement = query('#inputName');
|
| + inputNameElement.onInput.listen(generateBadge);
|
| +}
|
| +{% endprettify %}
|
| +
|
| + </div>
|
| + <div class="span5">
|
| +In the `main()` function,
|
| +register click handlers to the checkbox and the button.
|
| +Click handlers respond to mouse clicks.
|
| + </div>
|
| +</div>
|
| +<div class="row">
|
| + <div class="span7">
|
| +
|
| +{% prettify dart %}
|
| +[[highlight]]
|
| +void useRandomNameClickHandler(MouseEvent e) {
|
| + if ((e.target as CheckboxInputElement).checked) {
|
| + inputNameElement.disabled = true;
|
| + useRandomName = true;
|
| + } else {
|
| + inputNameElement.disabled = false;
|
| + useRandomName = false;
|
| + }
|
| +}
|
| +[[/highlight]]
|
| +{% endprettify %}
|
| +
|
| + </div>
|
| + <div class="span5">
|
| +Add the click handler callback function for the checkbox.
|
| +If the checkbox is selected,
|
| +the code disables the input field and sets a variable to true.
|
| +Note the use of `as`
|
| + </div>
|
| +</div>
|
| +<div class="row">
|
| + <div class="span7">
|
| +
|
| +{% prettify dart %}
|
| +void generateBadge(Event event) {
|
| +[[highlight]]
|
| + Random indexGenerator = new Random();
|
| + if (useRandomName) {
|
| + query('#badgeName').text = names[indexGenerator.nextInt(names.length)];
|
| + } else {
|
| + query('#badgeName').text = inputNameElement.value;
|
| + }
|
| +[[/highlight]]
|
| +}
|
| +{% endprettify %}
|
| +
|
| + </div>
|
| + <div class="span5">
|
| +Modify the click handler for the button so that
|
| +if the checkbox is selected it
|
| +creates a random number generator and uses it to generate an
|
| +index into the list of names.
|
| + </div>
|
| +</div>
|
| +</div>
|
| +
|
| +### Concepts for step three {#step-three-concepts}
|
| +
|
| +[<a href="#step-four">Go to <strong>Step four</strong></a>.]
|
| +
|
| +A
|
| +<a href="https://api.dartlang.org/dart_core/List.html" target="_blank">List</a>
|
| +is an ordered collection of objects.
|
| +This is a List literal that contains three strings:
|
| +
|
| +{% prettify dart %}
|
| +List names == [ "one", "two", "three" ];
|
| +{% endprettify %}
|
| +
|
| +You can access an item in the List by index:
|
| +
|
| +{% prettify dart %}
|
| +names[0]; // "one"
|
| +{% endprettify %}
|
| +
|
| +You can get the length of a list with the `length` property:
|
| +
|
| +{% prettify dart %}
|
| +names.length; // 3
|
| +{% endprettify %}
|
| +
|
| +<a href="https://api.dartlang.org/dart_math/Random.html" target="_blank">Random</a>
|
| +is random number generator in the `dart:math` library.
|
| +This code generates an integer between 0 and 9 inclusive:
|
| +
|
| +{% prettify dart %}
|
| +Random indexGenerator = new Random();
|
| +indexGenerator.nextInt(10); // A number between 0 and 9, inclusive.
|
| +{% endprettify %}
|
| +
|
| +[XXX:strengthen] The Dart keyword `as` allows you to refer to an object as a specific type.
|
| +It's similar to casting in other languages.
|
| +
|
| +{% prettify dart %}
|
| +if ((e.target as CheckboxInputElement).checked) {
|
| +...
|
| +{% endprettify %}
|
| +
|
| +Another type of event you can listen for: mouse click events.
|
| +Useful for buttons and checkboxes.
|
| +
|
| +##Step four: Create a class {#step-four}
|
| +
|
| +In this step, you change only the Dart code.
|
| +
|
| +### To do list for step four {#step-four-todolist}
|
| +
|
| +#### Edit piratebadge.dart as shown:
|
| +
|
| +<div class="row">
|
| + <div class="span7">
|
| + code here
|
| + </div>
|
| + <div class="span5">
|
| + <strong>What am I looking at?</strong>
|
| + </div>
|
| +</div>
|
| +
|
| +
|
| +### Concepts for step four {#step-four-concepts}
|
| +
|
| +Anatomy of a class
|
| +
|
| +
|
| +
|
| +{% comment %}
|
| +#### piratebadge.dart
|
| +
|
| +<div class="row">
|
| + <div class="span7">
|
| + </div>
|
| + <div class="span5">
|
| + </div>
|
| +</div>
|
| +
|
| +#### piratebadge.html
|
| +
|
| +<div class="row">
|
| + <div class="span7">
|
| + </div>
|
| + <div class="span5">
|
| + </div>
|
| +</div>
|
| +{% endcomment %}
|
|
|
Chromium Code Reviews
Issue 35913002:
Try Dart 1 hour experience first draft (Closed)
Base URL: https://github.com/dart-lang/dartlang.org.git@master