Playing with Google's Closure JS library

November 8, 2009 - by teebes -

On Thursday, Google open-sourced several of its JavaScript building blocks: a compiler, a library and template extension. They've been released together as the Closure toolkit.

I was particularly interested in its JavaScript library, specifically the graphics engine that implements the W3C's Scalable Vector Graphics as well as the event listeners. So I threw together a very small interactive app to play with the parts I'm curious about:

Use your up / down / right / left arrow keys to move the ball:

If you're reading this via rss, or if you want to see it in its own window, click here.

This does something similiar to what I do on Stark, my visual mud project [github page] that uses the Processing JS library and the HTML 5 <canvas> element, but instead of creating a draw function that is executed x amounts per seconds, you just call a draw function and assign it to a variable for future interactions. Here is the source code for this example (you can also just look at the current page's source):

<!DOCTYPE HTML>
<html>
<head>
    <title>Playing with Closure graphics & events</title>
    <style type='text/css'>* { margin: 0; padding: 0 }</style>
    
    <script src="/static/js/closure-library-read-only/closure/goog/base.js"></script>
    <script type="text/javascript">
    goog.require('goog.graphics');
    goog.require('goog.events');
    goog.require('goog.events.KeyCodes');
    goog.require('goog.events.KeyHandler');
    </script>
</head>

<body>
    Use your up / down / right / left arrows to move the ball
    
    <div id="shapes"></div>
  
    <script type="text/javascript">
    var graphics = goog.graphics.createGraphics(200, 150);

    // define the colors for the squares and the dot
    var square_fill = new goog.graphics.SolidFill('yellow');
    var square_stroke = new goog.graphics.Stroke(2, 'green');
    var dot_fill = new goog.graphics.SolidFill('blue');
    var dot_stroke = new goog.graphics.Stroke(1, 'black');

    // the dot's initial position
    var dot = {x: 1, y: 1};

    // properties    
    var size = 40;
    var margin = 5;
    var width = size - margin;
    var num_rows = 3;
    var num_cols = 4;

    // draw the squares
    for (var x = 0; x < num_cols; x++) {
        for (var y = 0; y < num_rows; y++) {
            graphics.drawRect(
                        margin + x * size,
                        margin + y * size,
                        width,
                        width,
                        square_stroke,
                        square_fill);
        }
    }

    // draw the dot
    dot['graphic'] = graphics.drawEllipse(
                                margin + dot['x'] * size + width / 2,
                                margin + dot['y'] * size + width / 2,
                                width / 4,
                                width / 4,
                                dot_stroke,
                                dot_fill);
    
    // call if the dot's position changes
    redraw_dot = function() {
        dot['graphic'].setCenter(
                            margin + dot['x'] * size + width / 2,
                            margin + dot['y'] * size + width / 2);
    }
    
    // key event handler
    var key_handler = new goog.events.KeyHandler(document);
    var key_event = function (e) {
        if (e.keyCode == goog.events.KeyCodes.UP && dot['y'] > 0) {
            dot['y'] -= 1;
        }
        else if (e.keyCode == goog.events.KeyCodes.RIGHT && dot['x'] <= num_cols - 2) {
            dot['x'] += 1;
        }
        else if (e.keyCode == goog.events.KeyCodes.DOWN && dot['y'] <= num_rows - 2) {
            dot['y'] += 1;
        }
        else if (e.keyCode == goog.events.KeyCodes.LEFT && dot['x'] > 0) {
            dot['x'] -= 1;
        }
        redraw_dot();
    }
    
    // put everything together
    goog.events.listen(key_handler, 'key', key_event);
    graphics.render(document.getElementById('shapes'));
  </script>

  <a style='margin-left: 20px;' href="http://teebes.com/blog/19/playing-with-googles-closure-js-library">what's this?</a>

</body>
</html>