Ajanda Yol Haritamız Grafiksel Kullanıcı Arayüzü -- Genel bakış

... konulu sunumlar: "Ajanda Yol Haritamız Grafiksel Kullanıcı Arayüzü -- Genel bakış"— Sunum transkripti:

1 Ajanda Yol Haritamız Grafiksel Kullanıcı Arayüzü -- Genel bakış
-- Temel elemanlar Konteyner (Container) -- bileşim vs. kalıtım (composition vs. inheritance) Bileşenler -- örnekler Yerleşim Planı Düzenleyicileri (Layout Managers) Yol Haritamız

2 Ajanda Yol Haritamız Grafiksel Kullanıcı Arayüzü -- Genel bakış
-- Temel elemanlar Konteyner (Container) -- bileşim vs. kalıtım (composition vs. inheritance) Bileşenler -- örnekler Yerleşim Planı Düzenleyicileri (Layout Managers) Yol Haritamız

3 Grafiksel Kullanıcı Arayüzü
Grafiksel Kullanıcı Arayüzü, kullanıcı arayüzlerinden sadece biridir. . Kullanıcı, ekran üzerindeki nesnelerle, mouse ve klavye vasıtasıyla etkileşim içindedir. (ikon, düğme, kayan çubuklar, vb.) Downloading libcrypt ... 40% Cancel Enter File Edit Open Save Save As... Quit Ok

4 GUI ‘nin popülaritesi İlk 1980 ‘lerde Macintosh tarafından tanıtıldı.
Metin bazlı “komut satırı” ve “function key” bazlı arayüzlerin yerini alması tasarlanmıştı. Benzerliklere rağmen, GUI ‘ler platforma özeldir. (Windows 95/98/NT/1900, MacOS, X Windows look-and-feel standards). Bazı grafiksel araçlar (toolkits) şimdilerde platformlar arası geçişi sağlayan API ‘ler sağlamaktadır. Örnek: wxWindows, GTK+, Java.

5 Java’ nın GUI yetenekleri
Java, temel olarak GUI oluşturmak için iki araç takımı tanımlar: The Abstract Windowing Toolkit ("AWT"), ve The Java Foundation Classes ("Swing") Swing, sadece AWT ’nin genişletilmiş bir versiyonudur, ve daha çok kontrol ile rahatlık sağlar. 1. 2.

6 Neden Java ’da iki adet ayrı araç takımı?
Önce AWT, sonra JFC ya da "Swing" MFC ve Her zaman "BSoD" Aslında, uzun hikaye. Kısacası, JFC, Sun firmasının Microsoft ‘un MFC ‘sine bir cevabı niteliği taşımaktadır.

7 Uyarıcı Not Dedik ki, Java GUI için iki adet ayrı araç takımına sahiptir. AWT ve Swing bileşenlerini karıştırmak her zaman mantıklı olmayabilir. Öğrenme aşamasında, şimdilik sadece birini kullanın. Devam eden slaytlarda, temel bazı şeyleri göstermek için AWT bileşenleri kullanacağız. Daha sonra Swing bileşenlerine geçiş yapacağız. Bunları birbirinden nasıl ayırt edeceğiz? Genellikle, fakat her zaman değil, Swing bileşenlerinde, sınıf isminin önünde bir “J” harfi bulunur. AWT Swing Button JButton

8 Unutmayın Grafiksel elemanları kaynak kod içerisinde tanımlayacağız (text). Sürükle ve bırak şeklinde sistemler mevcuttur. Ama bunlarda bile, alt tarafta text bazlı bir sistem çalışır. Aslında, kod seviyesinde bu işlerin nasıl yapıldığını kavramak en güzeli. Java, değişik platformlar arasında geçiş yapabilecek şekilde tasarlanmıştır. Bu da, önemli imkanlar sunmaktadır.

9 Adım adım GUI tasarımı 1. 2. Yani UI biçimi ve görünümü BUGÜN SONRA
GUI oluşturmayı iki adımda göreceğiz: “görünüş (view)”, ve sonra “kontroller (controls)” ya da event handling. 1. Java ‘da, GUI oluşturabilmek için (1): Bir tane Konteyner (Container) belirleyin… bir adet Yerleşim planı düzenleyicisi (Layout Manager)... Bileşenleri (Components) ve/veya başka bir konteyneri yerleştirin... Yani UI biçimi ve görünümü BUGÜN SONRA 2. Java ’da, GUI ‘nin programımız için bir arayüz olarak görev yapabilmesi için (2) Dinleyiciler (Listeners) ve bileşen kaynaklı olaylar (component generated events) vasıtasıyla insan/bilgisayar diyaloğu kurun. yani UI etkileşimi ve davranışı 9

10 Ajanda Yol Haritamız Grafiksel Kullanıcı Arayüzü -- Genel bakış
-- Temel elemanlar Konteyner (Container) -- bileşim vs. kalıtım (composition vs. inheritance) Bileşenler -- örnekler Yerleşim Planı Düzenleyicileri (Layout Managers) Yol Haritamız

11 GUI Dizayn & Oluşturma Her GUI ‘de üç temel yapı mevcuttur:
Konteynerler (Containers) -- elemanları tutmak için örneğin, frame (çerçeve) Bileşenler (Components) -- Etkileşimi kuranlar örneğin, button (düğme) Yerleşim Planı Düzenleyicileri (LayoutManagers) -- Konteynerin içerisindeki elemanların yerleşimini planlama için kullanılan gizli algoritma. CLICK ME File Edit Help offset offset

12 Her GUI ‘de bulunan üç temel yapı nedir?
Quiz Her GUI ‘de bulunan üç temel yapı nedir? Konteynerler (Containers) 1. File Edit Help CLICK ME offset Bileşenler (Components) 2. Yerleşim Planı Düzenleyicileri (LayoutManagers) 3.

13 Agenda Yol Haritamız Grafiksel Kullanıcı Arayüzü -- Genel bakış
-- Temel elemanlar Konteyner (Container) -- bileşim vs. kalıtım (composition vs. inheritance) Bileşenler -- örnekler Yerleşim Planı Düzenleyicileri (Layout Managers) Yol Haritamız

14 Konteynerler (Containers)
ADIM 1 Konteynerler diğer bileşenleri içinde barındırabilen özel bileşenlerdir. Panel Frame Applet Window JPanel JFrame Japplet JWindow AWT Swing Konteyner Örnekleri: Not: Konteynerlerin yaptığı içerme görevi kalıtımla karıştırılmamalıdır. Bir çerçeve (Frame), düğmeleri (button) içinde barındırabilir, ama bu düğmelerin çerçevenin bir alt sınıfı olduğu anlamına gelmez.

15 Konteynerler (Containers)
Bir Container java.awt.Container ‘den gelen bir sınıftır. "Container“ sınıfı kendisi de bir bileşendir (Component). Konteynerler şunları içerebilir: kendilerine set edilmiş Layout ‘lar diğer bileşenler ya da başka konteynerler. Object Component Container

16 Örnek Basit bir çerçeve yapalım.
GUI ‘ler ile çalışırken sıkça API ‘lere başvurmak zorunda kalırsınız. Sınıflarınızın kalıtım yapısına dikkat edin

17 Örnek Şimdiye kadar, nasıl Frame oluşturulacağını öğrenmek için API kullandık. Yapılandırıcıları mevcuttur: public Frame (); public Frame (String strTitle); Şimdi, bir çerçevenin (Frame) ebatlarını nasıl belirleyebiliriz? Tekrar API ‘lere döneceğiz.

18 Örnek java.awt.Frame sınıfı kendi ebatlarını belirleyebilecek bir metoda sahip değildir. Ancak, böyle bir metod java.awt.Component sınıfından kalıtım yoluyla elde edilmiştir:

19 Örnek Aynı şekilde, java.awt.Frame içeisinde, çerçeveyi görünür olmasını sağlayacak herhangi bir metod mevcut değildir. Bunun yerine, java.awt.Window sınıfından, "show()" metodu kalıtımla alınmıştır.

20 Merhaba GUI import java.awt.*; public class HelloGUI {
public static void main (String[ ] arg) { System.out.println ("About to make GUI"); Frame f = new Frame ("Hello GUIs"); f.setSize( 200, 200 ); f.show(); ("Finished making GUI"); }// main }// class HelloGUI

21 (Gösteri)

22 Nasıl? Programımız çalışır, ve çerçevemiz hiçbir zaman kaybolmaz. Main metodunun sonuna ulaşıldığına neden program sonlanmamaktadır?

23 Açıklama Java VM, çerçevemizi oluşturduğu zaman bir çeşit “sonsuz döngüye” girer ve herhangi bir girdi (input) veya olay (event) için beklemeye geçer. while(true){ //get user input // handle event } import java.awt.*; public class HelloGUI { public static void main (String[ ] arg) { System.out.println ("About to make GUI"); Frame f = new Frame ("Hello GUIs"); f.setSize( 200, 200 ); f.show(); ("Finished making GUI"); }// main }// class HelloGUI Herhangi bir olay işleyici (event handler) yazmadığımız için, hiçbir “pencere kontrol” düğmesi görev yapmaz.

24 Çözüm Bu problemi çözmek için, bir olay işleyici (event handler) kodu yazmamız gerekir. Fakat, bir olay işleyici (event handler) kodu yazabilmemiz için bazı bileşenler oluşturmamız gerekir. … Öyleyse şimdilik, programdan çıkmak için Ctrl-C kullanın. GUI oluşturmanın temellerini iyice kavradıktan sonra bu probleme geri döneceğiz.

25 Ajanda Yol Haritamız Grafiksel Kullanıcı Arayüzü -- Genel bakış
-- Temel elemanlar Konteyner (Container) -- bileşim vs. kalıtım (composition vs. inheritance) Bileşenler -- örnekler Yerleşim Planı Düzenleyicileri (Layout Managers) Yol Haritamız

26 Dizayn fikri Üst seviye konteynerler ile çalışırken iki seçeneğimiz var: Kalıtım (Inheritance) -- sınıfımız bir konteyneri extend edebilir 1. java.awt.Frame MyGUI Bileşim (Composition) -- Sınıfımız bir konteyneri barındırabilir 2. MyGUI java.awt.Frame

27 Dizayn ile ilgili bir Not
IS-A HAS -A Ancak, kalıtımla bileşim arasındaki tansiyonu belirlemek bize bağlı….

28 Dolayısıyla show metodu
Örnek Tek seviye kalıtımı koruyoruz import java.awt.*; public class HelloComposition { Frame f; public HelloComposition(){ f = new Frame("Composition Test"); f.setSize(200,200); f.setBackground(Color.red); f.show(); } public static void main (String[] arg) HelloComposition h = new HelloComposition(); API’ye bakmayı unutmayın Yapıcıyı çağırıyoruz Dolayısıyla show metodu da çağrılmış oluyor.

29 Küçük değişikliklerle bileşim yöntemine geçebiliriz
Örnek Küçük değişikliklerle bileşim yöntemine geçebiliriz import java.awt.*; public class HelloInheritance extends Frame { Frame f; public HelloInheritance(){ f = new Frame super("Composition Test"); f this.setSize(200,200); f this.setBackground (Color.red); f this.show(); } public static void main (String[] arg) HelloInheritance h = new HelloInheritance(); h.show();

30 Kim daha iyi? Bileşim Kalıtım
GUI davranışlarını fazlaca değiştirmek istemiyorsanız faydalıdır Tek seviyeli kalıtım korunur “Boşa giden kalıtım" oluşur: Alt sınıf oluşturup hiçbir şeyin üzerine yazılmaz Genelde daha fazla kod yazmak ve referans kullanmak gerekir Temel GUI davranışlarını değiştirmek için daha kolaydır

31 Konteyner (Container) Özeti
Konteyner oluşturmadan önce API leri çalışmak gerekir. Sınıfların kalıtım yapısını izleyin. Üst seviye bir konteyner olay işleyici gerektirir. Konteynerleri özelleştirmek için birçok faydalı metod mevcuttur. Sadece API ‘lere bakın. Örneğin: myFrame.setBackground(Color.red); Kalıtımla alınmış bir metod API içinde bir sınıf

32 Konteyner (Container) Özeti
Aşağıdaki durumlarda genellikle bileşim yöntemini kullanırız: -- GUI davranışlarını değiştirmeyeceğimizi varsaydığımız durumlarda -- Fazla kalıtım ihtiyacı yoksa Kalıtım yöntemini ise genelde : -- GUI davranışlarını değiştirebileceğimiz durumlarda kullanırız

33 Ajanda Yol Haritamız Grafiksel Kullanıcı Arayüzü -- Genel bakış
-- Temel elemanlar Konteyner (Container) -- bileşim vs. kalıtım (composition vs. inheritance) Bileşenler -- örnekler Yerleşim Planı Düzenleyicileri (Layout Managers) Yol Haritamız

34 Bileşenler ADIM 2 Java ‘da GUI ile etkileşimin büyük çoğunluğu bileşenler üzerinde olur. Değişik etkileşim türleri için değişik bileşenler…Örneğin, düğmeler (buttons), etiketler (labels), vb.. Kullanıcıların bileşenler ile etkileşimleri olayları meydana getirir. Bu yüzden, olay dayalı programlama (event-driven programming) diye de adlandırılır. Kural olarak, bir bileşen diğer bileşenleri içeremez. Kural dışı durumlar: pop up menüler menu elemanlarını içerebilirler. Ayrıca, konteynerler kalıtıma bağlı olarak birer bileşendirler.

35 Bileşen Örnekleri Demo: HelloWidget

36 Konteyner de bir bileşendir
Bileşen Örnekleri Component etkileşimde bulunabileceğiniz genel yapı Button mouse ile üzerine basabileceğiniz bileşen türü Canvas üzerinde çizim yapabileceğiniz bileşen türü Checkbox checked ya da not checked durumlarına sahip bileşen türü Choice aşağıya doğru inen menü Container bileşenleri içinde barındıran genel yapı Panel aktif pencereyi ayırmak için kullanılan ve başka bir konteyner içinde kullanılan konteyner türü Label tek satır, sadece okunabilir text List String listesi Scrollbar yatay ya da dikey kayan çubuk TextComponent TextArea - çok satırlı, yazılabilir text alanı TextField - tek satırlı, yazılabilir text alanı Unutmayın: Konteyner de bir bileşendir

37 Bileşen Örnekleri Canvas: TextField:
tipik olarak, üzerinde şekillerin grafiklerin, resimleri vb. çizilebileceği yüzeydir. çizim işlemlerini gerçekleştirebilmek amacıyla kullanıcıyla etkileşimde bulunması gerekir, bunu mouse olayları ve mouse hareketinden faydalanarak yapar. TextField: tek satırlık veri giriş alanı teorik olarak uzunlukta sonsuz kullanıcının bir tuşa bastığını belirtmek için tuş (Key) olayları oluşturur. kullanıcı veri girişini bitirip enter tuşuna bastığında Action olayı meydana getirir. 38

38 Bileşen Örnekleri Button: Label:
basitçe mouse ile üzerine tıklayabileceğiniz bir bileşen türü üzerinde çalışılan grafiksel ortam her ne türden olursa olsun standart görünümü ve işlevi vardır. mouse ile üzerinde tıklanıldığında Action olayı meydana getirir. Label: tek satırlık sadece okunur text alanı. kullanıcı direkt kendisi, bu bileşenin text içeriğini değiştiremez; program içerisinden setText( ) metodu kullanılarak değiştirilebilir. genelde, bu bileşene bağlı olaylar tutulmaz. Ancak istenirse tutulabilir. genelde, tek yönlü bilgi kaynağı olarak, kullanıcıyı bilgilendirmek için kullanılır. 39

39 Bileşenleri ve Konteynerleri birleştirmek
Konteynerler aşağıdaki gibi bir metoda sahiptir: public void add (Component c) Bu metod, bileşenleri konteynerin içine eklememizi sağlar. Panel p = new Panel(); Button b1 = new Button ("Example 1"); Button b2 = new Button ("Example 2"); p.add (b1); p.add(b2); Bu örnekte, panel konteynerinin içine iki adet button ekleniyor.

40 Örnek import java.awt.*; public class HelloComponent { Frame f;
public HelloComponent(){ f = new Frame("Component Test"); f.setSize(200,200); f.setBackground (Color.red); Panel p = new Panel(); Button b = new Button ("Hello Components"); p.add(b); f.add(p); f.show(); } public static void main (String[] arg) new HelloComponent();

41 (Gösteri)

42 Ajanda Yol Haritamız Grafiksel Kullanıcı Arayüzü -- Genel bakış
-- Temel elemanlar Konteyner (Container) -- bileşim vs. kalıtım (composition vs. inheritance) Bileşenler -- örnekler Yerleşim Planı Düzenleyicileri (Layout Managers) Yol Haritamız

43 Yerleşim Planı Düzenleyicileri (LayoutManagers)
ADIM 3 Şimdi bileşenleri (Components) ve konteynerleri (Containers) oluşturabiliyoruz. Peki bunların yerleşim organizasyonu nasıl olacak? Bir bileşenin bir konteyner üzerindeki yerleşim yerini belirtmek için x ve y koordinatlarının ataması yapıldığı bazı metodlar mevcuttur. API ‘lere danıştığımızda, aşağıdaki gibi metodlara ulaşabiliriz: public void setLocation (int x, int y); public void setSize (int width, int height);

44 Bu yaklaşımdaki hata nedir?
Layout Managers Elemanların yerleşimini yaparken biraz önce de söylediğimiz gibi o elemana ait setLocation(int width, int height) metodunu çağırabiliriz: Frame f = new Frame(); f.setSize(500,500); Button myButton = new Button ("Click"); add(myButton); myButton.setLocation(25, 75); Click 75 pixel aşağı 25 pixel sağa NOT: Orijin 0,0 Sol üst köşe Bu yaklaşımdaki hata nedir? Not: Button ’ların x ve y koordinatları kendi sol üst köşelerinin koordinatlarını ifade eder 15

45 Layout Managers Bir bileşenin x,y koordinatlarının belirlenmesinde ortaya çıkan problemler Biraz kompleks GUI ‘lerde bu koordinatları belirlemek çok can sıkıcı olabilir. GUI ‘nize yeni bileşenler eklediğinizde eskilerinin yerlerinin değişmesi gerekiyorsa, eskilerinin x,y koordinatlarının yeniden hesaplanması gerekecektir. Eğer konteyner yeniden boyutlandırılırsa (örneğin kullanıcı pencereyi genişletebilir.), hesaplamalar yeniden yapılmalıdır. Çözüm: Konteynerin sunduğu alanın belli yüzdelerinin bileşenlere ayırın. Ya da bileşenlerinizin yerleşimi için algoritma geliştirin.. Ama, Java zaten bunu sizin için yapıyor. . . 16

46 Layout Managers -- AWT tabanlı olanlar
Java birçok layout manager sunmaktadır. Birçoğuna burada değineceğiz: BorderLayout GridLayout FlowLayout BoxLayout Bir konteynere hangi layout manager ‘ı kullanacağını belirtmek için aşağıdaki metodu çağırın: setLayout( ); ve parametre olarak da bir layout manager ismi verin. Örneğin: BorderLayout belirtmek için: setLayout (new BorderLayout()); 17

47 LayoutManager: İki yaklaşım
Kabaca, layout manager ‘ları ikiye ayırabiliriz: Bileşenlerine sınır atayanlar Atamayanlar. Sınır atamak ne anlama gelmektedir? Eğer bir layout manager bileşene sınır atıyorsa, o bileşene ait yerleşim bilgileri o nesneyle birlikte saklanır. 18

48 LayoutManagers: Sınırlar
BorderLayout, sınırları pusula yönlerine göre tayin eder: NORTH (kuzey) WEST (batı) EAST (doğu) CENTER (merkez) SOUTH (güney) 19

49 LayoutManagers: Sınırlar
BorderLayout bu sınır ölçütlerini bütün bileşenlere uygular, örneğin: this.setLayout (new BorderLayout()); Button e = new Button ("East"); Button w = new Button ("West"); Button n = new Button ("North"); add(e, "East"); // deprecated add("West", w); // works; deprecated add(n, BorderLayout.NORTH); // better 20

50 LayoutManagers: Constraints
21

51 LayoutManagers: Başka bir örnek
import java.awt.*; public class Test extends Frame { public Test() { super ("BorderLayout Demo"); this.setSize(200,200); this.setLayout(new BorderLayout()); this.add (new Button ("North"), BorderLayout.NORTH); this.add (new Button ("South"), BorderLayout.SOUTH); this.add (new Button ("East"), BorderLayout.EAST); this.add (new Button ("West"), BorderLayout.WEST); this.add (new Button ("Center"), BorderLayout.CENTER); } public static void main (String[ ] args) { new Test().show(); } // test 22

52 LayoutManager: Örnek Sonuç: 23

53 BorderLayout BorderLayout yerleşimi planlar: EAST NORTH WEST CENTER
SOUTH CENTER WEST EAST BorderLayout ‘a bileşen eklemek için bileşenin hangi bölgede duracağını belirleyin. Her bir bölgeye sadece bir tane bileşen ya da konteyner yerleştirilebilir. 24

54 BorderLayout--Örnek Hello! { çizim yapabileceğiniz bir canvas eklendi}
setLayout (new BorderLayout()); add(new Label ("Hello!"), "North"); Canvas myCanvas = new Canvas(); // more about Canvas in a moment add (myCanvas, "Center"); Hello! { çizim yapabileceğiniz bir canvas eklendi} 25

55 Örnek Çalışır mı? Deneyin ve görün… import java.awt.*;
public class HelloLayout { public static void main(String[] args) { Frame f = new Frame(); f.setSize(400,400); BorderLayout bord = new BorderLayout(); f.setLayout(bord); Button b = new Button ("Hello"); f.add(b, BorderLayout.SOUTH); } } // HelloLayout Çalışır mı? Deneyin ve görün…

56 (Gösterim)

57 Örnek import java.awt.*; public class HelloLayout { public static void main(String[] args) { Frame f = new Frame(); f.setSize(400,400); BorderLayout bord = new BorderLayout(); f.setLayout(bord); Button b = new Button ("Hello"); f.add(b, BorderLayout.SOUTH); f.show(); } } // HelloLayout Ahh.. Frame (çerçevemizin) bileşenimizin görünürlük özelliğini aktif hale getirmeyi unuttuk. Şimdi çalışacak. GUI dünyasına hoş geldiniz…

58 LayoutManager: Sınır yok
İkinci çeşit LayoutManager ‘lar barındırdıkları elemanlara sınır getirmeyenlerdir. Örnekler: GridLayout() FlowLayout() Sınırlar olmadan, yerleşim planlarının platform değişikliklerinde nasıl sonuçlanacağını tahmin edemezsiniz. 26

59 LayoutManager: Sınır yok
import java.awt.*; public class FlowTest extends Frame { String Labels[] = {"Short", "Short", "Long Label", "Really Long Label", "Really, really long"}; public FlowTest(){ this.setSize(400,200); setLayout(new FlowLayout()); for (int i = 0; i < Labels.length; i++){ Button temp = new Button (Labels[i]); add (temp); } public static void main (String arg[]){ new FlowTest().show(); } //class test 27

60 LayoutManager: Sınır yok
Sonuç: 28

61 LayoutManager: Sınır yok
ve ayrıca: 29

62 Gösterim

63 LayoutManager: Sınır yok
Not: Pixel, font, inset gibi kavramlar platformlar arası geçişte değişeceğinden, sınırları kullanmadan layout kullanmak değişik sonuçlar doğurur. Ders: Sınır kullanmayan layout manager ‘ ları az bileşen sayısına sahipseniz ya da meydana gelecek muhtemel yer değişikliklerinin bilincindeyseniz kullanın. 30

64 LayoutManager: Sınır yok
Sınır kullanmayan layout manager ‘lar yararsızdır diye düşünmeyin! En faydalı sınır tanımayan layout manager türü "GridLayout“. public GridLayout(); public GridLayout(int rows, int cols); public GridLayout (int rows, int cols, int hgap, int vgap); 31

65 GridLayout GridLayout, bir grid tanımlaması yapar:
setLayout (new GridLayout (rows, columns)); Örneğin: setLayout (new GridLayout(2,3)); sonuç: 32

66 GridLayout GridLayout ‘a bileşen eklerken BorderLayout ‘ta olduğu gibi daha önceden belirlenmiş alanlar mevcut değildir. Bunun yerine, aşağıda belirtildiği gibi bileşenler ya da konteynerler, grid ‘e eklendiği sıra numarasına göre dizilimleri gerçekleştirilir. Ayrıca, GridLayout değiştirilebilir, yani bileşenler grid üzerindeki boş alanları dolduracak şekilde uzatılabilir. 1 2 3 4 5 6 33

67 GridLayout Opsiyonel olarak, iki parametre GridLayout ile birlikte kullanılabilir. Bu parametreler, bileşenler arasındaki yatay ve düşey mesafelerin pixel cinsinden ayarlanmasını sağlar. setLayout (new GridLayout (rows, columns, hspace, vspace)); hspace, yatay boşluk miktarını belirler, ve vspace, düşey boşluk miktarını belirler. Örneğin, setLayout (new GridLayout (2, 2, 7, 5)); 34

68 GridLayout: Örnek import java.awt.*;
public class CalcPad extends Frame { public CalcPad() { setLayout(new GridLayout(5,3)); int off[]={-2,2,0}; for (int i=9; i >= 1; i--) add (new Button (""+(i+off[i%3]))); add (new Button (".")); add (new Button ("0")); add (new Button ("+/-")); add (new Panel()); } public static void main (String[] arg){ CalcPad ti = new CalcPad(); ti.setSize(150,150); ti.show(); }//CalcPad 35

69 BoxLayout konteyner bileşen İstenen
Bazen bileşenler, grid içinde tümü yatay ya da tümü düşey olarak yerleştirilmek istenebilir. GridLayout en iyi çözüm olmayabilir. Bileşenler grid içerisindeki boşluğu doldurmak için ebatları değiştiğinden içerikleri de deformasyona uğramış olur. konteyner bileşen İstenen (3, 1) ‘lik grid bileşenlerin ebatlarının değişmesi için baskı yapar.

70 BoxLayout BoxLayout bu özelliği sağlamaktadır. Aslında, FlowLayout ‘un özelliklerini yansıtmaktadır, ancak buna ek olarak dikey ve düşey kontrol ile daha başka özelliklere sahiptir. Yatay ve dikey yerleşim kontrolü

71 BoxLayout: Nasıl BoxLayout tek yapılandırıcıya sahiptir:
BoxLayout(Container target, int axis); ‘target’ ile ifade edilen alan, yerleşimini düzenlemek istediğimiz konteyner ‘dir. ‘axis’ ile gösterilen alan static bir alandır. BoxLayout.X_AXIS; BoxLayout.Y_AXIS; JPanel buttonPanel = new JPanel(); BoxLayout bLayout = new BoxLayout (buttonPanel, BoxLayout.X_AXIS); buttonPanel.setLayout(bLayout);

72 Sorular?

73 Alıştırma Please Log In User Name Password
Yukarıdaki gibi ekran çıktısı verecek bir sınıf tasarlayalım. Herhangi bir olay işleyici (event handler) yazılmayacak. Sadece, bileşenler,konteynerler ve Layout manager ‘lar ile ilgilenilecek.

74 Adım 1: Bileşenleri Listele
User Name Password Please Log In Etiketler(Label) Text Alanları (TextField)

75 Adım 2: Konteyner ’leri Listele
User Name Password Please Log In Panel (dış konteyner) Panel (muhtemelen bir grid?)

76 Adım 3: Layout ‘ları Seç User Name Password Please Log In Grid Layout

77 Adım 3: Layout ‘ları Seç User Name Password Please Log In BorderLayout

78 Adım 4: Kod import java.awt.*; public class LoginPanel extends Panel {
TextField password, username; Panel innerPanel; public LoginPanel () { this.setLayout(new BorderLayout()); innerPanel = new Panel(); innerPanel.setLayout(new GridLayout(2,2)); innerPanel.add(new Label("User Name")); username = new TextField(10); innerPanel.add(username); innerPanel.add(new Label("Password")); password = new TextField(10); innerPanel.add(password); this.add(innerPanel, BorderLayout.CENTER); this.add(new Label("Please Log In"), BorderLayout.NORTH); }

79 // class LoginPanel (con’td)…
public static void main(String[] args) { Frame f= new Frame(); f.setSize(400,400); f.add(new LoginPanel()); f.show(); } } // LoginPanel

80 Gösterim

81 Step 5: @%#&$&! Ne oldu?

82 Analiz Hatırlarsak, grid layout, bileşenleri müsait olan alana tam olarak yerleştirmek için bileşenlerin ebatlarıyla oynar ve deformasyona sebep olur.

83 Revizyon #1 User Name Password
Grid deformasyona sebep olduğu için, bileşenleri daha içte bir panelin içine yerleştireceğiz. Böylece, panel genişletilecek ama içerisindeki elemanlar deforme olmayacak.

84 Burada, bileşenleri eklemeden önce bir panelin içine sarmalıyoruz.
import java.awt.*; public class LoginPanel extends Panel { TextField password, username; Panel innerPanel; public LoginPanel () { this.setLayout(new BorderLayout()); innerPanel = new Panel(); innerPanel.setLayout(new GridLayout(2,2)); innerPanel.add(wrapInPanel(new Label("User Name"))); username = new TextField(10); innerPanel.add(wrapInPanel(username)); innerPanel.add(wrapInPanel(new Label("Password"))); password = new TextField(10); innerPanel.add(wrapInPanel(password)); this.add(innerPanel, BorderLayout.CENTER); this.add(new Label("Please Log In"), BorderLayout.NORTH); } public Panel wrapInPanel(Component c){ Panel pTemp = new Panel(); pTemp.setLayout(new FlowLayout()); pTemp.add(c); return pTemp; Burada, bileşenleri eklemeden önce bir panelin içine sarmalıyoruz.

85 /* Revize edilmiş LoginPanel sınıfının devamı */
public static void main(String[] args) { Frame f= new Frame(); f.setSize(400,400); f.add(new LoginPanel()); f.show(); } } // LoginPanel

86 Gösterim

87 Bu sefer de, BorderLayout grid panelimizi deformasyona uğratmaktadır.
Sonuç: Hmmm. Şimdiye kadarki çözümlerimiz basit uygulamalar için çözüm olabilir ancak bu problemi kesin olarak çözelim. Bu sefer de, BorderLayout grid panelimizi deformasyona uğratmaktadır.

88 Düzeltme Bileşenlerin doğal ebatlarını korumasını istiyoruz: User Name
box layout (X_AXIS) bunu sağlar. Ayrıca, bileşenlerimizin düşey olarak ta ortada dengeli olarak, sanki hem aşağıdan hem de yukarıdan birer yay baskı yapıyormuş gibi bileşenlerimizin gridin üstünden ve altından mesafeli durmasını istiyoruz. User Name Password

89 Çözüm Bu yay etkisini sağlamak için API’ lere başvurulur:
myContainer.add (Box.createHorizontalGlue()); myContainer.add(new Button ("hi")); Hi Horizontal glue bileşeni ileriye iter.

90 import java.awt.*; import javax.swing.*; public class LoginBoxPanel extends Panel{ TextField password, username; public LoginBoxPanel () { password = new TextField(10); username = new TextField(10); Panel pInner = new Panel(); pInner.setLayout (new BoxLayout(pInner, BoxLayout.Y_AXIS)); Panel pUser = getPanelPair(new Label("User Name"), username); Panel pPass = getPanelPair(new Label("Password"), password); pInner.add(pUser); pInner.add(pPass);

91 // constructor (cont’d)...
this.setLayout(new BoxLayout(this, BoxLayout.Y_AXIS)); Panel prompt = new Panel(); prompt.setLayout(new FlowLayout(FlowLayout.LEFT)); prompt.add(new Label ("Please Log In")); this.add(prompt); this.add(Box.createVerticalGlue()); this.add(pInner); } public Panel getPanelPair (Component first,Component second){ Panel pTemp = new Panel(); pTemp.setLayout (new BoxLayout(pTemp, BoxLayout.X_AXIS)); pTemp.add(first); pTemp.add(second); Panel pWrapper = new Panel(); pWrapper.setLayout(new FlowLayout()); pWrapper.add(pTemp); return pWrapper;

92 public static void main(String[] args) {
Frame f= new Frame(); f.setSize(400, 200); f.add(new LoginBoxPanel()); f.show(); }// main } // LoginBoxPanel

93 Gösterim

94

95 Sorular?

96