This tutorial will show you how to get started with the Dart programming language and the StageXL library.
The easiest way to write Dart applications is to use the Dart Editor provided by the Dart team. It is a lightweight editor based on Eclipse and you get full debugger support as well as nifty features like autocomplete suggestions, code navigation and refactoring.
Get the Dart Editor here: Getting Started With Dart Editor
Please download and install the editor, then continue with the next step.
Launch the Dart Editor and open the File / New Application menu. Enter the name of your application as well as the location in the file system where the application should be created. Be sure to select Web Application as the sample content of the application. Finish the wizard and you will get your first Dart web application.
Please look at the three files named in accordance to your application name. Those three files contain the Cascading Style Sheets (.css), the Dart source code (.dart) and the HTML document (.html) of your application. Right click on the HTML document and select Run in Dartium. A new browser window with your application will open and you have successfully finished this second step.An essential part of the Dart platform is the package manager called Pub. This package manager is built right into the Dart Editor and helps you to find and manage packages (also known as libraries). You can learn more about Pub here: Getting Started With Pub.
You don't have to know all the details about Pub, to continue just double click the pubspec.yaml file in your web application. Here you can enter the general information about your application, but let's focus on the Dependencies section below. Those dependencies are the packages (libraries) your application depends on. The first package (browser) is already configured and contains some bootstrap code to launch your application in different browsers. Now press the Add button and you will get asked about the name of the package you want to add. Please enter "stagexl" in lowercase and press the OK button.
All you have to do now is save the pubspec.yaml file by pressing CTRL-S. The Dart Editor will notice the change in your Pub configuration and automatically download and install the StageXL package. After a few seconds you should see a new stagexl folder under the packages folder.
You probably have a basic understanding of HTML, so the next step should be very easy. Double click the HTML file in your application to open it. You will see some easy markup for the sample application, you can remove stuff but please be cautious to not delete the two script references at the bottom of the file.
The StageXL library depends on a so called Canvas element in HTML. The Canvas element is the area where the content of your StageXL application will be drawn. Add the following markup to the HTML body to create an area with the size of 800x600 pixel:
<canvas id="stage" width="800" height="600"></canvas>
You are only one step away from being productive with Dart and StageXL. The easiest way to continue is to replace the dart code of the sample application with the code below. Now start the application and you should see a red circle on the screen.
To learn more about the StageXL library, please read the wiki article:
Introducing the core concepts of StageXL.
To learn more about the Dart language, please read this:
Idiomatic Dart
You can also learn from these StageXL samples:
Samples on GitHub
import 'dart:html' as html;
import 'package:stagexl/stagexl.dart';
void main() {
// setup the Stage and RenderLoop
var canvas = html.querySelector('#stage');
var stage = new Stage(canvas);
var renderLoop = new RenderLoop();
renderLoop.addStage(stage);
// draw a red circle
var shape = new Shape();
shape.graphics.circle(100, 100, 60);
shape.graphics.fillColor(Color.Red);
stage.addChild(shape);
}