Getting Started : Dart

Recently  I have been experimenting with Google Dart and HTML. After doing some web development with HTML5/JS I found the javascript files very quickly became huge and complicated pieces of javascript. I tried Dart in the hope that it could solve all my javascript woes and make development a little more familiar to Java. The following is a quick tutorial on how to create a small app with Dart.

View App

Getting Started

You can download the IDE and SDK from  – http://www.dartlang.org/

On the dartlang website you may want to look at some of the code samples one of which I used to construct this small application.

Opening the Dart IDE you should see its very similar to Eclipse.

  • Create a new Application File -> New Application or First Icon in Toolbar
  • Name the application
  • Select Generate content for basic web app content

Dart Editor will generate 3 files of interest <app_name>.css/html/dart

Pressing the Run Button (Play Icon) – you should see this

Dart generated sample code

Do as the App says and experience a nice transformation

Creating my First Application

I decided I wanted to create something fun and that could be incredibly simple and that I could gradually make more complex. I came up with a Picture Puzzle with the base goal of creating a small image split into tiles that can be re ordered to recreate the image.
I started with the Drag n Drop code sample supplied on the Dartlang code samples. Lets start with the HTML for the basic version of the app. I wanted a 3*3 grid of tiles for ane asy to complete grid. As an initial design we will hard code the tiles later as we get more comfortable we can dynamically add these.


<div id="container" class="board">

<div id=”tiles”>
<div id=”tile1″ draggable=”true”></div>
<div id=”tile2″ draggable=”true”></div>
<div id=”tile3″ draggable=”true”></div>
<div id=”tile4″ draggable=”true”></div>
<div id=”tile5″ draggable=”true”></div>
<div id=”tile6″ draggable=”true”></div>
<div id=”tile7″ draggable=”true”></div>
<div id=”tile8″ draggable=”true”></div>
<div id=”tile9″ draggable=”true”></div>
</div>

</div>

Hopefully this is self explanatory, each div tag will represent a tile and each tile has to have the draggable attribute set to true so that we can move them. Easy !!

The Dart code now, this is the new exciting stuff. You have your tiles parent element that contains all the pieces of the puzzle. View the full dart code here I will only explain main snippets below to save this being an enormous post!

Adding Drag n Drop functionality

There are a few Element event handlers that have to be set to make our tiles drag n drop nicely.

  1. on.dragStart
  2. on.dragEnd
  3. on.dragEnter
  4. on.dragOver
  5. on.dragLeave
  6. on.drop

It is possible to code drag n drop much simpler with basic start/end/drop functions but this way we can make it perform much smoother. The code here is very similar to the drag n drop HTML5 sample so take a look at that for a good base implementation.

onDragStart Event


void _onDragStart(MouseEvent event) {
//Get the tile being dragged by user from the MouseEvent
Element dragTarget = event.target;
//add css to show the tile is in motion
dragTarget.classes.add('moving');
_dragSourceEl = dragTarget;
event.dataTransfer.effectAllowed = 'move';
//let the browser know which element is moving
event.dataTransfer.setData('text/html', dragTarget.innerHTML);
}

The above method initiates the dragging telling the browser we are moving dragTarget and assigns a custom css to show the user that the item is in motion.

onDrop Event

void _onDrop(MouseEvent event) {
// Stop the browser from redirecting.
event.stopPropagation();
// Don't do anything if dropping onto the same column we're dragging.
Element dropTarget = event.target;
if (_dragSourceEl != dropTarget) {
// get the image of tile we are dragging.
var bg_image_old = dropTarget.style.backgroundImage;
//Swap the images
dropTarget.style.backgroundImage = _dragSourceEl.style.backgroundImage;
_dragSourceEl.style.backgroundImage = bg_image_old;

To see more of the methods and CSS behind the drag n drop please check out github
This simple example covers the main aspects of dragging and dropping elements using DART and shows some of the syntax you can expect to use in DART. The next problem was assigning images to each DIV in a random order.

Dart has a Maths package you can import straight into your project, those familiar with java will definitely recognize these functions. To use the Math package add the following to the top of your .dart file.

#import('dart:math');

I stored all my tiles using key value pairs in a Map


tiles = new Map();
tiles[1] = "url(img/pgriffin_tiles_01.png)";

This will allow me to quickly access each image and map the images to individual tiles.Next I needed a way to assign a pictures to tiles randomly, this is done effortlessly with using a random number generator, See code below:


var rand = new Random();
var num = rand.nextInt(10);
var imgUrl = tiles[num];

This generates my numbers 0-9 and I keep track of what has been generated to assign all the images in the map to a tile div.

Those familiar with object orientated languages java,C# will recognize this syntax and function. Which is what I think makes Dart such an appealing language everything is familiar,easy and accessible.

this covers the most interesting parts of the code in this very simple demo app designed to help beginners get to grips with Dart. I will post link to main application running soon. Here is a picture for now

After stage 1 approx 1 – 2 hours work. With a few Bootstrap/Css bells and whistles

Conclusion
So far I am really enjoying developing with DART, It really does take some of the pain out of javascript and has a good IDE and plenty of samples and tools to help you get started. I will continue to post progress of my application as I grow more comfortable with the language. Hope this has been helpful or atleast a good preview of what DART offers.

About these ads

One thought on “Getting Started : Dart

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s