Vinícius Luiz Blog


Adicionar datagrids Flexigrid as suas aplicações Rails
julho 16, 2009, 12:37 pm
Arquivado em: Rails

Flexigrid é um incrível projeto Javascript que fornece funções em Ajax para aplicações Web. Esse projeto foi usado na construção do plugin Vl_Flexigrid de forma a possibilita que você possa usar de maneira mais simples a datagrid Flexigrid em seus projeto RubyOnRails com apenas algumas poucas linhas de código.

A Flexigrid possui um tema padrão bem interessante, atraente e profissional, semelhante as datagrids usadas em aplicações Desktop. Sua comunicação com o servidor, por padrão, é feita usando o formato JSON para a troca de dados, mas pode ser alterado para XML dependendo da necessidade.

O demo com o plugin pode ser baixado nessa link. Mude a extenção .doc para .rar, assim poderá descompactar o projeto. Qualquer comentário ou sugestão que tenha a fazer, poste.

Instalação

Crie uma aplicação rails, dentro dela faça:

# $win
ruby script/generate scaffold country iso:string name:string printable_name:string iso3:string numcode:string

# Linux
script/generate scaffold country iso:string name:string printable_name:string iso3:string numcode:string

# MAC
./script/generate scaffold country iso:string name:string printable_name:string iso3:string numcode:string

Adicione alguns dados para a sua migração, você pode usar este.

Crie o banco e execute a migração:

rake db:create
rake db:migrate

Instalando o plugin:

rake vl:flexigrid:install

Substitua o método index em seu controller por esse:

     #Insert in index method of your controller Countries
1:   def index
2:     @flexigrid = Flexigrid.new
3:
4:     @flexigrid.buttons << {:label => "New", :class => "add", :onpress => "test"}
5:     @flexigrid.buttons << {:label => "Delete", :class => "delete", :onpress => "test"}
6:     @flexigrid.buttons << {:separator => true}
7:
8:     @flexigrid.search_items << {:iso => "Ison", :name => "Name"}
9:     @flexigrid.search_items << {:printable_name => "Printable Name", :iso3 => "Iso3"}
10:
11:    @flexigrid.columns << {:id => "ID", :width => 75, :align => "center", :hide => true}
11:    @flexigrid.columns << {:iso => "ISO", :width => 40, :sortable => true, :align => "left"}
12:    @flexigrid.columns <<
13:      [
14:        {:name => "Name", :width => 180, :sortable => true, :align => "left"},
15:        ["<span style='color:#ff4400' onclick=\"alert('ISO ? - NUM_CODE ?')\" >?</span>", :iso3, "numcode", :name]
16:      ]
17:    @flexigrid.columns << {:printable_name => "Printable Name", :width => 120, :sortable => true, :align => "left"}
18:    @flexigrid.columns << {:iso3 => "ISO3", :width => 130, :sortable => true, :align => "left", :hide => true}
19:
20:    @flexigrid.columns <<
21:      [
22:        {:numcode => "Numcode", :width => 120, :sortable => true, :align => "left"},
23:        [
24:          ["<a href=\"#\" onclick=\"alert('Test')\"></a> ", :id],
25:          ["<span style='color:green'>?</span>"]
26:        ]
27:      ]
28:
29:    @flexigrid.columns <<
30:      [
31:        {:action => "Actions", :width => 50, :align => "center", :sortable => false},
32:        [
33:          ["<a href=\"#\" onclick=\"alert('edit(?)')\"><img border=\"0\" src=\"/images/edit.png\"/></a> ", :id],
34:          ["<a href=\"#\" onclick=\"alert('show(?)')\"><img border=\"0\" src=\"/images/show.png\"/></a>", "id"]
35:        ]
36:      ]
37:
38:    #Start the configuration of the interface display of the component
39:    @flexigrid.interface_init(:title => "Countries Panel",:url => "/countries/grid_data",
40:      :table => true, :use_pager => true, :display_paging_control => false, :width => 650)
41:  end

Crie o método grid_data, que responde as requisições da datagrid, dessa forma:

    #Create the grid_data method that will respond to requests from datagrid
1:  def grid_data
2:    @countries = Country.find_to_flexigrid(
3:                             :all,
4:                             :page       => params[:page],
5:                             :per_page   => params[:rp],
6:                             :sort_name  => params[:sortname],
7:                             :sort_order => params[:sortorder],
8:                             :conditions => ["#{params[:qtype] || "name"} like ?", "%#{params[:query] || ""}%"])
9:
10:   render :json => @countries.to_flexigrid_json
11:  end

Acrescente no seu controller uma exceção de token para o método grid_data (mais informações):

protect_from_forgery :except => [:grid_data]

Observe como o plugin torna fácil adicionar filtros, botões e colunas na tabela. Veja também que foi injetado um método to_flexigri_json, que irá gerar o JSON necessário pra você. A ordem dos campos segue a ordem das colunas no objeto Flexigrid criado no método index.

Agora só falta prepara o index.html.erb do projeto para que você possa visualizar a datagrid.

No arquivo index.html.erb adicione o seguinte:

<%= @flexigrid.css_add_delete %>

<script type="text/javascript">
  function test(com,grid) {
    if (com=='Delete') {
      confirm('Delete ' + $('.trSelected',grid).length + ' items?')
    }
    else if (com=='Add') {
      alert('Add New Item');
    }
    else {
      alert('Test')
    }
  }
</script>
<%= @flexigrid %>

Acrescente as duas linhas no template Countries.html.erb:

<%= javascript_include_tag :flexigrid %>
<%= stylesheet_link_tag :flexigrid, :media => :all%>

Pronto! você verá uma datagrid assim. :0)

ruby

Andamento da coisa

Existe um helper que esta sendo construído para possibilitar montar a datagrid passando parâmetros diretos na view. Nessa primeira versão do projeto é possível usá-lo entretanto a pesquisa ainda não está funcionando.
Você podera testa-lo removendo o código posto no método index e pondo este na view:

<%= flexigrid("Countries", "flex1", '/countries/grid_data',
  [
    { :iso => "ISO", :width => 40,  :sortable => true, :align => "left" },
    { :name => "Name", :width => 180, :sortable => true, :align => "left" },
    { :printable_name => "Printable Name", :width => 120, :sortable => true, :align => "left" },
    { :iso3 => "ISO3", :width => 130, :sortable => true, :align => "left", :hide => true },
    { :numcode => "Numcode", :width => 120, :sortable => true, :align => "left" }
  ],
  {
    :buttons =>
      [
        { :label => "Add",    :bclass => "add",    :onpress => "test" },
        { :label => "Delete", :bclass => "delete", :onpress => "test" },
        { :separator => true },
        { :label => "Teste", :onpress => "test" }
      ]
  }
) -%>

no controller deve-se mudar o metodo grid_data removendo o :conditions da consulta.

Por alguns problemas técnicos, ainda não foi possível por o projeto no GitHub mas em breve ele será passado para lá. Por enquanto o plugin encontra-se disponível no demo citado no inicio do artigo.

Att,



Já tava na hora.
janeiro 29, 2009, 9:03 pm
Arquivado em: Ruby

Bem vindo ao Ruby

ruby

Este é o meu recém criado blog, já tem um tempo que venho tentando monta-lo, mas faltava o tão precioso tempo por isso, agora que finalmente consegui um pouco sobrando, serei bem breve. Poderia falar de varias coisas, mas antes precisaria organizar melhor minhas idéias por isso vou falar de algo bem recente que venho estudando há pouco mais de dois meses, e de maneira rápida. Em particular, vou falar de ruby.

Por que falar de ruby, o que é o ruby afinal? Hmmm, talvez Ruby seja uma simples linguagem de programação assim como java, pascal, php, perl, etc. etc. etc. talvez Ruby nem seja tão diferente das demais linguagens a não ser pelo fato de se tratar de uma linguagem de programação japonesa que não segue, em quase nada, os modelos de programação convencionais americanos que já estamos mais que acostumadas a ver. Talvez Ruby nem seja uma linguagem japonesa de verdade e sim uma linguagem alienígena que foi introduzida na terra unicamente com o propósito de nos confundir e fazer-nos pensar “será que, realmente, somos os únicos programadores nessas bandas do universo?”.

Hehehehe deixa de Vôo Vinicius, deixa de Vôo. Bom ruby é um linguagem de programação muito eficiente e que ultimamente vem se destacando, vários programadores vêem essa nova moda como, talvez quem saiba, um novo salta na forma como se pensa a programação de um software. Ruby é uma linguagem desenvolvida pensando em seres humanos e quando digo isso quero dizer, chega de horas e mais horas codificando aquela rotina chata que faz tanto rodízio no código deixando-o uma verdadeira macarronada, chega disso.!

Ruby é assunto para muitas horas e como disse que serei breve então vou deixar esse papo para algo mais detalhado em outro post hehehe. Minha intenção com esse blog é justamente usa-lo como um diária de bordo para minhas anotações e tudo o mais que venho aprendendo no decorrer de todos esses meses com ruby (só dois na realidade como já mencionei), e mais os que virão pela frente.

Tenho uma boa experiência com java e mais ainda com delphi, tenho um pouco de conhecimento em php e com toda convicção digo que nenhuma dessas linguagens me deixou tão empolgado quanto Ruby mas por enquanto vou ter que ficar por aqui mesmo. Meu tempo ta se esgotando e vou ter levar minha empolgação toda comigo. Até a próxima com mais Ruby,.

p.s.: para os curiosos fica a deixa

    #The result should be , SUICINIV ZIUL
1:   def my_reverse_name
2:     @list = %w(vinicius luiz)
3:     @list.each do |word|
4:       puts "reverse name: #{word.upcase.reverse}"
5:     end
6:   end



Seguir

Obtenha todo post novo entregue na sua caixa de entrada.