Desenvolvimento Código Aberto

O Rails possibilita trabalhar com Javascript de um modo automático e moderno, um  destes modos é o Asset Pipeline (pipeline ativo) que fornece uma estrutura para concatenar e minimizar ou comprimir JavaScript e CSS ativos. Ele também adiciona a capacidade de escrever esses ativos em outros idiomas e pré processadores como CoffeeScript, Sass e ERB. O pipeline ativo é ativado por padrão mas você pode desabilita-lo quando necessário. A outra forma de usar Javascript é utilizando Unobtrusive Javascript, o Rails usa uma técnica chamada “Unobtrusive JavaScript” para lidar/anexar com o JavaScript no DOM. Esta função é geralmente considerada uma das melhores práticas dentro da comunidade de desenvolvimento Frontend.

Asset Pipeline: http://guides.rubyonrails.org/asset_pipeline.html

Unobtrusive JavaScript: http://guides.rubyonrails.org/working_with_javascript_in_rails.html

Usando uma Biblioteca Externa

1 – Crie um projeto Rails para o banco de dados MySQL, e configure adequadamente, criando um modelo, uma visão e um controle de acordo com o código abaixo. Para utilizar o Javascript vamos usar o Asset Pipeline que já é habilitado por padrão no Rails. Abra a pasta App do seu projeto e em seguida a pasta Assets/Javascript, crie um pasta dentro dela chamada DAscripts:

Asset Pipeline – Dascripts

2 – Crie um arquivo chamado meujsteste.js e utilize o respectivo código logo abaixo:

Javascript – MeujsTeste.js

3 – Use os códigos abaixo, rode sua aplicação e no navegado exiba o código fonte. Você pode ver que o Rails criou automaticamente as tags de script HTML apontando para seu Asset para utilizarmos as funções javascript que definimos na visão:

Rails – Exibir Código do Navegador

4 – Você pode utilizar o mouse no campo de entrada para que o evento seja disparado e o javascript exiba um log da ação que o usuário está efetuando:

Ruby on Rails – App

Exemplo:

Neste exemplo utilizamos Javascript através do Asset Pipeline para imprimir na página os eventos de entrada e saída do mouse em um componente Text_Field do Rails.

Modelo – modelo01.rb

class Modelo01 < ActiveRecord::Base
  
  # Cria validação
  validates  :nome, :sobrenome, :cargo, :salario, :presence => true
  
end

Visão – index.html.erb

<h1>Desenvolvimento Aberto</h1>
<h2>Ruby on Rails - Validate </h2>

<%= form_for @modelo, :url => {:action => :create} do  |cad|%>

<% if @modelo.errors.any?  %>
<h3>Erros: </h3>
<ul style="color:red">
	<% @modelo.errors.full_messages.each do |menssagem| %>
	<li>
		<%= menssagem %>
	</li>
	<% end %>
</ul>
<% end %>

<p>
	<%= cad.label :nome%>
	<br />
	<%= cad.text_field :nome , :onmouseover=>"meuMouseOver()", :onmouseout=>"meuMouseOut()" %>
</p>

<p>
	<%= cad.label :sobrenome%>
	<br />
	<%= cad.text_field :sobrenome, :size => "35x10"%>
</p>

<p>
	<%= cad.label :cargo%>
	<br />
	<%= cad.text_field :cargo, :size => "30x10"%>
</p>

<p>
	<%= cad.label :salario%>
	<br />
	<%= cad.text_field :salario, :size => "15x10"%>
</p>

<p>
	<%= cad.submit "Adicionar dados" %>
</p>

<% end %>

<!-- Div - logs do evento javascript -->
<div id="meulog"></div>

Controlador – meucontrole_controller.erb

class MeucontroleController < ApplicationController

  # Controladores
  def index
    @modelo  = Modelo01.new
  end

  def new
    @modelo  = Modelo01.new
  end

  # Cria registro
  def create
    @modelo = Modelo01.new(modelo_params)
    if @modelo.save

      # Você pode colocar uma menssagem aqui.
      render "index"
    else
      render "index"
    end
  end

  # Define parametros requeridos
  private

  def modelo_params
    params.require(:modelo01).permit(:nome, :sobrenome, :cargo, :salario)
  end

end

Javascript – meujsteste.js

// Desenvolvimento Aberto
// Javascript teste
 
function meuMouseOver() {
    var div = document.getElementById('meulog');
 
    div.innerHTML = div.innerHTML + 'Você entrou no campo nome ';
}
 
function meuMouseOut() {
    var div = document.getElementById('meulog');
 
    div.innerHTML = div.innerHTML + 'Você saiu do campo nome ';
}