Boş Gezenin Boş Kalfası

Prototype AJAX (keşke projax diye bir gem olsaydı)

2011-03-05T02:57:00.000-08:00

Daha önce Prototype Ajax kabiliyetlerinden bir kısmını kurcalamıştım. Biraz daha derinlere dalmaya ancak fırsat bulabildim. Biraz da server tarafta betik koşturmaca yapayım dedim.

Twit gibi birşeyler

Ajax çağrıları aslında daha önce yaptığımız html yada text erişimleri yerine dinamik erişimlerde kullanılır. Yani gelecek olan cevap aslında gönderilen veriyle bağlı olarak server tarafta işlenerek oluşturulur.
Html formlarından server'a veri gönderip almakta kullanılan GET ve POST metodlarını kullanacağız. Ajax bu metodların ikisini de veri göndermek için kullanabilir.

Yeni denememizde twitter gibi yaptıklarımızı not alacağız (biraz benzer belki). Şimdi bir tane "twit.html.haml" dosyası oluşturalım ve daha önceki "index.html.haml" ile aynı klasöre koyalım :

-# Okuyanın anlayabileceği bir zaman bilgisi oluşturalım
- zaman = Time.now.strftime "%d-%b-%Y %H:%M:%S"
- isim = params['isim']  # parametreden gelen ismi al
- twit = params['twit']  # yine parametreden twit al
%li
    %strong
        = isim
    =" - " 
    = twit
    ="<br/>"
    = zaman

bu dosyayı biraz incelersek ilk önce çağrının yapıldığı anın zaman bilgisi "Time.now" ile alınıp gün ve saat bilgisi şeklinde okuyanın daha rahat anlayabileceği formata dönüştürülüyor. "strftime" metodunu her kullanışımda "ri Time#strftime" yazıp yine formatlarına bakıyorum, ezberleyemedim gitti. Daha sonra yapılan http çağrısından "isim" ve "twit" adı verilmiş parametreleri alıyoruz. Elde ettiğimiz verilerle html formatta bir sayfa hazırlayıp geri dönüyoruz.

Bu sayfa kodunun sağlıklı çalıştığını test etmek için önce klasörde bir konsol açıp :

~/prototype$ serve

"serve" komutu ile server çalıştırıp (önceki prototype yazısından bakabilirsiniz) tarayıcımızı açalım ve adres olarak :

http://localhost:4000/twit?isim=Ümit&amp;twit=Evden işe giderken bakkala uğradım.

yazalım enter basalım. Şuna benzer bir sayfayla karşılaşırız.

bir de sayfanın kaynak koduna bakarsak :

<li>
 <strong>
  Ümit
 <strong>   -
 Evden işe giderken bakkala uğradım.
 <br/>
 24-Feb-2011 21:34:11
<li>

Bu kodu inceleyince "haml" dosyamızda yazdıklarımızla karşılaştırınca cevabın nasıl oluştuğunu görebilirsiniz. Eh hatasız çalıştırmaya başladığımıza göre şimdi "index.html.haml" dosyamıza geri dönüp kayıtları toplamaya başlıyalım. Önce index dosyasını şöyle değiştirelim :

!!!
%html
  %head
    %title Bak Neler Yaptım
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    %script{:type=>"text/javascript", :src=>"prototype.js"}
  %body
    %h1 Yapıyorum - Yapıyorsun - Yapıyorsunuzlar
    %ul{:id=>"sarman"}

sayfayı "localhost:4000" adresinde görelim. Bomboş henüz listede birşey yok. Hadi firebug ile listeye bişeyler koyalım, açın firebug konsolları twit atacaz :

new Ajax.Updater('sarman', 'twit', { method:'get',
  parameters: { isim: 'Ümit', twit: 'Eve dönerken bakkala uğradım' }
});

tabii ki sizin isim ve twit değerleriniz daha farklı olabilir. Firebug konsolda birkaç noktaya dikkat edelim.

Birincisi, tarayıcı adres satırında boşluklar ve standart karakter setinde olmayan karakterler olamayacağı için bizim girdiğimiz adres bilgisindeki bu geçersiz karakterler server'ın anlayacağı karakterlere dönüştürülmüş, sağolsunlar bunlar için de kod yazmamıza gerek kalmamış. İkincisi burda yapılan çağrının ayrıntılarını, gönderilen verilerin değerlerini, geri çevrilen cevabı ve html görsel karşılığını inceleyebiliyoruz.

Şimdi başka twit girmeye kalkınca sıralanmıyor, olanın değeri değişiyor. Biz sıralı liste elde etmek için ajax çağrısını şöyle yapmalıyız :

new Ajax.Updater('sarman', 'twit', { 
  insertion: 'top', method:'get',
  parameters: { isim: 'Ümit', twit: 'Akşam maç var hazırlık yapmalı.' }
});

Evet, bundan sonra biraz gelen bilgiyi analiz edelim ve sevgili kullanıcıdan eksik parametre gelirse kendisini azarlayıp, yerin dibine sokacak bir rutin yazalım. Bunun için "twit.html.haml" dosyasını şöyle değiştirelim :

-# Okuyanın anlayabileceği bir zaman bilgisi oluşturalım
- time = Time.now.strftime "%d-%b-%Y %H:%M:%S"
- isim = params['isim']  # parametreden gelen ismi al
- twit = params['twit']  # yine parametreden twit al


- if twit.nil? or isim.nil?
    :javascript
        alert("Doğru dürüst bilgi girin");
- else
    %li
        %strong
            = isim
        =" - " 
        = twit
        ="<br/>" 
        = time

Koyu puntoyla yazılmış kısım ilave olarak gelmiştir. Gördüğünüz gibi gelen ajax çağrısında twit veya isim parametresi boş gelmişse geriye bir javascript dönüyoruz. İlerde bu javascript dönen ajax çağrılarını daha hayırlı işlerde kullanırsınız umarım. Bu ekleme sonrasında tarayıcıdan göndereceğimiz ajax çağrısına da gelen cevaptaki scripti çalıştırması için ilave yapmalıyız. Tarayıcımızı açalım ve firebug ile yeni bir twit atalım:

new Ajax.Updater('sarman', 'twit', { 
  insertion: 'top', method:'get', 
  evalScripts:'true', 
  parameters: { twit: 'Maçı unut! Blog kapatılmış, protestoya gidiyorum' }
});

Yahh! anladınız mı? Ben bu yazıyı hazırlarken, blogspot.com erişimi mahkeme kararıyla kapatıldı. Ama size yemin ederim benim suçum yok. Her ne kadar benim blog sayfamda mahkeme yazısı görseniz de benimle alakası yok.

Ve benim de daha fazla yazasım yok , hesapta bu twitleri dosyaya falan kaydedecektim. Kalın sağlıcakla...

RubyQt ile Küçük Bir Zamanlayıcı

2011-01-07T14:36:00.000-08:00

Qt Designer ile Ruby program denemelerim devam ediyor. Daha önce wxRuby ile yaptığım ve çok kullandığım bir uygulamayı Qt designer ile yapmaya karar verdim. Zamanlayıcı uygulamasını işlerimi "multitasking" yönetebilmek için tasarlamıştım. Program aslında çok basit bir geri sayıcı, ayarlanan süre sonunda beni uyarsın diye kuruyorum. Verilen süreyi geriye doğru saydıktan sonra sıfıra gelince uygulama penceresini minimize edip büyüterek uyarıyor. Faydalı bir eser , aynı işte takılıp kalmamı engellemek için kullanıyorum.

Öncelikle QT Designer ile timer.ui adında bir arabirim hazırlamamız gerekiyor. Yeni arabirimi QWidget olarak seçip designer'ı başlattıktan sonra, form boyutlarını 260x260 olarak değiştiriyoruz. Formun boyutunun değişmesini istemediğmiz için minimumSize ve maximumSize özelliklerini de 260x260 olarak ayarlıyoruz. Formun arkaplan rengini değiştirmek için "styleSheet" özelliği yanındaki (...) düğmesini tıklayarak açılan pencerede, "Add Color" yanındaki dropdown listeden "background-color" seçiyoruz ve RGB olarak (128,255,255) cyan rengi ayarlıyoruz.

Şimdi aşağıdaki objeleri gösterilen isim, konum ve boyutlarla yerleştirelim.

Kısaca özetlersek, sayılacak zamanı saat ve dakika olarak 2 spinbox üzerinden gireceğiz. Baştan Başla isimli düğmeye tıklayınca süremiz spinbox'larda belirtilen değerden geriye doğru symaya başlayacak. Kalan süre ortadaki kocaman label'da (result_text) görünecek. Uygulamaya benim daha sonra eklediğim 4 düğme de spinbox'lara sık kullanılan zaman değerlerini kısa yoldan yüklemek için kullanılacak.

Maalesef uygulamamızda designer üzerinden ayarlayıp işi bitireceğimiz SIGNAL-SLOT bağlantıları yok, tüm button'lar bizim yazacağımız script'leri çağıracak. Şimdi forma SLOT'lar ekleyip button'larımızı bunlara bağlayacağız. Forma nasıl kendi SLOT'umuzu ekleyeceğimizi qt-designer-bolum-2 yazımızda görmüştük. Ekleyeceğimiz SIGNAL-SLOT bağlantıları şöyle :

button_15_min, SIGNAL(clicked()), Form, SLOT(button_15_clicked())
button_30_min, SIGNAL(clicked()), Form, SLOT(button_30_clicked())
button_45_min, SIGNAL(clicked()), Form, SLOT(button_45_clicked())
button_1_h, SIGNAL(clicked()), Form, SLOT(button_1_clicked())
pushButton, SIGNAL(clicked()), Form, SLOT(restart()))

Designer ile işimiz bu kadar, artık Ruby kodlamaya geçebiliriz. timer.ui dosyasını kaydedip çıkalım. Şimdi komut satırında :

rbuic4 -x -o timer.rb timer.ui

yazalım ve görselimize karşı gelen Ruby dosyasını üretelim. Dosyayı önceki yazımızdaki gibi düzenleyip slotlara karşı metodları tanımlayalım.


require 'timer'

class MyWidget < Qt::Widget
 slots 'button_15_clicked()', 'button_30_clicked()', 'button_45_clicked()',

           'button_1_clicked()', 'restart()'
 def initialize parent=nil
  super
  @base=Ui_Form.new
  @base.setupUi self
 end
 
 def button_15_clicked
 
 end

 def button_30_clicked
 
 end

 def button_45_clicked
 
 end

 def button_1_clicked
 
 end
 
 def restart
 
 end
end


    about = KDE::AboutData.new("form", "Form", KDE.ki18n(""), "0.1")
    KDE::CmdLineArgs.init(ARGV, about)
    a = KDE::Application.new
    #u = Ui_Form.new
    w = MyWidget.new
    #u.setupUi(w)
    a.topWidget = w
    w.show
    a.exec

Şimdi hatasız çalışır ama butonlara tıklamak şimdilik birşey yapmıyor. Ortadaki dört butonun yaptığı iş basit, spinbox'ların içine kestirmeden değer yazıyorlar önce onları düzenleyelim :


 
 def button_15_clicked
  @base.hour_spin.setValue 0
  @base.minute_spin.setValue 15
 end

 def button_30_clicked
  @base.hour_spin.setValue 0
  @base.minute_spin.setValue 30
 end

 def button_45_clicked
  @base.hour_spin.setValue 0
  @base.minute_spin.setValue 45
 end

 def button_1_clicked
  @base.hour_spin.setValue 1
  @base.minute_spin.setValue 0
 end

Çalıştırıp orta sıradaki butonların spinbox'lara değer yazdığını test edelim. İlk çalışmada default olarak 1 saat set edilmesi için "initialize" metodunda "button_1_clicked" çağrılmalıdır. Zamanlama yapmanın koşulu timer kullanmak. QtRuby'de zamanlayıcı Qt::Timer sınıfı ile üretilir. Yeni bir zamanlayıcı üreteceğiz, bunun tıklamasını 1000 ms(1 saniye) ayarlayacağız ve zamanlayıcı çıkış verince çalışmasını istediğimiz rutin için bu zamanlayıcının "timeout()" sinyalini bizim tanımlayacağımız "timeout_block()" metoduna bağlayacağız. Daha sonra da zamanlayıcımızı çalıştırıp, sayacağımız değeri spinbox'lardan alacağımız "restart" rutinini çağıracağız. Bunun için "initialize" metodunu şöyle değiştiriyoruz :

def restart
  @sayac = @base.hour_spin.value * 3600 + @base.minute_spin.value * 60
  @bitti = false
  @bitti_sayac = 0
 end

İlk satır saniye olarak değeri hesaplayıp geri sayım sayacına bunu yazıyor. 2. satırda süre bitince saymayı bırakıp animasyona geçtiğimizin bilgisini saklayan değişkeni sıfırlıyoruz. Son satırdaki sıfırladığımız sayacı da animasyon için kullanacağız. Sırada "timeout_block" metodumuz var.



 def timeout_block
  @bitti = true if @sayac == 1
  @sayac -= 1
  @sayac = 0 if @sayac<0
  @base.result_text.text = ("%02d" % (@sayac/60).to_s) + ":" + ("%02d" % (@sayac%60).to_s)
  
  @bitti_sayac += 1 if @bitti

  if ((@bitti_sayac<5) or ((@bitti_sayac%5) == 0)) and @bitti
   windowState==0 ? showMinimized : showNormal
  end
 end

1. satır geri sayımın son saniyesinde sayımın bittiğini belirliyor. 2. satır geri sayım işlemi, bu rutine her gelindiğinde 1 saniye geçmiştir ve sayacı 1 eksiltmek gerekir. 3. satırda sayacın eksiye gitesi engelleniyor, çoook uzun zaman geçince sayı negatiften devir yapabilir diye önlem aldık. 4. satır kalan süreyi ortadaki kocaman label'a yazıyor ki kullanıcımız bakınca ne kadar süre kaldığını görsün. 5. satır süre bittiyse animasyon sayacımızı saydırıyor. Sonraki if bloğu da ilk 5 saniyede her seferinde sonrasında 5 saniyede bir uygulama penceresini aşağı indirip geri alıyor.
Artık minik timer ile oynayabiliriz. Ben bunu kurup bilgisayara dalıyorum, süre bitince beni ayıltıp dünyaya dönmem gerektiğini hatırlatıyor. Öğrenme yolunda faideli bir eser oldu ,
Hoşçakalın...

Protototototype Ajax Antremanı (Akıllı adamlar bulmuş)

2010-12-22T11:58:00.000-08:00

Tok nefs sarhoş kafa gibidir, hiçbir şeyi düzgün yapamaz. Nefs dediğin aç olmalı , aç nefsin olunca bilincin açılır. Nefsi fazla doyurmayacaksın , burnunun dibindekini göremezsin.

Rails'de javascript yardımcısı olarak ana pakette Prototype ve Script.aculo.us javascript kütüphaneleri kullanılmış. Ajax konusunda araştırma yaparken güzel bir yazı buldum paylaşmak isterim.

Malzeme Listesi

1 Adet Pardus
1 Adet Ruby
1 Adet HAML gem
1 Adet Serve gem
1 Adet Prototype.js
1 Adet Firefox Tarayıcı
1 Adet Firebug Eklentisi

Tarif

Öncelikle denemeleri yapacağımız bir klasör açalım ve bu klasörde "index.html.haml" adında bir dosya oluşturalım. Dosya içeriği şöyle olsun :

!!!
%html
  %head
    %title Boş Sayfa
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    %script{:type=>"text/javascript", :src=>"prototype.js"}
  %body
    %h1
      Boş Sayfa

Bu "haml" dosyası Ruby'nin haml ve serve gemleri sayesinde html'e döndürülecektir. İlk satırdaki "!!!" komutu html koddaki karşılığı "!DOCTYPE" satırıdır. meta satırı da tarayıcıya utf-8 karakter kodlaması ildirir. Şimdi klasörümüzde bir komut isteminde serve komutu çalıştıralım :

ujk@ujk-pardus prototype $ serve
Install Mongrel or Thin for better performance.
[2010-12-21 21:47:35] INFO  WEBrick 1.3.1
[2010-12-21 21:47:35] INFO  ruby 1.8.7 (2010-01-10) [i686-linux]
[2010-12-21 21:47:35] INFO  WEBrick::HTTPServer#start: pid=27412 port=4000

Şimdi Firefox tarayıcıyı açıp "localhost:4000" adresine gidersek hazırladığımız sayfayı göreceğiz, bomboş bir sayfada kocaman "Boş Sayfa" yazısı.

Çalışma sayfamızda "ajax.js" adını verdiğimiz bir javascript dosyası oluşturalım ve içine şunu yazalım.

alert('Merhaba Ajax!');

Firebug konsolu web sayfası üzerinde javascript çalıştırmak için ideal bir yardımcı. Şimdi Firebug konsolu açıyoruz ve ilk ajax komut satırımızı yazıyoruz :

>>> new Ajax.Request("ajax.js", {method: "get"});

Enter basınca "ajax.js" dosyasına bir çağrı yapılacak ve bu çağrının cevabında dosyanın içindeki javascript kodu gelecek ve çalışacaktır :

Bu komut "method" dan başka parametrelerde alıyor, mesela işlem tamamlanınca kod çalıştırması bitince "onComplete" parametresindeki eylem çağırılır :

new Ajax.Request("ajax.js", {method: "get",
   onComplete: function(){alert("Tamamlandı")}
});

Bu satırı çalıştırınca önce ajax çağrısı yapılır, cevabında gelen mesaj çıkarılır, işlem bitince de koyu puntolu satırda belirtilen "Tamamlandı" mesajı ekrana çıkar. Bundan başka ajax çağrısı sağlıklı gerçekleşince bir kod çalışmasını istiyorsak "onSuccess" parametresine eylem bağlarız :

new Ajax.Request("ajax.js", {method: "get",
    onComplete: function(){alert("Tamamlandı")},
    onSuccess: function(){alert("Çağrı Başarılı")}
});

Bu şekilde ilkönce ajax çağrısı yapılacak ve bu çağrı başarılı olunca "Çağrı Başarılı" mesajı çıkacak, sonra sırayla "Merhaba Ajax!" ve "Tamamlandı" mesajları gelecektir.
Bir de yapılan ajax çağrısına serverdan hata dönerse ne olacak? O zaman "onFailure" parametresi kullanılır :

new Ajax.Request("ajan.js", {method: "get",
    onComplete: function(){alert("Tamamlandı")},
    onSuccess: function(){alert("Çağrı Başarılı")},
    onFailure: function(){alert('Hata Oluştu!')}
});

Olmayan "ajan.js" dosyası çağırılınca server'dan hata dönecek bu durumda "onFailure" eylemi tetiklenecektir. Ama iyi ya da kötü ajax request eylemi tamamlandığı için "Tamamlandı" mesajı işin sonunda çıkacaktır.

Updater

Ajax.Updater denemesi yapmak için "index.html.haml" dosyamıza bir içi boş "div" yerleştirelim. İçini Ajax ile dolduracağız.

%html
  %head
    %title Boş Sayfa
    %script{:type=>"text/javascript", :src=>"prototype.js"}
  %body
    %h1
      Boş Sayfa
    %div{:id=>"sarman"}

Bir de Ajax çağrısı yapacağımız sayfa yapalım adı "ajax.haml" olsun. Dosyanın içine şunu yazalım :

%h2 Aslında burası boş değildi

Şimdi firebug konsolu açıp şu satırı yazalım :

>>> new Ajax.Updater("sarman", "ajax.haml", {method: "get"});

Bu komut ile "id" si "sarman" olan html tag'in içini "ajax.haml" dosyasına yapılan "get" metodu çağrısına verilen cevap ile dolduruyor. Şu görüntü oluşuyor :

Firebug konsolun ne kadar faideli bir eser olduğuna hayretler ederken aklıma web serverlar üzerinde bu kadar basit araçlarla ne tehlikeler oluşturulabileceği ihtimali de geliyor. Bu arada daha önce bahsetmedim galiba, Firebug'da çok satırlı javascript komutu yazmak için komut satırının en sağındaki düğmeyi tıklamak yeterli. "Ajax.Updater" ile "Ajax.Request" aynı parametreleri alırlar, "Updater" bir extra parametre alır, "insertion" parametresi ile olanın değiştirilmeyip beliritlen yerden ekleme yapılacağı anlatılır. Az evvelki satırı tekrarladığımızda sayfaya ilave bir satır gelmez hep aynı değer içeriğe yazılır. Ama şöyle yazarsak :

>>> new Ajax.Updater("sarman", "ajax.haml", {method: "get", insertion: "bottom"});

Artık bu satırı her girişimizde eskisinin altına eklenerek gidecektir. Konsolda yukarı ok bastıkça bir önceki komut aynen gelir, artık bu satırı tekrar tekrar çalıştırarak sonsuz sayıda eklemeye çalışabiliriz. Ancak böyle defa defa yazmaya gerenk yok "PeriodicalUpdater" bizim için tekrarlama işlerini yapar. "Updater" in "Request" den gelmesi gibi "PeriodicalUpdater" de "Updater" den üremiştir. Çok faydalı bir eserdir, belirli zaman aralıklarıyla sayfamızda birşeyleri değiştirmek ya da tazelemek istediğimizde kullanırız. Şimdi sayfamızı tazeliyelim ve temizlensin sonra şu satırları Firebug konsoldan girelim :

new Ajax.PeriodicalUpdater("sarman", "ajax.haml", {
    method: "get",
    insertion: "bottom", 
    frequency: 5
});

Yah! 5 saniyede bir satırı ekleyip duruyor. Eee, nasıl duracak bu? Bıraksak patlayana kadar gider. Ancak sayfayı tazeleyince duracak. Bunu yazılımla durdurmak için işlemi bir değişkene bağlayıp, "stop" metodunu çağırmamız gerekiyor. Yani :

var tekrar = new Ajax.PeriodicalUpdater("sarman", "ajax.haml", {
    method: "get",
    insertion: "bottom", 
    frequency: 5
});

Şimdi bir süre seyrettikten sonra :

>>> tekrar.stop();

komutu girerek periyodik işlemi durdurabiliriz. Bir de "decay" parametresi var bu süreyi katlamaya yarıyor. Mesela "decay: 2" verilirse önce 5 saniye sonra sırayla 10,20,40,80... şeklinde katlanarak gidecek ve bir süre sonra sanki hiç değişim olmuyormuş gibi gelecektir.
That's it, bu kadar! Sonrasında server'dan dinamik çağrılar yapmak var, ama başka yazıda. ( İnşallah "ajax yolları" yazısına benzemez ben yazının devamını hazırlayana adamlar Rails3 versiyon çıkardı, herşey değişti :-) )

QT Designer Bölüm-2

2010-11-03T13:48:00.000-07:00

Önceki yazıda RGB elde etmek için spinbox'lar ve slider'lar koyduk, ne güzel birbirine de bağladık. Bağladık ta ne renk olduğunu görmedik. Yaptık bi uygulama bari bir işe yarasın.

Qt kütüphanesi kullanırken nesneleri signal-slot bağlantıları ile birbirine bağlayabildiğimizi gördük. Peki biz bu sürgülerin gösterdiği değere karşı gelen rengi bir yerde görmek istersek ne olacak. 3 slider değerini tek bir nesnenin arkaplan rengine designer kullanarak bağlamamız mümkün değil. Bu durumda biraz kod yazmamız gerekecek.

Bu yazıda QtDesigner ile hazırlanan Ruby dosyası ile ayrı bir dosyada hazırladığımız kodları birleştireceğiz. İlk önce renklendirme yapmak için ekrana bir label ekleyeceğiz. Ardından bize lazım olan nesneleri isimlendireceğiz ve program yazacağız.

Önce QtDesigner'da eski "first.ui" dosyasını açalım ve "second.ui" adıyla kayıt edelim. Düzenleme modunda "Display Widgets" içinden bir Label'ı tutup formun en sağ kenarına çekip bırakalım. Sonra Label'ı çift tıklatıp yazısını silelim. Aşağıdaki şekil oluşacak:

Property Editor penceresinde Label'ın "objectName" özelliğini dispLabel olarak değiştirelim. Kırmızı renge bağlı slider ismini aynı şekilde "redSlider" olarak değiştirelim. Yeşilinkini "greenSlider" olarak mavininkini de "blueSlider" olarak değiştirelim. Sıra geldi sinyal-slot düzenlemesine, kayıtlarda olmayan yeni bir slot oluşturacağız. "redSlider"dan bir bağlantıyı alıp form üzerine bırakalım. Form üzerine bırakabilmek için en kenara çıkmak gerekiyor, dikkat edelim.

Bağlantı diyaloğunda sol tarafta slider sinyallerinden "valueChanged(int)" seçelim, sağ tarafta Form slotlarında birşey görünmüyor altındaki "Edit..." yazılı butonu tıkladığımızda açılan pencerede form nesnesinin slotları ve sinyalleri görünüyor. Slotlar kısmında + tuşuna tıklayıp yeni bir slot ekleyelim:

Slot adı olarak set_color() yazalım ve enter basalım. Tamam tıkladığımızda yeni bir slotumuz oldu. Diğer iki slider'dan da aynı slot'a bağlantı yapalım. Dosyamzı kaydedelim. Şimdi "second.ui" dosyasının olduğu klasörde bir komut satırı açıp,

rbuic4 -x -o second.rb second.ui

yazarak Ruby dosyamızı oluşturalım. Oluşan bu dosyayı çalıştırırsak

Object::connect: No such slot QWidget::set_color()

hata mesajı verecektir. Öntanımlı olmayan bir slot çağırdık şimdi onu tanıtacağız. Oluşan Ruby dosyasını incelersek en üstünde bu dosyada yapılan tüm değişikliklerin yeni bir "rbuic4" komutu sonrasında silineceği uyarısı vardır. Biz belki görselimizi daha değiştireceğiz, bu yüzden yapacağımız ilave ayrı bir dosyadan buraya müdahil olmalı. İlk önce "second_run.rb" adında bir yeni dosya oluşturalım. Bu dosyada ilk satır otomatikten gelen dosyaya çağrı :

require 'second'

bunun arkasından programı çalıştırmak için second.rb dosyasının en sonuna eklenmiş olan satırların bir kopyasını buraya alalım :

about = KDE::AboutData.new("form", "Form", KDE.ki18n(""), "0.1")
KDE::CmdLineArgs.init(ARGV, about)
a = KDE::Application.new
u = Ui_Form.new
w = QT::Widget.new
u.setupUi(w)
a.topWidget = w
w.show
a.exec

şimdi yazdığımız programı çalıştırırsak aynı orjinalindeki mesajı alırız. Şimdi ana programda tanıtılan form içinde modifikasyon yapmak için ilaveler yapacağız. İlk önce sınıf tanımını tekrar yapıyoruz.

class MyWidget < Qt::Widget
slots 'set_color()'
def initialize parent=nil
super
@base=Ui_Form.new
@base.setupUi self
end
end

bunları ekledikten sonra çalıştıran koddaki "u = Ui_Form.new" satırını ve "u.setupUi(w)" satırını iptal ediyoruz. Orjinal kodu (second.rb) incelersek bu şekilde yaparak form tanımına dışardan ulaşmış olduğumuzu göreceğiz. En son "w = QT::Widget.new" satırını "w = MyWidget.new" olarak değişirip, müdahale gören sınıfı kullanmaya başlıyoruz. Şimdi çalıştıralım, bu sefer slot bulunduğu için uygulama çalışmaya başlayacak ama herhangi bir slider değerini değiştirmeye kalktığımızda method tanımlanmadığı için hata verecektir. İşte set_color() methodumuz :

def set_color
clr = Qt::Color.new @base.redSlider.value, @base.greenSlider.value, @base.blueSlider.value
setStyleSheet 'QLabel#dispLabel {background-color: %s}' % clr.name
end

önce slider değerlerinden bir renk oluşturuyoruz, sonra "dispLabel" arkaplan rengini bu renge eşitliyoruz. İlk açılışta arkaplan renginin eşitlenmesi için methodumuzu initialize rutini içinde de çağıralım en son durum şu olur :

require 'second'

class MyWidget < Qt::Widget
slots 'set_color()'
def initialize parent=nil
super
@base=Ui_Form.new
@base.setupUi self
set_color
end

def set_color
clr = Qt::Color.new @base.redSlider.value, @base.greenSlider.value, @base.blueSlider.value
setStyleSheet 'QLabel#dispLabel {background-color: %s}' % clr.name
end

end

about = KDE::AboutData.new("form", "Form", KDE.ki18n(""), "0.1")
KDE::CmdLineArgs.init(ARGV, about)
a = KDE::Application.new
#u = Ui_Form.new
w = MyWidget.new
#u.setupUi(w)
a.topWidget = w
w.show
a.exec

İşte bu kadar kendi metodumuza yönlendirmeyi başardık. Artık program bir işe yaramaya başladı.

Hoşçakalın...

QT Designer ile Ruby Uygulaması

2010-10-28T04:39:00.000-07:00

At Ölür Meydan Kalır, Yiğit Ölür Şan Kalır. Dikkat et sen gidince meydan kalmasın!

(Bana söylenmiş özlü söz)

Uzun bir aradan sonra yine yazmaya başlayacağım galiba. Ayrı kaldığım zamanda bayağı bir kriz pozisyonlarına girdim. Ekonomik önlem paketleri yapıp kurtaracaz inşallah. Bilgisayarımın son göçüşünden sonra artık herşeyimi Pardus'a geçirdim. İş haricinde Windows'la pek görüşmeme kararı aldım. Bu kararda en büyük katkı Pardus'un kullanım kolaylığı. Pardus , diğer bütün Linux işletim sistemleri içinde bana göre en kullanışlı olanı. Kullanması çok kolay, programları yüklemesi, kaldırması tam bana göre , tembel işi. Yerli olduğu için mi bana güzel geliyor bilmem ama dünyada böyle bir işletim sistemi olan nadir ülkelerden biri olduğumuz için emeği geçen herkese teşekkür ederim. 2011 versiyon da yakında geliyor, hadi hayırlısı.

Bu günlerde Ruby ile masaüstü programı hazırlarken neler kullanabileceğimi inceliyorum. QtRuby ile QtDesigner birlikte kullanımı araştırdım, öğrendiklerimden bir bukle yapayım başkalarına da faydası olur belki.

Qt Tasarımcı, programınızın görsel arabirimini Qt kütüphanesi ile kolayca hazırlayabileceğimiz bir program. Bu çalışmada öncelikle Qt Tasarımcı'nın kendi tutorial'ından başladım.

Yeni Form ekranında, widget seçerek başlıyoruz :

Form üzerine 3 tane label, 3 tane spinbox, 3 tane vertical slider'ı aşağıdaki şekilde ekrana yerleştirelim. Label yazılarını değiştirmek için çift tıklamak yeterlidir.

Bu widget'ların düzgün yerleşmesini sağlamak için bir layout üzerinde birleştirmemiz gerekiyor. Bunun için ilk grubu Ctrl tuşu eşliğinde tıklayarak seçelim ve sağ tuş tıklayıp yerleşim seçeneklerinden ızgara içine yerleştir seçimini tıklayalım. Resimde dikkat ettiyseniz "Izagara" yazmışlar, küçük bir hata (orjinal dilde seçenek "Lay Out in a Grid") .

Üç grubun hepsine aynı yerleşim birleştirmesini yapalım. Sonra elde ettiğimiz 3 grubu form içersine bir ana yerleşim içine yerleştirmemiz gerekiyor. 3 grubun dışında form üzerine sağ tıklayıp yerleşimden "Yatay Olarak Yerleştir" seçelim az evvelki gibi "Izagara İçerisine Yerleştir" de seçebiliriz. En son şu hale gelecektir :

Yan taraftaki "Object Inspector" penceresinde bu yerleşimlerin Layout'lar olarak nasıl yerleştiğine dikkat edin. Eğer form ana yerleşimi doğru seçilmişse form boyutunu kenarlarından çekerek değiştirdiğimizde grupların boyutları da orantılı olarak değişecektir. Gerçek görüntünün neye benzediğini görmek için Ctrl+R tuşuyla preview olarak formu görebiliriz.

Şimdi sıra nesnelerin çalışmalarını birbirine bağlamaya geldi. Slider değişince spinbox içeriğinin de paralelinde değişmesini istiyoruz. Tam tersi spinbox değeri değişince slider değerinin de değişmesini istiyoruz. Bu amaçla slider'ın valueChanged() SIGNAL'ini, spinbox'ın setValue() SLOT'una bağlamamız gerekiyor. Tam tersi spinbox'ın valueChanged() SIGNAL'ini, slider'ın setValue() SLOT'una bağlamamız gerekiyor. Bu amaçla ilk önce Sinyal/Slot Düzenle seçeriz ya da F4 tuşa basarız. Form görüntüsü bir değişir, widget'ların üzerinden mouse gezdirince kırmızı renklendirmeler görürüz. Slider üzerinde tıklayalım ve parmağımızı kaldırmadan spinbox üzerine sürükleyelim ve bırakalım. "Configure Connection" penceresi açılacaktır.

Sol tarafta valueChanged(int) sinyalini seçelim, sağ taraf aktif olacaktır. Sağ tarafta setValue(int) slotu seçelim ve tamam tıklayalım. Şimdi de tersini yapıp spinbox'tan slider'a bir bağlantı kuralım ve aynı şeyleri seçelim. 3 grubun hepsine aynı işlemleri yapalım, işimiz bitince çalışmamızı kaydedelim ve Ctrl+R basıp bağlantının çalışmasını gözleyelim.

Bu değerleri biz RGB renk oluşturmada kullanacağımıza göre değerlerin 0-255 arasında değişmesi gerekir. Bunun için slider ve spinboxların özelliklerini "Property Editor" penceresinde inceleyip maximum özelliklerini 99 dan 255 e değiştirelim.

Eeee! Ruby nerde ? Şimdi, gezginle ".ui" uzantılı dosyamızın bulunduğu klasöre gidelim ve komut penceresi çalıştıralım (Shift+F4). Açılan pencerede :

rbuic4 -x -o first.rb first.ui

komutunu girelim. "-o" çıkışta first.rb dosyası oluşturulması için, "-x" bu dosyanın direk çalıştırılabilir olması için. Komut sonucunda "first.rb" dosyası oluştuğunu görmüşsek işimiz tamamlandı. Bu Ruby dosyasını çalıştıralım ve inceleyelim, editörde açalım ve oluşturulan kodları inceleyelim. Ne güzel program yazdık ama di mi?

Hoşçakalın...

PARDUS 2011

2010-10-26T10:13:00.001-07:00

Ajax Yollarından Aştım da Geldim

2010-04-08T12:07:00.000-07:00

   Geçen Rails ve Ajax üzerine bir giriş yazısı okudum. Birşeyler öğrendiğim için paylaşmak istedim.

   Önce bir Rails uygulama üretelim.

rails ajaxdnm
cd ajaxdnm
script/server

   Uygulamanın çalıştığını browser'da "http://localhost:3000/ " adresinden kontrol edelim, meşhur "Welcome aboard" ekranını görelim. Çalışma yapacağımız sayfayı oluşturmak için "act" adında bir action(ekşın)'ı olan kendi adı da "cont" olan bir controller üretelim.

script/generate controller cont act

   "http://localhost:3000/cont/act " adresini girdiğimizde karşımıza şu çıkar :

Çok kontak oldu. Web sayfamız nerede olduğunu kendi söylemiş zaten. İşte orda sayfamızı bulup editörde açalım. En alt satıra şunu ekleyelim :

<p><a href="#" onclick="alert('Merhaba');">Satırdan Alarm</a> </p>

Bu satır içi javascript kodla yazı tıklandığı anda bir bildiri penceresinden "Merhaba" mesajı veriyoruz :

Peki, birden fazla satırdan oluşan bir javascriptimiz varsa ne yaparız? Bu durumda da fonksiyon tanımlaması yaparız :

<p><a href="#" onclick="fonkAlarm();">Fonksiyon Çağır </a></p>

<script type="text/javascript">
function fonkAlarm(){
   alert('Fonksiyondan Merhaba');
}
</script>

   Bunun etkisine bakarsak önceki ile aynı etkiyi yaptığını görürüz. Şimdi biraz ajax zamanı. Fakat önce controller içinde yeni bir action tanımlayıp server cevabını içine yazalım. app/views/cont klasörü içinde cevap.html.erb adında bir dosya oluşturup içine şunu yazalım :

Server'dan Merhaba

   Dosyayı test etmek için http://localhost:3000/cont/cevap adresini girip bakalım. Test ettikten sonra tekrar act dosyamıza dönelim. Mesajı server üzerinden getirmek için şu fonksiyonu tanımlayalım :

<p><a href="#" onclick="serverdanAlarm();">Server sorgulayan fonksiyon</a></p>

<script type="text/javascript">
   function serverdanAlarm(){
      var cevap = new XMLHttpRequest();

      cevap.open('get', '/cont/cevap', false);
      cevap.send(null);

      alert(cevap.responseText);
   }
</script>

   Alacağımız cevap şöyle olacaktır :

   Bu sayfayı Internet Explorer 6 veya daha düşük versiyonuyla açarsak sorun çıkartacaktır. Ama daha önce biraz çalışmayı inceleyelim. Linki her tıkladığımızda script/server komutunun çalıştığı komut isteminde şu satırları yazar :

Processing ContController#cevap (for 127.0.0.1 at 2010-04-07 21:50:50) [GET]
Rendering cont/cevap
Completed in 0ms (View: 0, DB: 0) | 200 OK [http://localhost/cont/cevap]

   Burdan anlıyoruz ki, sayfa açılmasa da arka planda javascript server'dan istekte bulunup mesajı sayfadan alıyor.
   Şimdi bu IE-6 ve öncesinde kodun çalışması için bir sürü kontrol kodları yazmak gerekiyor. Ama işin kolayı var. Ajax için yazılmış hazır kütüphanelerin yardımıyla bu ayrıntılardan kurtulabiliriz. Bu kütüphanelerin en meşhurlarından biri Rails ile birlikte de gelen Prototype isimli kütüphanedir. Bu kütüphane içinde Ajax için yazılmış birçok kolaylaştırıcı fonksiyon vardır. Şimdi en son yaptığımızı bir de Prototype fonksiyonları ile yazalım :

<script src="/javascripts/prototype.js" type="text/javascript">
</script>
<p><a href="#" onclick="prototypeAlarm();">Prototype ile çağır</a></p>

<script type="text/javascript">
   function prototypeAlarm(){
      new Ajax.Request('/cont/cevap', {onSuccess: function(cevap){
         alert(cevap.responseText);
      }});
   }
</script>

İlk satırda prototype.js dosyasını sayfamıza dahil ediyoruz. Prototype kütüphane dosyası Rails uygulamamızı ilk oluştururken public/javascripts klasörü içine otomatik olarak konur. Burda serverdan bilgi sorgulamak için prototype kütüphanesinin Ajax.Request fonksiyonunu kullanıyoruz. İlk parametre çağrı yaptığımız url adresi, daha sonra ise key/value çiftlerinden oluşan parametreler geliyor. Yukardaki örneğimizde çağrının başarılı olması ile birlikte bir fonksiyon çağırılıyor ve bunun içinde de meşhur mesaj diyaloğumuzdan çağrının cevabını veriyoruz. Bu kod içinde IE-6 ve öncesine ayrı bir kod yazılmıyor. İşin orasını prototype bizim için hallediyor.
   Şimdiye kadar yaptıklarımızda hep bir mesaj diyaloğu açıp mesajımızı verdik. Gerçekte web sayfalarında genel eğilim sayfanın bir kısmının görüntüsünü ajax ile değiştirmek şeklindedir. Bunun için aşağıdaki kodu yazalım :

<p><a href="#" onclick="elemanUpdate();">Elemanı Update Et</a></p>

<p id="cevabi"></p>
<script type="text/javascript">
   function elemanUpdate(){
      new Ajax.Request('/cont/cevap', { onSuccess: function(gelen){
         $('cevabi').update(gelen.responseText);
      }});
   }
</script>

   Bu kodun farkını incelerseniz, içi boş bir paragraf konuyor sonra ajax fonksiyon yardımıyla paragrafın içeriği çağrı cevabı ile dolduruluyor. Paragrafı üzerine tıklanınca tekrar boşaltmak için benzer bir yöntem kullanabiliriz :

<p><a href="#" onclick="elemanUpdate();">Elemanı Update Et</a></p>
<p id="cevabi" onclick="cevabiSil();"></p>

<script type="text/javascript">
   function elemanUpdate(){
      new Ajax.Request('/cont/cevap', { onSuccess: function(gelen){
         $('cevabi').update(gelen.responseText);
      }});
   }
   function cevabiSil(){
         $('cevabi').update('');
   }

</script>

   Bir dikkat edilmesi gereken nokta da $( 'id' ) şeklinde sayfa üzerindeki id verilen tag'lere erişim. Bu şekilde erişim Prototype'ın bir fonksiyonudur. HTML elemanların update edilmesi çok ihtiyaç duyulan bir durum olduğu için Prototype içinde Ajax.Updater tanımlanmıştır. Bunun kullanımı da şöyle :

<p><a href="#" onclick="updateFonks();">Ajax.Updater ile update</a></p>
<p id="cevabi2"></p>

<script type="text/javascript">
   function updateFonks(){
      new Ajax.Updater('cevabi2', '/cont/cevap');
   }
</script>

   Bakarsak burda onSuccess yok. Updater'ın 2 argümanı var, biri update edilecek HTML eleman, diğeri çağrının yapılacağı url adres. Ajax.Updater çağrısını tamamladığında otomatik olarak bir onComplete fonksiyonu üreterek elemanı update eder. Updater da önceki gibi bir dizi key/value çifti şeklinde opsiyonlar alabilir. Bunlardan birinin adı "insertion". Bunun sayesinde çağrı cevabını nereye yerleştireceğini tarif ederiz. 4 değer alabilir : Before , Top , Bottom , After . Örneğin :

<p><a href="#" onclick="elemanaEkle();">Append ile eklemek</a></p>
<p id="cevabi3"></p>

<script type="text/javascript">
   function elemanaEkle(){
      new Ajax.Updater('cevabi3', '/cont/cevap',
         { insertion:Insertion.Bottom });
}
</script>

   İlk tıkladığımızda boş paragraf çağrı cevabı ile dolduruluyor. Arkasından yaptığımız her tıklama önceki paragraf içeriğinin ardına eklenerek devam ediyor. Bundan sonrasında biraz Rails var ....

Diyalogların Kullanımı

2009-12-28T12:39:00.000-08:00

WxRuby'de uygulamamızı standart görüntülerle süsleyecek birçok öntanımlı diyalog kutusu bulunur. Bu yazıda kullanıcımızdan girdi alabileceğimiz üç diyalog kutusu göreceğiz.

Mesaj diyaloğu
Text girişi
Listeden seçim

Bundan başka daha birçok standart diyalog bulunur. Örneğin , dosya seçici , renk seçici , progress diyalog , font seçici gibi.

Mesaj Bildirileri

Kullanıcıyla yapabileceğimiz en basit iletişim Wx::MessageDialog adındaki basit alarm kutusunu kullanmaktır. MessageDialog kullanarak üzerinde sadece bir mesaj ve OK butonu olan bir kutu veya Yes/No butonları ile cevap alabileceğimiz bir kutu yapabiliriz.

1     dlg = MessageDialog.new nil, "böyle iletişim kurması kolay mı ?", "MessageDialog", YES_NO | ICON_QUESTION

2     result = dlg.show_modal
3     p result
4     dlg.destroy

bu kodun karşılığında şöyle bir diyaloğumuz olur :

MessageDialog nesnesinin tanıtım parametreleri şunlardır :

MessageDialog.new(Window parent,  String message, 
                  String caption = "Message box", 
                  Integer style = OK CANCEL, 
                  Point pos = DEFAULT_POSITION)

Burda parent dialogun çağrıldığı penceredir veya bir pencereye bağlı olmasını istemezsek nil değer gireriz. Arkasından mesajımızı string olarak gireriz. "caption" isimli string diyaloğumuzun titlebar'ında görünecek yazıdır, default değeri "Message box". "style" parametresi diyaloğumuzda bulunacak butonları ve ikonları tarif eden bir bitmask'dır. "pos" parametresi de diyaloğumuzun ekranda gösterileceği pozisyonu belirtir bir Wx::Point nesnesidir. "show_modal" ile diyaloğumuz modal olarak açılır yani bu diyalog açıldığında uygulamamızda olan pencerelerde işlem yapmamız diyaloğumuz kapatılana kadar engellenir. Tüm diyaloglarda bu metod ortakdır. "show_modal" metodunun geri dönen değeri diyaloğumuzun sonucunu ifade eden bir integer sayıdır. Bu diyaloğumuzda tıklanan butonun kodu geri döner. Bu "MessageDialog" nesnesi için şu sabitlerden biridir : Wx::ID_YES , Wx::ID_NO , Wx::ID_CANCEL , Wx::ID_OK.
Style bitleri ile diyaloğumuzda bulunacak butonlara karar veririz. Wx::OK , Wx::CANCEL , Wx::YES_NO . Ayrıca bu style bitleri ile diyaloğumuzda hangi ikonun görüneceğini seçeriz. Wx::ICON_ERROR , Wx:ICON_EXCLAMATION , Wx::ICON_INFORMATION , Wx::ICON_QUESTION .

Bir Satırlık Yazı Girdisi

Eğer kullanıcıdan bir tek satır bilgi almak istiyorsak , "TextEntryDialog" kullanırız. Bu nesne bir diyalog penceresi açar ve eğer kullanıcı OK butonunu tıklarsa girilen yazıyı geri döner.

17     dlgq = TextEntryDialog.new nil, "Sevdiğiniz Programlama Dili Nedir ?", "Bir Soru", "Ruby"
18     if dlgq.show_modal == ID_OK
19       response = dlgq.get_value
20       p response + " güzel bir seçim"
21     end
22     dlgq.destroy

Bu kodun karşılığı diyaloğumuz şuna benzer :

TextEntryDialog nesnesi üretirken girdiğimiz parametreler sırasıyla şunlar : her zaman olduğu gibi parent en başta. Arkasından diyaloğumuzun içinde yer alacak soru cümlemiz string olarak. Bundan sonra diyaloğumuzun etiketinde yer alacak string gelir. En son text girişinde yer alacak default yazı geliyor. Ayrıca default değeri Wx::OK | Wx::CANCEL olan bir style bilgisi vardır. İstersek sadece OK butonu bırakabiliriz. Aynı MessageDialog nesnesi gibi show_modal metodu da tıklanan düğmenin kodunu geri döner. "get_value" metodu textbox'ta yazılmış olan değeri geri döner. Burda sadece deneme için girilen değeri terminale geri yazıyoruz.

Aşağıdaki Listeden Seçiniz

Eğer kullanıcının her aklına geleni yazmasını değilde bizim istediğimiz yanıtlardan birini seçmesini istiyorsak , Wx::SingleChoiceDialog nesnesi kullanırız. Bu nesnenin basit kullanımı şöyledir :

24     dlgc = SingleChoiceDialog.new nil, "Kaç Yaşında Evlenmek Daha İyi ?", "Birini Seçin", ["15", "20", "25", "36", "44"]
25     if dlgc.show_modal == ID_OK
26       response = dlgc.get_string_selection
27       p response + " yaş çok erken olur !"
28     end
29     dlgc.destroy

Bu kodun sonucu şu şekil bir diyaloğumuz olur :

Bir öncekinden farklı olarak burda default text değeri yerine bir matris içinde seçenekleri gireriz. Bu diyalogdan dönen değeri iki değişik şekilde alabiliriz : "get_selection" metodu seçilen stringin indexini geri döner , "get_string_selection" ile seçilen stringin kendisini alırız.

Tüm bu kodların hepsini ana penceresi olmayan bir uygulamaya dizdim :

1 #!/usr/bin/env ruby
 2 # dialoglar.rb kullaıcı ile diyalog pencereleri yardımıyla iletişim
 3 
 4 require 'rubygems'
 5 require 'wx'
 6 include Wx
 7 
 8 $KCODE = "utf8"               #Türkçe karakterler terminalde çıksın
 9 
10 class MyApp < App
11   def on_init
12 
13     dlg = MessageDialog.new nil, "böyle iletişim kurması kolay mı ?", "MessageDialog", YES_NO | ICON_QUESTION
14     result = dlg.show_modal
15     p result
16     dlg.destroy
17 
18     dlgq = TextEntryDialog.new nil, "Sevdiğiniz Programlama Dili Nedir ?", "Bir Soru", "Ruby"
19     if dlgq.show_modal == ID_OK
20       response = dlgq.get_value
21       p response + " güzel bir seçim"
22     end
23     dlgq.destroy
24 
25     dlgc = SingleChoiceDialog.new nil, "Kaç Yaşında Evlenmek Daha İyi ?", "Birini Seçin", ["15", "20", "25", "36", "44"]
26     if dlgc.show_modal == ID_OK
27       response = dlgc.get_string_selection
28       p response + " yaş çok erken olur !"
29     end
30     dlgc.destroy
31 
32   end
33 end
34 
35 if __FILE__ == $0
36   my_app = MyApp.new
37   my_app.main_loop
38 end
39

Bu günlük bu kadar.

Frame'e Menubar, Toolbar veya Statusbar Eklemek

2009-12-17T10:40:00.000-08:00

Bir uygulama penceresinin genelde 3 temel görsel vardır. En üstte bir menübar, onun altında bir toolbar ve pencerenin altında bir statusbar. Şekilde böyle bir pencere resmi görünüyor.

Aşağıdaki programı toolbar.rb adıyla kaydedin.

 1 #!/usr/bin/env ruby
 2 # Toolbar.rb Frame'e Menu ve Toolbar Eklemek
 3 
 4 require 'rubygems'
 5 require 'wx'
 6 include Wx
 7 
 8 class ToolbarFrame < Frame
 9   def initialize
10     super nil, -1, "Toolbar", :size=>Size.new(300, 200)
11     panel = Panel.new self
12     panel.set_background_colour WHITE
13     status_bar = create_status_bar                     #1 statusbar üretiliyor
14     tool_bar = create_tool_bar                         #2 toolbar üretiliyor
15     tool_bar.add_tool -1, "New", xpm_bitmap("new.xpm"), "Long help for 'New' "  #3 toolbara buton ekleniyor
16     tool_bar.realize
17     menubar = MenuBar.new
18     menu1 = Menu.new
19     menubar.append menu1, "&File"
20     menu2 = Menu.new
21     menu2.append -1, "&Copy", "Copy in Statusbar"
22     menu2.append -1, "C&ut", "-"
23     menu2.append -1, "Paste", " "
24     menu2.append_separator
25     menu2.append -1, "&Options...", "Display Options"
26     menubar.append menu2, "&Edit"
27     set_menu_bar menubar
28   end
29 
30   # bir Bitmap icon nesnesi döner
31   def xpm_bitmap(base_name)
32     # betiğin bulunduğu klasörde icons adında bir alt klasörde iconlar var
33     xpm_file = File.join( File.dirname(__FILE__), 'icons', base_name )
34     Wx::Bitmap.new(xpm_file, Wx::BITMAP_TYPE_XPM)
35   end
36

1 işaretli satır Wx::StatusBar nesnesinin bir oluşumunu üretiyoruz. Status bar frame gösterilmesiyle beraber en alta yerleşir ve orada yapışık olarak kalır. Status bar uygulama çalışması esnasında çeşitli bilgilendirmeler için kullanılır. Statusbar yazı boyutu ve şekli işletim sistemi tarafından belirlenir.

2 işaretli satırda Wx::ToolBar nesnesinin bir oluşumu üretiyoruz ve bu da pencerenin üst kısmına yayılır. Toolbar üzerinde çeşitli komutları yerine getirecek resimli butonlar olur.

3 işaretli satırda toolbar'a bir buton ekliyoruz. Bunu yaparken resim için bir bitmap nesnesi gerekiyor. Bunun için de xpm_bitmap adında bir metod yardımıyla betiğin bulunduğu klasöre eklediğimiz "icons" klasörü içinden bir resim dosyası çağırıyoruz. Bu klasörü WxRuby gem klasörü içindeki bigdemo örneğinin olduğu klasörde bulabilirsiniz. Mesela bende bu resimleri "/usr/lib/ruby/gems/1.8/gems/wxruby-2.0.0-x86-linux/samples/bigdemo/icons" klasöründe buldum. Daha sonra realize metodu ile toolbar'a butonlarının yerleştirmesini otomatik olarak yapmasını emrediyoruz.

Daha sonra bir MenuBar nesnesi üretiyoruz. MenuBar nesnesi pencerenin en üstüne yerleşir. Bu nesneye Menu nesneleri ekleyerek uygulamanın menüleri oluşturulur. Burda 2 adet Menu nesnesi üretiyoruz. Sonra bu menü nesnelerine alt menü komutları ekliyoruz. Hem menubar'a menu nesnesi eklerken hem de menu'ye altmenü eklerken append metodu kullanıyoruz. Menüye ulaşmak için kısayol tuşu olacak harfin önüne & işareti koymamız gerekiyor. Alt menüleri eklerken girilen 3. parametredeki string mouse menü üzerinde gezerken status barda görünür.

WxRuby uygulamanıza sağlam bir temel vermek

2009-12-15T11:29:00.000-08:00

Bir WxRuby uygulamasının iki temel parçası vardır, uygulama nesnesi ve üst seviye pencere nesnesi (top level window). Uygulama nesnesi esas çevrim programını barındırır, bu yüzden uygulama nesnesi olmadan bir WxRuby uygulaması olamaz.
Üst seviye pencere ise kullanıcıya sunulacak en önemli kontrolleri ve verileri içerir. Örneğin bir kelime işlemci programında üst seviye pencere hem dökümanı gösterirken aynı zamanda dökümanla ilgili birçok veriyi de barındırır. Aynı şekilde bir web tarayıcının üst seviye penceresi hem sayfayı gösterir hem sayfa hakkında bilgiler barındırır. Aşağıdaki şekil bu iki temel nesnenin birbirleri ve uygulamanın geri kalanıyla bağlantılarını gösterir.

Bu diyagramda da göründüğü gibi uygulama nesnesi ana olay çevrimi ve üst seviye pencereyi içerir. Üst seviye pencere üzerindeki kontrolleri ve iliştirdiğiniz diğer veri nesnelerini içerir. Bu pencere ve içindeki kontroller kullanıcının hareketlerinden olayları tetikler.

Her WxRuby programı bir adet uygulama nesnesi bulundurmalıdır. Uygulama nesnesi Wx::App sınıfının bir oluşumu veya altsınıfıdır. Uygulama nesnesinin esas amacı ana olay çevrimini yönetmektir. Bu olay çevrimi pencere sisteminden gelen olay isteklerini işler ve ilgili olay işleyici rutinlere yönlendirir. Ayrıca bu uygulama nesnesi uygulama geneli nesneler de barındırabilir (veritabanı bağlantıları gibi).

Wx:App alt sınıfını üretmek

Bu altsınıfı üretmek kolay olduğundan ek bir özellik gerekmese bile bu altsınıfı üretmek yapısal olarak doğru olacaktır. Bu altsınıfı üretmek için dört adım yapılır :

Altsınıf tanımlamasını yaparız.
“on_init” metodunu bu tanımlama içine koyarız.
Programımızın ana bölümünde bu sınıfın bir oluşumunu üretiriz.
Bu oluşumun “main_loop” metodunu çağırırız ve kontrol WxRuby'ye geçer.

“on_init” metodu uygulama başlayınca ana çevrime girmeden önce çalışır. Bu metod parametre almaz ve bir bool değer döner. Eğer bu metod false dönerse uygulama hemen sona erer. Tipik olarak on_init metodu içinde enazından bir frame tanımlaması yapılır. Ayrıca bu frame'in show metoduda burda olur. Ayrıca bu frame'in uygulamanın üst seviye penceresi olduğunu da set_top_window ile tanıtabiliriz. Üst seviye pencere sahibi tanıtılmamış diyalog pencereleri için default “sahip” tir.

Wx::Frame nesnesi ile çalışmak

WxRuby'de frame kullanıcıların pencere diye isimlendirdiği GUI elemanıdır. WxRuby'de tüm pencerelerin üst sınıfı Wx::Frame dir. Frame altsınıfını üretirken initialize metodu içinde üst sınıf parametreleriyle çağırılır. Bu parametrele şöyledir :

Wx::Frame.new( parent , id , title , pos=DEFAULT_POSITION ,

size=DEFAULT_SIZE , style=DEFAULT_FRAME_STYLE , name=”frame”)

Bir çok kontrol de benzer parametreler alır.

Parametre	Açıklaması
parent	Frame'in içine yerleşeceği yer. Üst seviye pencereler için bu parametre nil değeri alır. Eğer frame bir pencere içine yerleşecekse parent o penceredir. Bu durumda frame parent'in içinde beraber büyüyecek ve hareket edecektir. Parent kapanırsa bu frame de kapanır.
id	Frame kontrolü id numarası. Buraya özel bir sayı girebilirsiniz ya da -1 girerek WxRuby'nin otomatik id üretmesini sağlayabilirsiniz.
title	Frame etiketi. Bir çok stilde frame üst kısmındaki barda gösterilir.
pos	Bir Wx::Point nesnesi boş bırakılırsa işletim sistemi bir yer belirler. Ekranın sol üst köşesi (0, 0) olarak düşünülerek frame'in ekrandaki yerini belirleyebilirsiniz.
size	Bir Wx::Size nesnesi frame'in ilk açılıştaki boyutunu tayin eder. Boş bırakılırsa default bir boyutla açılır.
style	Sabitlerden oluşan bir bitmask. Frame stilini belirler. Stil Sabitleri arasına \| (bitwise or) işareti koyarak birçok stil sabiti kullanılabilir.
name	Frame'e verilen dahili isimdir. Daha sonra frame'i bulmak için kullanılabilir.

Frame stilleri sabitlerin birleşmesinden oluşmuştur. Örneğin DEFAULT_FRAME_STYLE şunlardan oluşur :

MAXIMIZE_BOX | MINIMIZE_BOX | RESIZE_BORDER |

SYSTEM_MENU | CAPTION | CLOSE_BOX

Bu birleşik stil içinden bir ya da birkaçını istemezsek özel veya ile çıkarabiliriz :

DEFAULT_FRAME_STYLE ^ ( RESIZE_BORDER | MINIMIZE_BOX | MAXIMIZE_BOX )

Tavsiye edilen üst seviye pencerede default stili kullanmaktır. Böyle olunca kullanıcı hangi pencerenin asıl olduğunu daha rahat anlar.

Stil	Açıklaması
CAPTION	Frame üzerine bir bar ekler buraya frame'in title parametresindeki string yazılır.
CLOSE_BOX	Frame etiket barına bir kapatma düğmesi ekler işletim sisteminden aynı şekliyle pencere kapatma düğmesi eklenir.
DEFAULT_FRAME_STYLE	Yukarda açıklamıştık.
FRAME_SHAPED	Bu stilde olan frame'ler set_shape metoduyla dikdörtgenden başka şekillerde olabilirler.
FRAME_TOOL_WINDOW	Frame'in toolbox penceresi olarak görünmesini sağlar. Daha küçük bir etiket barı olur sadece kapatma düğmesi olur ve görev yöneticide bu pencere görünmez.
MAXIMIZE_BOX	Pencereye tam ekran düğmesi ekler.
MINIMIZE_BOX	Pencereye aşağı küçültme düğmesi ekler.
RESIZE_BORDER	Pencerenin boyutu değiştirilebilir olmasını sağlar.
SIMPLE_BORDER	Gölgelendirmesiz düz ekran her işletim sisteminde çalışmaz.
SYSTEM_MENU	Pencereye system menüsü ekler. İlgili düğmelerin seçilmediği işlemler bu menüden de yaplamaz. (Tam ekran, minimize gibi)

Frame'e Widget Eklemek

Aşağıdaki programda frame ortasında bir buton konmuş ve butona tıklanınca uygulama sona eriyor.

1 #!/usr/bin/env ruby 
2 # Widget.rb Frame'e Buton Eklemek 
3  
4 require 'rubygems' 
5 require 'wx' 
6 include Wx 
7  
8 class InsertFrame < style="color: rgb(0, 0, 255);">
9   def initialize 
10     super nil, -1, "Butonlu Frame", :size=>Size.new(300, 100)
11     panel = Panel.new self    #1 Panel eklenmesi 
12     button = Button.new panel, -1, "Close",
Point.new(125, 25), Size.new(60, 50) #2 Panele buton eklenmesi 
13     evt_button(button) {on_close_me}   #3 Butona tıklanınca  
14     evt_close {on_close_window}   #4 pencere kapanınca
15   end 
16 
17   def on_close_me 
18     close 
19   end 
20 
21   def on_close_window 
22     destroy
23   end 
24 end
25 
26 class MyApp < style="color: rgb(0, 0, 255);">
27   def on_init 
28     insert_frame = InsertFrame.new 
29     insert_frame.show 
30   end 
31 end
32 
33 if __FILE__ == $0
34   my_app = MyApp.new 
35   my_app.main_loop
36 end
37

InsertFrame sınıfının iki alt window'u var. İlki panel, bu panel diğer windowları içine yerleştirmek için kullanılır. İkincisi de sıradan bir buton. Bunlar 1 ve 2 işaretli satırlarda gösterilmiştir. Daha sonra 3 nolu işaretli satırda butona tıklanınca çağırılacak kod bloğu tanıtılıyor. 4 nolu işaretli satırda pencere kapatma işlemi çağırılınca uygulmanın kapatılması için gerekli kod bloğu çağırılıyor.

Çoğu durumda frame içinde aynı boyutu kaplayacak bir panel koyarız ve diğer kontrolleri bu panel üzerine yerleştiririz. Ayrıca windows işletim sisteminde frame nesnesinin arkaplan rengi standart dışıdır ve gridir. Rengi beyaz olan bir panel ile daha güzel görüntü olacaktır. Ayrıca panel nesnesi içinde kontroller arasında tab butonu ile ezilebilir ama frame'de bu olmaz. Birçok diğer UI sistemlerde kontrol üretildikten sonra bir insert komutuyla ana taşıyıcıya eklenir. WxRuby de ise sadece kontrol üretilirken parent parmetresine taşıyıcı adı yazılır.

Ayrıca dikkat edersek buton için bir boyut girdik ve konacağı pozisyonu belirttik ama panel için böyle bir tanımlama yapmadık. WxRuby'de bir frame içine tek bir window yerleştirirsek (burada panel yerleştirilmiş, buton panelin içinde) bu window frame içinin tamamına otomatik olarak yayılır ve beraber boyut değiştirir. Panele boyut versek de bir şey değişmeyecekti. Ekrana konan her kontrole bir boyut vermek ve pencere boyutu değiştirilince olacaklara hükmetmek için rutinler yazmak oldukça zordur. Bunun için Sizer adı verilen nesneler kullanırız ama daha sonra açıklarız nasipse.

WxRuby İlk Uygulama

2009-12-04T10:02:00.000-08:00

Bu yazıda adım adım iş yapan bir uygulama yapacağız. Sonunda WxRuby logosu gösteren bir penceremiz olacak.
İlk önce WxRuby ile yazılabilecek en kısa uygulamayı yapalım. Minimum.rb adında bir dosya oluşturun ve aşağıdaki kodu girin :

 1 #!/bin/env ruby
 2 
 3 require 'rubygems'
 4 require 'wx'
 5 include Wx
 6 
 7 class App
 8   def on_init
 9     frame = Frame.new nil, -1, "Minimum"
10     frame.show
11   end
12 end
13 
14 App.new.main_loop

Fazla bir şey yokmuş. 14 satırda ekrana boş bir pencere açtık. Bu programın asıl amacı WxRuby kurulumunuzun sağlıklı olduğunu görmek. Bu programı çalıştırmak için değişik işletim sistemlerinde değişik işlemler yapmak gerekebilir ama genellikle dosyanın olduğu klasörde terminal açılır ve şu yazılır :

ruby minimum.rb

Sonuçta şu görüntü ortaya çıkar :

Şimdi bu resme bakan birçok kişi bunu bir window olarak isimlendirebilir ama WxRuby'de bu bir Frame'dir. WxRuby'de Window görüntüsü olan herşeye verilen isimdir. Diğer kütüphanelerin çoğunda bunlara Widget denir. WxRuby'de Butonlar , TextBoxlar gibi şeyler Window olarak çağırılır.
Yazılan programda her satırın bir görevi vardır. Bu basit program her WxRuby programında bulunması gereken 5 öğeyi içerir:

Gerekli WxRuby kütüphanesini yüklemek.
WxRuby uygulama sınıfını tekrar işlemek.
Uygulama giriş metodunu tanımlamak.
Uygulama sınıfının bir oluşumunu üretmek.
Uygulamanın ana çevrimine girmek.

Şimdi adım adım her adımın nasıl gerçekleştirildiğini inceleyelim.

WxRuby Kütüphanesini Yüklemek

İlk yapmamız gereken wx adı verilen ana WxRuby kütüphanesini yüklemek.

  require 'wx'
include Wx

İlk satır 'wx' kütüphanesini yükler, ikinci satır ise kütüphaneden her çağırdığımız sınıfın başına 'Wx::' yazısını otomatik koyar yani bir Frame üretirken 'Wx::Frame.new' yerine 'Frame.new' yeterli olacaktır.

Uygulamalar ve Frame'ler ile Çalışmak

WxRuby kütüphanesini yükledikten sonra artık uygulamayı ve içinde Frame'i oluşturabiliriz. Her WxRuby uygulamasının mutlaka bir Application(uygulama) nesnesi ve enaz bir Frame nesnesi olur. Uygulama nesnesi Wx::App sınıfının bir oluşumudur veya alt sınıfıdır. Bu sınıfın 'on_init' metodu uygulama çalışınca çağırılır.

 class MyApp <>
   def on_init
     frame = Frame.new nil, -1, "Minimum"
     frame.show
   end
 end

Şeklinde App sınıfının bir alt sınıfını tanımlamak genel eğilimdir. MyApp ismini biz verdik Ruby'de geçerli herhangi bir sınıf ismi olabilir. 'on_init' metodunda genellikle Frame tanımlamaları yapılır. Ama çoğunlukla burdaki gibi Frame sınıfı değil , MyFrame gibi bir altsınıf üretilerek kullanılır.

Frame'ler birçok parametre alır. Görünen ilk parametre mecburdur ama diğerlerini yazmasak da olur default değerleri vardır.

“Show” metodu frame'i görünür yapar. Eğer bu metodu kullanmazsak frame üretilir ama görünmez. Frame görünürlüğünü bir bool parametre vererek değiştirebiliriz:

frame.show false # frame görünmez olur.

frame.show true # true yazmasak da olur default true

frame.hide # bu da false parametre vermekle aynı işi yapar yani frame görünmez olur.

Son olarak uygulama sınıfının bir oluşumu üretilecek ve uygulamanın 'main_loop' metoduna girilecek. Bu şöyle de yapılabilir.

app = App.new

app.main_loop

Hepsi bu kadar! Bir kez uygulamanın main_loop metodunu çağırdıkmı artık kontrol WxRuby'ye geçer. Bu saatten sonra artık WxRuby kullanıcının eylemlerine cevap vermeye başlar. Yani mouse tıklamalarını , tuş basılmalarını izler. Uygulamanın tüm frame'leri kapanınca main_loop metodu da biter ve uygulama sona erer.

Minimum uygulamayı genişletmek

WxRuby'ye başlangıç yapabilmek için olabilecek en kısa kodlardan birini yazdık. Aslında standart bir uygulama yaparken bundan daha yapısal davranmak gerekir. Programı bölümlere ayırarak devam etmeliyiz. Aynı programı bir de yapısal olarak düzenlenmiş şekilde yazalım. Aşağıdaki programı yazıp spare.rb olarak kaydedin.

 1 #!/usr/bin/env ruby                             -1-
2 # Spare.rb WxRuby'ye giriş için yazılmıştır.    -2-
3
4 require 'rubygems'
5 require 'wx'
6 include Wx
7
8 class MyFrame < Frame                           -3-
9
10 end
11
12 class MyApp < App
13   def on_init
14     frame = MyFrame.new  nil , :title=> "Spare"   -4-
15     frame.show
16   end
17 end
18
19 if __FILE__ == $0                     -5-
20   my_app = MyApp.new
21   my_app.main_loop
22 end

1 numaralı işaretin olduğu ilk satır bir shebang satırı. Bir Ruby yorum satırına benziyor, gerçekte de öyle ama linux gibi bazı işletim sistemlerinde shebang satırı işletim sistemine bu betiği çalıştırmak için kullanacağı interpreter'ı tarif eder. Bu sayede linuxta sadece komut satırında dosyanın adını yazarak çalıştırabiliriz. Yani “ruby spare.rb” yerine sadece “spare.rb” yazdığımızda betik çalışması için ruby interpreter gerektiği bilinir. Kullanıcıların ruby işini bilmelerine gerek yok sadece dosyanın adını yazdıklarında betik çalışır. Bu satır kullanılmadığı işletim sistemlerinde Bir şey ifade etmez ama cross platform uygulamalar yazmak için bu satırı koymamız gerekir.

2- nolu işaretli satırda uygulamanın Ruby dökümanı için bir dökümantasyon yorumu yazdık. İlerde bu uygulamanın rdoc ile dökümanı çıkarıldığında dökümana uygulamanın açıklaması olarak bu yorum gelecektir. Benzer şekilde her sınıf tanımından ya da metod tanımından önce gelen satırda yazılan yorumlar o metod ya da sınıfın rdoc dökümanında açıklama olarak gelir. Bundan başka rdoc dökümanının görüntüsünü wiki benzeri formatlayan yöntemler vardır.

3- Frame sınıfının bir altsınıfını kendi MyFrame sınıfımız olarak tanıttık, şimdilik hiçbir şeyi değiştirmedik. İlerde içinde butonlar textboxlar vb. olan frame tanımlamaları yapacağız. Programınızın frame'i karmaşıklaşmaya başladığında ya da birden fazla frame içeren programlar yaparken bu şekilde her frame için bir altsınıf tanımlaması yapmak programınızın anlaşılabilir olmasına yardımcı olacaktır.

4- Uygulama sınıfı içinde kendi frame sınıfımızı parametrelerle çağırıyoruz. Kendi sınıfımızın tanımında başka bir şekil belirtilmediği için Wx::Frame sınıfı ile aynı şekilde parametreleri değerlendirilir. Bir nesneden üretilen nesne yine nesnedir ve aynı şekilde parametreler alır.

5- Son bölüm bir ruby programında kullanılan genel yapılardan biridir. Bir betik iki şekilde kullanılır, ya direk olarak çalıştırılır ya da başka bir betik içine kütüphane dosyası olarak “require” ile çağırılır. Bir betiği kütüphane olarak çağırdığımızda onun içindeki sınıfları ve metodları kullanırız. Eğer bu betik tek başına çalışan bir betikse mesela bir pencere açıyorsa require komutu sonrası da çalışmaya kalkar, halbuki biz sadece içindeki sınıfları ve metodları kullanmak istiyoruz. Burdaki kalıbı kullanarak çalışmasını istemediğimiz kodları ayırıyoruz. “__FILE__” değişkeni kodun bulunduğu dosyanın adını verir, yani burada “spare.rb” değeri alır. “$0” ise aktif iş yapan betiğin adıdır. Şimdi eğer “ruby spare.rb” deyip direk bu betik çalıştırılırsa “$0” değişkeni de “spare.rb” değerini alır yani “__FILE__” değişkeni ile aynı olur. Ama diyelim bu betiği “app.rb” adındaki başka bir betiğin içinde “require spare.rb” deyip yüklediğimizde “$0” değişkeni artık “app.rb” olacaktır bu durumda if satırı içindeki kodlar çalışmayacak sadece sınıf tanımlamaları diğer betiğe yüklenecektir. Bunu yapmasaydık require ile betiği başka bir betik içine yüklemeye kalktığımızda uygulama çalışıp frame açılacaktı.

En Son Hello.rb Betiğin Üretilmesi

Şimdi artık son haline getirelim. “hello.rb” adındaki betiğe aşağıdaki satırları girelim :

 1 #!/usr/bin/env ruby
2 # Merhaba WxRuby Prgramı !
3
4 require 'rubygems'
5 require 'wx'
6 include Wx
7
8 # MyFrame bir resim gösteriyor.
9 class MyFrame < Frame
10   # Bir Frame oluşumu yap ve bir resim göster
11   def initialize(image, parent=nil, id=-1, pos=DEFAULT_POSITION, title="Merhaba WxRuby" )
12     temp = image.convert_to_bitmap
13     size = Size.new(temp.get_width, temp.get_height)
14     super parent, id, title, pos, size
15     bmp = StaticBitmap.new self, :label=>temp
16   end
17 end
18
19 # Uygulama Sınıfı
20 class MyApp < App
21   def on_init
22     image = Image.new "wxruby.png", BITMAP_TYPE_PNG
23     frame = MyFrame.new image
24     frame.show
25   end
26 end
27
28 if __FILE__ == $0
29   my_app = MyApp.new
30   my_app.main_loop
31 end
32
33
34

İlk satır shebang satırı, bu satırla Linux işletim sisteminde betik sadece adı yazılıp çalıştırılabiliyor. Frame sınıfının altsınıfını tanımlayarak frame yerleşimini ve kontrolünü daha rahat yapıyoruz. Kendi Frame sınıfımızın üretilmesine orjinalinden ayrı olarak “image” adında bir parametre daha ekliyoruz. Diğer parametreler için default değerler vererek sadece bu parametrenin yeterli olmasını sağlıyoruz. Resmimizi bir StaticBitmap içinde göstereceğiz. Bu resim boyutlarını alıp Frame nesnemizi üretirken tam bu resmi kapsayacak büyüklükte olmasını sağlıyoruz. Sonra Uygulama sınıfının bir alt sınıfını ve on_init metodunu tanımlıyoruz. Bir Image nesnesi üretip web sitesinden indirdiğimiz “wxruby.png” resmini be nesneye yüklüyoruz. Daha sonra standart bir kontrol yapıyoruz , bu betik komut satırından mı çağırıldı yoksa başka bir betik içine mi çağırıldı ?

WxRuby Girişi

2009-12-01T13:13:00.000-08:00

#!/bin/env ruby

require 'rubygems'
require 'wx'
include Wx

class MyFrame < Frame
    def initialize
        super nil,  -1,  "My Frame",  :size=>Size.new(300,  300)
        panel = Panel.new self,  -1
        panel.evt_motion  {|event|on_move(event)}
        StaticText.new panel,  -1,  "Pos : ", :pos=>Point.new(10,  12)
        @pos_ctrl = TextCtrl.new panel,  -1,  :pos=>Point.new(50,  10)
    end

    def on_move(event)
        pos = event.get_position
        @pos_ctrl.set_value "#{pos.x}, #{pos.y}"
    end
end

if __FILE__ == $0
    app = Wx::App.new
    def app.on_init
        frame = MyFrame.new
        frame.show
    end
    app.main_loop
end

Bu program çok az bir kodla görsel bir iş yapıyor. Bir pencere açıyor, mouse hareketini takip edip sonucu ekrana yazıyor.

30 satırlık bir program için hiç fena değil. Diğer dillerden birçoğunda bunun 3-4 katı program yazılması gerekirdi. Programcılıkla biraz ilginiz varsa Ruby bilmeseniz bile satırları incelediğinizde biraz anlaşılabilir. Tüm argümanları tahmin edemeyebilirsiniz (mesela '-1' ler ne oluyor?) ama kaba bir fikir sahibi olabilirsiniz.
WxRuby kullanarak hem Ruby dilinin kolaylıklarından hem WxWidgets GUI kütüphanesinin geniş kapsamından yararlanarak masaüstü uygulamala geliştirebilirsiniz.

Wide Studio Kullanarak Ruby Uygulaması Geliştirmek

2008-03-24T12:53:00.000-07:00

Sonunda buldum galiba

Wide Studio kullanarak windowsa Ruby uygulamasını visual bir dile yakın kolaylıkta yapabiliyorsun. Grafik tasarımları görsel olarak yaptıktan sonra, tüm olaylara ayrı Ruby dosyaları oluşturarak uygulama hazırlamana yardımcı oluyor. Ve en iyisi de sonunda bir dll kullandığı için Rubyscript2exe kullanarak uygulamanı exe dosyasına çevirebilirsin. Bu konuda bir ön araştırma yapıp Wink ile bir getting started dosyası yapmaya çalıştım o da burda:

ws_hello.zip

Daha devamı olacak inşallah , şimdilik buraya kadar. Kolay gelsin.

Ruby On Rails sitemin giriş yazısı

2008-02-23T09:22:00.000-08:00

Merhaba ben elektronik mühendisiyim. Ben mezun olduğumda okulda bile bilgisayar yoktu. Ama mecbur mesleğimi icra etmeye uğraşırken kullanmasını öğrendim. Ben çoğunlukla endüstriyel kontrol programları yazıyorum. PLC ve SCADA programları esas uzmanlık konum. Bilgisayar programı olarak çok basit hesap kitap işleri yapan programlar lazım oluyor onları da visual basic ile yapıyordum. Teknoloji geliştikçe bizim işimiz sadece kontrol programları yazmaktan çıktı artık veri toplamak çok önemli bir hale geldi. Birkaç senedir veritabanları ile çok haşır neşir olmaya başladık. Üretimden bir çok veriyi yönetime iletebilmek için veri tabanlarına atıyoruz sonrada bunları raporlayacak programları bilgisayar mühendisi arkadaşlar yazıyor. Aynı zaman da bir yönetici olduğum için çalışanların yaptıkları işlerin raporlarının toplanabilmesi için hazır bir program aradım. Ama hiç bir program bize uymadı kağıtlara yazılan şeyleri bir türlü elektroniğe dökemedik. Son bir senedir database üzerinden internet sayfası olarak erişim sayfalarını basitçe yapabileceğim bir program arıyorum. Daha önce access ile bir şeyler yaptım ama işimiz gereği elemanlarımız çok zaman şirket dışında müşterimiz olan fabrikalarda bulunuyorlar. Bu durumda yaptıkları işler hakkında rapor hazırlamak kayıt giremedikleri için zor oluyor. Araştırırken birçok ilginç program buldum.

En iyilerinden biri Tersus açık kod olmasına rağmen çok paralı programı yer geçer. Ama bizim ülkemizden bu tip yazılımlara katılan pek olmayınca Türkçe karakter yüzünden hayli aksaklık yaşadım ama insana programcılığın temellerini öğretmesi ve kod yazmadan program yazılması hemde internet sayfaları hazırlaması çok zevkli bir program.

Başka ne var, mesela CodeCharge çok iyi ama paralı. Database tablolarınızı hazırlayın bağlantılarını yapın sonra bu programa haydi deyin tüm database'i web sayfası olarak veri girme, arama, listeleme gibi tüm ilk planda lazım olacakları 3 dakikada hazırlayın. İyi yanı asp veya php biliyorsanız çok daha geliştirebilirsiniz.

Exe programlar hazırlamak isterseniz ve kod yazmak istemiyorsanız tavsiyem Limnor size basit bir ilke koyuyor. İşi kim yapar? Nasıl yapar? Ne zaman yapar? Tüm yapmanız gereken bu soruları cevaplayıp bunu programın anlayacağı şekilde mouse tıklaması haline getirmek. Bu programla çok şey yaptım. Bu programı ücretsiz kullanabilirsiniz ama ticari bir program yaparsanız satın almanız gerekir. Ayrıca bu program ile çok kolay reklam CD veya kiosk uygulaması yapılır.

Ve nasip nereyi buldu. 2006 yazında Karaman'da bir fabrika kuruyorduk. Yabancı mühendisler de var. Tercümanları Karaman'dan uzun saçlı Mustafa. Boş zamanında yanımızda wireless'dan internette geziyor. Bir gün bana "abi bak sen programcısın burda ilginç bir şeyler var istersen oku" dedi. Çok işim vardı hemen önündeki ekranın bir fotoğrafını çektim ve "sonra bir bakarım" dedim. Anca fırsat oldu Aralık ayında resimleri incelerken gördüm. Interneti açtım adresi girdim . 37signals diye bir yer program nasılyazılır anlatıyor. Biraz okudum adamlar tecrübeli çok doğru tesbitlerde bulunmuşlar. Birçok ilkelerini ben de uyguluyordum zaten. Okumanızı kesinlikle tavsiye ederim. Bir programcı için best seller olması gereken bir yazı. Merak ettim bu adamlar hangi dilde program yazıyor diye. "Ruby" diye bir dil. İlk defa duydum Japon bir arkadaş çıkarmış sağolsun ve açık kaynak, yani hayrına yapmış, sağolsun. Bu arkadaşlar da bu Ruby dilini alıp ona bir kütüphane çakmışlar "Ruby On Rails " çıkmış. Dökümanı zor anladım çünkü ingilizcem kıt. Onun için bu sayfaları yazdım. Çünkü bunu herkesin bilmesi lazım. İşinizi görecek böyle basit ve eğlenceli bir şey var ve bedava. Keşke birileride çıkıp türkçe olarak böyle kolay kullanılır bir programlama dili hazırlasa da biz de kasılsak biraz. Arkadan gelecek RubyOnRails etiketli yazılarda benim neler yaptığımın hikayesini inceleyin. Belki siz de seversiniz bu dili kullanmayı.

1 numaralı yazı

2008-02-19T13:47:00.000-08:00

Çok sıkıcı bir günün akşamında aklıma bir blog açmak geldi. Daha önce bir web sayfası denemem oldu ujk.t35.com. Bu sayfada RubyOnRails ile yaptığım bir programı anlatmıştım. Ama ordan bir feedback alamayınca bir blog sitesinde yazsam belki daha çok kişiye ulaşırım diye düşündüm.

Bu sitede amacım bildiklerimi paylaşmak. Tabi benimle aynı konularla ilgilenen başka insanlara da ulaşmak istiyorum. Önce web sayfamdan buraya transfer yapmayı, daha sonra başka konulara girmeyi düşünüyorum.

Şimdilik bu kadar.