Pınar Yanardağ
[email_address]
INETD Seminerleri@IBM Linux
16.12.2006
Ruby & GTK ile
Arayüz Tasarlamak

GTK Nedir?
GTK (GIMP ToolKit),
Gimp programının yazılması amacıyla geliştirilmeye başlanmıştır.
Ancak şu an bir çok yazılımın geliştirilmesinde GTK kullanılıyor.
GNOME projesi (GNU Network Object Model Environment ) da bunlardan biri...
LGPL Lisanslıdır,
Hiçbir ücret ödemezsıkın dilediğiniz gibi özgür yazılımlar geliştirebilirsiniz.

GTK Nedir? #2
GTK, nesneye yönelik bir API (application programmers interface)'dir.
Tamamen C dilinde yazılmış olmasına rağmen, sınıflar ve callback fonksiyonlar (fonksiyonlara işaret eden pointer'lar) sayesinde bir çok dile gerçeklenebilir.
C++, Perl, Python, Java, and C#....
Üçüncü parti bileşenler...
GTK aynı zamanda Glib adında bazı standart çağrılar için bazı değiştirmeler içeren bileşene sahiptir,
Bu değiştirme GTK'nın taşınabililirliğini arttırmak için hazırlanmış fonksiyonları içerir,

Ruby-Gnome2 Nedir?
Ruby-GNOME2 GTK kütüphanesini Ruby dili ile kullanmak için yaratılan bir bağlayıcı (binding)'dir.
Ruby-GNOME2 Ruby'de yazdığınız kodlar için bir arayüz oluşturmanızı sağlar.
Ruby-GNOME'un GTK+2.0 ve üstü ile çalışan yeni jenerasyonudur.

Bir pencere yaratalım...
require 'gtk2'
Gtk.init
window = Gtk::Window.new()
window.show
Gtk.main
Yukarıdaki komutla basit bir pencere yarattık. Peki aslında bu yazdığımız kodlar ne anlama geliyor?

Bir pencere yaratalım...
require 'gtk2'
Gtk.init
window = Gtk::Window.new()
window.show
Gtk.main
require 'gtk2'
Ruby-GNOME2 kütüphanelerini yükler.
Gtk.init
Bu satır tüm Ruby-GNOME2 uygulamalarında olmak zorundadır.
Gtk'daki init metodunu çağırır.
Bu metot oluşturacağımız görsellerin API katmanındadır ve renk haritası, görseller gibi varsayılan değerleri yükler.
Bu metot kullanılacak kütüphaneleri ilklendirir ve varsayılan sinyal yakalayıcılarını yükler.

Bir pencere yaratalım...
require 'gtk2'
Gtk.init
window = Gtk::Window.new()
window.show
Gtk.main
Pencere yaratmak için kullandığımız iki satır var:
window = Gtk::Window.new()
Basitçe varsayılan değerlerde bir pencere yaratacağımızı belirtir.
window.show
Bu satır, GTK'ya bahsettiğimiz pencerenin ayarlarını yaptığımızı ve artık pencereyi ekrana basması gerektiğini söyler.
Gtk.main
Bu satır her GTK uygulamasında olmak zorundadır. Kontrol bu satıra ulaştığında GTK X olayları, zaman aşımları vb. için beklemeye başlar.

Başka bir uygulama...
require 'gtk2'
def merhaba( bir_pencere )
puts "Merhaba dunya!"
end
def delete_event( bir_pencere, bir_olay )
puts "delete olayi olustu!"
return true
end
Gtk.init
pencere = Gtk::Window.new( Gtk::Window::TOPLEVEL )
pencere.set_title( "Ikinci Ornegimiz" )
pencere.set_border_width( 10 )
pencere.signal_connect( "delete_event" ) {
delete_event( nil, nil )
}
pencere.signal_connect( "destroy" ) {
destroy( nil )
}
dugme = Gtk::Button.new( "Merhaba Dunya!" )
dugme.signal_connect( "clicked" ) {
merhaba( nil )
}
pencere.add( dugme )
dugme.show
pencere.show
Gtk.main

Adım adım neler yaptığımıza bakalım: Olaylar
def delete_event( bir_pencere, bir_olay )
puts "delete olayi olustu!"
return true
end
Eğer delete_event sinyal yakalayıcısına false değeri döndürürsek GTK destroy sinyalini çalıştıracaktır.
true değerini döndürerek, pencereyi yoketmek istemediğimizi belirttik.
Bu yöntem “Çıkmak istediğinizden emin misiniz?” kutucukları' nda sıkça kullanılır.
#çıkmak için Gtk.main_quit kullanabiliriz.

Pencereler
pencere = Gtk::Window.new( Gtk::Window::TOPLEVEL )
pencere.set_title( "Ikinci Ornegimiz" )
pencere.set_border_width( 10 )
Window.new ile yeni bir pencere yarattık.
set_title metodu ile pencerenin adını verdik.
border_width metodu ile kenar kalınlığını ayarladık.

Sinyaller
pencere.signal_connect( "delete_event" ) {
delete_event( nil, nil )
}
Pencere “delete_event” sinyaline verildiği zaman, delete_event metodunun çalıştırılmasını söylüyoruz.
pencere.signal_connect( "destroy" ) {
destroy( nil )
}
“ destroy” olayını bir sinyal yakalayıcıyla bağlantılıyoruz.
Bu olay, pencereden Gtk::Widget#destroy ya da “delete_event” 'dan false değeri döndürdüğümüzde yakalanacak.

Düğmeler
dugme = Gtk::Button.new( "Merhaba Dunya!" )
“ Merhaba Dunya!” etiketli yeni bir düğme oluşturuyoruz.
dugme.signal_connect( "clicked" ) {
merhaba( nil )
}
Düğmemiz “clicked” sinyalini aldığında merhaba metodunu çağırmasını söylüyoruz.

Bileşen ekleme
pencere.add( dugme )
Oluşturduğumuz düğmeyi pencereye ekliyoruz.
dugme.show
pencere.show
Artık yeni yarattığımız düğmemizin ve penceremizin görünmesini söyleyebiliriz.
Gtk.main
Kontrol burada biter ve tuş ya da fare tıklaması gibi olayları bekler.

Sinyaller..., Callback?
GTK 2.0 ile beraber sinyal sistemi GTK'dan Glib'e taşınmıştır.
GTK olay tabanlı bir araç kitidir,
Gtk.main herhangi bir olay olana kadar beklemede kalır. Olay olduğunda kontrol ilgili metoda geçer.
K ontrol geçişi “sinyaller” dediğimiz kavramlar ile gerçekleşir.
Butona tıklama gibi bir olay oluştuğu zaman sinyal ilgili pencere tarafından “yayılır”.
destroy, show, hide gibi sinyaller her bileşen (widget) için miras olarak alınmıştır.

Sinyal yakalama
Bir sinyal yakalayalım:
GLib::Instantiatable#signal_connect( "yakalanacak_sinyal" ) { |pencere| cagirilacak_metot }
signal_connect metodu argüman olarak yakalayacağımız sinyali alır.
Takip eden blok ise sinyali yayan pencereyi yakalayıp cagirilacak_metot ile belirtilen metodu çağırmamızı sağlar.
dugme.signal_connect( "clicked" ) {
merhaba( nil )
}

Sinyal yakalama #2
X sisteminin olay mekanizmasını tetikleyebilecek olay seti mevcuttur:
# event
# button_press_event
# button_release_event
# scroll_event
# motion_notify_event
# delete_event
# destroy_event
# expose_event
# key_press_event
# key_release_event
# enter_notify_event
# leave_notify_event
# configure_event
# ...

Bileşenler (Widgets)
GTK'da bileşen yaratmak için basit birkaç kuralı bilmemiz gerekiyor,
Gtk:: Widget.new yeni bir bileşen yaratmak için kullanılır.
Widget bileşenin tipini belirtir (Image, Label vb...)
Kullanmak istediğimiz sinyalleri ve olayları uygun yakalayıcılara bağlarız,
Bileşenin özelliklerini ayarlarız (width, vb...)
Ve son olarak Gtk::Widget#show ile bileşenimizi gösteririz.

Yaygın Kullanılan Bileşenler : Düğmeler
Düğmeler sık kullanılan bileşenlerden biridir.
Bir düğme yaratmak için birden çok yöntem kullanabilirsiniz,
Gtk::Button.new("Label"),
Gtk::Button#label=("Label")
Gtk::Button#set_label("Label")
Ya da Gtk::Button.new ile boş bir düğme oluşturabilirsiniz.
Gtk::Button.new( Gtk::Stock::item ) ile düğmeye bir stoktan resim ya da yazı ekleyebilirsiniz.

Düğme bileşeninin sık kullanılan sinyalleri
pressed – düğme bileşenine basıldığı zaman oluşan sinyaldir
released -- düğme bileşenin bırakıldığı zaman oluşan sinyaldir
clicked -- düğme bileşenine basıldıktan sonra bırakıldığı zaman oluşan sinyaldir
enter -- pointer düğme bileşenine girdiği zaman oluşan sinyaldir
leave -- pointer düğme bileşeninden çıkarken oluşan sinyaldir

Label
Çoğunlukla düğmelerle beraber kullanılan bir bileşendir,
label= Gtk::Label.new(“Ruby”)
label.set_text(“RoR”, true)
Gtk::JUSTIFY_LEFT
Gtk::JUSTIFY_RIGHT
Gtk::JUSTIFY_CENTER
Gtk::JUSTIFY_FILL

Glade nedir?
Glade, GTK+ ve Gnome uygulamaları yazmak için kullanılan bir RAD (rapid application development) aracıdır.
Programcıyı gereksiz kod ayrıntıları ile uğraştırmadan grafiksel arayüz tasarlamaya yarar.
Ancak Glade ile arayüz tasarlamadan önce mutlaka Gtk ile basit kodlar yazılması önerilir!

Ruby-Glade ?
ruby-glade-create-template Ruby/Libglade2 tarafından sağlanan bir programdır.
Bir .glade uzantılı dosyadan .rb uzantılı iskelet dosya yaratır.
$ ruby-glade-create-template glade_dosyasi.glade > uygulama.rb

UYGULAMA
5 dakikada bir web tarayıcısı yaratabilir miyiz?
Rubyzilla, Gecko kullanarak hazırlanacak bir minik web tarayıcısı uygulamasıdır.
Gecko, Mozilla tabanlı yazılımlarda bulunan ve sayfaların ekranda gösterilmesinden sorumlu olan ana bileşendir.
HTML, XML, Javascript ... pek çok kuralı ve uygulamayı destekler..

kodlar: seminer.pinguar.org/ruby_ibm_2006

Kaynaklar
http://www.gtk.org/
http://ruby-gnome2.sourceforge.jp
http://ruby-gnome2.sourceforge.jp/hiki.cgi?tutorials
http://ruby-gnome2.sourceforge.jp/hiki.cgi?RubyZilla
http://en.wikipedia.org/wiki/Gecko_(layout_engine )
seminer notları: seminer.pinguar.org

Teşekkürler...