CONZEPTO: CON JAVASCRIPT ¡PUEDES!. USO DE CAN.JS

< script src=”my own” title=”uso de can.js” >

Aprendiendo un poco sobre el modelo de desarrollo basado en Web Components, me encuentro con que existen muchos frameworks en la actualidad que intentan emular este estilo de desarrollo que considero será el futuro inmediato. Por mencionar algunos está Polymer, Aurelia, X-Tag (de los que espero hacer posts más adelante XD ), Knockout.js y uno que “puede” ser bastante prometedor, así que me arriesgué a probarlo…

Can.js es un framework que utiliza diferentes formas de fabricar widgets o componentes de interfaz de usuario (o incluso aplicaciones enteras y complejas), orientado en su gran mayoría (pero no limitativo) al desarrollo basado en componentes, utilizando una API consistente y lo mejor (#IMO), es que no necesariamente te restringe a trabajar con jQuery ¡yeah :mrgreen: !

Desarrollo de la aplicación

Como mi “relación” con esa librería es de amor y dolor (pero más dolor que amor :/ ), decidí usar el framework con Zepto.js. Dicho esto, hice una calculadora sencilla con apenas dos componentes: un display que contendrá todas las operaciones que se escriban, y un botón que según la etiqueta que contenga, añadirá al display un dígito o una operación. ¡Comencémos!

En la vista principal tengo:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Ejemplo Can Component</title>
		<link rel="stylesheet" href="entireframework.min.css">
</head>
<body style="margin: 0 auto; width: 80%">
	<script id="tpl-btn" type="text/mustache">
		<display></display>
		{{#each botones}}
			<boton></boton>
		{{/each}}
	</script>
<div id="app" style="width:200px; text-align: center;"></div>
<script src="zepto.js"></script>
	<script src="event.js"></script>
	<script src="ajax.js"></script>
	<script src="can.zepto.min.js"></script>
	<script src="can.stache.js"></script>
	<script src="calculadora.js"></script>
</body>
</html>

De las líneas 9 a 14 está el template de la aplicación (Can.js lo compila y renderiza con mustache, el padre de Handlebars 😀 ), y dichas líneas son insertadas en la línea 16. Lo demás son las inserciones de las librerías necesarias para el funcionamiento de Can.js con Zepto.js (valga decir que en su página web puedes descargar una versión personalizada del framework con Dojo, Mootools, YUI o jQuery ^^’ ).

Ahora, respecto a los componentes tengo:

...
can.Component.extend({
	tag: "display",
	template: can.stache("<input type='text' id='display' disabled='disabled' style='margin-bottom:20px;margin-top:10px;text-align: right;font-family:Courier;width:90%' value=''/>")
});
...

can.Component permite crear componentes como objetos planos de Javascript a renderizar, mientras que el atributo tag es simplemente el nombre del componente como será renderizado en la vista, y el atributo template es la vista que tendrá el componente, dentro del cual se pueden definir estilos, data de prueba, bindings con otros componentes, etcétera. Luego, usando can.stache, se compila un template dentro de la vista.

El componente botón es algo más “complejo”:

can.Component.extend({
	tag: "boton",
	template: can.stache("<button id={{value}} class='btn btn-sm btn-info' style='width:46px;'>{{value}}</button>"),
	viewModel: {
		agregarCalculo: function (paso) {
			var cadena = $("#display").val();
			cadena = cadena === 0 ? paso : cadena + paso;
			$("#display").val(cadena);
		},
		procesarCalculo: function () {
			var operacion = $("#display").val();
			if (operacion.indexOf("%") !== -1) {
				var terminos = operacion.split('%');
				$("#display").val(( parseFloat(terminos[0]) * parseFloat(terminos[1]) ) / 100);
			}	else {
				$("#display").val(eval(operacion));
			}
		}
	},
	events: {
		click: function () {
			switch (this.element[0].innerText) {
				case "C":
					$("#display").val('');
					break;
				case "=":
					this.viewModel.procesarCalculo();
					break;
				case "◀":
					if ($("#display").val().length > 0)
						$("#display").val($("#display").val().substring(0, $("#display").val().length-1));
					break;
				case "℗":
					$("#display").val("-----> OFF <-----   ");
					setTimeout(function (){
						$("body").hide();
					}, 2000);
					break;
				default:
					this.viewModel.agregarCalculo(this.element[0].innerText);
			}
		}
	}
});
...

En este componente entran en juego dos nuevos atributos de can.Component. El atributo viewModel, que permite definir algún comportamiento adicional para un componente en particular, y events, que contendrá los handlers para los diferentes eventos que se produzcan en el componente.

Por lo demás pueden ver el demo acá.

Instrucciones de uso de la calculadora

  • El botón C sirve para “limpiar” el display.
  • El botón % calcula porcentajes (no módulos). Si escriben 25%3, calcularán el 3% de 25.
  • El botón “apaga” la calculadora (bueno, la oculta 😳 ).
  • El botón = muestra el resultado de la operación escrita.
  • Los demás botones añaden un dígito o la operación que corresponda.

Me gustó mucho desarrollar en esta librería, sobre todo el hecho de que no te limita a trabajar con jQuery y que está basado en componentes. Lo importante es que puedas desarrollar aplicaciones. Con Javascript, ¡puedes! 😉 .

</script>

Anuncios