You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Feb 22, 2018. It is now read-only.
Copy file name to clipboardExpand all lines: src/site/articles/idiomatic-dart/index.html
+20-9Lines changed: 20 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -66,23 +66,29 @@ <h3>Named constructors</h3>
66
66
<p>Like most dynamically-typed languages, Dart doesn't support overloading. With methods, this isn't much of a limitation because you can always use a different name, but constructors aren't so lucky. To alleviate that, Dart lets you define <em>named constructors</em>:</p>
67
67
68
68
{% highlight dart %}
69
+
#import('dart:math');
70
+
69
71
class Point {
70
72
num x, y;
71
73
Point(this.x, this.y);
72
74
Point.zero() : x = 0, y = 0;
73
75
Point.polar(num theta, num radius) {
74
-
x = Math.cos(theta) * radius;
75
-
y = Math.sin(theta) * radius;
76
+
x = cos(theta) * radius;
77
+
y = sin(theta) * radius;
76
78
}
77
79
}
78
80
{% endhighlight dart 0 %}
79
81
80
82
<p>Here our Point class has three constructors, a normal one and two named ones. You can use them like so:</p>
81
83
82
84
{% highlight dart %}
83
-
var a = new Point(1, 2);
84
-
var b = new Point.zero();
85
-
var c = new Point.polar(Math.PI, 4.0);
85
+
#import('dart:math');
86
+
87
+
main() {
88
+
var a = new Point(1, 2);
89
+
var b = new Point.zero();
90
+
var c = new Point.polar(PI, 4.0);
91
+
}
86
92
{% endhighlight dart 0 %}
87
93
88
94
<p>Note that we're still using <code>new</code> here when we invoke the named constructor. It isn't just a static method.</p>
<p>Dart is a "pure" object-oriented language in that everything you can place in a variable is a real object (no mutant "primitives") and every object is an instance of some class. It's not a <em>dogmatic</em> OOP language though. You aren't required to place everything you define inside some class. Instead, you are free to define functions, variables, and even getters and setters at the top level if you want.</p>
<p>Even in languages that don't require you to place everything inside a class or object, like JavaScript, it's still common to do so as a form of namespacing: top-level definitions with the same name could inadvertently collide. To address that, Dart has a library system that allows you to import definitions from other libraries with a prefix applied to disambiguate it. That means you shouldn't <em>need</em> to defensively squirrel your definitions inside classes.</p>
269
277
270
-
<p>We're still exploring what this actually means for how we define libraries. Most of our code does place definitions inside classes, like Math. It's hard to tell if this is just an ingrained habit we have from other languages or a practice that's also good for Dart. This is an area we want feedback on.</p>
278
+
<p>We're still exploring what this actually means for how we define libraries. For example, the project used to have a Math class, but we moved all functionality from that class to top-level methods inside the dart:math library.</p>
271
279
272
280
<p>We do have some examples where we use top-level definitions. The first you'll run into is <code>main()</code> which is expected to be defined at the top level. If you work with the DOM, the familiar <code>document</code> and <code>window</code> "variables" are actually top-level getters in Dart.</p>
273
281
@@ -304,8 +312,11 @@ <h2 id="strings-and-interpolation">Strings and interpolation</h2>
304
312
placing them inside curly braces:</p>
305
313
306
314
{% highlight dart %}
307
-
var r = 2;
308
-
print('The area of a circle with radius $r is ${Math.PI * r * r}');
315
+
#import('dart:math');
316
+
main() {
317
+
var r = 2;
318
+
print('The area of a circle with radius $r is ${PI * r * r}');
Copy file name to clipboardExpand all lines: src/site/articles/json-web-service/index.markdown
+23-21Lines changed: 23 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ has-permalinks: true
12
12
_Written by Chris Buckett<br>
13
13
April 2012_
14
14
15
-
Most client-side Dart apps need a way to communicate with a server, and sending JSON via [XMLHttpRequest](https://developer.mozilla.org/en/XMLHttpRequest) is the preferred way to do this. This article discusses communicating with a server using the [XMLHttpRequest API](http://api.dartlang.org/html/XMLHttpRequest.html) from the [dart:html](http://api.dartlang.org/html.html) library and parsing JSON data using the [dart:json](http://api.dartlang.org/json.html) library. It then goes on to show how to provide strong type information about that JSON data through the use of JsonObject and Dart's interface feature.
15
+
Most client-side Dart apps need a way to communicate with a server, and sending JSON via [XMLHttpRequest](https://developer.mozilla.org/en/XMLHttpRequest) is the preferred way to do this. This article discusses communicating with a server using the [HttpRequest API](http://api.dartlang.org/html/HttpRequest.html) from the [dart:html](http://api.dartlang.org/html.html) library and parsing JSON data using the [dart:json](http://api.dartlang.org/json.html) library. It then goes on to show how to provide strong type information about that JSON data through the use of JsonObject and Dart's interface feature.
16
16
17
17
#### Contents
18
18
@@ -27,7 +27,7 @@ Most client-side Dart apps need a way to communicate with a server, and sending
<li><a href="#note-on-jsonp">A note on JSONP and XMLHttpRequest</a></li>
30
+
<li><a href="#note-on-jsonp">A note on JSONP and HttpRequest</a></li>
31
31
</ol>
32
32
</li>
33
33
<li><ahref="#summary">Summary</a></li>
@@ -54,43 +54,45 @@ The same web service accepts data on the same URL with an HTTP POST. The web se
54
54
55
55
<h2id="connecting-to-server">Connecting to the server</h2>
56
56
57
-
When communicating with a web service, use the XMLHttpRequest API from the dart:html library. XMLHttpRequest is a standard way to programmatically send and receive data to and from web servers.
57
+
When communicating with a web service, use the HttpRequest API from the dart:html library.
58
+
HttpRequest is a standard way to programmatically send and receive data to and from web servers.
58
59
59
60
<h3id="getting-data">Getting data from the server</h3>
60
61
61
-
Get objects from the server using HTTP GET. XMLHttpRequest provides a named constructor called getTEMPNAME that takes a URL and a callback function that's invoked when the server responds.
62
+
Get objects from the server using HTTP GET. HttpRequest provides a named constructor called
63
+
<code>get</code> that takes a URL and a callback function that's invoked when the server responds.
var url = "http://my-site.com/programming-languages/$languageName";
66
68
67
69
// call the web server asynchronously
68
-
var request = new XMLHttpRequest.getTEMPNAME(url, onSuccess);
70
+
var request = new HttpRequest.get(url, onSuccess);
69
71
}
70
72
71
73
// print the raw json response text from the server
72
-
onSuccess(XMLHttpRequest req) {
74
+
onSuccess(HttpRequest req) {
73
75
print(req.responseText); // print the received raw JSON text
74
76
}
75
77
76
78
getLanguageData("dart", onSuccess);
77
79
{% endhighlight %}
78
80
79
-
Note: getTEMPNAME is a convenience constructor, and its name will change. The full XMLHttpRequest API is still an option for HTTP GET, if you need more control over the API.
81
+
Note: getTEMPNAME is a convenience constructor, and its name will change. The full HttpRequest API is still an option for HTTP GET, if you need more control over the API.
80
82
81
83
<h3id="saving-object">Saving objects on the server</h3>
82
84
83
-
To create a new object on the server, use the raw XMLHttpRequest API with the HTTP POST method. Use the readyStateChange listener to be notified when the request is complete. The example below calls an onSuccess function when the request is complete:
85
+
To create a new object on the server, use the raw HttpRequest API with the HTTP POST method. Use the readyStateChange listener to be notified when the request is complete. The example below calls an onSuccess function when the request is complete:
// print the raw json response text from the server
103
-
onSuccess(XMLHttpRequest req) {
105
+
onSuccess(HttpRequest req) {
104
106
print(req.responseText); // print the received raw JSON text
105
107
}
106
108
@@ -111,7 +113,7 @@ saveLanguageData(stringData, onSuccess); // send the data to
111
113
112
114
<h2id="parsing-json">Parsing JSON</h2>
113
115
114
-
Now that you have seen how XMLHttpRequest GETs data from the server back to the client, and POSTs data from the client to the server, the next step is to make use of the JSON data in the client application.
116
+
Now that you have seen how HttpRequest GETs data from the server back to the client, and POSTs data from the client to the server, the next step is to make use of the JSON data in the client application.
115
117
116
118
The dart:json library provides two static functions, JSON.parse() and JSON.stringify().
JSON also works for more complex data structures, such as nested maps inside of lists.
132
134
133
-
Use JSON.parse() to convert the XMLHttpRequest's response from raw text to an actual Dart object:
135
+
Use JSON.parse() to convert the HttpRequest's response from raw text to an actual Dart object:
134
136
135
137
{% highlight dart %}
136
-
onSuccess(XMLHttpRequest req) {
138
+
onSuccess(HttpRequest req) {
137
139
Map data = JSON.parse(req.responseText); // parse response text
138
140
print(data["language"]); // dart
139
141
print(data["targets"][0]); // dartium
@@ -169,7 +171,7 @@ JsonObject uses Dart's noSuchMethod method support, which enables objects to int
169
171
Here is an example of using JsonObject instead of a raw Map:
170
172
171
173
{% highlight dart %}
172
-
onSuccess(XMLHttpRequest req) {
174
+
onSuccess(HttpRequest req) {
173
175
// decode the JSON response text using JsonObject
174
176
var data = new JsonObject.fromJsonString(req.responseText);
175
177
@@ -253,14 +255,14 @@ Language data = new JsonObject.fromJsonString(req.responseText);
253
255
String json = JSON.stringify(data);
254
256
255
257
// and POST it back to the server
256
-
XMLHttpRequest req = new XMLHttpRequest();
258
+
HttpRequest req = new HttpRequest();
257
259
req.open("POST", url);
258
260
req.send(json);
259
261
{% endhighlight %}
260
262
261
-
<h3id="note-on-jsonp">A note on JSONP and XMLHttpRequest</h3>
263
+
<h3id="note-on-jsonp">A note on JSONP and HttpRequest</h3>
262
264
263
-
One caveat: Make sure your app is served from the same origin (domain name, port, and application layer protocol) as the web service you are trying to access with XMLHttpRequest. Otherwise your app will hit the Access-Control-Allow-Origin restriction. This is a security restriction to prevent loading data from a different server than the one serving the client app.
265
+
One caveat: Make sure your app is served from the same origin (domain name, port, and application layer protocol) as the web service you are trying to access with HttpRequest. Otherwise your app will hit the Access-Control-Allow-Origin restriction. This is a security restriction to prevent loading data from a different server than the one serving the client app.
264
266
265
267
You can get around this restriction in a couple of ways. The first is to use an emerging technology known as [Cross-Origin Resource Sharing](https://developer.mozilla.org/en/http_access_control) (CORS), which is starting to become implemented by web servers. The second, older way is to use a workaround called JSONP, which makes use of JavaScript callbacks. To use [JSONP with Dart](http://blog.sethladd.com/2012/03/jsonp-with-dart.html), you need to use window.postMessage to allow the JavaScript callbacks to communicate with your Dart code.
266
268
@@ -271,7 +273,7 @@ This article showed how a client-side Dart application communicates with a JSON-
0 commit comments