Jugando con la librería Google Closure

closure Google Closure Tools es un pack de herramientas de Google con las que los desarrolladores pueden optimizar el código JavaScript de sus aplicaciones de forma impresionante, pero de manera sencilla.

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:

Leave a Reply Cancel reply