Selam sevgili 3-5 takipcim, sizi uzun süredir ihmal ettim, özellikle de Java for Kids konusunda. Bir süredir uzuuun bir dönem hiç ilgilenmek istemedim blogla. Özür dileyerek kaldığım yerden devam ediyorum. Herkese iyi çalışmalar.

Box Layout

java.swing.BoxLayout sınıfı, çoklu pencere bileşenlerini, yatay(x-eskeni) ve dikey(y-ekseni) olarak yerleştirmeye yarar. FlowLayout gibi değildir, pencerenin boyutları değiştiğinde, pencere kontrolleri bozulmaz. BoxLayout ile pencere kontrolleri değişik boyutlar alabilirler, bu GridLayout ta mümkün değildir.
Sıradaki iki satırlık kod, JPanel’de, box layout kullanarak dikey hizalama yapmaktadır.

Jpanel p1 = new JPanel();
setLayout(new BoxLayout(p1, BoxLayout.Y.AXIS));

Bu kodu kısaltmak için, BoxLayout referans nesnesi tanımlamadım, bu örneği oluşturmaktansa, setLayout() metoduna argüman olarak aktardım.

Grid Bag Layout

Bu kısımda java.awt.GridBagLayout manager kullanarak ve panelleri birleştirerek hesap makinesi penceresi oluşturmayı göstereceğim.
Hesap makinemiz, satırlar ve sütunlardan oluşmaktadır, fakat grid layout’ta tüm bileşenlerimiz aynı boyutta olmak zorunda. Bu bizim hesap makinemize uygun değil, çünkü makinemizde, üstte büyük bir yazı alanı var ve bu alan neredeyse 3 buton genişliğinde.
GridBagLayout, Grid sınıfının gelişmiş halidir, grid’de tüm hücreler aynı boyutta olmak zorundayken, girdbag’de farklı boyutlarda hücreler oluşturabiliriz. GridBagLayout sınıfı, GridBagConstraints isimli başka bir sınıfla beraber çalışmaktadır. Constrain(zorlamak), hücre özelliklerini (boyutlarını) belirlemek içindir ve GridBag kullandığımızda her hücre için bu özellikleri ayrı ayrı, ayarlamak zorundayız. Bir hücreye ait sınırlandırma(constraint), bileşen hücreye yerleştirilmeden önce ayarlanmalıdır. Örneğin, zorlamaların(constraint) özelliklerinden birisi izgaraGenisligi(gridwidth) olsun, aynı genişlikte başka hücreler oluşturmamıza izin verecektir.
GridLayout ile çalışırken, ilk önce, sınırlandırılan nesnenin bir örneğini oluşturmalı, sonra bunu özelliklerinin değerlerini belirlemeliyiz(bir kutu oluşturduğumuzu düşünün). Bunları yaptıktan sonra, bileşenimizi, oluşturduğumuz kutunun içindeki hücreye yerleştirebiliriz.

Üstteki resimde gridwidth ızgara genişliği, grid cell (0,0) ve (0,1) koordinatlar ızgara hücreleri, gridheight ızgara yüksekliğidir.

Aşağıdaki kodda, anlaşılması için birçok yorum satırı açıklaması bulunmaktadır.

// pencerenni bileşeni için GridBagLayout seçimi/ayarı yapılır

GridBagLayout gb = new GridBagLayout();
this.setLayout(gb);

// GridBagConstraints sınıfının bir örneği oluşturulur
// bu satırları grid hücresine eklemek istediğiniz
// her bileşen için tekrar yazmak gerekmektedir

GridBagConstraints sinir = new GridBagConstraints();

// hesap makinesinin yazı alanı için sınırların ayarlanması

// grid in x koordinatları

sinir.x = 0;

// grid in y koordinatları

sinir.y = 0;

// bu hücre de diğer hücreler gibi aynı yükseklikte olacak
// onun için bunu birkez tanımlıyoruz

sinir.gridheight = 1; (sinir.gridyukseklik.=1;)

// bu hücre diğer hücrelerden 6 kat daha geniştir

sinir.gridwidth = 6; (sinir.gridgenislik=6;)

// hücredeki tüm boşlukları dolduruyoruz

sinir.fill = sinir.BOTH;

// bu bileşenin yatay boşluklarını orantılıyoruz

sinir.weightx = 1.0;

// bu bileşenin dikey boşluklarını orantılıyoruz

sinir.weighty = 1.0;

// bileşenin içerideki yeri

sinir.anchor = sinir.CENTER;

goruntuAlani = new JTextField();

// bu alan için sınırların ayarlanması

gb.setConstraints(goruntuAlani,sinir);

// pencereye yazı alanı ekliyoruz

pencereicerigi.add(displayField);

Card Layout

Bir deste kâğıt düşünün, sırayla masa üstüne açılmış ve yalnızca en üstteki kartı görebiliyorsunuz. Ya da bir programda bulunan sekmeleri düşünün, bunu yapmak için java.awt.CardLayout manager yardımcı olacaktır.

Bir sekmeyi tıkladığımızda, ekranın içeriği değişecektir. Aslında, panellerin her biri için önceden yüklenmiş ve yerleştirilmiş bir ekran(görüntü) olmalıdır. Kullanıcı hangi kartı(sekme) tıklarsa, program o kartı görünür ve diğerlerini görünmez yapacak ve sadece o kartı getirmiş olacak.

Büyük ihtimalle bu layout’u kullanmayacaksınız, çünkü Swing kütüphanesinde bu işi yapacak daha iyi bir bileşen bulunmaktadır (JTabbedPane).

Layout Kullanmadan, Pencere Oluşturabilir Miyiz?

Tabi ki, oluşturacağınız pencerede, ekleyeceğiniz her bileşen için, bileşeni eklerken ekran koordinatlarını belirlemeniz gerekir. Bu durumda, sınıfınız açık bir şekilde layout kullanmayacağı durumunu bildirmelidir. Java da özel bir kelime/komut bulunmaktadır ve bu komut, “değeri yok” anlamına gelen “null” komutu/kelimesidir. Bu komutu, ileride pek çok defa kullanacağız, aşağıdaki örnek kod, herhangi bir layout kullanılmayacağı anlamına gelmektedir.

Eğer bunu yaparsanız, kodunuz, her pencere bileşeni için ayrı ayrı, sol üst köşenin koordinatları, genişlik, yükseklik değerlerini bildirmelidir. Sıradaki örnek, bir 40 piksel genişliği, 20 piksel yüksekliği olan ve 100 piksel sağda, 200 piksel aşağıda bir buton oluşturacaktır.

Pencere Bileşenleri

Bu kitapta, tüm Swing bileşenleri anlatmayacağım fakat bu bileşenlerle ilgili ayrıntılı bilgiyi ek okuma kısmında bulabileceksiniz, Swing Online Tutorial kısmında bulabilirsiniz ( fakat İngilizce). Bu ekte tüm Swing bileşenlerinin detaylı açıklamaları bulunmaktadır. Bizim hesap makinemiz sadece JButton, JLabel , JTextField kullanmakta, ve diğer kullanılabilecek olan bileşenlerin listesi:

Tabiki menüler(JMenu, JPopupMenu), popup pencereler, çerçeve içinde çerçeveler(JInternalFrame), standart pencereler(JFileChooser, JColorChooser, JOptionPane) oluşturabilirsiniz. Java, kullanılması mümkün olan tüm Swing bileşenlerini barındıran, üstün bir demo uygulama ile gelmektedir. Bu demo, Program Files\Java\jdk1.6.0_16\demo\jfc\SwingSet2 adresindedir. SwingSet2.html dosyasını açın ve inceleyin. Sıradaki resime benzer bir ortam ile karşılaşacaksınız:

Herhangi bir penceredeki araç kutusuna tıklayın ve bu Swing parçasının nasıl çalıştığını görün. Source Code sekmesinde, seçtiğiniz kısmın Java koduna erişebilirsiniz. Örneğin, soldan 4. Sekmeyi seçtiğinizde (JComboBox) aşağıdaki resme benzer bir pencereye erişeceksiniz.

Swing’de, pencerelerinizi güzelleştirmek için birçok farklı bileşen bulunmaktadır. (çn: ben baktım harbiden de süper şeyler var :) )

Bu bölümde, biz Swing bileşenlerini basitçe kodlayarak ve herhangi bir özel araç kullanmadan yazdık. Fakat, sürükle-bırak şeklinde bileşen ekleyebileceğimiz, özel araçlar bulunmaktadır. Bu araçlar, biz sürükle-bırak yaptıktan sonra eklemek istediğimiz Swing bileşeninin kodunu otomatik olarak ekleyecektir. Kolayca Swing ve SWT bileşenleri oluşturabileceğimiz, özel ve ücretsiz GUI (Graphic User Interface-grafiksel kullanıcı arayüzü-) araçlarından birisi, “jigloo “(bu ismi çok mu aramışlar nedir :) )’yu CloudGarden den bulabilirsiniz, bununla ilgili açıklama ek okuma bölümünde verilecektir, ki google den rahatça erişebilirsiniz.

Sonraki bölümde, bir pencerede gerçekleşen kullanıcı hareketlerine nasıl tepki-cevap verileceğini öğreneceksiniz.

Ek Okuma

Swing İçin Detaylı Kaynak:

java.sun/docs/boks/tutorial/uiswing/

Jigloo GUI Builder

cloudgarden.com/jigloo/index.html

JFormattedTextField Sınıfı Hakkında Detaylı Bilgi

java.sun da arama yapıp bulabilirsiniz.

Ödev-Pratik

1. HesapMakinesi sınıfımızı biraz geliştirerek, +,-,*,/ butonlarını, p2 adında bir panele yerleştirin ve bu paneli içerik kısmının sağ kısmına ekleyin.
2. JFormattedTextField sınıfı hakkında bilgi edindikten sonra, Hesap Makinemizde bu sınıfı kullanın.

İleri Seviye Ödev-Pratik

Oluşturduğumuz Hesap Makinesi ‘ni geliştirerek, nümerik butonları bir diziye aktarın.

Buttons[] SayiButonlari = new Buttons[9];

İpucu: bir döngü bu işlemi daha kolay şekilde yapmanıza yardımcı olacaktır. Ve 7. Bölümdeki Tic-Tac-Toe oyunumuzdaki koda bakabilirsiniz.
//iyi de ben daha 7. bölümü çevirmedim! Gördünüz mü dil bilmemek ne zor bir durum :)

Kaldığımız yerden devam edeceğiz ancak biraz ortada bi yerde kalmışız :)

Border Layout

java.awt.BorderLayout sınıfı, pencereyi kuzey, güney, doğu, batı ve merkez olmak üzere parçalara böler. Kuzey üst, güney alt, doğu sağ, batı sol parçalardır.
Aşağıdaki kod, bir Border Layout ile nasıl textfield (yazı alanı) oluşturulacağı verilmektedir.

BorderLayout bl = new BorderLayout();
this.setLayoutManager(bl);

JTextField txtDisplay = new JTextField(20);
this.add("North", txtDisplay);

5 alanın hepsine pencere kontrolleri yerleştirmemize gerek yoktur. Biz sadece kuzey, güney ve merkez alanları kullanacağız, doğu ve batı alanlarını kullanmadığımız için, kullandığımız alanların genişliği artmıştır, kullansaydık haliyle, azalacaktı.
Biraz sonraki hesap makinesi versiyonumuzda, BorderLayout kullanacağız.

Layout Manager (Yapılandırma Yöneticileri)nin Birleştirilmesi

Windows işletim sistemindeki Hesap Makinesini bilirsiniz, sizce GridLayout ile bu şekil bir hesap makinesi yapılabilir mi?

Maalesef, çünkü yazı alanı ile tuşlar farklı boyutlarda, bu şekilde bir hesap makinesi ya da uygulama yazmak için layout’ları birleştirmeliyiz.
Yeni hesap makinemizde layout manager’leri birleştirmek için;

• Penceredeki, içerik paneline, bir BorderLayout atayalım.
• Penceremizin kuzeyine(North) yazıları görüntülemek için bir JTextField ekleyelim.
• GridLayout ile p1 isimli bir pano oluşturup, 20 buton ekleyelim ve p1 panosunu, p1 panosunu da merkeze(center) yerleştirelim.
• GridLayout ile p2 isimli bir pano oluşturup, 4 buton ekleyelim ve bunu da sola(west) yerleştirelim.

Şimdi hesap makinemizin basit bir versiyonuna göz atalım:
(Linuxa geçtiğim için Linuxtaki görüntüyü veriyorum, zaten windows için de aynı şekilde)

Yeni bir, HesapMakinesi sınıfı oluşturup, programı çalıştırın. Örnekteki program yorumlarını okuyup nasıl çalıştığını anlamaya çalışın.

package com.erdoganborklu.javaforkids.calculator; // uygulamamızın hangi pakette olduğu

import javax.swing.*; //grafikler için swing kütüphanesini ekliyoruz

//layout managerler
import java.awt.GridLayout;
import java.awt.BorderLayout;

public class calculator {
	// Makinenin tüm bileşenlerinin tanımlanması
	JPanel windowContent;
	JTextField displayField;
	JButton button0;
	JButton button1;
	JButton button2;
	JButton button3;
	JButton button4;
	JButton button5;
	JButton button6;
	JButton button7;
	JButton button8;
	JButton button9;
	JButton buttonDecimal;
	JButton buttonEquals;
	JButton buttonPlus;
	JButton buttonMinus;
	JButton buttonMultiply;
	JButton buttonDivide;
	JPanel p1;
	JPanel p2;

	// yapıcı tüm bileşenleri hafızada oluşturuyoruz BorderLayout ve GridLayout bileşimini penceremize ekliyoruz

	public calculator() {
		windowContent = new JPanel();

		// bu pencere için layout Manager belirliyoruz
		BorderLayout b1 = new BorderLayout();
		windowContent.setLayout(b1);

		// yazının görüneceği alanı oluşturup pencerenin kuzey kısmına yerleştirelim

		displayField = new JTextField(30);
		windowContent.add("North", displayField);

		// JButton sınıfındaki etiketi parametre olarak belirleyen yapıcıyı kullanarak butonları oluşturalım

		button0 = new JButton("0");
		button1 = new JButton("1");
		button2 = new JButton("2");
		button3 = new JButton("3");
		button4 = new JButton("4");
		button5 = new JButton("5");
		button6 = new JButton("6");
		button7 = new JButton("7");
		button8 = new JButton("8");
		button9 = new JButton("9");
		buttonDecimal = new JButton(",");
		buttonEquals = new JButton("=");
		buttonPlus = new JButton("+");
		buttonMinus = new JButton("-");
		buttonMultiply = new JButton("*");
		buttonDivide = new JButton("/");

		// 10 nümerik ve 1 , 1 = olan 12 buton ve GridLayout içeren bir pano oluşturalım

		p1 = new JPanel();
		GridLayout g1 = new GridLayout(4, 3);
		p1.setLayout(g1);

		p2 = new JPanel();
		GridLayout g2 = new GridLayout(4,1);
		p2.setLayout(g2);

		// pencere kontrollerini panoya ekleyelim

		p1.add(button1);
		p1.add(button2);
		p1.add(button3);
		p1.add(button4);
		p1.add(button5);
		p1.add(button6);
		p1.add(button7);
		p1.add(button8);
		p1.add(button9);
		p1.add(button0);
		p1.add(buttonDecimal);
		p1.add(buttonEquals);

		//p2 panosunu da dolduralım

		p2.add(buttonPlus);
		p2.add(buttonMinus);
		p2.add(buttonMultiply);
		p2.add(buttonDivide);

		// p1 panosunu merkeze yerleştirelim
		windowContent.add("Center", p1);

		//p2 yi sağa
		windowContent.add("East",p2);
		// çerçeveyi oluşturup içerik olarak ayarlayalım

                //görünecek olan çerçeveyi oluşturup adını parametre olarak giriyoruz
		JFrame frame = new JFrame("Hesap Makinesi");
		frame.setContentPane(windowContent);

		// pencerenin boyutunu tüm kontrollere yetecek şekilde ayarlayalım
		frame.pack();

		// son olarak pencereyi görünür yapalım

		frame.setVisible(true);
	}

                                // ve main methodu içinde, uygulamamızın bir örneğini (instance) oluşturalım.
	public static void main(String[] args) {
		calculator calcu = new calculator();
	}

}

Hesap makinesinin görsel arayüzü hazır. Ancak daha gösterilecek olacak birkaç tane daha LayoutManager var, ondan sonra hesap makinemizi çalıştırmaya geçeceğiz.

Herkese iyi çalışmalar, eğlenceler :)

Layout Manager (Yapılandırma Yöneticileri)

Eski moda programlama dilleri, bizi pencere bileşenlerinin boyutunu ve kesin koordinatlarını ayarlamaya zorluyordu. Eğer sizin programınızı kullanacak olan bütün insanların ekran çözünürlüğünü (resolution) bilseydik gerçekten iyi bir iş olurdu. Bu arada, insanlar diye bahsettiğim sizin programınızı kullanacak olan kullanıcılar :) . Java pencere kontrollerinin kesin yerini atamaya gerek kalmadan, ekran üzerindeki bileşenlerinizi düzenlemeye, yerleştirmeye yardımcı olacak bir yapılandırma yöneticisine(layout manager) sahiptir. Layout manager kullanıcı ekranının pencere boyutları ne olursa olsun güzel bir görüntü sağlayacaktır.

Swing aşağıdaki Layout Managerleri içerir;

• FlowLayout
• GridLayout
• BoxLayout
• BorderLayout
• CardLayout
• GridBagLayout

Hangi layout manager’i kullanırsanız kullanın, bir programın gereksinimi olan bir örneğiyle desteklersiniz ve sonra bu nesneyi bir container’a atarsınız, örneğin simpleCalculator sınıfındaki panel’e atamak gibi.

Flow Layout

Bu layout bir penceredeki bileşenleri satır satır düzenleme matığıyla çalışır. Örneğin; labellar, textfieldlar, ve butonlar ilk olarak sanal bir satır olduğu varsayılarak sırayla eklenir. Daha sonra aktif olan satır dolduğunda, bu bileşenler alt sanıra geçilerek eklenir, bu şekilde devam eder. Eğer bir kullanıcı pencere boyutunu değiştirirse işte o zaman layout işi batırır.

Programımızın çalıştığı pencereyi, köşesinden tutup boyutunu değiştirin ve java.awt.FlowLayout managerin nasıl çalıştığına bakın.

Köşesinden tutup uzattığımızda;şekline geliyor ki bunu FlowLayout sağlıyor.

Şimdiki kod örneğinde ise, this komutu, simpleCalculator nesnesinin bir örneğini gösterir.

FlowLayout fl = new FlowLayout();
windowContent.setLayout(fl);

FlowLayout, hesap makinemiz için en iyi seçim değil, farklı bir şey deneyelim.

Grid Layout

java.awt.GridLayout sınıfı bize, bileşenlerimizi bir ızgara içinde, satırlar ve sütunlar içinde yerleştirmemizi sağlar. Bileşenlerimizi, ızgara içindeki bu hücrelere hayali olarak yerleştireceğiz. Kullanıcılar ekran ayarlarını değiştirirlerse, ızgaranın hücreleri de buna göre değişecektir, fakat birbirlerine göreli durumları, yerleri aynı kalacaktır. Bizim hesap makinemizde 7 farklı bileşen bulunmaktadır, üçer etiket ve alan, bir de buton. Bunları 4 satır ve 2 sütunluk bir ızgaraya yerleştirebiliriz (bir hücre boş kalacak).

GridLayout gl = new GridLayout(4, 2);
windowContent.setLayout(gl);

Hücreler arasına 5er piksellik yatay ve dikey boşluklar da ekleyebiliriz.

GridLayout gr = new GridLayout(4,2,5,5);

Hesap makinemize küçük değişiklikler yaptıktan sonra, aşağıda ki gibi daha güzel bir şekil vermiş olacağız.

Şimdi, simpleCalculatorGrid adında bir sınıf daha oluşturup kodları yazın ve derleyin.

package pack2;

import javax.swing.*;
import java.awt.GridLayout;

public class simpleCalculatorGrid {
	public static void main(String[] args) {
		// bir panel (pano) oluşturuyoruz
		JPanel windowContent = new JPanel();
		// bu pano için bir yapılandırma yöneticisi oluşturalım
		GridLayout gl = new GridLayout(4, 2);
		windowContent.setLayout(gl);
		// hafızada kontrolleri oluşturalım
		JLabel label1 = new JLabel("1. Sayı: ");
		JTextField field1 = new JTextField(10);
		JLabel label2 = new JLabel("2. Sayı: ");
		JTextField field2 = new JTextField(10);
		JLabel label3 = new JLabel("Toplam:");
		JTextField result = new JTextField(10);
		JButton OK = new JButton("Topla");
		// panonun kontrollerini ekleyelim
		windowContent.add(label1);
		windowContent.add(field1);
		windowContent.add(label2);
		windowContent.add(field2);
		windowContent.add(label3);
		windowContent.add(result);
		windowContent.add(OK);
		// pencere oluşturup panoyu ekleyelim
		JFrame frame = new JFrame("Toplama Makinesii :))");
		frame.setContentPane(windowContent);
		// pencere boyutunu ayarlayıp, görünür hale getirelim
		frame.setSize(375, 100);
		frame.setVisible(true);
	}
}

Çalıştırdığımızda;

ve pencere boyutunu değiştirdiğimizde;

Şeklinde oluyor.

Daha önce söylediğimiz gibi, GridLayout ile yaptığımızda ve pencerenin boyutu değiştiğinde bileşenlerimizin boyutları da değişti fakat birbirlerine göre konumlarında herhangi bir değişiklik olmadı.

Bu konuda bilmemiz gereken bir şey daha:

GridLayout kullandığımızda, oluşturduğumuz tüm ızgara hücreleri aynı boyutlara sahip olmaktadır.