Primeros pasos - llorsat/wonkajs GitHub Wiki

Instalar

Wonka.js no es un framework node.js, pero ha sido construido con ayuda de node.js para que sea usado en línea de comandos, por lo que para instalarlo requieres node.js y npm:

Sigue estas instrucciones para instalar node.js y npm en tu sistema operativo.

También necesitaras instalar git

Ahora que ya tienes node.js y git, falta instalar wonka.js, en tu consola escribe lo siguiente:

$ sudo npm install -g wonkajs

Al finalizar la instalación, verifica que wonka haya sido instalado correctamente, escribiendo:

$ wonkajs --version

Debe devolverte la versión 1.2.1 que es la más actual.

Crear un proyecto

Como primer paso vamos a crear un proyecto que pueda ayudarte a entender como funciona wonka, escribe en tu consola:

$ wonkajs project biblioteca

Con esto se creará una carpeta llamada demo en tu directorio actual, con la siguiente estructura de archivos:

biblioteca:
  core/
  icons/
  main/
  stylesheets/
  fonts/
  images/
  libraries/
  root/
  manifest.webapp
  package.json
  index.hbs

Correr el servidor

Para correr el proyecto, solo basta con ejecutar el comando:

$ wonkajs server

Una vez hecho esto, puedes ver tu proyecto en la url:

http://localhost:9300

Si por alguna razón tu puerto 9300 está ocupado, puedes correr el comando:

$ wonkajs server 9700

En ese caso, puedes ver tu proyecto en la url:

http://localhost:9700

Crear una aplicación

Una aplicación es una sección dentro de tu proyecto, por ejemplo si haces una aplicación de biblioteca, podría haber las siguientes aplicaciones:

usuarios
libros

Para el caso de nuestro demo, vamos a crear una aplicación llamada "libros", esto lo puedes hacer con el comando:

$ wonkajs app libros

Una vez ejecutado el comando, a la estructura de tu proyecto se añadirá otra carpeta llamada "libros", con la siguiente arquitectura:

libros:
  templates/
    main.hbs
  models.js
  collections.js
  views.js
  router.js
  init.js

Ahora puedes visitar tu aplicación en la url:

http://localhost:9300/#libros

Ahora es momento de explicar un poco como funciona esta aplicación.

Cuando ingresas a la url http://localhost:9300/#libros, esta url llama a una ruta llamada "libros" definida dentro del archivo router.js, esta ruta "libros" ejecuta un método llamado "main", que carga la vista "Main", definida en el archivo views.js y esta vista a su vez pinta en el navegador el contenido de la plantilla main.hbs.

Este flujo se repite para toda aplicación que crees dentro de tu proyecto.

Si quieres añadir otra url a esta aplicación, podrías hacerlo, primero definiendo en router.js una url y una función que invocará esta ruta al ser visitada:

router.js

(function(namespace) {

  var views = namespace.views;

  var Router = Backbone.Router.extend({
    
    routes: {
      'libros': 'main',
      //Aquí defines tu ruta y el nombre de la función que invocará:
      'libros/ciencia': 'ciencia'
    },

    main: function() {
      App.loadingBar.show();
      new views.Main({
        el: $('#container')
      });
    },
    
    //Aquí defines tu nueva función:
    ciencia: function() {
      //Esto sirve para mostrar una barra de progreso al cargar esta ruta
      App.loadingBar.show();
      new views.Ciencia({
        //Por default las vistas deben cargar en el contenedor, a menos que ésta fuera una subvista
        el: $('#container')
      });
    }

  });

  new Router();

})(libros);

views.js

Una vez definida la ruta y la función, hay que escribir nuestra vista, abrimos el archivo views.js y ponemos lo siguiente:

(function(namespace) {

  var views = namespace.views;
  var collections = namespace.collections;
  var models = namespace.models;

  var getTemplate = function(name) {
    return hbs.compile($('#libros-' + name + '-template').html());
  }

  views.Main = Bb.View.extend({
    template: getTemplate('main'),
    initialize: function() {
      var me = this;
      me.render();
    },
    render: function() {
      var me = this;
      me.$el.html(me.template());
      App.loadingBar.set(100);
      App.loadingBar.changed(App.loadingBar.hide);
      return me;
    }
  });

  //Aquí definimos nuestra nueva vista
  views.Ciencia = Bb.View.extend({
    //Definimos la plantilla a utilizar
    template: getTemplate('ciencia'),
    initialize: function() {
      var me = this;
      me.render();
    },
    render: function() {
      var me = this;
      //Aquí llenamos nuestro contenedor con el contenido de la plantilla
      me.$el.html(me.template({}));
      //Una vez que ha cargado nuestra vista, quitamos la barra de carga
      App.loadingBar.set(100);
      App.loadingBar.changed(App.loadingBar.hide);
      return me;
    }
  });

})(libros);

templates/

Una vez definida nuestra vista, hay que escribir nuestra plantilla, para ello, vamos a crear el archivo ciencia.hbs en la carpeta templates.

<script type="text/x-handlebars" id="libros-ciencia-template">
  <!-- Vamos a hacer nuestro proyecto localizable, para ello usaremos el helper de handlebars __ -->
  <h1>{{ __ "Libros de ciencia" }}</h1>
  <h2>{{ __ "Ésta es una sección para listar libros de ciencia" }}</h2>
</script>

Con esto ya tenemos todo para que funcione nuestra nueva ruta y pinte en el contenedor principal, el contenido de nuestra plantilla. Ahora solo corre el servidor y carga http://localhost:9300/#libros/ciencia

collections.js

Ahora vamos a añadir a la pantalla que se muestra cuando carga la url http://localhost:9300/#libros, la capacidad de añadir un libro a una lista de libros y que en cuanto la agreguemos, se muestre en la lista de resultados.

Para esto, vamos a declarar primero nuestra colección en el archivo libros/collections.js:

(function(namespace) {

  var models = namespace.models;
  var collections = namespace.collections;

  //TODO: Add collections below
  collections.Libros = Bb.Collection.extend({
    model: models.Libro
  });

})(libros);

models.js

Vamos a definir nuestro modelo que será el tipo de estructura que contendrá nuestra colección.

(function(namespace) {

  var models = namespace.models;

  //TODO: Add models below
  models.Libro = Bb.Model.extend({});

})(libros);

Ahora vamos a modificar la vista principal "Main" en el archivo libros/views.js:

(function(namespace) {

  var views = namespace.views;
  var collections = namespace.collections;
  var models = namespace.models;

  //Definamos la constante para la tecla ENTER
  var ENTER = 13;

  var getTemplate = function(name) {
    return hbs.compile($('#libros-' + name + '-template').html());
  }

  views.Main = Bb.View.extend({
    template: getTemplate('main'),
    //Definimos el evento para cuando se presione cualquier tecla
    events: {
      'keypress #libro': 'onAddBook',
    },
    initialize: function() {
      var me = this;
      me.collection = new collections.Libros();
      me.render();
    },
    render: function() {
      var me = this;
      me.$el.html(me.template());
      App.loadingBar.set(100);
      App.loadingBar.changed(App.loadingBar.hide);
      return me;
    },
    //Definición del método a ejecutar cuando se presione la tecla ENTER
    onAddBook: function(e) {
      e.preventDefault();
      e.stopPropagation();
      var me = this;
      var target = me.$(e.currentTarget)
      if (target.val() != '' && e.keyCode == ENTER) {
        //Agregamos un nuevo objeto a la colección
        me.collection.add({name: target.val()});
        //Limpiamos el campo de texto
        target.val('');
        //Generamos la vista de resultado, le pasamos donde va a pintar su contenido y la lista de libros
        new views.Resultado({
          el: me.$('#resultado'),
          collection: me.collection
        });
      }
    }
  });

  views.Resultado = Bb.View.extend({
    template: getTemplate('resultado'),
    initialize: function() {
      var me = this;
      me.render();
    },
    render: function() {
      var me = this;
      me.$el.html(me.template({
        libros: me.collection.toJSON()
      }));
      return me;
    }
  });

})(libros);

En este archivo estamos llamando a la plantilla "resultado", así que vamos a crear el archivo libros/templates/resultado.hbs.

<script type="text/x-handlebars" id="libros-resultado-template">
  <ul>
  {{# each libros }}
    <li>{{ name }}</li>
  {{/ each }}
  </ul>
</script>

Y por último modificamos la plantilla libros/templates/main.hbs como sigue:

<script type="text/x-handlebars-template" id="libros-main-template">
  <div class="container">
    <input type="text" id="libro">
  </div>
  <div id="resultado" class="container"></div>
</script>

Ahora carga la url http://localhost:9300/#libros, ingresa un nombre de un libro y luego enter, debe añadirse a la lista de resultados un nuevo elemento y debe limpiarse el campo de texto.

Firefox OS

Wonka.js desde la versión 1.2.1 ofrece soporte para firefox os, hemos estado trabajando para mejorar este feature y ahora puedes disfrutar de este increible trabajo.

Firefox OS te permite instalar aplicaciones de dos manera, una es como aplicación remota y otra como aplicación empaquetada.

Aplicación remota(Hosted app) quiere decir que tu proyecto está en la web.

Aplicación empaquetada(Packaged app) quiere decir que comprimiste tus archivo como zip y mandaste este paquete a http://marketplace.firefox.com.

En caso que hayas elegido que tu aplicación será Aplicación remota, necesitaras establecer el atributo "install_button" en el package.json como true, de otro modo, si queres que sea una aplicación empaquetada, pon el valor de "install_button" a false.