Ruby ve GTK Kullanarak Arayuz Tasarlamak

Slide 1: Ruby & GTK ile Arayüz Tasarlamak Pınar Yanardağ pinar@comu.edu.tr INETD Seminerleri@IBM Linux 16.12.2006

Slide 2: 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.

Slide 3: 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,

Slide 4: 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.

Slide 5: 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?

Slide 6: 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.

Slide 7: 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.

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

Slide 9: 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.

Slide 10: 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.

Slide 11: 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 “delete_event” false değeri döndürdüğümüzde yakalanacak.

Slide 12: 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.

Slide 13: 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.

Slide 14: 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. Kontrol 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.

Slide 15: 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 ) }

Slide 16: 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 # ...

Slide 17: 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.

Slide 18: 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.

Slide 19: 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

Slide 20: 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

Slide 21: 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!

Slide 22: 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

Slide 23: 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..

Slide 24: kodlar: seminer.pinguar.org/ruby_ibm_2006

Slide 25: 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

Slide 26: Teşekkürler...