185: Formtastic Bölüm 2 (view original Railscast)
Other translations:
Önceki bölümde, çok az kodla form view’ları oluşturmak için harika bir gem olan Formtastic gem’ini tanıtmıştık. Bunu kullanarak, bir veterinerin ameliyathanesi için hayvan kategorileri ve hayvan eklemek ve onları düzenlemek için formları olan basit bir uygulama oluşturmuştuk. Bu bölümde, uygulamamızı ilerletmek için Formtastic’in daha gelişmiş özelliklerinden yararlanacağız.
Önceki bölümün sonuna geldiğimizde, hayvan oluşturmak ve ayrıntılarını güncelleştirmek için kullanabildiğimiz bir formumuz olmuştu. Bu bölümde forma yeni özellikler kazandırmak için onu değiştireceğiz.
Çoktan çoğa (Many-to-Many) İlişkileri İdare Etme
Bir hayvan, veterinerin ameliyathanesine birçok hastalıkla gebilir, bu nedenle uygulamamızda yapmak istediğimiz ilk değişiklik bir Problem model’i eklemek. Bu model, Animal model’iyle çoktan çoğa ilişkiye sahip olacak. Önceki bölümde, Formtastic’i kategori açılır kutusunu oluşturmak için kullandığımızda, onun birden çoğa ilişkileri (one-to-many) ne kadar iyi idare ettiğini görmüştük. Söylemeye gerek yok; çoktan çoğa ilişkilerle de aynı derecede iyi çalışabiliyor.
Problem scaffold’unu oluşturmakla başlayacağız. Önceki bölümde olduğu gibi, scaffold’u oluşturmayı basitleştirmek için Ryan Bates’in nifty oluşturucularını kullanıyoruz.
script/generate nifty_scaffold problem name:string
Çoktan çoğa ilişki oluşturduğumuz için, model’leri birleştirmek için ek bir model oluşturacağız. Hem Animal hem de Problem model’ine bağlanan Symptom (belirti) adlı bir tane oluşturacağız.
script/generate nifty_scaffold symptom animal_id:integer problem_id:integer --skip-controller
Belirtileri doğrudan web arayüzünden idare etmeye gerek yok, bu yüzden controller kodunu oluşturmayı atlamak için burada --skip-controller seçeneğini kullanabiliriz.
Bu adımı tamamlamak için, yeni tabloları oluşturmak üzere veritabanımızın geçişini yapacağız.
rake db:migrate
Ardından Problem, Symptom ve Animal model’lerinin arasındaki bağlantıları kurmamız gerekecek. Bir Problem , birçok Symptom ve Animal’a sahiptir:
class Problem < ActiveRecord::Base
attr_accessible :name
has_many :symptoms
has_many :animals, :through => :symptoms
end
Bir Symptom, bir Problem ve bir Animal’a aittir:
class Symptom < ActiveRecord::Base
attr_accessible :animal_id, :problem_id
belongs_to :animal
belongs_to :problem
end
Son olarak bir Animal, birçok Symptom ve Problem’e sahiptir:
class Animal < ActiveRecord::Base
attr_accessible :name, :category_id, :born_on, :female, :problem_ids
belongs_to :category
has_many :symptoms
has_many :problems, :through => :symptoms
end
Animal model’imizde yapmamız gereken başka bir değişiklik oldu. Hangi alanların toplu atama (mass assignment) ile güncelleştirilebileceğini kontrol etmek için attr_accessible özelliğini kullandığımızdan, bir hayvana toplu atama ile birden çok problem atayabilmek ve böylece kullanıcı arayüzünden güncelleştirme yapılmasına izin vermek için problem_ids öğesini erişilebilen alanların listesine eklememiz gerekiyor.
Model’lerimizi değiştirdiğimize göre, problemlerin hayvanlara atanabilmesi için formu güncelleştirebiliriz. Problemleri çoktan seçmeli olarak göstermek için yalnızca <%= f.input :problems %> bölümünü hayvan formuna eklememiz gerekiyor.
<% semantic_form_for @animal do |f| %>
<% f.inputs do %>
<%= f.input :name %>
<%= f.input :born_on, :start_year => 1900 %>
<%= f.input :category, :include_blank => false %>
<%= f.input :female, :as => :radio, :label => "Gender", :collection => [["Male", false], ["Female", true]] %>
<%= f.input :problems %>
<% end %>
<%= f.buttons %>
<% end %>
Şimdi sayfayı yeniden yüklersek, problemlerin listesini formda görebiliriz. (Veritabanına önceden birkaç problem eklemiştik, bu nedenle gösterilecek bir şeyler bulunuyor.) Birkaç problem seçer ve hayvanımızı kaydedersek, hayvanı düzenlemeye geri geldiğimizde onların seçili olduğunu göreceğiz.
Problemleri çoktan seçmeli yerine bir dizi onay kutusu halinde göstermek istiyoruz. Son defasında Formtastic’in :as seçeneğini kullanarak onay kutularını radyo düğmeleriyle değiştirmiştik. Listeyi onay kutuları olarak göstermek için burada aynısını yapabiliriz.
<%= f.input :problems, :as => :check_boxes %>
Sayfayı bir daha yenilediğimizde problemler onay kutuları halinde gösterilir ve çoktan seçmelide önceden seçtiğimiz öğeler işaretli olarak gelir.
Zorunlu Alanlarla Çalışma
Yukarıdaki her alanın etiketinin yanında, o alanın zorunlu olduğunu belirten bir yıldız işareti bulunmaktadır. Varsayılan olarak, Formtastic her alanı zorunlu yapar. :required seçeneğini kullanarak bunu tek bir alan için geçersiz kılabiliriz.
<%= f.input :problems, :as => :check_boxes, :required => false %>
Bunu her alan için kontrol etmek zahmetli hale gelebilir; hangi alanların zorunlu olduğunu kontrol etmek için model’lerin doğrulamalarını kullanabilseydik çok daha kolay olurdu. Formtastic bunu desteklemektedir, ancak bundan yararlanmak için öncelikle validation_reflection adlı bir eklentiyi yüklememiz gerekir.
Eklentiyi uygulamamıza GitHub’dan yükleyebiliriz.
script/plugin install git://github.com/redinger/validation_reflection.git
validation_reflection yüklendikten sonra, eklentinin çalıştırılması için sunucumuzu yeniden başlatmamız gerekir. Daha sonra sayfayı yeniden yüklersek, yıldız işaretlerinin gittiğini görürüz. Bu, Animal model’indeki alanların hiçbirinin doğrulamasının olmamasındandır.
Şimdi name ve born_on özelliklerine doğrulama ekleyerek onların zorunlu olmasını sağlayabiliriz…
class Animal < ActiveRecord::Base
attr_accessible :name, :category_id, :born_on, :female, :problem_ids
belongs_to :category
has_many :symptoms
has_many :problems, :through => :symptoms
validates_presence_of :name, :born_on
end
…ve formu tekrar yüklersek yıldız işaretleri o alanların etiketlerinin yanına geri gelecektir.
Formtastic Hata Mesajlarını Nasıl İdare Eder
Formtastic, bir formun hata mesajlarını her alanın yanında satır arasında gösterir. Hayvanımızın adını silersek ve ardından kaydetmeye çalışırsak varsayılan hata iletisi gösterilir.
Gerekirse, Formtastic’in yapılandırmasında değişiklik yapılarak bu davranış değiştirilebilir.
En iyisi yapılandırma ayrıntılarını /config/initializers dizinine koymaktır. Bu dosyaya formtastic_config.rb adını vereceğiz. Formtastic GitHub sayfasında yapılandırma dosyasına yerleştirilebilecekler hakkında ayrıntılar ve görülebilecek bir örnek dosya bulunmaktadır. Orada listelenen yapılandırma seçeneklerinden biri, formun hatalarının nerede gösterildiğini değiştirmek için gereken inline_errors seçeneğidir. Hataları gizlemek için yapılandırma dosyasında inline_errors seçeneğini :none olarak ayarlayabiliriz.
Formtastic::SemanticFormBuilder.inline_errors = :none
Artık geçersiz bir formu göndermeye çalıştığımızda form sayfasına
geri gönderileceğiz ama hiçbir hata gösterilmeyecek. Hataları formun
tepesinde bir liste halinde görüntülemek istersek, hataları “klasik” Rails yoluyla göstermek için error_messages metodunu kullanabiliriz.
<% semantic_form_for @animal do |f| %>
<%= f.error_messages %>
<% f.inputs do %>
<!-- rest of form -->
Form hataları artık formun tepesinde gösterilecektir.
İpuçları
Göstereceğimiz bir Formtastic alan seçeneği daha var: :hint (ipucu). Adından da anlaşılacağı gibi, :hint alanın yanında bir ipucu gösterir. Alanın adına bir ipucu eklemek için yalnızca uygun bir ipucu mesajı eklememiz gerekmektedir.
<%= f.input :name, :hint => "Enter the owner’s name if none is provided." %>
Şimdi sayfayı yeniden yüklediğimizde ipucu mesajı form alanının altında gösterilecektir.
İpucu mesajının veya formun başka bölümlerinin stilini değiştirmek istersek, bir önceki bölümde
script/generate formtastic_stylesheets
komutunu çalıştırdığımızda Formtastic’in oluşturduğu formtastic_changes.css dosyasını değiştirerek bunu yapabiliriz. Dosyanın içinde
ipucu metninin stilinin nasıl değiştirileceğini gösteren işe yarar bir
yorum bölümü bulunmaktadır. İpucu metninin 11px boyutunda ve italik
olmasını istersek şu CSS’yi kullanarak bunu yapabiliriz:
form.formtastic fieldset ol li p.inline-hints {
font-style: italic;
font-size: 11px;
}
Formu tekrar yüklersek ipucu metni değişmiş olacaktır.
Formun görünümünde başka değişiklikler yapmak istersek, varsayılan stillerin nasıl tanımlandığını görmek için formtastic.css dosyasına bakmak en iyi yoldur. Ardından varsayılanları geçersiz kılmak için formtastic_changes.css dosyasında benzer seçicileri (selector) kullanabiliriz.
Bu bölümlük bu kadar. Formtastic’i kendi uygulamalarınızda denemeniz için sizi ikna edecek kadar bilgi verebildiğimizi umuyoruz. Bu iki bölüm boyunca işleyemediğimiz birkaç özellik bulunuyor. Formtastic belgeleri tüm özellikleri kapsıyor ve yerelleştirme desteği dahil olmak üzere daha fazla bilgi için bakmaya değer.