Boş Gezenin Boş Kalfası: WxRuby3 ile Masaüstü Uygulama Geliştirmek 1

İçindekiler +

Selam Ruby ile masaüstü program yazmak üzerine neler yapabilirim bir göreyim dedim ve başladım denemelere. Denemelerimi Windows'ta yaptım. Windows üzerinde bende kurulu olan versiyon ruby 3.4.2 (2025-02-15 revision d2930f8e7a) +PRISM [x64-mingw-ucrt] olarak geliyor. Ruby installer sitesinden Ruby+Devkit 3.4.2-1 (x64) versiyonu indirip kurdum.

WxRuby3 Kurulumu

WxRuby3 GUI kütüphanesini yüklemek için komut isteminde

gem install wxruby3

komutunu girdim ve sıkıntısız yüklendi. Sizde sorun olurssa bendeki versiyon Ruby ile deneme yaparsınız.

Hemen deneme yapmak için hello.rb adında bir dosya üretip içine şu kodu yazdım.

require 'wx'
Wx::App.run { puts 'Merhaba Dünya!' }

Aslında bu kod pek bir şey yapmıyor, eğer çalışırsa konsola Merhaba Dünya! yazıp bitiyor. Bu programın amacı WxRuby kütüphanesi kullanımının başarılı olduğunu görmek. Programı incelersek

require 'wx' komutu kurduğumuz WxRuby3 Gem dosyalarının programımızda kullanılacağını belirtiyor.

Wx::App sınıfı , ana Wx programı sınıfı. Bu sınıfın run metodunu çağırarak Wx uygulaması çalıştırılıyor. run metoduna verilen blok içindeki program bir Wx uygulaması olarak çalıştırılıyor. Dökümanına bakarsak run metodu Wx::App sınıfının bir oluşumunu üretiyor ve verilen kod bloğunu da bu nesnenin #on_init olayına bağlıyor, Yani nesne üretilince bloktaki kod çalışıyor.

Şimdi bir pencere üreterek ekranımızda gösteren bir kod yazalım bloğun içine.

require 'wx'
Wx::App.run { Wx::Frame.new(nil, title: 'Merhaba Dünya!').show }

Bu kod jenerik bir Frame (pencere) nesnesi üretiyor ve onun show metodunu çağırıyor. new metodunun ilk argümanı nil olarak verilmiş , bu Frame nesnesinin parent değeri. Bu değerin nil olması penceremizin bağımsız bir pencere olduğunu gösteriyor. Eğer buraya bir Wx::Window nesnesi beliritilirse penceremiz o nesneyle beraber minimize ve restore olacakmış (tabi kendi bağımsız olarak minimize de edilebilecek). İkinci argüman ise isimlendirilmiş olarak :title değerini belirtiyor, adından da anlaşılabileceği gibi pencere etiketinde yazan yazıyı belirliyor. İlerleyen zamanda başka argümanlar da kullanacağız.

show metodu uygulandığı pencereyi göstermek (ya da gizlemek) için kullanılıyor.

Şimdi programı çalıştıralım.

Karşımıza default boyutta ve default pozisyonda bir pencere açılacaktır.

Uygulama sınıfı tanımlamak

Daha karmaşık uygulamalar yazarken Wx::App sınıfından türetilmiş kendi sınıfımızı tanımlamak çok daha faydalı olacaktır. Bu sayede #initialize, #on_init ve #on_exit metodlarının üzerine yazarak istediğimiz davranışı göstermesini yönetebiliriz.

hello2.rb

require 'wx'

class MyApp < Wx::App
  def initialize
    super
    @frame = nil
  end
  attr_reader :frame
  
  # run deyince çalışacak
  def on_init
    @frame = Wx::Frame.new(nil, title: 'Merhaba Dünya!')
    @frame.show
  end
  
  # pencereyi kapatınca çalışacak
  def on_exit
    puts 'Çıkıyoruz.'
  end
end

MyApp.run

Burada #on_init ve #on_exit metodlarının üzerine yazılmıyor, orjinal Wx::App sınıfında bu metodlar yok. Bu yüzden tanımlamalarında super ifadesi kullanılmıyor.

Eğer sınıfta on_init tanımlı değilse run metodu argümanında verilen blok çalıştırılır. Eğer on_init metodu tanımlanmışsa (ki bizim ürettiğimiz sınıfta mevcut) o zaman run metodu bu on_init metodunu çalıştıracaktır. Bu yüzden kod bloğu bermeden sadece MyApp.run demek yeterli olmuştur.

Uygulamanın oluşum nesnesine uygulama hala aktifken

 Wx.get_app

olarak erişebiliriz.

Pencere sınıfı tanımlamak

Kendi pencere sınıfımızı tanımlayıp onu da kullanabiliriz. Böylece pencere içindeki elemanları daha düzenli kodlayabiliriz.

hello3.rb

require 'wx'

class TheFrame < Wx::Frame
  def initialize(title)
    super(nil, title: title)
    panel = Wx::Panel.new(self)
    button = Wx::Button.new(panel, label: 'Bana Tıklayınız')
    button.evt_button(Wx::ID_ANY) do
      Wx.message_box('Merhaba. Bana tıkladığın için teşekkürler!',
        'Buton olayı')
    end
  end
end

class MyApp < Wx::App
  def initialize
    super
    @frame = nil
  end
  attr_reader :frame
  
  # run deyince çalışacak
  def on_init
    @frame = TheFrame.new('Merhaba Dünya!')
    @frame.show
  end
  
  # pencereyi kapatınca çalışacak
  def on_exit
    puts 'Çıkıyoruz.'
  end
end

MyApp.run

ve çıktısı

Wx::Frame

Wx::Frame sınıfı oluşum kodu kalıbı

Wx::Frame.new(parent, id, title, pos = Wx::DEFAULT_POSITION, 
    size = Wx::DEFAULT_SIZE, style = Wx::DEFAULT_FRAME_STYLE, 
    name = Wx::FRAME_NAME_STR)

id : Pencereyi simgeleyen sayı , default -1

pos (Array(Integer, Integer), Wx::Point) : Pencrenin sol üst köşesinin ekrana göre pozisyonu - x, y

  frame = Wx::Frame.new(nil, pos: [150, 50])

size (Array(Integer, Integer), Wx::Size) : Pencere boyutu - genişlik, yükseklik

  frame = Wx::Frame.new(nil, size: [400, 200])

style (Integer) : Bir çok flag bitlerinden oluşan stil sayısı default olarak

    MINIMIZE_BOX | MAXIMIZE_BOX | RESIZE_BORDER | SYSTEM_MENU | CAPTION | 

    CLOSE_BOX | CLIP_CHILDREN

Örnek :

no_minimize.rb

require "wx"

Wx::App.run { 
  Wx::Frame.new(nil, 
    style: Wx::MAXIMIZE_BOX | Wx::RESIZE_BORDER | 
          Wx::SYSTEM_MENU | Wx::CAPTION |  Wx::CLOSE_BOX).show 
}

Boyut ve Pozisyon

Pencere boyutunu iki şekilde belirtiriz. Ya pencereyi oluştururken ya da sonradan set_size metodunu çağırarak.

set_size.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(parent, title)
    super(parent, title: title,
        size: [350, 250])
  end
end

Wx::App.run {
  Örnek.new(nil, 'Boyutlandırma').show
}

Sonradan boyutlandırırsak

require "wx"

class Örnek < Wx::Frame
  def initialize(parent, title)
    super(parent, title: title)
  end
end

Wx::App.run {
  p = Örnek.new(nil, 'Boyutlandırma')
  p.set_size 100,200,350,250
  p.show
}
# x=100 - y=200 - w=350 - h=250

ya da pozisyon belirtmeden

  p.set_size [350, 250]

Pencereyi istediğimiz yere kaydırabiliriz.

move.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(parent, title)
    super(parent, title: title,
        size: [300, 200])
    move [800, 200]
  end
end

Wx::App.run {
  Örnek.new(nil, 'Kaydırma').show
}

Ekranı Ortalamak

Pencerenin ekranı ortalaması için centre metodunu kullanırız.

merkezleme.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(parent, title)
    super(parent, title: title,
        size: [300, 200])
    centre
  end
end

Wx::App.run {
  Örnek.new(nil, 'Ortalama').show
}

Yatay ya da dikey olarak da ortalamak mümkün.

    centre  Wx::Orientation::VERTICAL
    centre  Wx::Orientation::HORIZONTAL

Menüler, Toolbarlar

Bir GUI uygulamasının temel öğelerinden biri menülerdir. Bir MenuBar nesnesi içinde Menu nesneleri barındırır.

Basit Menü

simple_menu.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [300, 200]
    set_title "Basit Menü"
    centre

    menubar = Wx::MenuBar.new
    file_menu = Wx::Menu.new
    file_item = file_menu.append(Wx::ID_EXIT, "&Çıkış", "Uygulamadan çıkış")
    menubar.append file_menu, "&Dosya"
    set_menu_bar menubar

    evt_menu(file_item) { close }
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Önce bir MenuBar nesnesi oluşturuyoruz. menubar = Wx::MenuBar.new

Sonra üzerine eklemek için bir Menu nesnesi ekliyoruz. file_menu = Wx::Menu.new

Menu nesnesine eleman ekliyoruz (popup içinde görünen) file_item = file_menu.append(Wx::ID_EXIT, "&Çıkış", "Uygulamadan çıkış")

& karakteri hangi harfin önüne gelirse Alt tuşuna basıldığında o harfin altı çizili olur (tuşlar ile menü seçme standardı)

Daha sonra Menu nesnemizi MenuBar nesnemize başlığını belirterek ekliyoruz. menubar.append file_menu, "&Dosya"

Son olarak Frame#set_menu_bar metodu ile MenuBar nesnemizi penceremize ekliyoruz. set_menu_bar menubar

Eklediğimiz menüye tıklanınca ne olacağını da evt_menu olay işleme metoduna verdiğimiz kod bloğunda belirtiyoruz. evt_menu(file_item) { close }

Burada tıklanınca Frame#close metodu çağrılıyor, yani pencere kapatılıp uygulama bitiriliyor.

İkonlar ve kısayollar

Sıradaki örneğimiz temelde önceki ile aynı, ancak bu sefer Wx::MenuItem oluşum nesnesini elle oluşturacağız.

icons_shortcuts.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [300, 200]
    set_title "İkonlar ve Kısayollar"
    centre

    menubar = Wx::MenuBar.new
    file_menu = Wx::Menu.new
    qmi = Wx::MenuItem.new(file_menu, Wx::ID_EXIT, "&Çıkış\tCTRL+Q")
    qmi.set_bitmap(Wx::Bitmap.new('exit_16.png'))
    file_menu.append qmi
    menubar.append file_menu, "&Dosya"
    set_menu_bar menubar

    evt_menu(Wx::ID_EXIT) { close }
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

qmi nesnesini oluştururken standart Wx::ID_EXIT id değerini kullandık. Wx::StandardID sınıfında tanımlı birçok hazır ID değeri var. Kendimizde bir sayı girebiliriz ama karışıklık olmasın diye hazırlardan işimize uyan varsa onu kullanmak daha iyidir.

Logo için resim dosyasını internetten bulup koydum.

Olay işleyici satırına

    evt_menu(qmi) { close }

de yazsak çalışır, id de versek çalışır. "&Çıkış\tCTRL+Q" değeri tuş takımı yardımıyla Alt+d+ç kombinasyonu ile çıkabileceğimiz gibi, hiç menü açmadan Ctrl+q basarak da uygulamadan çıkabiliriz. \t ile kısayol tuşu bildiriliyor.

Alt menü ve seperatörler

Her menüde alt menüler de olabilir. Bir de mesela Yeni Aç, Kaydet gibi menü elemanları ile Çıkış elemanı arasına bir ayırıcı (separator) koysak iyi olur.

submenu.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 250]
    set_title "Alt Menü"
    centre

    menubar = Wx::MenuBar.new
    file_menu = Wx::Menu.new

    file_menu.append Wx::ID_NEW, '&Yeni'
    file_menu.append Wx::ID_OPEN, '&Aç'
    file_menu.append Wx::ID_SAVE, '&Kaydet'
    file_menu.append_separator

    imp = Wx::Menu.new
    imp.append Wx::ID_ANY, "Haber listesi al..."
    imp.append Wx::ID_ANY, "Yer imlerini al..."
    imp.append Wx::ID_ANY, "Eposta al..."

    file_menu.append_sub_menu imp, "I&mport"

    file_menu.append Wx::ID_EXIT, "&Çıkış\tCTRL+Q"

    menubar.append file_menu, "&Dosya"
    set_menu_bar menubar

    evt_menu(Wx::ID_EXIT) { close }
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Alt menümüz yine bir Wx::Menu nesnesi ve üst menüye append_sub_menu metodu ile ekleniyor. İlk argüman eklenecek olan Wx::Menu nesnesi ikinci de menü başlık yazısı.

Ayrıcı eklemek içinse append_separator metodu kullanılıyor.

İstersek hazır bulunan ikonları menülere ekleyebiliriz.

    file_menu.append(Wx::ID_NEW, '&Yeni').
        set_bitmap(Wx::ArtProvider.get_bitmap(Wx::ART_NEW))
    file_menu.append(Wx::ID_OPEN, '&Aç').
        set_bitmap(Wx::ArtProvider.get_bitmap(Wx::ART_FILE_OPEN))
    file_menu.append(Wx::ID_SAVE, '&Kaydet').
        set_bitmap(Wx::ArtProvider.get_bitmap(Wx::ART_FILE_SAVE))

Dökümanda sabitler listesinde ART_ ile başlayan sabitleri deneyebilirsiniz.

Checkbox menü elemanı

3 çeşit menü elemanı vardır.

normal eleman
check eleman
radio eleman

Aşağıdaki örnekte check menü elemanı görülüyor. Check menü tiklenebilir bir menü elemanı görüntüsü verir.

checkmenu_item.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 250]
    set_title "Check Menü Elemanı"
    centre

    toolbar = create_tool_bar
    toolbar.add_tool Wx::ID_EXIT, "", 
      Wx::ArtProvider.get_bitmap(Wx::ART_QUIT)
    toolbar.realize

    statusbar = create_status_bar
    statusbar.set_status_text "Ready"

    menubar = Wx::MenuBar.new
    view_menu = Wx::Menu.new

    shst = view_menu.append Wx::ID_ANY, "Durum çubuğunu göster", 
        "Araç çubuğunu göster", Wx::ITEM_CHECK
    shtl = view_menu.append Wx::ID_ANY, "Araç çubuğunu göster", 
        "Araç çubuğunu göster", Wx::ITEM_CHECK

    view_menu.check shst.id, true
    view_menu.check shtl.id, true

    menubar.append view_menu, "&Görünüm"
    set_menu_bar menubar

    evt_menu(shst) { shst.checked? ? statusbar.show : statusbar.hide }
    evt_menu(shtl) { shtl.checked? ? toolbar.show : toolbar.hide }
    evt_menu(Wx::ID_EXIT) { close }
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Görünüm menümüzün içine iki tane check menü elemanı ekledik. Bu iki menü elemanı ile durum çubuğu ve araç çubuğunu gösterip gizliyoruz.

    shst = view_menu.append Wx::ID_ANY, "Durum çubuğunu göster", 
        "Araç çubuğunu göster", Wx::ITEM_CHECK
    shtl = view_menu.append Wx::ID_ANY, "Araç çubuğunu göster", 
        "Araç çubuğunu göster", Wx::ITEM_CHECK

view_menu nesnemizin append metodu ilk iki parametresini daha önce kullandık, id numarası ve menüde yazan yazı. Üçüncü parametre yardım yazısı, dördüncü ise kind (yani tür) bilgisi. Dördüncü argümanda Wx::ITEM_CHECK girerek menü elemanının bir tiklemeli menü elemanı olduğunu bildiriyoruz. Sonrasında

    view_menu.check shst.id, true
    view_menu.check shtl.id, true

satırları ile her iki menü elemanının da başlangıçta tiklenmiş olarak gelmesini sağlıyoruz. Bu arada deneme yapalım derken basit de olsa durum ve araç çubuğu eklemesini de gördük .

Menülere tıklanınca yapılacaklar

    evt_menu(shst) { shst.checked? ? statusbar.show : statusbar.hide }
    evt_menu(shtl) { shtl.checked? ? toolbar.show : toolbar.hide }

satırlarındaki olay işleme kodları ile belirleniyor. checked? metodu menü elemanının o anda seçili olup olmadığını test ediyor. show ve hide metodları ise hemen tüm kontrollerdeki gibi uygulandığı nesnenin görünmesi ya da gizlenmesini sağlıyor.

Bağlamsal menüler

Bağlamsal menü (context menu) değişik bağlamlarda değişik menülerin açılması şeklinde oluşan menülerdir. Örneğin tarayıcınızda sayfa içine sağ tıklarsanız başka menü, adrese sağ tıklarsanız başka bir menü, pencere başlığına tıklayınca başka bir menü açılır. Bunlara bazen popup menü de denir.

context_menu.rb

require "wx"

class MyPopupMenu < Wx::Menu

  def initialize(*args, parent)
    super(*args)

    @parent = parent

    mmi = Wx::MenuItem.new(self, Wx::ID_ANY, 'Minimize')
    append mmi
    evt_menu(mmi) { on_minimize }

    cmi = Wx::MenuItem.new(self, Wx::ID_ANY, 'Kapat')
    append cmi
    evt_menu(cmi) { on_close }
  end

  def on_minimize
    @parent.iconize
  end

  def on_close
    @parent.close
  end
end

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 250]
    set_title "Bağlamsal Menü"
    centre

    evt_right_down { |e| on_right_down(e) }
  end

  def on_right_down(e)
    popup_menu MyPopupMenu.new(self), e.get_position
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Öncelikle Wx::Menu sınıfından kendi MyPopupMenu sınıfımızı üretiyoruz.

    mmi = Wx::MenuItem.new(self, Wx::ID_ANY, 'Minimize')
    append mmi
    evt_menu(mmi) { on_minimize }

Bu satırlarla menümüze yeni bir menü elemanı ekliyoruz. Olay işlemeyi eğer kod bloğu içinde yapmayacaksak dışarıdan başka bir oluşum metodu da çağırabiliriz.

    evt_right_down { |e| on_right_down(e) }
  end

  def on_right_down(e)
    popup_menu MyPopupMenu.new(self), e.get_position
  end

Burada görülense dışarıdan çağrılan metoda olay bilgisini içeren bir nesne göndermek. Frame üzerinde sağ tıklanan yeri bulmak için get_position metodu ile olay bilgisinden çekiyoruz, ve popup orada açıyoruz.

Şimdi çalıştırıp pencere içinde bir yere sağ tıklarsak.

Araç Kutuları

Menülerde bir hiyerarşi içinde uygulamamıza gerekli tüm işlemleri menülerimizde toplarız. Araç kutularında ise çok kullanılan bazı işlemleri hızlıca erişilebilir biçimde penceremize koyarız. Wx::Frame nesnesinde araç kutusu oluşturmak için create_tool_bar metodunu çağırırız.

toolbar.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 250]
    set_title "Basit Araç Kutusu"
    centre

    toolbar = create_tool_bar
    qtool = toolbar.add_tool Wx::ID_EXIT, "Çıkış", 
      Wx::ArtProvider.get_bitmap(Wx::ART_QUIT)
    toolbar.realize

    evt_menu(qtool) { close }
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Örnekte araç kutumuzda bir tane araç butonu var ve uygulamadan çıkılmasını sağlıyor.

    toolbar = create_tool_bar

Araç kutumuzu üretir. Default olarak araç kutumuz yatay olur, sınır çizgileri yoktur ve ikonlar gösterir.

    qtool = toolbar.add_tool Wx::ID_EXIT, "Çıkış", 
      Wx::ArtProvider.get_bitmap(Wx::ART_QUIT)

Bu satır da bir araç butonu ekliyor. add_tool metodu ilk parametresi id değeri, ikinci ise etiket yazısı (ki bu yazı görünmez), üçüncüsü de butondaki resim.

    toolbar.realize

Bütün araç butonlarımız bittikten sonra realize metodu ile aktif hale getiriyoruz.

Eğer bir'den fazla araç kutusu olacaksa farklı davranmak gerekir.

toolbars.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 250]
    set_title "Araç Kutuları"
    centre

    vbox = Wx::VBoxSizer.new

    toolbar1 = Wx::ToolBar.new(self)
    toolbar1.add_tool Wx::ID_NEW, "", 
      Wx::ArtProvider.get_bitmap(Wx::ART_NEW)
    toolbar1.add_tool Wx::ID_OPEN, "", 
      Wx::ArtProvider.get_bitmap(Wx::ART_FILE_OPEN)
    toolbar1.add_tool Wx::ID_SAVE, "", 
      Wx::ArtProvider.get_bitmap(Wx::ART_FILE_SAVE)
    toolbar1.realize

    toolbar2 = Wx::ToolBar.new(self)
    toolbar2.add_tool Wx::ID_EXIT, "", 
      Wx::ArtProvider.get_bitmap(Wx::ART_QUIT)
    toolbar2.realize

    vbox.add toolbar1, 0, Wx::EXPAND
    vbox.add toolbar2, 0, Wx::EXPAND
    set_sizer vbox

    evt_tool(Wx::ID_EXIT) { close }
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Bu örnekte iki tane yatay araç kutusu üretiyoruz.

    toolbar1 = Wx::ToolBar.new(self)
...
    toolbar2 = Wx::ToolBar.new(self)

Bu iki araç kutusunu dikey bir yerleşim yardımcısına yerleştirdik.

Aktif-Pasif araç butonları

Aşağıdaki örnekte araç butonlarının aktif veya pasif olmasını göreceğiz. Ayrıca araç kutumuza bir ayırıcı da ekleyeceğiz.

undo_redo.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 250]
    set_title "Undo Redo"
    centre

    @count = 5

    vbox = Wx::VBoxSizer.new

    @toolbar = create_tool_bar
    tundo = @toolbar.add_tool Wx::ID_UNDO, "", 
      Wx::ArtProvider.get_bitmap(Wx::ART_UNDO)
    tredo = @toolbar.add_tool Wx::ID_REDO, "", 
      Wx::ArtProvider.get_bitmap(Wx::ART_REDO)
    @toolbar.enable_tool Wx::ID_REDO, false
    @toolbar.add_separator
    texit = @toolbar.add_tool Wx::ID_EXIT, "", 
      Wx::ArtProvider.get_bitmap(Wx::ART_QUIT)
    @toolbar.realize

    evt_tool(Wx::ID_UNDO) { on_undo }
    evt_tool(Wx::ID_REDO) { on_redo }
    evt_tool(Wx::ID_EXIT) { close }
  end

  def on_undo
    if @count > 1 and @count <= 5
      @count -= 1
    end

    if @count == 1
        @toolbar.enable_tool Wx::ID_UNDO, false
    end

    if @count == 4
        @toolbar.enable_tool Wx::ID_REDO, true
    end
  end

  def on_redo
    if @count < 5 and @count >= 1
      @count += 1
    end

    if @count == 5
        @toolbar.enable_tool Wx::ID_REDO, false
    end

    if @count == 2
        @toolbar.enable_tool Wx::ID_UNDO, true
    end
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Uygulamamızda 3 tane araç butonu ekledik , biri uygulamadan çıkmak için diğerleri de undo-redo (geri al - yinele) işlemlerini simüle etmek için.

    @toolbar.enable_tool Wx::ID_REDO, false
    @toolbar.add_separator

İlk başta redo butonu pasif durumda olacak , pasif yapmak için enable_tool metodunu kullanıyoruz. Araç butonu gruplarını birbirinden ayırmak için add_separator metodunu kullanıyoruz. Bu bazı işletim sistemlerinde bir çizgi eklerken mesela bende sadece butonlar arasını biraz boşlukla açıyor.

  def on_undo
    if @count > 1 and @count <= 5
      @count -= 1
    end

    if @count == 1
        @toolbar.enable_tool Wx::ID_UNDO, false
    end

    if @count == 4
        @toolbar.enable_tool Wx::ID_REDO, true
    end
  end

Undo ve redo işlemlerinin simülasyonunu yapıyoruz. 4 tane değişimimiz varmış ve geri alacak bir şey kalmayınca undo butonu pasif oluyor. İlk değişikliği geri alınca redo butonunu aktif ediyoruz. Benzer lojik redo butonu için de geçerli.

Bu bölümde WxRuby3 uygulama geliştirmede menüleri ve araç kutularını inceledik. Pencere yerleşimi ile devam edelim.

WxRuby'de Yerleşim Yönetimi

Tipik bir uygulamada birçok widget bulunur (ben bunlara 'zımbırtı' diyorum, bazen 'kontrol' dendiği de olur). Bu widget'lar başka barındırıcı widget'lar içine konarak yerleşimleri yönetilir. Wx kütüphanesinde yerleşimi sabit pozisyonlama ile ya da boyutlandırıcılar ile yönetmek mümkün, ve bu biraz karmaşık bir iş.

Mutlak pozisyonlama

Programlayıcı her kontrolün yerleşeceği yeri ve boyutlarını piksel olarak bildirir. Mutlak pozisyonlamanın bazı dezavantajları vardır.

Pencere boyutu değişince kontrollerin boyutu ve yerleşimi orantılı olarak değişmez. Bu yüzden genellikle boyutu değiştirilemeyen bilgilendirme pencerelerinde falan kullanılır.
Değişik işletim sistemlerinde (ve hatta ayarları değişik olan aynı sistemlerde bile) farklı görünen uygulamalar oluşur.
Uygulamanızda yazı font'unu değiştirmek yerleşimde bozulmalara sebep olabilir.
Yerleşimi değiştirmeye karar verdiğimizde tüm yerleşimi elden geçirmemiz gerekir ki bu hem sıkıcı hem de yorucu olur.

Bazen , mesela denemeler yaparken , mutlak pozisyonlama ile hızlıca deneme yapabiliriz. Ancak gerçek dünya uygulamaları, boyutlandırıcıların kullanılmasını gerektirir.

Uygulama örneğimizde resimler olacak ve pencere boyutu değiştirilince resimlerin pozisyonunun otomatik değişmediğini göreceğiz.

absolute.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 300]
    set_title "Mutlak Pozisyonlama"
    centre

    @panel = Wx::Panel.new(self)
    @panel.background_colour = "gray"

    load_images

    @mincol.position = [20, 20]
    @bardejov.position = [40, 160]
    @rotunda.position = [170, 50]
  end

  def load_images
    @mincol = Wx::StaticBitmap.new(@panel, Wx::ID_ANY,
            Wx::Bitmap.new("mincol.jpg", Wx::BITMAP_TYPE_ANY))

    @bardejov = Wx::StaticBitmap.new(@panel, Wx::ID_ANY,
            Wx::Bitmap.new("bardejov.jpg", Wx::BITMAP_TYPE_ANY))

    @rotunda = Wx::StaticBitmap.new(@panel, Wx::ID_ANY,
            Wx::Bitmap.new("rotunda.jpg", Wx::BITMAP_TYPE_ANY))
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Boyutlandırıcı kullanmak

Boyutlandırıcılar mutlak pozisyonlama için verdiğimiz tüm dezavantajları halleder. WxRuby kütüphanesinde şu boyutlandırıcılar var.

Wx::BoxSizer
Wx::StaticBoxSizer
Wx::GridSizer
Wx::FlexGridSizer
Wx::GridBagSizer

Wx::BoxSizer

Wx::BoxSizer boyutlandırıcı içine kontrollerimizi yatay ya da dikey olarak sıralayabiliriz. Karmaşık yerleşimler oluşturmak için bir boyutlandırıcı içine diğerini koyarak kombinasyonlar üretebiliriz.

    box = Wx::BoxSizer(integer orient)
    box.add(Wx::Window window, integer proportion=0, 
            integer flag=0, integer border=0)

Yeni boyutlandırıcı tanımlarken verilen orient parametresi yatay ya da dikey yerleşim için kullanılacağını belirtir. Buraya Wx::VERTICAL veya Wx::HORIZONTAL girilir. Boyutlandırıcıya bir kontrol eklemek için add metodunu kullanırız. Parametrelere bir bakalım.

proportion parametresi eklenen kontrolün boyutlandırıcının verilen yönünde nasıl yayılacağını ve boyutlandırıcı boyutu değişince nasıl davranacağını belirler. Değer 0 ise boyutunu değiştirmez, 1 ise diğer 1 olanlarla beraber orantılı yayılır, 2 ise diğerlerine oranla 2 katı yayılır.

flag parametresi ise kontrolün boyutlandırıcı içindeki davranışını daha ileri seviyelerde ayarlarız. Kontroller arasında çizilecek sınırları belirleyebiliriz, kontroller arasında verilecek boşluk belirleyebiliriz. Bir liste dökümanda var. Sınır bilgisi border değerinin hangi kenarlara uygulanacağı da bu flag içinde belirtilir. Flag bitleri birbirine veya işareti | ile bağlanır (ki zaten tamsayı değerler veya ediliyor). Örneğin Wx::LEFT | Wx::BOTTOM ile solda ve altta border değerini uygulayacağımızı belirtiriz.

Wx::LEFT
Wx::RIGHT
Wx::BOTTOM
Wx::TOP
Wx::ALL

Panele boyutlandırıcı eklerken set_sizer metodu kullanılır.

border.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 300]
    set_title "Border"
    centre

    panel = Wx::Panel.new(self)
    panel.background_colour = "#4f5049"

    vbox = Wx::BoxSizer.new(Wx::VERTICAL)

    midPan = Wx::Panel.new(panel)
    midPan.background_colour = "#ededed"

    vbox.add midPan, Wx::ID_ANY, Wx::EXPAND | Wx::ALL, 20
    panel.set_sizer vbox 
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Yukarıdaki kodda içteki paneli boyutlandırıcıya eklerken etrafında biraz boşluk bıraktık.

    vbox.add midPan, Wx::ID_ANY, Wx::EXPAND | Wx::ALL, 20

midPan panelini (bu arada isimi keşke mid_pan yazsam daha Ruby olurdu), vbox boyutlandırıcısına eklerken 20 piksel sınır belirledik. Sınırın her tarafta olması da flag değerine girilen Wx::ALL biti tarafından belirtiliyor.

Eğer Wx::EXPAND bayrağını kullanırsak widget'imiz boyutlandırıcı içinde yayılabildiği kadar her yöne yayılır. Son olarak widget'imizin yaslanmasını da bayraklar ile belirleyebiliriz.

Wx::ALIGN_LEFT
Wx::ALIGN_RIGHT
Wx::ALIGN_TOP
Wx::ALIGN_BOTTOM
Wx::ALIGN_CENTER_VERTICAL
Wx::ALIGN_CENTER_HORIZONTAL
Wx::ALIGN_CENTER

Çalıştıralım

Sınıfına git örneği

Önümüzdeki örnekte farklı birçok yöntem göreceğiz.

goto_class.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    #set_size [350, 300]
    set_title "Sınıfına Git"
    centre

    panel = Wx::Panel.new(self)

    font = Wx::SystemSettings.get_font(Wx::SYS_SYSTEM_FONT)
    font.point_size = 9

    vbox = Wx::BoxSizer.new(Wx::VERTICAL)

    hbox1 = Wx::BoxSizer.new(Wx::HORIZONTAL)
    st1 = Wx::StaticText.new(panel, label: 'Class Adı :')
    st1.font = font
    hbox1.add st1, 0, Wx::RIGHT, 8
    tc = Wx::TextCtrl.new(panel)
    hbox1.add tc, 1 
    vbox.add hbox1, 0, Wx::EXPAND|Wx::LEFT|Wx::RIGHT|Wx::TOP, 10 

    vbox.add -1, 10

    hbox2 = Wx::BoxSizer.new(Wx::HORIZONTAL)
    st2 = Wx::StaticText.new(panel, label: 'Eşleşen Sınıflar :')
    st2.set_font font
    hbox2.add st2
    vbox.add hbox2, 0, Wx::LEFT | Wx::TOP, 10

    vbox.add -1, 10

    hbox3 = Wx::BoxSizer.new(Wx::HORIZONTAL)
    tc2 = Wx::TextCtrl.new(panel, style: Wx::TE_MULTILINE)
    hbox3.add tc2, 1, Wx::EXPAND
    vbox.add hbox3, 1, Wx::LEFT|Wx::RIGHT|Wx::EXPAND, 10

    vbox.add -1, 25

    hbox4 = Wx::BoxSizer.new(Wx::HORIZONTAL)
    cb1 = Wx::CheckBox.new(panel, label: 'Büyük/Küçük Duyarlı')
    cb1.font = font
    hbox4.add cb1
    cb2 = Wx::CheckBox.new(panel, label: 'İçiçe Sınıflar')
    cb2.font = font
    hbox4.add cb2, 0, Wx::LEFT, 10
    cb3 = Wx::CheckBox.new(panel, label: 'Non-Project Sınıflar')
    cb3.font = font
    hbox4.add cb3, 0, Wx::LEFT, 10
    vbox.add hbox4, 0, Wx::LEFT, 10

    vbox.add -1, 25

    hbox5 = Wx::BoxSizer.new(Wx::HORIZONTAL)
    btn1 = Wx::Button.new(panel, label: 'Tamam', size: [70, 30])
    hbox5.add btn1
    btn2 = Wx::Button.new(panel, label: 'Kapat', size: [70, 30])
    hbox5.add btn2, 0, Wx::LEFT|Wx::BOTTOM, 5
    vbox.add hbox5, 0, Wx::ALIGN_RIGHT|Wx::RIGHT, 10

    panel.set_sizer vbox 
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Gördüğünüz üzere yerleşimleri kombinasyon yaptık. Bir dikey boyutlandırıcı, 5 yatay boyutlandırıcı var.

    font = Wx::SystemSettings.get_font(Wx::SYS_SYSTEM_FONT)
    font.point_size = 9

Sistemden SYS_SYSTEM_FONT yazı tipini alıp boyutunu 9 olarak ayarlayıp kontrollerimizde kullanıyoruz. Wx::SystemFont dökümanında sistemden alınan font isimleri var.

    vbox.add hbox1, 0, Wx::EXPAND|Wx::LEFT|Wx::RIGHT|Wx::TOP, 10 

    vbox.add -1, 10

Boyutlandırıcı içine eleman eklerken kenarlarında istediğimiz boşlukları bayrak bitleri ve border argümanı ile ayarlayabiliyorduk. Yukarıdaki satırda hbox1 eklenirken solu, sağı ve üstünde 10 piksel boşluk veriliyor.

Bir diğer yöntem boyutlandırıcı nesnenin add metodu ile direk olarak eklenen elemanlar arasına boşluk eklemek. Burada vbox.add -1, 10 satırı genişliği -1 yüksekliği 10 piksel bir boşluk ekliyor, yani dikey olarak bir sonra eklenecek elemanla araya 10 piksel boşluk ekliyor.

    vbox.add hbox5, 0, Wx::ALIGN_RIGHT|Wx::RIGHT, 10

Bu satır hbox5 içindeki iki butonu yerleşime eklerken sağa yaslayarak yerleştiriyor. Burada 3 konu önemli, orantı bilgisi (proportion), yaslanma biti ve Wx::EXPAND. Proportion sıfır olmalıdır ki butonlar pencereyle beraber büyümeye kalkmasın ne kadarsa o kadar kalsın. Wx::EXPAND kullanmamalıyız, butonlar yalnızca kendilerine ayrılan alanı kaplasın. Son olarak da Wx::ALIGN_RIGHT bayrağını da kullanmalıyız ki butonlar pencerenin sağ tarafına yerleştirilsin.

Çalıştıralım.

Wx::GridSizer

Wx::GridSizer kontrolleri iki boyutlu tablo şeklinde yerleştirir. Tablodaki her hücre eşit boyutlardadır.

Wx:GridSizer.new(rows, cols, vgap, hgap)

Üretici metodda satır sayısı, sütun sayısı, hücreler arası dikeydeki boşluk (satırlar arası) ve hücreler arası yataydaki boşluk değerlerini argüman olarak veriyoruz.

Örneğimizde bir hesap makinesinin görselini hazırlıyoruz.

calculator.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 300]
    set_title "Hesap Makinesi"
    centre

    menubar = Wx::MenuBar.new
    file_menu = Wx::Menu.new
    menubar.append file_menu, '&File'
    set_menu_bar menubar 

    vbox = Wx::BoxSizer.new(Wx::VERTICAL)
    display = Wx::TextCtrl.new(self, style: Wx::TE_RIGHT)
    vbox.add display, 0, Wx::EXPAND|Wx::TOP|Wx::BOTTOM, 4
    gs = Wx::GridSizer.new(5, 4, 5, 5)

    gs.add Wx::Button.new(self, label: 'Cls'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: 'Bck'), 0, Wx::EXPAND
    gs.add Wx::StaticText.new, 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: 'Close'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '7'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '8'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '9'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '/'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '4'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '5'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '6'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '*'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '1'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '2'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '3'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '-'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '0'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '.'), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '='), 0, Wx::EXPAND
    gs.add Wx::Button.new(self, label: '+'), 0, Wx::EXPAND

    vbox.add gs, 1, Wx::EXPAND

    set_sizer vbox 
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Bck ve Close butonları arasındaki grid hücresini nasıl boş bıraktığımıza dikkat edin , sadece boş bir Wx::StaticText nesnesi koyduk.

Kontroller grid boyutlandırıcıya eklendikleri sırayla görüntüde yerlerini alıyorlar. Soldan sağa, yukarıdan aşağı yönde ilerleniyor. Satır bittikçe alt satırın başına geçiliyor.

Wx::FlexGridSizer

Bu boyutlandırıcı Wx::GridSizer'a çok benzer. Bu da kontrolleri 2 boyutlu bir tabloda yerleştirir. Ama hücre boyutlarına biraz esneklik getirir. FlexGridSizer'da aynı satırdaki tüm hücreler aynı yüksekliktedir ve aynı sütundaki tüm hücreler de aynı genişliktedir. Ancak satırların yükseklikleri ve sütunların genişlikleri değişebilir.

Wx::FlexGridSizer.new(rows, cols, vgap, hgap)

Yeni nesne üretme metodu aynı argümanları alıyor.

Geliştiriciler sıklıkla verileri göstermek ve değiştirmek amaçlı diyalog pencereleri hazırlarlar. Wx::FlexGridSizer boyutlandırıcı bu diyalogların yerleşimini hazırlarken çok işe yarar.

review.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 250]
    set_title "Eleştiri"
    centre

    panel = Wx::Panel.new self

    hbox = Wx::BoxSizer.new Wx::HORIZONTAL

    fgs = Wx::FlexGridSizer.new 3, 2, 9, 25

    başlık = Wx::StaticText.new panel, label: "Başlık :"
    yazar = Wx::StaticText.new panel, label: "Yazar :"
    eleştiri = Wx::StaticText.new panel, label: "Eleştiri :"

    tc1 = Wx::TextCtrl.new panel
    tc2 = Wx::TextCtrl.new panel
    tc3 = Wx::TextCtrl.new panel, style: Wx::TE_MULTILINE

    fgs.add başlık
    fgs.add tc1, 1, Wx::EXPAND
    fgs.add yazar
    fgs.add tc2, 1, Wx::EXPAND
    fgs.add eleştiri, 1, Wx::EXPAND
    fgs.add tc3, 1, Wx::EXPAND

    fgs.add_growable_row 2
    fgs.add_growable_col 1

    hbox.add fgs, 1, Wx::ALL|Wx::EXPAND, 15
    panel.set_sizer hbox 
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Yukarıdaki örnekte eleştiri giriş diyaloğunu FlexGridSizer ile oluşturduk

    hbox = Wx::BoxSizer.new Wx::HORIZONTAL
....
    hbox.add fgs, 1, Wx::ALL|Wx::EXPAND, 15

Yatay boyutlandırıcıdan kenarlara 15 piksel boşluk bırakıyoruz.

    fgs = Wx::FlexGridSizer.new 3, 2, 9, 25

3 satır , 2 sütundan oluşuyor. Satırlar arasında 9 piksel , sütunlar arasında 25 piksel boşluk var.

    fgs.add başlık
....
    fgs.add tc3, 1, Wx::EXPAND

Kontrolleri hücrelere aynı GridSizer gibi sırayla ekliyoruz.

    fgs.add_growable_row 2
    fgs.add_growable_col 1

3. satır (index=2) ve ikinci sütunu genişleyebilir olarak belirtiyoruz. Bunları yapmazsak kontroller birbirine ayak uydurur ama boyutlandırıcı genişlemediği için pencereyle beraber büyümezler. Ayrıca büyümesini istediğimiz kontrolleri boyutlandırıcıya eklerken Wx::EXPAND bayrağını eklemeyi unutmayın.

Wx::GridBagSizer

GridBagSizer Wx kütüphanesinin en esnek boyutlandırıcısı.

Bu boyutlandırıcı elemanların ayrıca pozisyonlanmasına imkan tanır. Elemanlar bir'den fazla satır veya sütuna da yayılabilirler.

    Wx::GridBagSizer.new  vgap, hgap

Nesne oluşturucusu çok basittir. Argümanlar satırlar arası dikey boşluk ve sütunlar arası yatay boşluk değeri. Kontrolleri boyutlandırıcıya add metodu ile ekleriz.

add window, pos, span = Wx::DEFAULT_SPAN, flag = 0, border = 0, userData = nil

window boyutlandırıcıya eklenecek olan widget, pos satır-sütun olarak pozisyon değeri (Wx::GBPosition nesnesi), span kaç satır , kaç sütun işgal edeceği (Wx::GBSpan nesnesi), bayrafklar ve kenar boşluğu.

İsim değiştir diyalog örneği

İlk örneğimizde isim değiştirmek için bir diyalog penceresi çizelim. Sadece bir Wx::StaticText, bir Wx::TextCtrl ve iki Wx::Button widget var.

rename.rb

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 150]
    set_title "İsim Değiştir"
    centre

    panel = Wx::Panel.new self 
    sizer = Wx::GridBagSizer.new 4, 4

    text = Wx::StaticText.new panel, label: "Yeni isim :"
    sizer.add text, Wx::GBPosition.new(0, 0), Wx::DEFAULT_SPAN, 
            Wx::TOP|Wx::LEFT|Wx::BOTTOM, 5

    tc = Wx::TextCtrl.new panel
    sizer.add tc, Wx::GBPosition.new(1, 0), Wx::GBSpan.new(1, 4),
            Wx::EXPAND|Wx::LEFT|Wx::RIGHT, 5

    button_ok = Wx::Button.new panel, label: "Tamam", size: [90, 28]
    button_close = Wx::Button.new panel, label: "Kapat", size: [90, 28]
    sizer.add button_ok, Wx::GBPosition.new(3, 2)
    sizer.add button_close, Wx::GBPosition.new(3, 3), Wx::DEFAULT_SPAN, 
            Wx::RIGHT|Wx::BOTTOM, 10

    sizer.add_growable_col 1
    sizer.add_growable_row 2
    panel.set_sizer sizer 
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Pencereye büyük bir grid tablosu olarak bakmalıyız.

    text = Wx::StaticText.new panel, label: "Yeni isim :"
    sizer.add text, Wx::GBPosition.new(0, 0), Wx::DEFAULT_SPAN, 
            Wx::TOP|Wx::LEFT|Wx::BOTTOM, 5

"Yeni isim :" yazısı sol üst köşeye yerleştiriliyor, pozisyonu (0. 0). Solunda , üstünde ve altında da biraz boşluk bırakıyoruz.

    tc = Wx::TextCtrl.new panel
    sizer.add tc, Wx::GBPosition.new(1, 0), Wx::GBSpan.new(1, 4),
            Wx::EXPAND|Wx::LEFT|Wx::RIGHT, 5

Wx::TextCtrl nesnesi ikinci satırın ilk sütununa yerleştiriliyor (1, 0). Yayılma olarak 1 satır ve 4 sütuna yayılıyor (1, 4). Ve iki yanında 5 piksel boşluk bırakıyoruz.

    sizer.add button_ok, Wx::GBPosition.new(3, 2)
    sizer.add button_close, Wx::GBPosition.new(3, 3), Wx::DEFAULT_SPAN, 
            Wx::RIGHT|Wx::BOTTOM, 10

Butonlarımızı 4. satıra yerleştiriyoruz. 3. satırı boş bırakıyoruz TextCtrl ve butonlar arasında mesafe kalsınistiyoruz. "Tamam" butonunu 3. sütuna (3, 2) ve "Kapat" butonunu da 4. sütuna (3, 3) yerleştiriyoruz. Sadece "Kapat" butonuna sınır boşluğu veriliyor ama altında olan boşluk diğer butona da etki edecektir.

    sizer.add_growable_col 1
    sizer.add_growable_row 2

Son yapacağımız şey , yerleşimin boyut değişimlerine tepkisi. 2. sütun ve 3. satırı genişleyebilir yaptık. Bu iki satırı yoruma atın da ne olacağını görün.

Yeni sınıf diyaloğu örneği

Şimdiki örneğimizde JDeveloper'da bulunan yeni Java sınıf tanımlama diyaloğunu taklit edeceğiz.

require "wx"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 450]
    set_title "Create Java Class"
    centre

    panel = Wx::Panel.new self 
    sizer = Wx::GridBagSizer.new 8, 5

    text1 = Wx::StaticText.new panel, label: "Java Class"
    sizer.add text1, Wx::GBPosition.new(0, 0), Wx::DEFAULT_SPAN,
          Wx::TOP|Wx::LEFT|Wx::BOTTOM, 15

    icon = Wx::StaticBitmap.new panel, label: Wx::Bitmap.new('exec.jpg')
    sizer.add icon, Wx::GBPosition.new(0, 4), Wx::DEFAULT_SPAN,
          Wx::TOP|Wx::RIGHT|Wx::ALIGN_RIGHT, 5

    line = Wx::StaticLine.new panel
    sizer.add line, Wx::GBPosition.new(1, 0), Wx::GBSpan.new(1, 5),
          Wx::EXPAND|Wx::BOTTOM, 10

    text2 = Wx::StaticText.new panel, label: "Name"
    sizer.add text2, Wx::GBPosition.new(2, 0), Wx::DEFAULT_SPAN,
          Wx::LEFT, 10

    tc1 = Wx::TextCtrl.new panel
    sizer.add tc1, Wx::GBPosition.new(2, 1), Wx::GBSpan.new(1, 3), 
          Wx::TOP|Wx::EXPAND

    text3 = Wx::StaticText.new panel, label: "Package"
    sizer.add text3, Wx::GBPosition.new(3, 0), Wx::DEFAULT_SPAN,
          Wx::LEFT|Wx::TOP, 10

    tc2 = Wx::TextCtrl.new panel
    sizer.add tc2, Wx::GBPosition.new(3, 1), Wx::GBSpan.new(1, 3), 
          Wx::TOP|Wx::EXPAND, 5

    button1 = Wx::Button.new panel, label: "Browse..."
    sizer.add button1, Wx::GBPosition.new(3, 4), Wx::DEFAULT_SPAN,
          Wx::TOP|Wx::RIGHT, 5

    text4 = Wx::StaticText.new panel, label: "Extends"
    sizer.add text4, Wx::GBPosition.new(4, 0), Wx::DEFAULT_SPAN,
          Wx::TOP|Wx::LEFT, 10

    combo = Wx::ComboBox.new panel
    sizer.add combo, Wx::GBPosition.new(4, 1), Wx::GBSpan.new(1, 3),
          Wx::TOP|Wx::EXPAND, 5

    button2 = Wx::Button.new panel, label: "Browse..."
    sizer.add button2, Wx::GBPosition.new(4, 4), Wx::DEFAULT_SPAN,
          Wx::TOP|Wx::RIGHT, 5

    sb = Wx::StaticBox.new panel, label: "Optional Attributes"

    boxsizer = Wx::StaticBoxSizer.new sb, Wx::VERTICAL
    boxsizer.add Wx::CheckBox.new(panel, label: "Public"), 0,
          Wx::LEFT|Wx::TOP, 5
    boxsizer.add Wx::CheckBox.new(panel, label: "Generate Default Constructor"), 0,
          Wx::LEFT, 5
    boxsizer.add Wx::CheckBox.new(panel, label: "Generate Main Method"), 0,
          Wx::LEFT|Wx::BOTTOM, 5
    sizer.add boxsizer, Wx::GBPosition.new(5, 0), Wx::GBSpan.new(1, 5),
          Wx::EXPAND|Wx::TOP|Wx::LEFT|Wx::RIGHT , 10

    button3 = Wx::Button.new panel, label: 'Help'
    sizer.add button3, Wx::GBPosition.new(7, 0), Wx::DEFAULT_SPAN,
          Wx::LEFT, 10

    button4 = Wx::Button.new panel, label: "Ok"
    sizer.add button4, Wx::GBPosition.new(7, 3)

    button5 = Wx::Button.new panel, label: "Cancel"
    sizer.add button5, Wx::GBPosition.new(7, 4), Wx::GBSpan.new(1, 1),
          Wx::BOTTOM|Wx::RIGHT, 10

    sizer.add_growable_col 2
    sizer.add_growable_row 6

    panel.set_sizer sizer
    sizer.fit self
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Bu daha karmaşık bir yerleşim , hem GridBoxSizer hem de StaticBoxSizer kullanıyoruz.

    line = Wx::StaticLine.new panel
    sizer.add line, Wx::GBPosition.new(1, 0), Wx::GBSpan.new(1, 5),
          Wx::EXPAND|Wx::BOTTOM, 10

Bu yerleşimde iki grup elemanı birbirinden ayıran çizgi. 2. satıra yatay olarak tüm satırı kaplayacak şekilde yerleştiriyoruz.

    icon = Wx::StaticBitmap.new panel, label: Wx::Bitmap.new('exec.jpg')
    sizer.add icon, Wx::GBPosition.new(0, 4), Wx::DEFAULT_SPAN,
          Wx::TOP|Wx::RIGHT|Wx::ALIGN_RIGHT, 5

İlk satıra sağa yanaşmış olarak bir resimi StaticBitmap nesnesi olarak ekliyoruz.

    sb = Wx::StaticBox.new panel, label: "Optional Attributes"

    boxsizer = Wx::StaticBoxSizer.new sb, Wx::VERTICAL

StaticBox üzerinde bir etiket yazısı olan panel gibi düşünülebilir. Burada bir şey dikkatimi çekti , sb içine boxsizer'ı ekliyoruz ama daha sonra yerleşime kapsayıcı olan sb'yi değil bozsizer'ı ekliyoruz. Biraz araştırdım, aslında birinci satıra gerek olamadan sadece

boxsizer = Wx::StaticBoxSizer.new Wx::VERTICAL, panel, "Optional Attributes"

şeklinde yazarak boxsizer nesnesine zaten başlık ekleyebiliyoruz. Bu daha mantıklı ve kısa.

Çalıştı ama şu GridBagSizer#add metodunun argümanlarında bulunan Wx::GBPosition ve Wx::GBSpan nesnesi üretmelerine gıcık oldum, her seferinde bunları yazmak çok gıcık, araştırdım bir kısaltmasını da bulamadım. Oturdum kendime bir yardımcı kod dosyası hazırladım.

my_wx_helper.rb

class Wx::GridBagSizer
  wx_add = instance_method :add
  wx_redefine_method :add do |*args|
    if args[1].class == Array && args[1].length == 2
      args[1] = Wx::GBPosition.new args[1][0], args[1][1]
    end
    if args[2].class == Array && args[2].length == 2
      args[2] = Wx::GBSpan.new args[2][0], args[2][1]
    end
    wx_add.bind(self).call(*args)
  end
end

Bu kodu programlarıma dahil edersem pos ve span değerlerini array içinde verebiliriz. Kodumu bu yardımcı dosyamı kullanacak şekilde değiştirince birazcık sadeleşti.

require "wx"
require "./my_wx_helper"

class Örnek < Wx::Frame
  def initialize(*args)
    super(*args)
    init_UI
  end
  def init_UI
    set_size [350, 450]
    set_title "Create Java Class"
    centre

    panel = Wx::Panel.new self 
    sizer = Wx::GridBagSizer.new 8, 5

    text1 = Wx::StaticText.new panel, label: "Java Class"
    sizer.add text1, [0, 0], [1, 1],
          Wx::TOP|Wx::LEFT|Wx::BOTTOM, 15

    icon = Wx::StaticBitmap.new panel, label: Wx::Bitmap.new('exec.jpg')
    sizer.add icon, [0, 4], [1, 1],
          Wx::TOP|Wx::RIGHT|Wx::ALIGN_RIGHT, 5

    line = Wx::StaticLine.new panel
    sizer.add line, [1, 0], [1, 5], Wx::EXPAND|Wx::BOTTOM, 10

    text2 = Wx::StaticText.new panel, label: "Name"
    sizer.add text2, [2, 0], [1, 1], Wx::LEFT, 10

    tc1 = Wx::TextCtrl.new panel
    sizer.add tc1, [2, 1], [1, 3], Wx::TOP|Wx::EXPAND

    text3 = Wx::StaticText.new panel, label: "Package"
    sizer.add text3, [3, 0], [1, 1], Wx::LEFT|Wx::TOP, 10

    tc2 = Wx::TextCtrl.new panel
    sizer.add tc2, [3, 1], [1, 3], Wx::TOP|Wx::EXPAND, 5

    button1 = Wx::Button.new panel, label: "Browse..."
    sizer.add button1, [3, 4], [1, 1], Wx::TOP|Wx::RIGHT, 5

    text4 = Wx::StaticText.new panel, label: "Extends"
    sizer.add text4, [4, 0], [1, 1], Wx::TOP|Wx::LEFT, 10

    combo = Wx::ComboBox.new panel
    sizer.add combo, [4, 1], [1, 3], Wx::TOP|Wx::EXPAND, 5

    button2 = Wx::Button.new panel, label: "Browse..."
    sizer.add button2, [4, 4], [1, 1], Wx::TOP|Wx::RIGHT, 5

    boxsizer = Wx::StaticBoxSizer.new Wx::VERTICAL, panel, "Optional Attributes"
    boxsizer.add Wx::CheckBox.new(panel, label: "Public"), 0,
          Wx::LEFT|Wx::TOP, 5
    boxsizer.add Wx::CheckBox.new(panel, label: "Generate Default Constructor"), 0,
          Wx::LEFT, 5
    boxsizer.add Wx::CheckBox.new(panel, label: "Generate Main Method"), 0,
          Wx::LEFT|Wx::BOTTOM, 5
    sizer.add boxsizer, [5, 0], [1, 5], 
          Wx::EXPAND|Wx::TOP|Wx::LEFT|Wx::RIGHT , 10

    button3 = Wx::Button.new panel, label: 'Help'
    sizer.add button3, [7, 0], [1, 1], Wx::LEFT, 10

    button4 = Wx::Button.new panel, label: "Ok"
    sizer.add button4, [7, 3]

    button5 = Wx::Button.new panel, label: "Cancel"
    sizer.add button5, [7, 4], [1, 1], Wx::BOTTOM|Wx::RIGHT, 10

    sizer.add_growable_col 2
    sizer.add_growable_row 6

    panel.set_sizer sizer
    sizer.fit self
  end
end

Wx::App.run {
  Örnek.new(nil).show
}

Yerleşimler üzerine yazacaklarım bu kadar, sonraki sayfada olay işlemelere gireceğiz inşallah.

Şimdilik kalın sağlıcakla..

Sonraki -->

Boş Gezenin Boş Kalfası

Hakkımda

6 Mart 2025 Perşembe

WxRuby3 ile Masaüstü Uygulama Geliştirmek 1