#185 Formtastic Part 2
- Download:
- source code
- mp4
- m4v
- webm
- ogv
Ö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.
``` terminal script/generate nifty_scaffold problem name:string<p>Çoktan çoğa ilişki oluşturduğumuz için, model’leri birleştirmek için ek bir model oluşturacağız. Hem <code>Animal</code> hem de <code>Problem</code> model’ine bağlanan <code>Symptom</code> (belirti) adlı bir tane oluşturacağız.</p> ``` terminal 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.
``` terminal rake db:migrate <p>Ardından <code>Problem</code>, <code>Symptom</code> ve <code>Animal</code> model’lerinin arasındaki bağlantıları kurmamız gerekecek. Bir <code>Problem</code> , birçok <code>Symptom</code> ve <code>Animal</code>’a sahiptir:</p>
``` ruby
class Problem < ActiveRecord::Base
attr_accessible :name
has_many :symptoms
has_many :animals, :through => :symptoms
endBir Symptom, bir Problem ve bir Animal’a aittir:
<p>Son olarak bir <code>Animal</code>, birçok <code>Symptom</code> ve <code>Problem</code>’e sahiptir:</p>
``` ruby
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
endAnimal 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.
<p>Ş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.</p>
<div class="imageWrapper">
<img src="http://railscasts.com/static/episodes/asciicasts/E185I02.png" alt="Problemler çoktan seçmeli olarak listeleniyor." height="588" width="800"/>
</div>
<p>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.</p>
``` ruby
<%= 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.
<p>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 <a href="http://github.com/redinger/validation_reflection">validation_reflection</a> adlı bir eklentiyi yüklememiz gerekir.</p> <p>Eklentiyi uygulamamıza GitHub’dan yükleyebiliriz.</p> ``` terminal 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…
<p>…ve formu tekrar yüklersek yıldız işaretleri o alanların etiketlerinin yanına geri gelecektir.</p>
<div class="imageWrapper">
<img src="http://railscasts.com/static/episodes/asciicasts/E185I05.png" alt="Model doğrulamaları nedeniyle ilk iki alan artık zorunlu." height="582" width="800"/>
</div>
<h3>Formtastic Hata Mesajlarını Nasıl İdare Eder</h3>
<p>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.</p>
<div class="imageWrapper">
<img src="http://railscasts.com/static/episodes/asciicasts/E185I06.png" alt="Alanın altında yer alan varsayılan doğrulama metni." height="280" width="797"/>
</div>
<p>Gerekirse, Formtastic’in yapılandırmasında değişiklik yapılarak bu davranış değiştirilebilir.</p>
<p>En iyisi yapılandırma ayrıntılarını <code>/config/initializers</code> dizinine koymaktır. Bu dosyaya <code>formtastic_config.rb</code> adını vereceğiz. <a href="http://github.com/justinfrench/formtastic">Formtastic GitHub sayfasında</a> yapılandırma dosyasına yerleştirilebilecekler hakkında ayrıntılar ve görülebilecek bir <a href="http://github.com/justinfrench/formtastic/blob/master/generators/formtastic/templates/formtastic.rb">örnek dosya</a> bulunmaktadır. Orada listelenen yapılandırma seçeneklerinden biri, formun hatalarının nerede gösterildiğini değiştirmek için gereken <code>inline_errors</code> seçeneğidir. Hataları gizlemek için yapılandırma dosyasında <code>inline_errors</code> seçeneğini <code>:none</code> olarak ayarlayabiliriz.</p>
``` ruby
Formtastic::SemanticFormBuilder.inline_errors = :noneArtı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.
<p>Form hataları artık formun tepesinde gösterilecektir.</p>
<div class="imageWrapper">
<img src="http://railscasts.com/static/episodes/asciicasts/E185I07.png" alt="Hatalar artık formun tepesinde gösteriliyor." height="380" width="790"/>
</div>
<h3>İpuçları</h3>
<p>Göstereceğimiz bir Formtastic alan seçeneği daha var: <code>:hint</code> (ipucu). Adından da anlaşılacağı gibi, <code>:hint</code> 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.</p>
``` ruby
<%= 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
``` terminal script/generate formtastic_stylesheets <p>komutunu çalıştırdığımızda Formtastic’in oluşturduğu <code>formtastic_changes.css</code> 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:</p>
``` terminal
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.
