ASCIIcasts - Full Episode Feed

Unobtrusive JavaScript

Thu, 12 May 2011 22:14:57 +0000

Rails 3 özelliklerini incelediğimiz serinin bu bölümünde unobstrusive Javascript'in kullanımını inceleyeceğiz. Unobtrusive Javascript ile web uygulamasında javascript kod ile içeriği birbirinden CSS de olduğu gibi ayrılır. Unobtrusive Javascript'i Rails'de kullanmaya başlamadan önce basit bir HTML döküman içinde kullanalım.

Aşağıdaki ekran görüntüsü üzerinde bir link olan bir web sayfasını gösteriyor. Link tıklandığında Javascript alarm popup açılır ve "Hello world!" mesajı verir.

Bu sayfanın HTML kodu şuna benzer:

<!DOCTYPE html>
<html>
  <head>
      <title>UJS Example</title>
  </head>
  <body>
      <h1><a href="#" onclick="alert('Hello world!'); return false;">Click Here</a></h1>
  </body>
</html>

Sayfada bir linkimiz var ve onclick özelliğine de bir Javascript kod yazılmış. Script HTML içinde birleşik olduğundan unobtrusive değildir ve iyi bir şey değildir, çünkü içerik ve kod birbirine karışıyor. 1990'ların sayfalarında CSS olmadığı için <font> tag'i ile yazı görünümü değiştirilirdi, sayfada yüzlerce bunlardan olurdu. Tarayıcılar CSS kullanmaya başlayınca stil bilgileri stylesheet dosyalarında toplanmaya başladı ve hem değişiklik yapılması kolaylaştı hem daha anlaşılır oldu.

Aynısı Javascript'e de uygulanabilir. Küçük küçük Javascript kod parçaları HTML tagların özellikleri içinde yazılırsa değişiklik yapmak zorlaşır. Javascript'i ayrı bir dosyaya koyunca tekrarlayan kodlar azalır, düzenlemeler kolaylaşır ve karmaşık uygulamaları üretmek ve debug kolaylaşır.

Örneğimizi nasıl unobtrusive yapacağız? Ana adım, onclick özelliğindeki Javascript'i ayrı bir dosyaya taşımak ve bunun için bir Javascript framework kullanacağız. Burada JQuery ile elemanların olaylarını algılayacağız. Önce sayfanın değişmişini bir görelim sonra açıklayalım.

<!DOCTYPE html>
<html>
  <head>
    <title>UJS Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript"charset="UTF-8">
      $(function () {
        $('#alert').click(function () {
          alert('Hello, world!');
          return false;
        })
      });
    </script>
  </head>
  <body>
    <h1><a href="#" id="alert">Click Here</a></h1>
  </body>
</html>

İlk Dikkat çeken nokta Javascript'i daha önce söylediğimiz gibi ayrı bir dosyaya çıkarmadık. Bunu sadece burda gösterim için yaptık.

Body içindeki elemanın onclick özelliğini kaldırıp ona bir id verdik. Bu sayede hedefe JQuery üzerinden bir bağlantı yapabiliriz. Daha sonra head bölümünde JQuery kütüphanesini yüklüyoruz ve bunun altında dış dosyaya koyacağımız script görünüyor. Script JQuery'nin $ fonksiyonunu bir fonksiyon argümanı ile çağırıyor. Argümandaki bu fonksiyon sayfa DOM yüklemesinde çağrılır. Bu fonksiyon JQuery ile elemanı id'sinden bulur ve click olayına bir fonksiyon bağlar. Bağlanan fonksiyon ise bir alert ile mesaj verir ve geriye false dönerek link bağlantısına gidilmesini engeller.

Eğer sayfayı şimdi tazelersek aynen bir öncekinin yaptığını yapacaktır. Tıklanınca bir alarm verecektir.

Burda çok iş yapmamıza rağmen karşılığında pek bir şey elde etmedik. Burada Unobtrusive Javascript avantajlarını pek göremedik tek satır Javascript yerine 6 satır oldu. Bu örnek sadece Unobtrusive Javascript'in mantığını anlatmak için yapıldı. Unobtrusive Javascript'in avantajı sayfadaki Javascript sayısı arttıkça ortaya çıkmaya başlar. Tüm Javascript kodlarını ayrı bir dosyada tutmak sayesinde tekrarlamaların önüne geçilmeye başlanır.

Bu yaklaşımın bir sorunu var. JavaScript genellikle statik bir dosyaya yazılıyor. Bu durumda satır içine yazmadığımıza göre nasıl server tarafı dinamik JavaScript ekleyebileceğiz?

HTML 5 ile birlikte artık ısmarlama verileri ilgili eleman tag içine özellik olarak koyabiliyoruz. Bunlar aynı diğer özellikler gibi yazılıyor, tek farkları data- ile başlamaları. Mesela tıklanınca verilecek mesajı özellikte saklamak için şöyle yazın:

<a href="#" id="alert" data-message="Hello from UJS">Click Here</a>

JavaScript'de alert satırını mesajı bu yeni özellikten alacak şekilde değiştirelim:

$(function () {
  $('#alert').click(function () {
    alert(this.getAttribute('data-message'));
    return false;
   })
});

Eğer sayfayı tazelersek linki tıklayınca özeliikten gelen mesajı alabiliriz.

Rails 3 Data Özelliklerini Nasıl Kullanır

Rails 3 bu ısmarlama data özellikler ile veriyi JavaScript'e gönderir. Şimdi bunun bir Rails 3 uygulamasında nasıl olacağını inceleyelim. Uygulamamız içinde arama yapılabilecek ürünlerin listesi bulunan basit bir e-alışveriş uygulaması. Ayrıca ürünü düzenlemek ve silmek için de linkler var , ama silmek için olan çalışmıyor gibi.

Bu Rails 3 uygulamalarında sık karşılaşılan bir sorundur. Eğer eski bir versiyon uygulamayı upgrade ediyorsanız, JavaScript'lerin çalışmaması çok karşılaşılan bir durumdur.

Görsel dosyasındaki kod "Destroy" linkini standart link_to metodunu kullanarak üretir. :confirm opsiyonu ile bir JavaScript confirm alarmı üretilir ve :method opsiyonu da :delete olarak ayarlanmıştır. Böylece link tıklanınca GET yerine DELETE metoduna çağrı yapılacaktır.

/app/views/products/show.html.erb

<%= link_to "Destroy", @product, :confirm => "Are you sure?", :method => :delete %>

Burada enteresan olan bu kodun ürettiği HTML kod:

<a href="/products/8" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Destroy</a>

Rails 2'de destroy link oluşturmak için link_to kullanınca bir sürü JavaScript ile confirm diyaloğu oluşturuluyor ve bir form ile DELETE ya da PUT çağrısı yapılıyordu. Rails 3 koduna bakarsanız daha temiz ve daha önce gördüğümüz HTML 5 data özelliklerini kullanıyor. Onay mesajını içeren bir data-confirm ve metodu saklayan bir data-method özelliği.

Linkin çalışmama sebebi head bölümünde JavaScript fonksiyon tanımlanmadığı için , standart bir GET çağrısı yapılacak ve silme işlemi DELETE çağrılmadığı için gerçekleşmeyecektir.

Bunu düzeltmek için uygulamanın layout dosyasına aşağıdaki iki satırı eklemeliyiz:

/app/views/layouts/application.html.erb

<%= javascript_include_tag :defaults %>

<%= csrf_meta_tag %>

Yukardaki ilk satır tanıdık gelecektir. Bir Rails uygulaması için standart JavaScript dosyaları yüklüyor. İkinci satır DELETE işlemlerini gerçekleştirmek için gerekli yetkilendirme bilgilerini taşıyan iki metatag üretir. Değişim sonrası sayfayı tazelersek üretilen iki satırı göreceğiz.

<script src="/javascripts/prototype.js?1268677667" type="text/javascript"></script>
<script src="/javascripts/effects.js?1268677667" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1268677667" type="text/javascript"></script>
<script src="/javascripts/controls.js?1268677667" type="text/javascript"></script>
<script src="/javascripts/rails.js?1268677667" type="text/javascript"></script>
<script src="/javascripts/application.js?1268677667" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="9ImdFvbeW7ih9oKqBDQ3O889q/hJ1q5uajpT4DFDAoA="/>

Şimdi sayfada tüm JavaScript dosyalara erişim ve cross-site saldırılara karşı tüm önlemler mevcuttur. Böylece PUT ve DELETE çağrılarının bir hacker tarafından değil doğru kişiden geldiğinden emin olabiliriz.

Bu iki satırla beraber bizim destroy linkimiz beklendiği gibi çalışacaktır.

Bir Arama Formuna AJAX Eklemek

Sonra index sayfasındaki arama formunu değiştirerek GET çağrısı yerine AJAX kullanmasını sağlıyacağız. Index görselindeki form için kod aşağıda gösteriliyor:

/app/views/products/index.html.erb

<% title "Products" %>

<% form_tag products_path, :method => :get do %>
  <p>    
  <%= text_field_tag :search, params[:search] %>
  <%= submit_tag "Search", :name => nil %>
  </p>
<% end %>

<div id="products">
  <%= render @products %>
</div>

<p><%= link_to "New Product", new_product_path %></p>

Burada kullanılan form episode 37. de gösterilen teknikle arama yapmak içindir. Rails'in önceki versiyonlarında formun AJAX ile çalışması için form_tag ile form_remote_tag değiştirilirdi. Bu metod şimdi sakınmaya çalıştığımız satır içi JavaScript'ten bir sürü üretecektir.

Rails 3 ile beraber birçok remote helper metod artık kullanılamaz oldu. Eğer kullanmak istersek Prototype Legacy Helper plugin install etmeliyiz.

Bunu form_remote_tag ile yapmak yerine yine form_tag, kullanıyoruz ama yeni bir parametre ile :remote.

/app/views/products/index.html.erb

<% form_tag products_path, :method => :get, :remote => true do %>
  <p>
    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search", :name => nil %>
  </p>
<% end %>

Bu :remote parametresi ayrıca link_to, button_to ve form_for gibi diğer helper metodlarla da kullanılabilir. Eğer sayfayı tazeleyip kaynağı incelersek yeni form kodumuzun nasıl çalıştığını görürüz.

<form action="/products" data-remote="true" method="get">  <p>
    <input id="search" name="search" type="text" />
    <input type="submit" value="Search" />
  </p>
</form>

Form elemanı aynı ama bu sefer yeni bir data-remote özelliği var. Satır içi JavaScript yok, yeni özellik rails.js içindeki JavaScript'e formun AJAX yoluyla gönderildiğini anlatmaya yeter.

Sırada AJAX çağrısını işleyecek kodu yazmak var. Ürünlerin listesi bir div içersinde bulunuyor. Bu div içeriğini update ederek sadece aranan ürünleri gösterebiliriz. Form ProductController’in index eylemine gönderiliyor ve tüm ihtiyacımız olan JavaScript isteklerini işleyecek bir index.js.erb dosyası eklemek.

Bu kalıp dosyaya tarayıcıya dönüldüğünde çalışmasını beklediğimiz herhangi bir JavaScript kodu yazabiliriz. Yeni kalıp dosyamızdaki kod div içeriğini sonuca göre update edecek.

/app/views/products/index.js.erb

$("products").update("<%= escape_javascript(render(@products))%>");

Sayfayı tazelediğimizde ve formun gönderme düğmesine tıkladığımızda arama AJAX çağrısı ile yapılacak ve URL değişmeyecektir.

İşte böyle, Rails 3 ile unobtrusive JavaScript sadece :remote parametresi kullanarak yapılıyor. AJAX çağrısına bir server bir JavaScript ile dönüş yapıyor ve o da div içeriğini değiştiriyor.

Frameworkları Değiştirmek

Bu bölümü uygulamamızın kullandığı JavaScript Framework'u nasıl değiştirceğimizi göstererek kapatacağız. Uygulamamız şu anda Prototype kullanıyor, bu Rails'in parçası olarak geliyor , fakat JQuery kullanmak istiyorsak ne olacak?

İlkönce uygulama layout'da yer alan şu satırı değiştirmeliyiz.

/app/views/layouts/application.html.erb

<%= javascript_include_tag :defaults %>

şöyle değiştirin:

/app/views/layouts/application.html.erb

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "jquery.rails.js" %>

Listedeki ilk dosya Google üzerinden JQuery'nin son versiyonu. Bu tek başına yeterli değil rails.js dosyasının JQuery eşleniğini de yüklememiz gerekiyor, yoksa unobtrusive uygulamalarımız çalışmaz. Bu dosyanın orjinalini jquery-ujs project on Github adresinde bulabilirsiniz. Bu projede indirip projemizde kullanabileceğimiz bir rails.js dosyası vardır. Bu dosyayı indirip uygulamamızın /public/javascripts klasörüne koyalım ve adını jquery.rails.js yapalım ve bu dosya uygulamamızın Rails tarafından kullanılan unobtrusive JavaScript işlerini gerçekleştirir.

Şimdi daha önce uygulamamıza bizim eklediğimiz Prototype'a göre olan JavaScript'imizi JQuery'ye uygun olacak şekilde değitirmek zorundayız. Daha önce ürettiğimiz index.js.erb dosyasında küçük bir değişiklik yapacağız. Div seçicisi olarak products yerine #products kullanarak ve Prototype'ın update metodu yerine JQuery eşleniği olan html kullanarak.

/app/views/products/index.js.erb

$("#products").html("<%= escape_javascript(render(@products))%>");

Uygulamamız artık kaputun altında Prototype yerine JQuery kullanıyor.

Estetiğin Kaybolması

Eğer bir kullanıcı JavaScript izin verilmeyen bir tarayıcı kullanarak uygulamamızı açarsa biraz estetik kaybı olacaktır. Buton normal bir GET çağrısı yapacaktır. Ürün silme linki de çalışmayacaktır. Bu genel bir problemdir, HTML linkleri sadece GET çağrıları yapabilir, bu yüzden Rails DELETE için biraz JavaScript kullanır. Bunun önüne geçmek için bir yöntem button_to kullanmaktır ama çirkin görünecektir, bu yüzden link olarak kalmalı. Tercih edilebilecek bir teknik olarak episode 77 de JavaScript izin verilmeyen tarayıcılarda silme işlemi için başka sayfa açan örnek var.

Formtastic Bölüm 2

Mon, 30 Nov 2009 21:56:04 +0000

Ö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&rsquo;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.

Formtastic Bölüm 1

Mon, 30 Nov 2009 21:31:19 +0000

Formların view kodunu yazmayı uzun ve sıkıcı buluyorsanız, bunu yapmak için daha kısa bir yol sağlayan Formtastic adlı bir gem’in olduğunu öğrenmek sizi sevindirecektir. Bununla, bu bölümde göstereceğimiz gibi nispeten ufak bir kodla oldukça karmaşık formlar oluşturulabiliyor.

Veteriner Uygulamasını Oluşturma

Formtastic’e başlamadan önce, kullanabileceğiniz bir TextMate paketinden bahsetmek yerinde olacaktır. Bu paket, form oluşturmayı daha da kolaylaştırabilecek birçok yararlı kod parçacığı sağlamaktadır.

Formtastic’i tanıtmak için yeni bir Rails uygulaması oluşturacağız. Bu uygulama bir veterinerin ameliyathanesindeki hasta hayvanların takibini yapacak, bu yüzden ona vet adını veriyoruz ve normal yolla uygulamayı oluşturuyoruz.

rails vet

Formtastic bir gem olarak sağlanmaktadır. Uygulamamızın /config/environment.rb dosyasına aşağıdaki satırı ekleyerek onu uygulamamıza dahil edebiliriz. (TextMate kullanıyorsanız ve Formtastic paketini yüklediyseniz ftgem ve <TAB> tuşlarını kısayol olarak kullanabilirsiniz).

config.gem 'justinfrench-formtastic', :lib => 'formtastic', :source => 'http://gems.github.com'

Gem’in yüklendiğinden emin olmak için şu komutu çalıştırmamız yeterlidir:

  sudo rake gems:install

Böylece uygulamamızı yazmaya başlamak için hazırız.

Uygulamamızın parçalarını yazmayı kolaylaştırmak için, Ryan Bates’in nifty oluşturucularının bazılarından yararlanacağız. İlk önce nifty_layout oluşturucusunu kullanarak bir yerleşim (layout) dosyası ve bir stil sayfası oluşturacağız.

  script/generate nifty_layout

Daha sonra, nifty_scaffold oluşturucusundan yararlanarak ilk model’imizi ve ona eşlik edecek bir controller’ı ve view’ları oluşturacağız. Hayvanlarımızı kategorilere göre ayıracağız, bu nedenle model’imize Category adını vereceğiz ve name ile description öğeleri ekleyeceğiz.

  script/generate nifty_scaffold category name:string description:text

Şimdi veritabanımızın geçişini yapabiliriz.

rake db:migrate

Yeni uygulamamızı başlatır ve yeni kategori sayfasına gidersek scaffold (iskelet oluşturma sistemi) tarafından oluşturulan view kodunu göreceğiz.

Scaffold tarafından yukarıdaki form için oluşturulan kod aşağıdaki gibidir:

  <% form_for @category do |f| %>
    <%= f.error_messages %>
    <p>

      <%= f.label :name %><br />
      <%= f.text_field :name %>
    </p>
    <p>
      <%= f.label :description %><br />

      <%= f.text_area :description, :rows => 5 %>
    </p>
    <p><%= f.submit "Submit" %></p>
  <% end %>

Bu normal Rails form kodudur; bir form_for ile başlar ve formdaki her alan kendi etiketiyle birlikte ayrı ayrı tanımlanır. En sonda, yeni bir kategori eklememizi sağlayan bir gönder düğmesi bulunmaktadır.

Formtastic bu standart form metodlarının hiçbirini geçersiz kılmaz, böylece bunları bir Formtastic formunda da kullanabiliriz. Yukarıdaki formda bulunan form_for öğesini Formtastic’in semantic_form_for öğesiyle değiştirseydik form hala aynı şekilde çalışırdı. Ama bunu yapmak anlamsız olurdu, çünkü asıl kolaylık Formtastic’in form metodlarını kullandığımızda ortaya çıkar. Onları kullanarak, formumuzu aşağıdaki gibi yapabiliriz:

  <% semantic_form_for @category do |f| %>
   <%= f.inputs %>
   <%= f.buttons %>
  <% end %>

inputs metodu bir model’in tüm giriş alanlarını oluşturmak için kullanışlı bir yoldur ve aynı şekilde buttons metodu bir gönder düğmesi oluşturur. Formu şimdi yeniden yüklersek biraz farklı görünecektir.

Bu form artık Formtastic’in metodları kullanılarak gösterilmektedir. İlk görülen farklılık; scaffold’un oluşturduğu formda alanların arasında paragraf etiketleri kullanılırken, Formtastic’in giriş alanlarını düğmeden ayırmak için sıralı listeleri ve fieldset etiketlerini kullanmasıdır.

Form şu andaki haliyle pek güzel görünmüyor, ancak biraz CSS uygulayarak bunu halledebiliriz. Formtastic, bu işi kendi kendimize yapmak zorunda kalmamak için kullanabileceğimiz bazı stil sayfalarıyla birlikte gelir. Şunu çalıştırırsak:

  script/generate formtastic_stylesheets

uygulamamızın /public/stylesheets dizininde iki yeni stil sayfası oluşturulur ve ardından bu stil sayfalarını yerleşim dosyamıza ekleyebiliriz. Yerleşimimizin "head" bölümünde zaten bir stil sayfasını eklemiş durumdayız.

  <head>
    <title><%= h(yield(:title) || "Untitled") %></title>
    <%= stylesheet_link_tag 'application' %>
    <%= yield(:head) %>
  </head>

Formtastic stil sayfalarını buraya ekleyerek onları uygulamamızdaki her sayfaya dahil edebiliriz.

  <%= stylesheet_link_tag 'application', 'formtastic', 'formtastic_changes' %>

İkinci dosya, formtastic_changes, diğer stil sayfasındaki varsayılan stillerde yapmak istediğimiz değişiklikleri yapmamız gereken yerdir. Artık birden çok stil sayfamız olduğu için, Rails’in önbelleğe alma seçeneğinden yararlanmalıyız. Böylece uygulama production (üretim) modunda çalıştırıldığında dosyalar tek bir dosyada birleştirilir. (Bu birden çok JavaScript dosyası için de geçerlidir.)

  <%= stylesheet_link_tag 'application', 'formtastic', 'formtastic_changes', :cache => 'base' %>

Önbelleğe almayı bu şekilde kullanmak; üç stil sayfası dosyası base.css adlı bir dosyada birleştirileceğinden, sayfa yüklenirken daha az sayıda dosyanın sunucudan isteneceği anlamına gelir.

Şimdi formu yeniden yüklersek biraz daha iyi görünecektir, ancak hala görünmesi gerektiği gibi değil.

Bu, Formtastic’in stil sayfasındaki birkaç satır nedeniyledir.

  html[xmlns] form.formtastic fieldset { display: block; }

  html[xmlns] form.formtastic fieldset ol li { display: block; }

Yukarıdaki iki CSS seçicisi (selector) sayfaların açılış <html> etiketinin bir xmlns özniteliğine sahip olmasını beklemektedir. nifty_layout oluşturucusu tarafından oluşturulan yerleşim dosyasındaki etikette bu yoktur, bu nedenle formun olması gerektiği gibi görünmesi için bunu eklememiz gerekecektir.

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Şimdi formu yeniden yüklediğimizde metin kutularının beklediğimiz gibi hizalandığını görebiliriz. Formun olması gerektiği gibi görünmesini sağladığımıza göre, köpekler için bir tane ve kediler için bir tane olmak üzere bir çift kategori ekleyebiliriz. Bunları birazdan hayvanların kendileri için formu oluştururken kullanacağız.

Daha Karmaşık Bir Örnek

Şimdi hayvanlar için olan formla devam edeceğiz. Kategorilerde yaptığımız gibi bir scaffold oluşturarak başlayacağız.

  script/generate nifty_scaffold animal name:string category_id:integer born_on:date female:boolean

Animal model’inde name, born_on ve female öğelerinin yanısıra bir category_id olacak, böylece her hayvanı bir Category içine yerleştirebileceğiz. Scaffold’u oluşturduktan sonra, yeni tablonun veritabanında oluşturulması için veritabanımızın geçişini yapacağız.

  rake db:migrate

Sonraki adım model’ler arasındaki ilişkiyi kurarak bir hayvanın bir kategoriye ait olmasını…

  class Animal < ActiveRecord::Base
    attr_accessible :name, :category_id, :born_on, :female
    belongs_to :category
  end

…ve bir kategoride birden fazla hayvan olmasını sağlamak.

  class Category < ActiveRecord::Base
    attr_accessible :name, :description
    has_many :animals
  end

Scaffold tarafından oluşturulan form aşağıda gösteriliyor. Bunu biraz Formtastic koduyla değiştirmek istiyoruz.

Kategori formunda yaptığımız gibi varsayılan form_for kodunu bir Formtastic semantic_form_for formuyla değiştireceğiz.

  <% semantic_form_for @animal do |f| %>
    <% f.inputs do %>
      <%= f.input :name %>
      <%= f.input :born_on %>
      <%= f.input :category %>
      <%= f.input :female %>
    <% end %>
    <%= f.buttons %>
  <% end %>

Az sonra form alanlarımızı özelleştireceğimiz için bu defa onların üzerinde biraz daha fazla kontrolümüzün olmasını istiyoruz. Bu nedenle f.inputs metoduna, alanları birer birer tanımlamak için input metodunu kullandığımız bir blok parametresi verdik. Bloğu kapattıktan sonra önceden yaptığımız gibi f.buttons metodunu kullanarak gönder düğmesini ekleyebiliriz.

Formu şimdi yeniden yüklersek Formtastic tarafından oluşturulan alanları görürüz.

Formtastic, Animal model’inin özelliklerinin veri türlerine bağlı olarak uygun form alanlarını oluşturdu. Burada göremiyor olsanız da, category_id alanının bir ilişki olduğunu anlayıp kategori açılır kutusunu önceden eklediğimiz iki kategoriyle doldurdu bile.

Bu formda yapmak istediğimiz birkaç değişiklik var. Varsayılan olarak, tarih alanının yıl kısmı şu anki yılın 5 yıl öncesiyle 5 yıl sonrasının arasındakileri içeriyor. Bizimse bundan daha önceki yılları göstermemiz gerekiyor. Ayrıca, category açılır kutusundan boş seçeneği kaldırmak ve female alanını bir onay kutusu yerine bir çift radyo düğmesi olarak göstermek istiyoruz.

Rails’in form yardımcı metodlarına verdiğimiz seçeneklerin aynılarını kullanarak alanları özelleştirebiliriz. Yani, born_on alanına :start_year parametresi verebilir ve kategorimizdeki boş seçeneği kaldırmak için:include_blank => false parametresini kullanabiliriz.

  <% 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 %>
    <% end %>
    <%= f.buttons %>
  <% end %>

female form öğesinin türünü değiştireceğimiz için, bu alana biraz farklı davranmamız gerekiyor. Varsayılandan farklı bir alan türü belirtmek için, Formtastic’in bir :as parametresi bulunuyor. Türü radyo düğmesine çevirmek için :as => :radio parametresini kullanabiliriz.

Forma şimdi yeniden göz atarsak, yaptığımız değişikliklerin yansıtıldığını; tarihlerin 1900’den başladığını, kategoriden boş seçeneğin kaldırıldığını ve cinsiyet onay kutusunun iki radyo düğmesiyle değiştirildiğini göreceğiz.

Radyo düğmeleri onay kutusuna göre daha iyi oldu, ancak “yes” (evet) ve “no” (hayır) yazması yerine, alanın etiketinin “Gender” (Cinsiyet) olmasını ve radyo düğmelerinin “Male” (Erkek) ve “Female” (Dişi) olarak etiketlendirilmesini istiyoruz. Formtastic bu derecede bir özelleştirmeye izin veriyor mu? Evet, izin veriyor. Etiketin ve radyo düğmelerinin değerlerini belirlemek için :label (etiket) ve :collection (koleksiyon) seçeneklerini kullanabiliriz.

  <%= f.input :female, :as => :radio, :label => "Gender", :collection => [["Male", false], ["Female", true]] %>

Adından anlaşılacağı gibi, :label seçeneği etiketin adını belirlerken, :collection seçeneği her bir radyo düğmesinin adını ve değerini belirten, dizilerden oluşan bir diziyi parametre olarak alır.

Form artık tam istediğimiz gibi görünüyor.

Formumuz artık tamamlandı ve istediğimiz kadar yeni hayvan oluşturmak için onu kullanabiliriz.

Sonraki Adımlar

Formtastic’le birlikte nispeten daha az view koduyla oldukça karmaşık bir formu başarıyla oluşturduk, özelleştirme seçeneklerini kullanarak bazı alanları ihtiyacımıza göre değiştirdik. Yine de hala işlemediğimiz Formtastic özellikleri olduğundan, bir sonraki bölümde daha ayrıntıya gireceğiz.