It’s a long time ago, I first heard something about Dart. It’s the Google answer for JavaScript. You can download it over here: http://www.dartlang.org/downloads.html
When you create a new project you’ll get a .css, .dart and a .html file. We want to do a simple counter, so when you click on it, this value will increase.
We start with the HTML-File. This contains a basic website structure. I would use bootstrap for early development, but at the moment we don’t need it.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HelloWorld</title> <link rel="stylesheet" href="HelloWorld.css"> </head> <body> <h1>HelloWorld</h1> <p>Hello world from Dart!</p> <script type="application/dart" src="HelloWorld.dart"></script> <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script> </body> </html>
New we add a new add a new parameter tag with a uniq id below the “Hello world from Dart”-thing.
<p id="counter"></p>
The next step is the CSS-File so we can fully concentrate about dart-source-code later. Remove everything except the body and p part and then add the following one for the counter:[/html]
#counter {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
Now we can go to the .dart-File. You can remove almost everything, but keep the
import 'dart:html';
void main() {
}
We start with the following code:
void main() {
query("#counter")
..text = "0"
..on.click.add(countOneUp);
}
This is simply setting the text of our HTML-element, with the id ‘counter’, and adding an OnClickEvent. This is very similar to Java, not the syntax, but the structure how you work with it. So now we need to create the OnClickEvent.
void countOneUp(Event event) {
var tempCount = query("#counter").text;
int i = int.parse(tempCount);
i++;
query("#counter").text = i.toString();
}
If you know how Java-Syntax is working, this code isn’t hard to understand. But I think the query-command is quite confusing if you us it the first few times. As you see, I did a lot of filetype-parsing.
To run the application simply hit Ctrl + R (I don’t know how this is on Mac ^^). A modified version of chromium is now starting and will run the application. It should look like this now:
You can find the examples here: http://dart.signer.pro/.
As you see, Dart can be pretty nice. But I haven’t done much more at the moment. If I know more, I’ll let you know.
Leave a Reply