Nuestra Primera App con Ember.js
0. Índice de contenidos.
1. Entorno
Este tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil Intel Core 2 Duo CPU T8100 @ 2.10GHz x 2
- Sistema Operativo: Ubuntu 12.04 LTS x32
- Sublime Text 2
2. Introducción
A través de esta guía vamos a hacer una pequeña aplicación con Ember.js cubriendo algunos de los aspectos básicos del framework, de manera que podamos hacernos una idea de lo que Ember.js puede ofrecernos. Algunos de los aspectos básicos de ember están tratados en esta otra guia, es recomendable leerla antes para hacernos una idea de lo que trata de aportar Ember.js
Para realizar esta guía vamos a usar la versión de Ember 1.0.0-RC.2, y usaremos el Starter Kit que podemos descargar desde la página de Ember, el cual tiene la siguiente estructura:
El grueso de nuestra aplicación residirá en el archivo app.js, mientras que las vistas las almacenaremos en el archivo index.html, Handlebars ( el encargado de las vistas en nuestra aplicación ) también permite usar archivos externos para almacenar las vistas, pero de momento no vamos a hacer uso de esa funcionalidad.
El primer paso sería crear nuestra App, y asignarla al namespace que deseemos, en este caso será al namespace App.
Por defecto Ember nos crea una Ruta, un Controlador y una Vista, sin nosotros tener que hacer nada, en la siguiente imagen podemos hacernos una idea de la convención de nombres que sigue Ember.js, es importante saber que, aunque nosotros no hayamos hecho ninguno de esos componentes Ember los está haciendo por nosotros.
3. Las partes de nuestra Aplicación
3.1. El Objeto Router
El objeto Router es el encargado de mantener el estado de nuestra aplicación a través de la URL, una vez mas, sino le decimos lo contrario Ember, usará el nombre de la ruta como ruta a capturar en la URL ( es decir, si no declaramos ninguna ruta a una ruta llamada lista, automáticamente se le asociará la URL /lista.
3.2. La Vista
En cuanto a las Vistas o Templates, Ember usará automáticamente dos templates, uno sin nombre y otro con el nombre index, en la primera solo tendremos un título junto con el código {{outlet}} el cual Ember sustituirá por el contenido del template que pertenezca a la ruta actual.
3.2. El Modelo
En cuanto al Modelo, Ember nos provee de una clase llamada Ember.Data que nos permite sincronizar nuestros Objetos del modelo en la parte cliente con nuestro servidor, para esta aplicación nosotros vamos a hacer nuestros propios modelos sin sincronizarlos al servidor, ya que nos vamos a centrar en cómo interactúan las diferentes partes de la aplicación-
3.2. El Controlador
Por último los Controladores que en Ember pierden importancia y se usan meramente como «Proxys» para manipular los datos del modelo antes de mostrarlos por la Vista.
4. La Aplicación
4.1. El Índice
La aplicación que vamos a hacer nos va a permitir insertar un nombre, el cual tendremos que repetir para comprobar que se ha escrito correctamente, lo cual nos permitirá simular la funcionalidad de un registro y ver como Ember computa dinámicamente si los valores de los campos son iguales ( sin tener que entrar al DOM y ir actualizando manualmente ), y actualizará automáticamente el estado de la aplicación, en caso de ser correcto, o mostrará un mensaje de error en caso contrario.
Lo primero que vamos a hacer va a ser declarar el Objeto de modelo
App.User = Ember.Object.extend({
name : "",
nameRepeated : "",
isInvalid : function(){
var invalid = true;
var firstName = this.get("name");
var repeatName = this.get("nameRepeated");
if(firstName != "" && repeatName != "" && (firstName == repeatName)){
invalid = false;
}
return invalid
}.property("name","nameRepeated")
})
Linea 1: Creamos el «tipo» de objeto User extendiendo el prototype Object de Ember que nos aportará mucha de la «magia» que hace posible que todo se actualice en tiempo real.
Linea 2-3: Declaramos dos atributos simples que tendrá el Objeto
Linea 4-11: Una de las mayores ventajas de Ember, los atributos computados, nos permite la posibilidad de crear un atributo que se recalcule automáticamente cada vez que cambie alguno de los atributos por los que está compuesto ( todos o alguno de ellos, en la línea 11 se le indica los atributos que quieres observar )
En el template Index vamos a tener el siguiente código:
script type="text/x-handlebars" data-template-name="index">
{{#if App.mainUser.isInvalid }}
Los nombres no coinciden
{{/if}}
{{view Ember.TextField valueBinding="App.mainUser.name"}}
{{view Ember.TextField valueBinding="App.mainUser.nameRepeated"}}
{{#linkTo "menu"}} {{/linkTo}}
Linea 1: Podemos ver como estamos llamando al template index, en este caso cogerá automáticamente la ruta «/».
Linea 2: Usamos una función condicional de Handlebars, en caso de que exista esa variable Y sea true, mostraremos un DIV con la clase error, si quisiéramos internacionalizar o poner varios tipos de errores solo tendríamos que mostrar por pantalla un String que contuviese el error y Ember se encargaría de mostrarlo.
Linea 8: Usamos uno de los métodos que nos proporciona el objeto View de Ember, el cual nos creará un Input Text cuyo valor estará asociado directamente a un atributo de un objeto del modelo que indiquemos.
Linea 13: En esta línea podemos observar dos cosas, el método {{#linkTo }} el cual creará un enlace a la ruta que le pongamos sin necesidad de saber nosotros donde nos encontramos. También tenemos el método {{bindAttr disabled}} el cual nos deshabilitará el botón en caso de que la variable que le pasemos sea true, hay que tener en cuenta que esto se actualizará automáticamente cada vez que la variable cambie de valor.
Por ultimo solo necesitamos crear la ruta «Menú que hemos indicado en la línea 13, para ello le tenemos que pasar al objeto Router un JSON con todas las rutas que tenemos en nuestra aplicación, de momento solo tenemos dos rutas.
App.Router.map(function() {
this.route("index, {path: "/ } ) // Está ruta no hace falta declararla ya que ember lo
// hace por nosotros
this.resource("menu",{path : "/menu" },function(){
})
});
Cómo se puede observar,hemos declarado la ruta menú, como un recurso, el cual a su vez puede tener otras rutas.
4.2. El Menú
El Template:
script type="text/x-handlebars" data-template-name="menu/index">Bienvenido {{App.mainUser.name}}
{{#linkTo "menu.selectColor"}}{{/linkTo}} {{#linkTo "menu.watchColor"}}{{/linkTo}}
this.resource("menu",{path : "/menu" },function(){
this.route("selectColor");
this.route("watchColor");
})
Generamos las tres rutas, en este caso estará la primera ruta «/menu», y las dos subrutas, /menu/selectColor y /menu/watchColor
4.3. El Selector de Color:
Lo siguiente será la parte necesaria de elegir un color y que se actualice en toda la aplicación donde necesitemos usar el color utilizado ( pensar que el color puede ser cualquier opción que pueda llegar a tener nuestra aplicación )
App.Color = Ember.Object.extend({
name: ""
});
App.selectedColorName = "red";
App.MenuSelectColorController = Ember.ArrayController.extend({
changeSelectedColor : function(selectedColor){
/*Cambiando de App.selectedColorName a selectedColor.get("name")*/
App.set("selectedColorName", selectedColor.get("name"));
},
})
App.MenuSelectColorRoute = Ember.Route.extend({
model : function(){
App.colors=[];
var color1 = App.Color.create({name: 'red'})
var color2 = App.Color.create({name: 'yellow'})
var color3 =App.Color.create({name: 'blue'})
App.colors.push(color1)
App.colors.push(color2)
App.colors.push(color3)
return App.colors;
}
});
Linea 1-3: Declaramos un objeto de tipo color que va a tener un atributo nombre.
Linea 5: Por defecto el color seleccionado en la aplicación será el rojo, como se puede ver, podemos agregar cualquier atributo o función al Namespace App, de manera que tendremos acceso a el desde cualquier parte de la aplicación, incluidos los templates.
Linea 7-11: Le añadimos un método al controlador de la ruta Menu/SelectColor, como podemos ver le estamos pasando por parámetro algo, mas adelante veremos como el template es el que se encargará de pasarle el color en el que se haga click
Linea 14 -24 : Aquí estamos declarando el Modelo que va a usar la ruta/vista/controlador MenuSelectColor, simplemente le estamos devolviendo un array de colores, que tanto la vista como mas adelante el controlador, se encargaran de pedir. En una aplicación real, aquí tendríamos que tener un intermediario que se encargase de hacer una petición REST a un servidor.
Por ultimo hacemos los templates que se encargaran de mostrar los colores y llamar a los eventos correspondientes cuando estos sucedan
script type="text/x-handlebars" data-template-name="menu/selectColor">Seleccione un color
{{#each App.colors}} {{/each}}Color Seleccionado:
{{#linkTo 'menu'}}{{/linkTo}} /script> script type="text/x-handlebars" data-template-name="menu/watchColor">Color Seleccionado:
{{#linkTo 'menu'}}{{/linkTo}} /script>
Linea 3-5: En este fragmento de código tenemos que destacar la función {{#each}} que nos proporciona handlelbars, que nos permite mostrar un Array y por cada objeto del array hacer algo, recordar como antes hemos creado un Array de colores y lo hemos declarado como el modelo para esta vista/ruta. En este caso estamos creando un rectángulo por cada color, con una acción interna, la cual llamará al método changeSelectedColor del controlador de la ruta, y le pasaremos por parámetro «this», que será el modelo ( color ) que estamos pintando.
Linea 9: Aquí usamos otro helper de Handlebars, el cual nos va a permitir enlazar un dato que se está mostrando en la vista con un dato del modelo/aplicación, esto nos permite que si este dato cambia en el modelo, automáticamente cambiará en la vista y viceversa, lo cual nos ahorra mucho esfuerzo a la hora de tener que buscar cambios y actualizar la vista en caso de que estos existan, en este caso concreto el cambio solo se propagará del modelo a la vista, ya que viceversa no se podrá cambiar.
Linea 9 y 18: Podemos comprobar como hemos escrito dos veces «:selectedColor», esto simplemente es para indicarle a Handlebars que queremos añadir la siguiente palabra literalmente, no queremos que busque ninguna variable en el modelo con ese nombre, esto nos sirve para darle nombres fijos a las clases para luego aplicarle estilos, pero a la vez teniendo otra clase variable.
5. Conclusiones
Como hemos podido comprobar Ember es un framework MVC potente, que nos permitirá hacer Aplicaciones Single Page con relativa facilidad una vez le hemos cogido el truco, a pesar de la dificultad inicial, y la falta ( o mas bien dispersión ) de documentación actualizada, puede hacer difícil los primeros pasos con Ember, pero las muchas ventajas que nos ofrece hacen que merezca la pena.
En cuanto al futuro, el equipo de Ember, está dando los últimos retoques a la librería Ember Data, la cual nos va a permitir ( a modo de ORM en el cliente ), actualizar automáticamente los datos del modelo en el cliente con el servidor, sin necesidad de programar nosotros nuestra propia solución, lo que puede hacer del desarrollo Frontend una verdadera delicia.
Podemos encontrar todo el código de la aplicación en GitHub
como puedo agregar imagen en vez de color?