Brevemente, está compuesto de: Closure Compiler, un optimizador de JavaScript que compila las aplicaciones web con el fin de hacerlas ágiles y compactas; Closure Inspector, basado en Firebug que nos ayuda a encontrar errores en e código fuente; Closure Library, una librería de funciones JavaScript modular y compatible con muchos navegadores; y Closure Templates, es pack de modelos basado en JavaScript/HTML con los que podemos crear componentes para nuestras aplicaciones. (Via Google Code)
En teebes.com podemos apreciar como le ayuda Closure Library a este desarrollador para crear una pequeña aplicación que hace uso de las teclas de dirección del teclado. Puedes ver la demo en esta web, y puedes apreciar el código fuente de esta:
<!DOCTYPE HTML>
<html>
<head>
<title>Playing with Closure graphics & events</title>
<style type='text/css'>* { margin: 0; padding: 0 }</style>
<script src="http://closure-library.googlecode.com/svn/trunk/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>
</body>
</html>
Vía http://teebes.com/blog/19/
Enlaces de interes: