In this tutorial, I’ll explain how to get set up with Dart’s tool chain (the tools needed to develop Dart applications). In the next post, we’ll start writing Dart code. Though Dart can be used to develop the client side of any Web application, my angle is slanted toward game development.
Compared to standard Eclipse, the menu options have been trimmed down, which works very well. Where Raw Eclipse can be overwhelming, the Dart Editor looks very nice. It comes with seven sample applications that you can select and run. When you do, you’ll see project files on the left-hand side. Click on any of them to view the source code files in the editor window.
Since Dart is for browsers, each project comes with an HTML file and CSS as well as its Dart code file. The simplest way to run the program is to click [Control] R. In each example, the files appear on the left-hand side and cause some clutter. Right-click on any project folder and click-delete to remove them from the workspace. However, be sure not to check “Delete project contents on disk” unless you really mean to. There’s no need to remove the Dart SDK, as it’s a reference to the source code files that make form it.
Once you’ve got the IDE setup, click “Solar” on the Welcome tab. That will open the example called — you guessed it — Solar. Then take a look at solar.dart, which should be open in its own tab.
Don’t start with Solar3D as it uses WebGL and is quite complex. When you run Solar, it opens up Chrome (which is recommended, so install it) and runs in its own Web server at 127.0.0.1:3030/path to files. Or enter
http://127.0.0.1:3030 to find available Dart Web applications to run.
Dart code can be debugged and stepped through line by line. First click “Tools” on the menu, then “Debugger.” This opens a tab showing the debugger controls as well as stack trace, which shows which functions called which to get to the point where the program is once it hits a break point. To get a feel for it, try this:
With the Solar project open, scroll down to line 85, which should look like this:
sun = new PlanetaryBody(this, "Sun", "#ff2", 14.0);
Right click on the very left of the line (the gutter), several spaces to the left of “sun = “. You should see a menu with choices that include “Toggle Breakpoint” and “Show Line Numbers.” I like to have line numbers on, so I suggest you enable them.
When you click “Toggle Breakpoint,” you should see a blue circle in the gutter. This indicates a break point. Now run the solar application, and it should stop executing at that line.
If you look at the top row of the debugger tab you should see a green triangle followed by three arrows and a red square. There are five controls:
- Green Triangle runs the program from here (or press F8)
- The first arrow, “Step Into,” runs one line of code, stepping into functions, etc. (or F5).
- The second arrow, “Step Over,” runs lines of code, such as functions. (or F6).
- The third arrow, “Step Return,” runs up to and including the return. (or F7).
- The Red Square stops the debugging and returns you to editing (or press [Control] F2).
Heavy and Deep
Because Dart’s SDK has the Dart source files, you’ll often find that debugging takes you down into some heavy code. The easiest way to extricate yourself is to go back to the program and put a breakpoint further on. Then press F8 or click the green triangle. It’ll take you out of the heavy stuff and back to the top level source code.
Below the Debugger stack trace is a property viewer. This lets you look quickly at variables and members of objects. Run the program up to a breakpoint on line 88 (the first Sun.AddPlanet).
On the right hand side, you’ll see two properties, “top-level” and “this,” with green circles by them. Move the mouse over “this” and you’ll see an arrow that, when clicked, drops a list of 11 more property rows including one called “sun.”
Move the mouse over “sun” and another drop-down arrow appears. Clicking it shows a list of the sun’s properties as name/value pairs including “ff2 for color, “Sun” for name, etc.
This first tutorial got you used to the Dart tool chain and showed you how to run and debug existing programs. In the next one we’ll look at declaring variables and creating a very simple Dart application.