Arayüz Tasarimi [Java] [GUI]

Birkaç hafta öncesine kadar yazdığım tüm programlar siyah ekranda çalışan, güzel bir arayüzü olmayan programlardı. Kullanımları zor, sıkıcı programlar. Ama bir süre önce okulda verilen projelerde grafiksel arayüzü olan programlar yazmamızı istediler. Bu durum sıkıldığım siyah ekrandan sonra yeni bir şeyler deneme fırsatı verdi. Bu süreçte Java programları için arayüz tasarımı kolaylaştıran bir eklentiden bahsedeceğim. Java için Eclipse IDE’sini kullanıyorum. Bu yazıda, bu IDE’de arayüz tasarımını kolaylaştıran Google Window Builder’den bahsedeceğim.

Kurulum

Eclipse IDE’si, yüklediğimiz eklentiler sayesinde birçok farklı durum için özelleştirebildiğimiz bir program. Bu yazıda Google Window Builder’ı yükleyerek arayüz tasarlarken sürekle-bırak kolaylığı sağlayacağız. Yazının devamında anlatacaklarımın düzgün çalışması için bir Java geliştirme ortamınızın kurulu olması gerekiyor.

• Eclipse menüsünden help >Install new software >add butonuna tıklayarak ilerliyoruz. Açılan pencereden “name” kısmına bir şeyler sallıyoruz. “Location” kısmına ise aşağdaki adresten aldığımız bağlantıyı yapıştırıyoruz.

https://eclipse.org/windowbuilder/download.php

(Bu bağlantıdan Eclipse sürümünüze gore uygun olanın bağlantısını alıyorsunuz.)

Sizin kulladığınız sürüm yoksa en son sürüm için en üsttekini alın, sorun çıkmıyor. Sürüm ismini başlangıçtaki ufak pencerede bulabilirsiniz.

• Gelen kısımdan “select all” diyip next/finish/accept seçimleriyle gelen pencereleri geçin. Hata gibi bir pencere gelirse ona da “OK” deyin.

(İlerleyen zamanlarda ekran görüntüleri de koyarım)

Arayüz Tasarlama

• Proje dosyası oluştururken , File/New/ Other Project dedikten sonra karşımıza bir sihirbaz geliyor. O pencerede WindowBuilder’ı buluyoruz. Ordan Swing Designer’ı seçip JFrame dedikten sonra class imini yazıp ilk adımı tamamlıyoruz.

• Normal projelerden farklı olarak sol alt köşede Source ve Design sekmeleri görünmesi gerekiyor. Source’da projenin kaynak kodları, Design’da ise projenin arayüzü görünüyor.

• “Palette” yazan kısımda arayüz tasarımımızda kullanacağımız bileşenler(components) bulunuyor. Sürekli-bırak demiştik ama aslında öyle değil. Önce kullanacağınız bileşeni seçin, ardından arayüzde yerleştirmek istediğiniz yere tıklayın oraya gelecektir.

• “Properties” penceresinde ise o an seçtiğimiz bileşenin özelliklerini kolayca değiştirebiliyoruz. Bileşenin değişken ismini, boyutlarını, yazısını, içeriğini, renklerini vs değiştirebiliyoruz.

• Başlangıç için JFrame, JPanel, Absolute Layout, JLabel, JTextField, JComboBox, JButton ile basit bir kaç uygulama yaparak tasarlama aşamasına alışabilirsiniz.

• Herhangi bir bileşen yerleştirmeden, Absolute Layout seçerek pencerenin üzerine tıklayın. Bu şekilde bileşenleri pencerede istediğiniz yere yerleştirebilirsiniz.

• Grafiksel arayüze sahip programlarda kullanıcının isteklerine karşılık vermek için her buton tıklaması, her klavye tuşu bir olaya sebep olur. Biz de bu olayları istediğimiz gibi kullanarak programıza interaktif bir hal katabiliriz. Bunu yapabilmek için mesela buton bileşenin üzerine gelip add event handler diyerek o butona tıklandığı zaman ne yapılacağını Source kısmında kodlayabilir.

Karşılabileceğiniz Sorunlar

Bileşenleri pencereye eklediniz, buton eklediniz. O butona tıklandığında bir şeyler olacak. Source kısmına geçip kodlamaya başladınız.

Bu noktada şöyle bir sorun ortaya çıkabiliyor. Bileşenleriniz oluşturuldukları satırda tanımlanmış, bu yüzden üst taraflarda ulaşamıyorsunuz, event handler kodu yazarken class içerisinde class yazdığınızdan diğer metotlara ulaşamıyorsunuz. Bu sorunu çözmek için:

Kendiniz kodlar üzerinde oynarak tanımlamalarını en üstte yapın, yine ulaşamadığınız yerlerde başlarına “final” koyun.

Ekran görüntülerinden hatalara ve olası çözümlerine bakabilirsiniz.

İlerleyen zamanlarda birkaç tane basit arayüz örneği koyabilirim. İyi çalışmalar.

Şu adreste kurulum farklı ama sonraki adımları daha detaylı, görsellerle birlikte anlatmış.