Ricardo Bocchi: setembro 2014

sexta-feira, 19 de setembro de 2014

quinta-feira, 18 de setembro de 2014

Criamos um arquivo de layout principal, que é o main.jade. Depois um index, que usa o layout principal.. e depois o item.jade.. que contém nosso template que será usada no handlebars. Agora, no script.js vamos criar o código de carregamento da listagem de items, via ajax:

script.coffee

       _.templateSettings = {
      interpolate: /\{\{(.+?)\}\}/g
        }
        template = _.template $('#item_template').html()           
        el = '.items-main'
        $.ajax 
   url: ContextPath + "/store/items?" + $.param {offset: 0, max: 10}
   dataType: 'json'
   success: (data, textStatus, jqXHR) ->     
     for it in data
              $(el).append template({it: it})
   error: (jqXHR, textStatus, errorThrown) ->
            console.log textStatus

Atenlção!

Veja a alteração na sintaxe do undercode definida na váriavel templateSettings. Fazendo essa definição podemos usar as váriaveis no jade com {{ variavel }} (igual ao mustache). Também veja que no template definimos uma div com class hidden, pois como é um template não ficará visivel na página.

Para isso fucionar você deve adicionar as fererências para jquery e underscore em seu projeto bem assim como complilar o coffee e jade de algum modo.. Em outro artigo aqui no blog mostro como fazer toda essa integração usando grails e gulp, ou só gulp e html.

Isso é um exemplo estrutural.. então para funcionar tem que modificar algumas coisas.

Até a próxima

Grails + sass + jade + handlebars + coffe

Fala galera,

A pouco tempo comecei a usar outras tecnologias otimizadoras no processo de desenvolvimento junto do Grails. São elas:

- sass
- jade
- handlebars
- coffee

Para tal necessidade eu fui atrás de alguns plugins do grails, mas não fiquei satisfeito com alguns deles. Primeiro por que alguns encontram-se desatualizados e com pouca documentação, e ainda tem alguns bugs. Ora, se pararmos para pensar, essas ferramentas são complementares ao desenvolvimento, apenas voltadas para a produtividade, então não se deve perder muito tempo com complexidades na configuração do ambiente. Para resolver o problema eu acabei usando uma estrutura separada do grails para o controle, uma que eu postei aqui no blog a poucos dias.. usando o gulp para realizar a tarefa.

Então foi simples.. Eu criei a seguinte estrutura no projeto grails (dentro de assets):

Para esse projeto uso a versão do grails 2.3.4, e essa versão ainda não trabalha com o plugin assets por padrão.

Crieu meu gulpfile com o seguinte script:

gulp = require 'gulp'
sass = require 'gulp-sass'
jade = require 'gulp-jade'
coffee = require 'gulp-coffee'
handlebars = require 'gulp-handlebars'
concat = require 'gulp-concat'
declare = require 'gulp-declare'
wrap = require 'gulp-wrap'

errorHandler = (err) ->
 console.log err

sources = {}
destinations = {}

sources.sass = 'grails-app/assets/stylesheets/**/*.scss'
sources.coffee = 'grails-app/assets/coffeescripts/**/*.coffee'
sources.jade = 'grails-app/assets/jade/**/*.jade'
sources.handlebars = 'grails-app/assets/templates/**/*.html'
 
destinations.css = 'web-app/css'
destinations.js = 'web-app/js'
destinations.templates = 'grails-app/assets/templates'
destinations.handlebars = 'web-app/js/bi/templates'


watcher = (task) ->
  (evt) ->
   console.log 'run ' + evt.path
   gulp.start task
   
gulp.task 'compile:sass', ->
 gulp.src(sources.sass)
 .pipe(sass({sourceComments: 'normal'}).on('error', errorHandler))
 .pipe(gulp.dest(destinations.css))

gulp.task 'compile:coffee', ->
 gulp.src(sources.coffee)
 .pipe(coffee({bare: true, sourcemap: true}).on('error', errorHandler))
 .pipe(gulp.dest(destinations.js))

gulp.task 'compile:jade', ->
 gulp.src(sources.jade)
 .pipe(jade().on('error', errorHandler))
 .pipe(gulp.dest(destinations.templates))

gulp.task 'compile:handlebars', ->
 gulp.src(sources.handlebars)
 .pipe(handlebars())
 .pipe(wrap('Handlebars.template(<%= contents %>)'))
 .pipe(declare({
  namespace: 'View.templates',
  noRedeclare: true
 }))
 .pipe(concat('templates.js'))
 .pipe(gulp.dest(destinations.handlebars))


gulp.task 'default', ->
 gulp.start 'compile:sass', 'compile:coffee', 'compile:jade', 'compile:handlebars'


gulp.task 'watch:sass', ->
 gulp.watch sources.sass, watcher 'compile:sass'

gulp.task 'watch:coffee', ->
 gulp.watch sources.coffee, watcher 'compile:coffee'


gulp.task 'watch:jade', ->
 gulp.watch sources.jade, watcher 'compile:jade'

gulp.task 'watch:handlebars', ->
 gulp.watch sources.handlebars, watcher 'compile:handlebars'

gulp.task 'watch', ->
 gulp.start 'watch:sass', 'watch:coffee', 'watch:jade', 'watch:handlebars'

E logo depois (ou antes) de subir meu projeto grails é só executar:

gulp watch

E então ficar atentos com o console do gulp quanto a erros de complilação. E não se esqueça de instalar as dependências usadas no gulp via npm.

Espero que ajude! Abraço

segunda-feira, 1 de setembro de 2014

Classes com CoffeScript

Salve galera,

Vou dar uma help de como criar uma classe javascript com costrutor, atributos e metodos usando coffeescript.

Para o exemplo, vamos criar uma classe Spinner. Vamos crar uma imagem de carregamento nesse site:

http://spiffygif.com/

No site selecione a opção PNG sprite, crie seu spinner e faça o download da imagem. Na documentação tem os exemplos de css e também um link para o javascript, que deve ser algo mais ou menos assim:

(function() {
    SpriteSpinner = function(el, options){
        var self = this,
            img = el.children[0];
        this.interval = options.interval || 10;
        this.diameter = options.diameter || img.width;
        this.count = 0;
        this.el = el;
        img.setAttribute("style", "position:absolute");
        el.style.width = this.diameter+"px";
        el.style.height = this.diameter+"px";        

        return this;
    };
    SpriteSpinner.prototype.start = function(){
        var self = this,
            count = 0,
            img = this.el.children[0];
        this.el.style.display = "";
        self.loop = setInterval(function(){
            if(count == 19){
                count = 0;
            }
            img.style.top = (-self.diameter*count)+"px";
            count++;
        }, this.interval);

        $(this.el).parent().css('display', 'block')
    };
    SpriteSpinner.prototype.stop = function(){
        clearInterval(this.loop);
        this.el.style.display = "none";
    };
    document.SpriteSpinner = SpriteSpinner;
})();

E com base nesse código vamos criar nossa elegante classe usando coffee:

    class SpriteSpinner

        constructor: (options) ->            
            @el = $(options.el)[0]
            img = @el.children[0]
            @interval = options.interval || 10
            @diameter = options.diameter || img.width
            @count = 0            
            img.setAttribute "style", "position:absolute"
            @el.style.width = @diameter + "px";
            @el.style.height = @diameter + "px";       


        start: ->                     
            count = 0
            self = @
            img = @el.children[0]   
            @el.style.display = ""
            @loop = setInterval (  ->           
                count = 0 if  count == 19
                img.style.top = (-self.diameter * count) + "px"
                count++   
                return
            ), @interval

            $(@.el).parent().css 'display', 'block'
        
        stop: -> 
            clearInterval @loop 
            @el.style.display = "none"

Detalhes:

No constructor você pode definir os atributos da classe usando o @, que serão automágicamente criados na complicação para js.

Para usar

    spinner = new SpriteSpinner {interval: 50, el: '#spinnerWrapper'}

    spinner.start()

    setInterval( ->
       spinner.stop()
    , 10000)

Para mais detalhes sobre classes no coffe visite o site http://coffeescriptcookbook.com/chapters/classes_and_objects/class-methods-and-instance-methods

Até a próxima!

MVIRAL - SMS em massa

Fala galera,

Acabamos de lançar uma ferramenta para envio de SMS em massa chamada MVIRAL.

Com o MVIRAL você envia SMS em massa para usuários ou grupo de usuários, permitindo ainda a criação de agendamentos e criação de modelos de mensagens.

Também criamos uma API de integração para softwares de terceiros. É fácil e simples de usar. Acesse e confira http://www.mviral.com.br/

Grails plugin - this expression must be true

Salve galera,

Outro dia me deparei com o erro abaixo no grails 2.3.4. Para resolver basta atualizar o plugin abaixo da seguinte forma:

compile ':plugin-config:0.2.0'

Caused by IllegalArgumentException: [Assertion failed] - this expression must be true
->>  340 | newInstance in org.grails.plugin.config.AbstractConfigHelper$ConfigObjectProxy
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|    111 | doCall    in org.grails.plugin.config.DefaultConfigHelper$_enhanceConfigObjectClass_closure3
|     44 | doCall .  in GrailsJadeGrailsPlugin$_closure1
|    756 | invokeBeanDefiningClosure in grails.spring.BeanBuilder
|    584 | beans . . in     ''
|    527 | invokeMethod in     ''
|    262 | run . . . in java.util.concurrent.FutureTask
|   1145 | runWorker in java.util.concurrent.ThreadPoolExecutor
|    615 | run . . . in java.util.concurrent.ThreadPoolExecutor$Worker
^    745 | run       in java.lang.Thread

Ricardo Bocchi