elems2 = querySelectorAll('input[type="text"]');
35 |
36 | // Find all elements with the CSS class 'class'
37 | // inside of a that is inside an element with
38 | // the ID 'id'.
39 | List elems3 = querySelectorAll('#id p.class');
40 | }
41 |
42 | void replaceElement() {
43 | var elem = querySelector('#example') as AnchorElement;
44 | elem.href = 'http://dartlang.org';
45 | }
46 |
47 | void displayConditionally() {
48 | // In Dart:
49 | final osList = ['macos', 'windows', 'linux'];
50 |
51 | // In real code you'd programmatically determine userOs.
52 | var userOs = 'linux';
53 |
54 | for (var os in osList) {
55 | // For each possible OS...
56 | bool shouldShow = (os == userOs); // Matches user OS?
57 |
58 | // Find all elements with class=os. For example, if
59 | // os == 'windows', call querySelectorAll('.windows')
60 | // to find all elements with the class "windows".
61 | // Note that '.$os' uses string interpolation.
62 | for (var elem in querySelectorAll('.$os')) {
63 | elem.hidden = !shouldShow; // Show or hide.
64 | }
65 | }
66 | }
67 |
68 | void setAttribute() {
69 | Element elem = querySelector('#shy');
70 |
71 | // Set a non-existent attribute. No error checking/complaints!
72 | elem.attributes['someAttribute'] = 'someValue';
73 |
74 | elem.attributes['hidden'] = 'true';
75 | // elem.hidden = true; // BETTER!
76 | }
77 |
78 | void createElements() {
79 | var elem = new ParagraphElement();
80 | elem.text = 'Creating is easy!';
81 | document.body.children.add(elem);
82 |
83 | var elem2 = new Element.html('Creating is easy!
');
84 | document.body.children.add(elem2);
85 | }
86 |
87 | void funWithNodes() {
88 | var elem = new Element.html('Some styled text.
');
89 |
90 | // Find the parent by ID, and add elem as its last child.
91 | querySelector('#inputs').nodes.add(elem);
92 |
93 | // Find a node by ID, and replace it in the DOM.
94 | querySelector('#status').replaceWith(elem);
95 |
96 | // Find a node by ID, and remove it from the DOM.
97 | querySelector('#expendable').remove();
98 | }
99 |
100 | void funWithCss() {
101 | var element = querySelector('#message');
102 | element.classes.add('warning');
103 | //
104 | // var message = new DivElement();
105 | // message.id = 'message2';
106 | // message.text = 'Please subscribe to the Dart mailing list.';
107 |
108 | var message = new DivElement()
109 | ..id = 'message2'
110 | ..text = 'Please subscribe to the Dart mailing list.';
111 |
112 | message.style
113 | ..fontWeight = 'bold'
114 | ..fontSize = '2em';
115 |
116 | querySelector("#fun-with-css").children.add(message);
117 | }
118 |
119 | void handleEvents() {
120 | // Find a button by ID and add an event handler.
121 | querySelector('#submitInfo').onClick.listen((_) {
122 | // When the button is clicked, it runs this code.
123 | submitData();
124 | });
125 |
126 | document.body.onClick.listen((e) {
127 | var clickedElement = e.target as ButtonElement;
128 | var id = clickedElement.id;
129 | var description;
130 |
131 | if (id != null && id.length > 0) {
132 | description = 'the "$id"';
133 | } else {
134 | description = 'a <${clickedElement.tagName}>';
135 | }
136 |
137 | print('You clicked $description element.');
138 | });
139 | }
140 |
141 | void submitData() {
142 | print('data submitted');
143 | }
144 |
--------------------------------------------------------------------------------
/archive/bookinfo.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Christopher
7 |
8 | Hearse
9 |
10 |
11 |
12 | David
13 |
14 | Futato
15 |
16 |
17 |
18 | Rebecca
19 |
20 | Demarest
21 |
22 |
23 |
24 | Randy
25 |
26 | Comer
27 |
28 |
29 |
30 |
31 |
32 | O’Reilly Media, Inc.
33 |
34 |
35 | 1005 Gravenstein Highway North
36 | Sebastopol
37 | CA
38 | 95472
39 |
40 |
41 |
42 |
43 | Printed in the United States of America.
44 |
45 |
46 |
47 | [LSI]
48 |
49 |
50 |
51 | O’Reilly books may be purchased for educational, business, or sales
52 | promotional use. Online editions are also available for most titles
53 | (http://my.safaribooksonline.com).
55 | For more information, contact our corporate/institutional sales
56 | department: 800-998-9938 or corporate@oreilly.com.
57 |
58 |
59 |
60 | Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo
61 | are registered trademarks of O’Reilly Media, Inc. Dart: Up and
62 | Running, the image of a greater roadrunner, and related trade
63 | dress are trademarks of O’Reilly Media, Inc.
64 |
65 | This text of this work is available at this book’s GitHub project
66 | (https://github.com/dart-lang/dart-up-and-running-book) under the Creative
67 | Commons Attribution-Noncommercial-No Derivative Works 3.0 United States
68 | License (http://creativecommons.org/licenses/by-nc-nd/3.0/us/).
69 |
70 | Many of the designations used by manufacturers and sellers to
71 | distinguish their products are claimed as trademarks. Where those
72 | designations appear in this book, and O’Reilly Media, Inc., was aware of a
73 | trademark claim, the designations have been printed in caps or initial
74 | caps.
75 |
76 |
77 |
78 | While every precaution has been taken in the preparation of this
79 | book, the publisher and authors assume no responsibility for errors or
80 | omissions, or for damages resulting from the use of the information
81 | contained herein.
82 |
83 |
84 | 9781449330897
85 |
86 | 1
87 |
88 |
89 | Kathy
90 |
91 | Walrath
92 |
93 |
94 | Kathy is a technical writer who’s worked on docs for Chrome and
95 | other developer APIs at Google since 2006. Before that, she worked at
96 | Sun, NeXT, and HP. Back when the Web was young, she wrote the first doc
97 | to help developers write Java applets. She also co-created The
98 | Java Tutorial and maintained it for a very long time.
99 |
100 |
101 |
102 |
103 | Seth
104 |
105 | Ladd
106 |
107 |
108 | Seth is a Developer Advocate with the Chrome team. He is a
109 | conference organizer (Aloha on
110 | Rails, New Game) and author (Expert Spring
111 | MVC [Apress]), helped publish Angry Birds for the Web, and is
112 | a big fan of HTML5 and the modern Web.
113 |
114 |
115 |
116 |
117 | Meghan
118 |
119 | Blanchette
120 |
121 |
122 |
123 | 2013
124 |
125 | Kathy Walrath, Seth Ladd
126 |
127 |
128 |
129 | Christopher
130 |
131 | Hearse
132 |
133 |
134 |
135 |
136 | First Edition
137 |
138 | October, 2012
139 |
140 |
141 |
142 |
143 |
144 | 2012-10-24
145 |
146 | First release
147 |
148 |
149 |
150 | 2013-03-29
151 |
152 | Second release
153 |
154 |
155 |
156 |
157 |
158 |
159 |
--------------------------------------------------------------------------------
/archive/ch01.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 | Quick Start
8 |
9 | Welcome to Dart, an open-source, batteries-included developer platform
10 | for building structured HTML5 web apps. This chapter tells you why Google
11 | created Dart, what’s cool about Dart, and how to write and run your first
12 | Dart app.
13 |
14 | Dart provides not only a new language, but libraries, an editor, a
15 | virtual machine (VM), a browser that can run Dart apps natively, and a
16 | compiler to JavaScript. Dart aims to be a more productive way to build the
17 | high-performance, modern apps that users demand.
18 |
19 |
20 | Why Google Created Dart
21 |
22 | Google cares a lot about helping to make the web great. We write a
23 | lot of web apps, many of them quite sophisticated—think Gmail, Google
24 | Calendar, Google+, and more. We want web apps to load quickly, run
25 | smoothly, and present engaging and fun experiences to users. We want
26 | developers of all backgrounds to be able to build great experiences for
27 | the browser.
28 |
29 | As an example of Google’s commitment to the web, consider the Google
30 | Chrome browser. Google created it to spur competition at a time when the
31 | web platform seemed to be stagnating. It worked. As shows, browser speed has increased immensely
33 | since Chrome’s introduction in 2008.
34 |
35 |
36 | The JavaScript engine known as V8 is
37 | responsible for much of Chrome’s speed. Many of the V8 engineers are now
38 | working on the Dart project.
39 |
40 |
41 |
42 | Browser speed (V8 benchmark suite v7; higher numbers are
43 | better)
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | The number of new features in browsers has also increased, with APIs
53 | such as WebGL, FileSystem, Web workers, and WebSockets. Browsers now have
54 | automatic update capabilities, frequently delivering new features and
55 | fixes directly to the user. Mobile devices such as tablets and phones also
56 | have modern browsers with many HTML5 features.
57 |
58 | Despite these improvements in the web platform, the developer
59 | experience hasn’t improved as much as we’d like. We believe it should be
60 | easier to build larger, more complex web apps. It’s taken far too long for
61 | productive tools to emerge, and they still don’t match the capabilities
62 | offered by other developer platforms. You shouldn’t have to be intimately
63 | familiar with web programming to start building great apps for the modern
64 | web. And even though JavaScript engines are getting faster, web apps still
65 | start up much too slowly.
66 |
67 | We expect Dart to help in two main ways:
68 |
69 |
70 |
71 | Better performance: As VM engineers, the
72 | designers of Dart know how to build a language for performance. A more
73 | structured language is easier to optimize, and a fresh VM enables
74 | improvements such as faster startup.
75 |
76 |
77 |
78 | Better productivity: Support for libraries
79 | and packages helps you work with other developers and easily reuse
80 | code from other projects. Types can make APIs clearer and easier to
81 | use. Tools help you refactor, navigate, and debug code.
82 |
83 |
84 |
85 |
86 |
87 | A Quick Look at the Dart Language
88 |
89 | It’s hard to talk about a language without seeing it. Here’s a peek
90 | at a small Dart program:
91 |
92 | lang-dart
93 | import 'dart:math';
94 |
95 | class Point {
96 | num x, y;
97 | Point(this.x, this.y);
98 | num distanceTo(Point other) {
99 | var dx = x - other.x;
100 | var dy = y - other.y;
101 | return sqrt(dx * dx + dy * dy);
102 | }
103 | }
104 |
105 | main() {
106 | var p = new Point(2, 3);
107 | var q = new Point(3, 4);
108 | print('distance from p to q = ${p.distanceTo(q)}');
109 | }
110 |
111 | Of course, Dart’s main use case is building modern web apps.
112 | Programming the browser is easy:
113 |
114 | lang-dart
115 | import 'dart:html';
116 |
117 | main() {
118 | var button = new ButtonElement();
119 | button..id = 'confirm'
120 | ..text = 'Click to Confirm'
121 | ..classes.add('important')
122 | ..onClick.listen((e) => window.alert('Confirmed!'));
123 | querySelector('#registration').children.add(button);
124 | }
125 |
126 | You’ll learn about the Dart language and libraries in Chapters and respectively.
129 |
130 |
131 |
132 | What’s Cool About Dart
133 |
134 | Dart may look familiar, but don’t let that fool you. Dart has lots
135 | of cool features to help give you a productive and fun experience building
136 | the next generation of awesome web apps.
137 |
138 | Dart is easy to learn. A wide range of
139 | developers can learn Dart quickly. It’s an object-oriented language with
140 | classes, single inheritance, lexical scope, top-level functions, and a
141 | familiar syntax. Most developers are up and running with Dart in just a
142 | few hours.
143 |
144 | Dart compiles to JavaScript. Dart has been
145 | designed from the start to compile to JavaScript, so that Dart apps can
146 | run across the entire modern web. Every feature considered for the
147 | language must somehow be translated to performant and logical JavaScript
148 | before it is added. Dart draws a line in the sand and doesn’t support
149 | older, legacy browsers.
150 |
151 | Dart runs in the client and on the server. The
152 | Dart virtual machine (VM) can be integrated into a web browser, but it can
153 | also run standalone on the command line. With built-in library support for
154 | files, directories, sockets, and even web servers, you can use Dart for
155 | full end-to-end apps.
156 |
157 | Dart comes with a lightweight editor. You can
158 | use Dart Editor to write, launch, and debug Dart apps. The editor can help
159 | you with code completion, detecting potential bugs, debugging both
160 | command-line and web apps, and even refactoring. Dart Editor isn’t
161 | required for writing Dart; it’s just a tool that can help you write better
162 | code faster.
163 |
164 | Dart supports types, without requiring them.
165 | You can omit types when you want to move very quickly, aren’t sure what
166 | structure to take, or simply want to express something you can’t with the
167 | type system. You can add types as your program matures, the structure
168 | becomes more evident, and more developers join the project. Dart’s
169 | optional types are static type annotations that act as documentation,
170 | clearly expressing your intent. Using types means that fewer comments are
171 | required to document the code, and tools can give better warnings and
172 | error messages.
173 |
174 | Dart scales from small scripts to large, complex
175 | apps. Web development is very much an iterative process. With
176 | the reload button acting as your compiler, building the seed of a web app
177 | is often a fun experience of writing a few functions just to experiment.
178 | As the idea grows, you can add more code and structure. Thanks to Dart’s
179 | support for top-level functions, optional types, classes, and libraries,
180 | your Dart programs can start small and grow over time. Tools such as Dart
181 | Editor help you refactor and navigate your code as it evolves.
182 |
183 | Dart has a wide array of built-in libraries.
184 | The core library supports built-in types and other fundamental features
185 | such as collections, dates, and regular expressions. Web apps can use the
186 | HTML library—think DOM programming, but optimized for Dart. Command-line
187 | apps can use the I/O library to work with files, directories, sockets, and
188 | servers. Other libraries include URI, UTF, Crypto, Math, and Unit
189 | test.
190 |
191 | Dart supports safe, simple concurrency with
192 | isolates. Traditional shared-memory threads are difficult to
193 | debug and can lead to deadlocks. Dart’s isolates, inspired by Erlang,
194 | provide an easier to understand model for running isolated, but
195 | concurrent, portions of your code. Spawning new isolates is cheap and
196 | fast, and no state is shared.
197 |
198 | Dart supports code sharing. Traditional web
199 | programming workflows can’t integrate third-party libraries from arbitrary
200 | sources or frameworks. With the Dart package manager (pub) and language
201 | features such as libraries, you can easily discover, install, and
202 | integrate code from across the web and enterprise.
203 |
204 | Dart is open source. Dart was born for the web,
205 | and it’s available under a BSD-style license. You can find the project’s
206 | issue tracker and source
207 | repository online. Maybe you’ll submit the next patch?
208 |
209 |
210 |
211 | Up and Running
212 |
213 | Now that you know something about Dart, get ready to code! These
214 | instructions feature the open-source Dart Editor tool. When you download
215 | Dart, you not only get Dart Editor, but also tools such as the
216 | Dart-to-JavaScript compiler and a version of Chromium (nicknamed
217 | Dartium) that includes the Dart VM.
218 |
219 |
220 | If you run into trouble installing and using Dart Editor, see
221 | Troubleshooting
223 | Dart Editor.
224 |
225 |
226 |
227 | Step 1: Download and Install the Software
228 |
229 | In this step, you’ll install Dart Editor and, if necessary, a Java
230 | runtime environment. (To avoid having to modify the PATH environment
231 | variable, you can install the JRE under your Dart installation
232 | directory, in a subdirectory named jre.)
233 |
234 |
235 |
236 | Download
237 | Dart.
238 |
239 |
240 |
241 | Unarchive the file you downloaded. The resulting directory,
242 | which we’ll call your Dart installation
243 | directory, contains the DartEditor
244 | executable and several subdirectories.
245 |
246 |
247 |
248 | If you don’t already have a Java runtime, download and install
249 | it. Dart Editor requires Java version 6 or higher.
250 |
251 |
252 |
253 |
254 |
255 | Step 2: Launch the Editor
256 |
257 | Go to your Dart installation directory, and double-click the
258 | DartEditor executable
260 |
261 |
263 |
264 | .
265 |
266 | You should see the Dart Editor application window appear, looking
267 | something like .
268 |
269 |
270 | Dart Editor and its Welcome page
271 |
272 |
273 |
274 |
276 |
277 |
278 |
279 |
280 |
281 |
282 | Step 3: Open and Run a Demo
283 |
284 | The Dart Editor bundle comes with several demos and samples. In
285 | this step, you’ll open a web app and run it in Dartium.
286 |
287 |
288 |
289 | Click the Welcome tab. Or
290 | choose Welcome Page from the
291 | Tools menu.
292 |
293 |
294 |
295 | In the Welcome tab, click the image labeled Sunflower. Dart Editor creates a copy of the
297 | Sunflower
299 | app’s directory, and the Editor view displays the contents
300 | of web/sunflower.dart.
301 |
302 |
303 |
304 | Click the Run button
305 |
306 |
307 |
308 | . Dart Editor launches Dartium, which displays
309 | sunflower.html.
311 |
312 |
313 | Dartium is a technical preview, and it might have security
314 | and stability issues. Do not use Dartium as your primary
315 | browser!
316 |
317 |
318 |
319 |
320 | Move the slider to change the sunflower's display, as shown in
321 | .
322 |
323 |
324 | The Sunflower sample running in Dartium
325 |
326 |
327 |
328 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 | Step 4: Create and Run an App
339 |
340 | It’s easy to create a simple web or command-line app from scratch.
341 | This step walks you through creating and running a command-line
342 | app.
343 |
344 |
345 |
346 | Click the New Application button
347 |
348 |
349 |
350 | (at the upper left of Dart Editor).
351 | Alternatively, choose File > New
352 | Application from the Dart Editor menu, or click the
353 | Create an Application… button in
354 | the Welcome page. A dialog appears (see ).
356 |
357 |
358 |
359 | Type in a name for your application—for example,
360 | hello_world. If you don’t like the default directory,
361 | type in a new location or browse to choose the location.
362 |
363 |
364 |
365 | Make sure Generate sample
366 | content and Command-line
367 | application are selected. Then click Finish to create the initial files for the
369 | app.
370 |
371 |
372 | Create command-line or web apps with Dart Editor
373 |
374 |
375 |
376 |
378 |
379 |
380 |
381 |
382 | A default Dart file appears in the Edit view, and its
383 | directory appears in the Files view. Your Dart Editor window should
384 | look something like .
385 |
386 |
387 | Dart Editor displaying a new app’s files
388 |
389 |
390 |
391 |
393 |
394 |
395 |
396 |
397 |
398 |
399 | Click the Run button
400 |
401 |
402 |
403 | to run your new app.
404 |
405 | For command-line apps, the output of
406 | print() appears at the bottom right, in a new tab
407 | next to the Problems tab.
408 |
409 |
410 |
411 |
412 |
413 | What Next?
414 |
415 | Now that you know the basics, you can learn more about Dart Editor
416 | and help improve it.
417 |
418 |
419 | Follow a code lab
420 |
421 | Go to dartlang.org/codelabs
423 | to find the
424 | latest step-by-step instructions for writing an app. The first code
425 | lab, Try
426 | Dart, guides you through using Dart Editor to build and run a
427 | pirate name badge generator.
428 |
429 |
430 |
431 | Read tutorials
432 |
433 | The Dart
434 | Tutorials teach you how to build web applications using the
435 | Dart language, tools, and APIs.
436 |
437 |
438 |
439 | Become a power user
440 |
441 | Visit the Dart
442 | Editor homepage for help on using Dart Editor’s expanding
443 | feature set.
444 |
445 |
446 |
447 | Send feedback
448 |
449 | Click the SEND FEEDBACK link
450 | (at the upper right of the Dart Editor window) whenever you notice a
451 | problem or have an idea for improving Dart Editor. We’ll open a new
452 | issue for you, if appropriate, without disclosing your sensitive or
453 | personally identifiable information.
454 |
455 |
456 |
457 |
--------------------------------------------------------------------------------