Creare dei campi di modifica dinamici con l' InplaceEditor
Posted by Dibi Store Tue, 28 Aug 2007 22:06:00 GMT
Una delle cose che piu mi piace nelle applicazioni web 2.0, è la possibilità di poter aggiornare in tempo reale i nostri dati, semplicemente cliccando sul rispettivo valore.
Con ruby on rails e ajax, tutto questo è molto semplice
Per realizzare l'esperimento, ci serviremo di ruby on rails e la libreria prototype, scaricabile gratuitamente, in accoppiata alla mitica script.aculo.us.
Innanzitutto creiamo una nuova migration con i seguenti valori:
class AddContactsTable < ActiveRecord::Migration
def self.up
create_table :contacts do |t|
t.column :name, :string
t.column :email, :string
t.column :phone, :string
t.column :address_line1, :string
t.column :address_line2, :string
end
end
def self.down
drop_table :contacts
end
end
Ora, per il nostro semplice esempio, possiamo servirci di scaffold per generare le viste e il controller:
ruby script/generate scaffold Contact
A questo punto, aggiungiamo pure qualche contatto, connettendoci a dominio/contact/new (ricordiamoci di avviare il server se necessario), che servirà a seguire meglio gli esempi.
E' ora arrivato il momento di entrare in azione! Recuperate in layout contact e aggiungete nell'header il seguente comando, che automaticamente includerà tutti i files necessari (e anche qualcuno in piu, ma il nostro esempio va piu che bene):
<%= javascript_include_tag :defaults %>
Cosi facendo, includeremo nel nostro controller automaticamente la libreria prototype e script.aculo.us. Ora abbiamo bisogno di aprire il file in /app/views/contacts/show.rhtml, che di default appare cosi:
<% for column in Contact.content_columns %>
<p>
<b><%= column.human_name %>:</b> <%=h @contact.send(column.name) %>
</p>
<% end %>
<%= link_to 'Edit' , :action => 'edit' , :id => @contact %> |
<%= link_to 'Back' , :action => 'list' %>
Quello che faremo (inizia la magia di rails), sarà innanzitutto togliere il link edit, in quanto con la tecnica dell'in place editing non sarà piu necessario, dopodiche effettueremo una chiamata per ogni campo verso l'inline helper. Ora il file dovrebbe essere cosi:
<% for column in Contact.content_columns %>
<p>
<b><%= column.human_name %>:</b>
<%= in_place_editor_field :contact, :name %>
</p>
<% end %>
<%= link_to 'Back', :action => 'list' %>
Quello che abbiamo fatto è semplice, si veda pure la documentazione per quanto riguarda le possibili opzioni. Ora, prima che vi apprestiate a provare il vostro nuovo gioiellino, c'è ancora una piccola modifica da fare, in quanto, ora come ora (potete provare) la modifica punta ad un azione inesistente. Per ovviare a cio creiamo una nuova azione nel controller contact:
Contact.content_columns.each do |column|
in_place_edit_for :contact, column.name
end
Ora tutto dovrebbe funzionare correttamente, rimando alla seconda parte di questo articolo per la modifica in linea di altri elementi, e qualche consiglio utile in termini di usabilità.
Ciao
