Sunday, September 12, 2010

Attempt to Quick Start with DoJo

I heard about Dojo last week.  Figured I play around with it.  I thought I would try and write a simple javascript base Web UI to a chess board.  I had done this a while back in 90's with just straight javascript.  It was pretty straight forward and I was able to hook it up to a "crafty" chess engine on the backend. 

So I went to :

http://dojotoolkit.org/reference-guide/quickstart/gettingstarted.html#quickstart-gettingstarted

So on my web server I created ...

plankton@ubuntu:/var/www/EC$ cat mytry1.html
<html>
<head>
        <!-- see http://www.dojotoolkit.org/download/ --!>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>
    <title>My Dojo Try 1</title>
</head>

<body>
<p>
&copy; Me MMX
</p>
</body>
</html>
</code>

... and loaded it in my browser and no surprise all that got outputted was the copyright thingy.

Next I took a look at an example and cut-n-pasted (like it said to do) this ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
   
    <head>
        <link rel="stylesheet" type="text/css" href="../_static/js/dijit/themes/claro/claro.css"
        />
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
    </head>
   
    <body class=" claro ">
        <div id="showMe" style="padding: 10px;">
            click here to see how it works
        </div>
    </body>
    <script type="text/javascript" src="../_static/js/dojo/dojo.js" djConfig="parseOnLoad: true">
    </script>
    <script>
        dojo.addOnLoad(function() {
            dojo.query("#showMe").onclick(function(e) {
                var node = e.target;

                var a = dojo.anim(node, {
                    backgroundColor: "#363636",
                    color: "#f7f7f7"
                },
                1000);

                dojo.connect(a, "onEnd", function() {
                    dojo.anim(node, {
                        color: "#363636"
                    },
                    null, null, function() {
                        node.innerHTML = "wow, that was easy!";
                        dojo.anim(node, {
                            color: "white"
                        });
                    });
                });
            });
        });
    </script>
    <!-- NOTE: the following script tag is not intended for usage in real
    world!! it is part of the CodeGlass and you should just remove it when
    you use the code -->
    <script type="text/javascript">
        dojo.addOnLoad(function() {
            if (document.pub) {
                document.pub();
            }
        });
    </script>

</html>

... into a file mytry2.html ... and what do you think happened when I loaded that with my browser???? OH! the suspense! Well the string ...

click here to see how it works

... got outputted and what do you thing happens when you click on the string ????

Are you sitting down?

Well nothing happened. Lame :( What am I doing wrong?

No comments:

Post a Comment