Backbone.JS

06:38 in Backbone, JavaScript, Ruby On Rails

Faz muito tempo que não escrevo aqui no blog.
Ultimamente estou bem atarefado e tenho muitas coisas a escrever e publicar, porém me falta tempo para organizar as idéias e as por no blog.

Hoje vou falar de um assunto que está me tomando um certo tempo meu. Estou estudando Backbone.JS

WTF?

Backbone é um framework JavaScript para criação de Front-end RIA (Rich Internet Application), Novidade? Não.

O Que mais chamou a atenção no backbone, diante das 1239081238109238 opções que existem?

1) Suporte a Mobile.
2) Integrado com JQuery
3) Visual Clean
4) Focado em MVC
5) Usa RestFull

5 itens para ressaltar o por que do Backbone.

Desenvolvendo

O mais legal do Backbone é que ele é puro JavaScript, não existem tags geradas durante a execução, e seu CSS pode ser usado sem nenhum problema. E o principal o código gerado é o codigo escrito, usando tanto Inspect Element quanto um View Source não vão mostrar um código absurdo que somente seu navegador consegue ler. Nunca fui muito fã de aplicações RIA, justamente por que elas dificultam essa parte de inspeção dos elementos e foi justamente isso que me chamou a atenção no backbone.

Basicamente o Backbone é composto por Events, Models, Collections, Routers e Views. 

Event: É um modulo que pode ser anexado em outros objetos. Ele é simplesmente composto dos metodos bind, unbind e trigger.

Model: É o núcleo da sua aplicação com Backbone, é nele que ficam as lógicas de persistencia, validação, e algum trabalho com a tela. Um model pode ser qualquer coisa, assim como no Rails seu model não precisa, necessariamente estar ligado a um base de dados. Um exemplo de um Model

O uso do window é usado somente para definir esse objeto como global para poder usar por exemplo new Album. Essa é uma das maiores classes do Backbone, vale a pena dar uma olhada na documentação

Collection: Não são nada mais do que uma coleção de modelos. Para definir é necessário passar o model que representa essa collection e também um URL que será usada para buscar e preencher a listagem.

Esse é outro objeto simples do backbone :)

Router: Router é responsavel por gerenciar as urls do backbone. e saber para qual callback redirecionar. as urls do backbone começam com um # ex: (#users/felix). Nem toda a aplicação precisa de um Router, mas se sua aplicação precisar de uma complexidade maior vai precisar sim :)

PS: Na versão 0.3 do backbone ele era chamado de Controller.
Reparem que na definição da rota eu não preciso definir o # antes da url, mas para executa-la nas views o link deve ser #collection/1/album/1 reparem que substitui os wildcards (:album_collection_id e :id) pelos ids que vou trabalhar, esse link com o # dispara o router do backbone que já deve ser previamente inicializado (new), e deve existir uma (uma e somente uma),chamada ao metodo Backbone.history.start() dessa forma o backbone inicia a leitura das URL.

View: Uma view para o backbone é algo renderizado na tela, baseado em tags, vc pode renderizar suas telas usando JavaScript, cada view é responsavel por gerenciar seus eventos. Existem um atributo chamado events, onde os eventos podem ser definidos como por exemplo para submter o form da propria view você teria uma sintaxe parecida com essa "submit form": "save", onde submit é o evento, form é selector do JQuery, e save é o callback que será executado quando o form for submetido. Simples não?

Exemplos

Sem mais o que falar vou por alguns links aqui.

http://addyosmani.com/resources/backbonegallery/index.php 

Essa foi a aplicação base para fazer alguns estudos e me ajudou bastante a entender alguns conceitos sobre o backbone.

Reescrevi a mesma aplicação usando o Rails 3.1:

https://github.com/fellix/backbone-rails-gallery

Na wiki do Backbone tem muito mais exemplos não deixem de conferir, existe até um exemplo de Mobile :)

https://github.com/documentcloud/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites

Read more

RJS X Alert Com quebra de linha

16:31 in JavaScript, JQuery, Ruby, Ruby On Rails

Mais uma poderosa batalha a ser travada, ahauhhuauha, estou cá eu com meus botões estudando rails, e resolvo por na mensagem de alert de erro os erros que ocorreram quando o objeto foi salvo meu snipet do rjs é algo semelhante a isso (Rails 2.3.4 e JQuery)

update.rjs

if flash[:error]
  page << "alert('#{flash[:error]}')"

Quando no controller havia uma única mensagem (Erro ao atualizar dados), esse snipet funcionava muito bem, muitos vão dizer que é mais facil usar so page.alert, sim é mais facil, enfim, o código tava assim e pronto ;)

Qual a solução encontrata para mostrar os erros? Bom percorrer o array de erros e mostrar cada um em uma linha não é? Coisa facil fui lá eu

controller.rb

def update
  #Preenche o objeto
  if @objeto.save
    #Não interessa
  else
   msg = "Erro ao atualizar dados \n"
   @objeto.errors.full_messages.each do |error|
    msg += "#{error.to_s}\n"
   end
   flash[:error] = msg
   respond_to
end

Muito simples né, e adivinha que me apareceu no alert?

"Erro ao atualizar dados \n Data não pode ser vazio\n"

sim os "\n" apareceram no alert se mudar para o
aparece no meio o
, eu tava quase querendo joga pela janela o PC, eis que eu resolvo recorrer ao nosso grande oraculo e encontrei um post de um caboclo falando a solução, pois ele passou por esse mesmo problema, e se vcs olharem o post do blog foi la em 2007 :(, só fazem 3 anos ahauuhauhah, resumindo, o que deve ser feito é criar um metodo na classe helper

helper.rb

def get_alert_error_message
  msg = "Erro ao atualizar dados \n"
   @objeto.errors.full_messages.each do |error|
    msg += "#{error.to_s}\n"
   end
  return msg
end

Reparem o código é exatamente igual


update.rjs

if @error
  page.alert "#{get_alert_error_message}"
end

E acreditem, exatamente o mesmo código, funcionou da forma que eu queria :), pra quem não consegue imaginar, a variavel @error foi criada para indicar quando ocorreu um erro no RJS, para imprimir esse alerta só se ocorreu um erro.

PS: Esse post além de compartilhar essa informação, é pra eu me lembrar futuramente disso ai.

Read more

RIA - O Futuro da Web

06:32 in JavaScript, RIA, Tendencias

Estive a um bom tempo pensando em escrever algo sobre isso. O Futuro da Web maketeiramente conhecida como Web 2.0 e o RIA seria algo como a Web 3.0. Mas que droga seria essa? o que exatamente seria esse tal de RIA.

RIA é uma sigla para Rich Internet Application, é um termo bem visado por muitas empresas e apadrinhado principalmente pelo Google, o GMail é um grande exemplo de uma Aplicação Rica. Na verdade o RIA nada mais é que uma montoeira de coisa velha em uma sigla nova. RIA usa muito do AJAX, JavaScript.

AJAX, não é o multi uso não, e tem diversas definições no Google sobre o AJAX, não vou entrar em detalhes aqui. O uso de JavaScript, menosprezado durante muito tempo, agora tudo gira em torno dessa linguagem. Nada mais natural pois todos os desenvolvedores procuram dar mais interatividade entre o cliente e sua página e o JavaScript é suportado por todos os browsers, lógico que alguns trabalham diferente com ele (IE), até o Acrobat Reader suporta JavaScript, nunca testei, mas ouvi dizer.

O que me levou a escrever sobre isso foi olhando no meu iGoogle algumas noticias e de caro vejo duas que me chamaram a atenção:
Sun lança o JavaFX 1.0 - Rich Internet Applications (RIA) para o Java
Red Hat e Google em parceria para desenvolvimento de RIAs
JavaFX pra quem é da comunidade Java já conhece, é uma promessa do Java, digamos uma versão WPF open source, pra quem não conhece WPF é da Microsoft, trabalha com Silverlight,e server tanto para Desktop quanto para Web, e é voltada para Designers, não para desenvolvedores. JavaFX é a mesma coisa, mas a diferença é que WPF é visual, já JavaFX é uma linguagem de Scripts, muito simples, que eu particularmente, não gostei :P.

Já parceria da Red Hat com o Google é para o fortalecimento do GWT, Google Web Toolkit, para um suporte ao JBoss, o GWT eu particularmente gosto muito dele, mas o problema é que assim como eu muita gente tem a opnião errada dele, assim como eu tinha. o GWT é um Framework que converte código Java em JavaScript, você pode adapta-lo para qualquer linguagem pois a saida é html, js e css. O Objetivo do GWT é criar somente a aplicação, o core, a parte principal, o restante do site vc faz na linguagem que quiser. o GWT monta um interface parecida com a do GMail, e é muito divertido brincar com ele.

Na minha singela opnião RIA é o futuro, acredito que devemos nos dedicar um pouco a essa area que muitas vezes é deixada de lado, mas acredito que quem não apostar em interfaces mais ricas, com maior interatividade com o usuario irá perder espaço, a maioria dos frameworks que estão surgindo ou evoluindo facilitam o AJAX nas paginas, e esse é o caminho (Ruby on Rails é um desses frameworks com o esquema de templates deles você pode criar arquivos .rjs que se transformam em paginas utilizando AJAX, não vou me deter sobre isso não vocês podem achar muito disso e bem explicado por ai), aprender JavaScript pode se tornar fundamental, então? Mãos a obra

Read more

Dialog Box em JavaScript

02:19 in JavaScript

Vasculhando pela net procurando um esquema de Dialog Box em JavaScript, para criar alguns efeitos mais iterativos, encontrei nessa página
http://www.leigeber.com/2008/04/custom-javascript-dialog-boxes/
um esquema de Dialog Box bem simples e funcional, testando e aprovado, é bem simples de editar, o código não é dificil de se alterar, pois está bem escrito.

Ele funciona com um serie de divs que vc pode criar ou deixar ele criar dinamicamente, lógico que quando ele cria dinamicamente as box elas so contem mensagens de texto. Mas você pode editar isso. Basta criar os divs.

O Arquivo (dialog_box.js) vem escrito por padrão com somente duas opções, ou você deixa ele criar tudo, ou você cria todos os divs, que por padrão devem ter os ids
'dialog', 'dialog-header', 'dialog-title', 'dialog-close', 'dialog-content', 'dialog-mask'.

Como podem ver são bastantinhos divs a serem criados, e eu como sou meio vadio para essas coisas prefiro so criar um, o 'dialog-content', que é o dialog que contem o conteudo da janela.

uma simples edição no JavaScript pode resolver isso.
Na função
function showDialog

deve se procurar pela linha
if(!document.getElementById('dialog')) {

e aonde procurar dentro deste if uma definição do conteudo
dialogcontent = document.createElement('div');
antes dessa linha basta criar uma condição para ele não criar o elemento e sim utilizar o div que criariamos na pagina, lembrando que o div alem do id=content-dialog deve ter style="visibily: hidden".
Adicionamos então o seguinte código

if(! document.getElementById('div-content')){
//Aqui vai o código que ja tinha no arquivo
dialogcontent = docum...
}else{
dialogcontent = document.getElementById('div-content');
}

e por ultimo mas não menos importante basta comentar a seguinte linha
dialogcontent.innerHTML = message;

agora sim, a função showDialog se encontrar um div com o id= div-content, vai pegar esse div e todo seu conteudo e mostrar na janela do tipo que foi escolhido.

Caso não esteja claro, podem perguntar nos comentarios, qualquer coisa disponibilizo o arquivo editado para download.

[]'s
até a proxima

Read more