Wednesday, January 1, 2014

Dart - Brief Overview

What is Dart ?

From dartlang.org, "Dart is a new platform for scalable web app engineering". Dart is not only a new language based on lessons learned from best of both dynamically and statically typed languages but also offers a virtual machine (Dart VM) that run both server and client side code, libraries and a dart editor to build and test dart code. 

Dart can run natively on the Dart VM or can be compiled to JavaScript to run on all modern browsers. Dart is an open source language and still evolving. Dart powered by contributions from Google and others from the open source community. 

The dart language site, dartlang.org is organized very nicely and has all that you need to quickly get started.

Simple Dart Web Application

I have put together a simple Web Application (A card matching memory game) to check out basic dart features and get a feel for the language.















1. Create new Web Application in Dart Editor.
















2. Update the CSS file to create classes for the Cards and Card Covers.
body {
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
color: #333;
}
h1, p {
color: #333;
}
#card-container {
width: 540px;
height: 440px;
border-style:solid;
border-width:2px;
border-color: #0050ff;
background-color: #8ef2ee;
}
.card {
width: 80px;
height: 100px;
position:fixed;
border-style:solid;
border-width:1px;
border-color: #0d4f03;
background-color: #76ff00;
text-align: center;
vertical-align: middle;
display: table-cell;
vertical-align: middle;
}
.cardCover {
width: 80px;
height: 100px;
position:fixed;
border-style:solid;
border-width:1px;
border-color: #14015e;
background-color: #7762d6;
text-align: center;
vertical-align: middle;
display: table-cell;
vertical-align: middle;
}
view raw simpleWebAppCSS hosted with ❤ by GitHub

3. Update the .html file to create the cards and card covers for the card matching game. (Yep.... we can dynamically create the divs instead of hard coding them in the html page...will save that for some other time :)... )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimpleDartWebApp</title>
<link rel="stylesheet" href="simpledartwebapp.css">
</head>
<body>
<div id="card-container">
<div id="card1" class="card" style="position:fixed;top:20px;left:20px;">
</div>
<div id="cardCover1" class="cardCover" style="position:fixed;top:20px;left:20px;">
</div>
<div id="card2" class="card" style="position:fixed;top:20px;left:110px;">
</div>
<div id="cardCover2" class="cardCover" style="position:fixed;top:20px;left:110px;">
</div>
<div id="card3" class="card" style="position:fixed;top:20px;left:200px;">
</div>
<div id="cardCover3" class="cardCover" style="position:fixed;top:20px;left:200px;">
</div>
<div id="card4" class="card" style="position:fixed;top:20px;left:290px;">
</div>
<div id="cardCover4" class="cardCover" style="position:fixed;top:20px;left:290px;">
</div>
<div id="card5" class="card" style="position:fixed;top:20px;left:380px;">
</div>
<div id="cardCover5" class="cardCover" style="position:fixed;top:20px;left:380px;">
</div>
<div id="card6" class="card" style="position:fixed;top:20px;left:470px;">
</div>
<div id="cardCover6" class="cardCover" style="position:fixed;top:20px;left:470px;">
</div>
<div id="card7" class="card" style="position:fixed;top:130px;left:20px;">
</div>
<div id="cardCover7" class="cardCover" style="position:fixed;top:130px;left:20px;">
</div>
<div id="card8" class="card" style="position:fixed;top:130px;left:110px;">
</div>
<div id="cardCover8" class="cardCover" style="position:fixed;top:130px;left:110px;">
</div>
<div id="card9" class="card" style="position:fixed;top:130px;left:200px;">
</div>
<div id="cardCover9" class="cardCover" style="position:fixed;top:130px;left:200px;">
</div>
<div id="card10" class="card" style="position:fixed;top:130px;left:290px;">
</div>
<div id="cardCover10" class="cardCover" style="position:fixed;top:130px;left:290px;">
</div>
<div id="card11" class="card" style="position:fixed;top:130px;left:380px;">
</div>
<div id="cardCover11" class="cardCover" style="position:fixed;top:130px;left:380px;">
</div>
<div id="card12" class="card" style="position:fixed;top:130px;left:470px;">
</div>
<div id="cardCover12" class="cardCover" style="position:fixed;top:130px;left:470px;">
</div>
<div id="card13" class="card" style="position:fixed;top:240px;left:20px;">
</div>
<div id="cardCover13" class="cardCover" style="position:fixed;top:240px;left:20px;">
</div>
<div id="card14" class="card" style="position:fixed;top:240px;left:110px;">
</div>
<div id="cardCover14" class="cardCover" style="position:fixed;top:240px;left:110px;">
</div>
<div id="card15" class="card" style="position:fixed;top:240px;left:200px;">
</div>
<div id="cardCover15" class="cardCover" style="position:fixed;top:240px;left:200px;">
</div>
<div id="card16" class="card" style="position:fixed;top:240px;left:290px;">
</div>
<div id="cardCover16" class="cardCover" style="position:fixed;top:240px;left:290px;">
</div>
<div id="card17" class="card" style="position:fixed;top:240px;left:380px;">
</div>
<div id="cardCover17" class="cardCover" style="position:fixed;top:240px;left:380px;">
</div>
<div id="card18" class="card" style="position:fixed;top:240px;left:470px;">
</div>
<div id="cardCover18" class="cardCover" style="position:fixed;top:240px;left:470px;">
</div>
<div id="card19" class="card" style="position:fixed;top:350px;left:20px;">
</div>
<div id="cardCover19" class="cardCover" style="position:fixed;top:350px;left:20px;">
</div>
<div id="card20" class="card" style="position:fixed;top:350px;left:110px;">
</div>
<div id="cardCover20" class="cardCover" style="position:fixed;top:350px;left:110px;">
</div>
<div id="card21" class="card" style="position:fixed;top:350px;left:200px;">
</div>
<div id="cardCover21" class="cardCover" style="position:fixed;top:350px;left:200px;">
</div>
<div id="card22" class="card" style="position:fixed;top:350px;left:290px;">
</div>
<div id="cardCover22" class="cardCover" style="position:fixed;top:350px;left:290px;">
</div>
<div id="card23" class="card" style="position:fixed;top:350px;left:380px;">
</div>
<div id="cardCover23" class="cardCover" style="position:fixed;top:350px;left:380px;">
</div>
<div id="card24" class="card" style="position:fixed;top:350px;left:470px;">
</div>
<div id="cardCover24" class="cardCover" style="position:fixed;top:350px;left:470px;">
</div>
</div>
<script type="application/dart" src="simpledartwebapp.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
view raw SimpleWebAppHTML hosted with ❤ by GitHub
4. Now the dart source code.

  • Create the data list that we would manipulate in the code. 
    • CardData - This will be the title of the cards that we would use to match.
    • CardSet - This will be the div id of the cards we will use to randomly assign card title.
    • cardCoverSet - This will be the div id of the card covers we will use these to cover the cards and write some event handlers to show/hide the cards.
    //Card Data
    List cardData = [
    'HTML', 'CSS', 'JavaScript', 'JQuerry',
    'Java', 'Dart', 'Scala', 'Groovy',
    'Grails', 'Play', 'GWT', 'Spring',
    'HTML', 'CSS', 'JavaScript', 'JQuerry',
    'Java', 'Dart', 'Scala', 'Groovy',
    'Grails', 'Play', 'GWT', 'Spring'
    ];
    //Card DIV Set
    List cardSet = [
    '#card1', '#card2', '#card3', '#card4',
    '#card5', '#card6', '#card7', '#card8',
    '#card9', '#card10', '#card11', '#card12',
    '#card13', '#card14', '#card15', '#card16',
    '#card17', '#card18', '#card19', '#card20',
    '#card21', '#card22', '#card23', '#card24'
    ];
    //Card Cover DIV Set
    List cardCoverSet = [
    '#cardCover1', '#cardCover2', '#cardCover3', '#cardCover4',
    '#cardCover5', '#cardCover6', '#cardCover7', '#cardCover8',
    '#cardCover9', '#cardCover10', '#cardCover11', '#cardCover12',
    '#cardCover13','#cardCover14', '#cardCover15', '#cardCover16',
    '#cardCover17','#cardCover18', '#cardCover19', '#cardCover20',
    '#cardCover21','#cardCover22', '#cardCover23', '#cardCover24'
    ];
    view raw SimpleWebAppDart-DataSet hosted with ❤ by GitHub
  • The Random logic which will be used to assign titles to the cards randomly. 
    • //Get Random Data
    List getRandomData(List data){
    List selectedData = new List();
    List selectedCheck = new List();
    num counter = 0;
    Random randomSelecter = new Random();
    while(counter < 24){
    int selectedNum = randomSelecter.nextInt(24);
    if(!selectedCheck.contains(selectedNum.toString())){
    selectedCheck.add(selectedNum.toString());
    selectedData.add(data[selectedNum]);
    counter++;
    }
    }
    return selectedData;
    }
    view raw SimpleWebApp-RandomCode hosted with ❤ by GitHub
  • Code to assign card covers to the card and set up event handlers for the card covers, then show or hide divs if matching cards are selected or not. 
    • //Set Click Handlers
    void setClickHandlers(){
    for (var x in cardCoverSet) {
    querySelector(x).onClick.listen((event) => showCard(x.toString().substring(10)));
    }
    }
    showCard(String x) {
    var cardCoverValue = "#cardCover"+x;
    var cardValue = "#card"+x;
    if(currentCard1 != 0 && currentCard2 == 0){
    currentCard2 = int.parse(x);
    }
    if(currentCard1 == 0){
    currentCard1 = int.parse(x);
    }
    querySelector(cardCoverValue).style.display = "none";
    doCheck();
    }
    doCheck(){
    if(currentCard1 != 0 && currentCard2 != 0){
    var cardValue1 = "#card"+currentCard1.toString();
    var cardValue2 = "#card"+currentCard2.toString();
    var cardCoverValue1 = "#cardCover"+currentCard1.toString();
    var cardCoverValue2 = "#cardCover"+currentCard2.toString();
    var val1 = querySelector(cardValue1).innerHtml;
    var val2 = querySelector(cardValue2).innerHtml;
    if(querySelector(cardValue1).innerHtml == querySelector(cardValue2).innerHtml){
    currentCard1 = 0;
    currentCard2 = 0;
    selectedCount++;
    if(selectedCount == 12){
    context.callMethod('alert',['Good job all done....']);
    }
    }else{
    querySelector(cardCoverValue1).style.display = "block";
    querySelector(cardCoverValue2).style.display = "block";
    currentCard1 = 0;
    currentCard2 = 0;
    }
    }
    }
    view raw SimpleWebApp-ShowCard hosted with ❤ by GitHub
  • Code to assign card title and the main entry point. 
    • //Set Card Data
    void setCardData(){
    List randomCardList = getRandomData(cardSet);
    List randomCardData = getRandomData(cardData);
    num indexSelected = 0;
    for (var x in randomCardList) {
    querySelector(x).innerHtml = randomCardData[indexSelected].toString();
    indexSelected++;
    }
    }
    num currentCard1 = 0;
    num currentCard2 = 0;
    num selectedCount = 0;
    //Main Entry Point
    void main() {
    context.callMethod('alert',['Click on the matching cards to match \'em all']);
    setCardData();
    setClickHandlers();
    }
    view raw SimpleWebbApp-Main hosted with ❤ by GitHub
5. Run the application in Dartium.





























6. Run the application using JavaScript.




























When Run as JavaScript is selected, dart editor will run dart2js to compile dart source code into JavaScript.















Source Code for Simple Web Application available on GitHub.

Until next time, Thank you
Malcolm



Posted by at No comments:
Subscribe to: Posts (Atom)