Dart: elements iteration and CSS manipulation

In my exploration of Dart I’m trying to work in some easy examples that could help me to understand how to accomplish some tasks with this technology.
In this example I tried to understand better how iteration of elements works in Dart, how to create a layout with custom elements (more or less the same topic of a custom item renderer in Flex for example) and finally how to create some animations with CSS3 at runtime.

To accomplish those topics I decided to create a responsive image gallery that works on smartphone, tablet and web too.

image gallery with dart

Responsive image gallery


Dart gives few opportunities to iterate trough elements:

  • with Dart language (a classic for cycle)
  • with an HTML template
  • with elements composed by an HTML template and some dart code to cover the business logic of the final element

I jump directly to the second and third method, the first one is quite easy for any developer ūüėČ
In my sample I decide to use a simple HTML template, so basically you can define inside your html a tag <template/> that will allow you to repeat the HTML inside this tag associating it to a list for example, I give you a quick sample:

 <div id="imageCont" class="wrap">
      <template iterate="data in results">
        <div class="image">
          <img id="img_{{data[0]}}" class="faded" src={{data[1]}} width="320" height="240" on-click="onClick($event)" on-mouse-out="onOut($event)" on-mouse-over="onOver($event)" on-load="fadeIn($event)"/>
          <img id="zoom_{{data[0]}}" src="images/zoom.png" class="zoom"/>

First of all take a look on how I can iterate this part of code; I add a simple iterate attribute associated to a list object (called results in my example) added in my dart file as a public variable.
The list could be a plain list or a list of objects, in this last case you can create multiple iteration item inside the template cycling trough your objects in the same way you have just seen.
I can substitute my¬†data variable with any other name and I don’t need to define in my dart file, as you can see I can also define some variables inside the template getting values from¬†my list object with this syntax: {{data[0]}} (or {{data[“value”]}} it’s the same, depends how you have create the list object).
If you need, you can also made your source variables bindable and any time you’ll change the values of your list, also the view will change the number of elements or the values showed in the HTML page.

Finally when you need to create an iterable object with a complex business logic and you want to separate from the original HTML file you can do that creating a Web Components, but in this case I suggest you to take a look to the Dart language guide that explain very well how to achieve this topic.

Modifying CSS with Dart

Another interesting topic is how to change, add or remove css styles to my DOM objects.
In Dart is so easy like any other javascript library, so basically any DOM element in Dart has a property called “classes” with its associated method add and remove, so when you want to change your CSS class with another one, you have, if you have any classes already associated to the element, remove the old class and then add the new one:

var myDomObj = query("#idObject");

You can also style any single property directly with “style” property and set them directly in this easy way:

var myDomObj = query("#idObject");
             ..color = "0xFFF"
             ..fontSize = "15px";

As you can see working with CSS in Dart is relative simple, if you want to take a look to the whole project feel free to download it.

Another cool thing that is so useful when you work with mobile apps or websites is to test quickly and frequently your content on the devices, so with DartIDE (you can find it downloading Dart SDK) you can easily test your content trough a web server that starts any time you are testing your app into the browser.
It’s so interesting because you save a lot of time in this way!

I’m trying to figure out right now an¬†hypothetical workflow to create web app, web sites or any other thing with Dart and HTML5.
I believe that use Dart in combination with Edge Reflow could be the best way to create responsive application for any kind of devices, but we have to wait until the release of Edge Reflow (17th June) to know if my supposition is true or not.
When it’ll be released and I’ve few time to invest, I’ll prepare another tutorial around this workflow.
In the meanwhile I hope you are enjoying those experiments with Dart and if you are interesting in any kind of topics on Dart feel free to suggest trough a comment in this post or sending an email


First approach to Dart

Dart Logo

After saw what’s happend during the Google I/O, I decide to make some experiments with Dart.
If you don’t know what is Dart¬†I explain in a while: Dart is a new language that allow to structure ¬†your code in OOP manner with strong typing but with a lot of flexibility.
It’s so similar to Javascript but give you the opportunities to create classes, libraries, isolates (a good implementation to use shared-memory threads) and so on.
For an Actionscript developer, Dart seems to be the natural evolution to Javascript, during last week, also, Adobe announced an extension for Flash that allow to export Flash animations directly to Dart, so another good point on why choice this great new language.
Starting to work with Dart is very very simple, you have only to download Dart from the website and you will find inside the zip the DartEditor, an editor based on Eclipse that will become your new IDE to write Dart application.
When you are working with Dart to create the UI of your project, you can use HTML and CSS and if you have some Javascript library to integrate with Dart, you can do that!!!
With Dart you can decide to create a client or server side project, you can also export your client project for chromium or Javascript, so it’s very flexible and powerful as you can see.
I will not explain how to install Dart and getting started with it because in the official website the “get started” section is well documented, so I prefer to start with an example of a video player, if it’s your first approach to Dart I suggest to take a look, before go ahead with this post, to that section on the official website.

For the UI part of my example I’ve used Topcoat and Dart for the business logic of my video player.
Topcoat is a new Adobe UI library dedicated to style in a good and fast way the main components in a web or mobile application, if you have worked with Flex is more or less the same concept of a theme, so when you don’t want to waste your time creating a custom UI you can easily use Topcoat for your prototypes or example.

Beginning from the UI side, after created a new Dart project, I create an HTML file where I add a title, an instance of video component, and a div with some buttons and a slider to manage the volume:

<div class="centerClass">
      <h1>VideoPlayer made with DartJS</h1>
      <video id="video" width="640" height="420"/> 
    <div class="centerClass">
      <a id="playBtn" class="light-button">Play</a>
      <a id="resumeBtn" class="light-button">Restart</a>
      <span id="currTime">00:00/00:00</span>
      <span><input id="volume" type="range" class="dark-slider" value="100"/></span>

After that I created my class in the DartEditor, all Dart classes have the extension .dart.
At the beginning of this class I’ve retrieve the id of my components inside the HTML file with query method, as you can see below, it allows me to work with them directly from my Dart class:

volumeSlider = query("#volume");
  currTimeDisplay = query("#currTime");
  player = query("#video");
  playBtn = query("#playBtn");
  restartBtn = query("#resumeBtn");

Then I loaded my mp4 file inside the video component and I’ve added all listeners that I need to intercept events from user or from the video instance:

player.src = "video/test.mp4";

//player listeners
  // buttons listeners

After that I’ve only to add the business logic for any interaction and everything will be done:

void refreshData(event){
  currTimeDisplay.text = returnDisplayTime(player.currentTime) + "/" + returnDisplayTime(player.duration);
void checkLoading(event){
  //after video si loaded I play it
  isWorking = true;
  playBtn.text = "Pause";
void playVideo(MouseEvent event){
  //managing if I've to play or pause the video
    isWorking = false;
    playBtn.text = "Play";    
  } else {    
    isWorking = true;
    playBtn.text = "Pause";
void setVolume(event){
  //setting volume video value (from 0 to 1)
  player.volume = int.parse(volumeSlider.value)/100;
void restartVideo(event){

When you have finished you can easily export your project to Javascript from the DartEditor menu (Tools > Generate Javascript) and publish on your website.
Finally this is the link to download the entire project.

As you can see Dart is not a complex language in particular if you have a solid understanding of OOP language, I personally think that many Actionscript developers will be find in Dart a good approach to Javascript and probably new stimulus on create new engaging experiences.