Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

Ajanda Grafiksel Kullanıcı Arayüzü -- Genel bakış -- Temel elemanlar Konteyner (Container) -- Genel bakış -- bileşim vs. kalıtım (composition vs. inheritance)

Benzer bir sunumlar


... konulu sunumlar: "Ajanda Grafiksel Kullanıcı Arayüzü -- Genel bakış -- Temel elemanlar Konteyner (Container) -- Genel bakış -- bileşim vs. kalıtım (composition vs. inheritance)"— Sunum transkripti:

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

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

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.) Enter File Edit Open Save Save As... Quit Downloading libcrypt... 40% Cancel Ok

4 GUI ‘nin popülaritesi İlk 1980 ‘lerde Macintosh tarafından tanıtıldı. İlk 1980 ‘lerde Macintosh tarafından tanıtıldı. Metin bazlı “komut satırı” ve “function key” bazlı arayüzlerin yerini alması tasarlanmıştı.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).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.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.

6 Neden Java ’da iki adet ayrı araç takımı? Önce AWT, sonra JFC JFC ya da "Swing" MFC 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. JButton Button AWT Swing

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ı 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... 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 biçimi ve görünümü yani UI etkileşimi ve davranışı GUI oluşturmayı iki adımda göreceğiz: “görünüş (view)”, ve sonra “kontroller (controls)” ya da event handling BUGÜN SONRA

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

11 GUI Dizayn & Oluşturma CLICK ME File Edit Help 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. offset

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

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

14 Konteynerler (Containers) Konteynerler (Containers) Konteynerler diğer bileşenleri içinde barındırabilen özel bileşenlerdir. ADIM 1 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. Panel Frame Applet Window JPanel JFrame Japplet JWindow AWT Swing Konteyner Örnekleri:

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(); System.out.println ("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. 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(); System.out.println ("Finished making GUI"); }// main }// class HelloGUI while(true){ //get user input // handle event } 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 Grafiksel Kullanıcı Arayüzü -- Genel bakış -- Temel elemanlar Konteyner (Container) -- Genel bakış -- bileşim vs. kalıtım (composition vs. inheritance) Bileşenler -- örnekler Yerleşim Planı Düzenleyicileri (Layout Managers) -- örnekler

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.1. Bileşim (Composition) -- Sınıfımız bir konteyneri barındırabilir 2.2. MyGUI java.awt.Frame 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 Örnek import java.awt.*; public class HelloComposition { Frame f; HelloComposition public HelloComposition(){ f = new Frame("Composition Test"); f.setSize(200,200); f.setBackground(Color.red); f.show(); } main public static void main (String[] arg) { HelloComposition h = new HelloComposition(); } Tek seviye kalıtımı koruyoruz API’ye bakmayı unutmayın Yapıcıyı çağırıyoruz Dolayısıyla show metodu da çağrılmış oluyor.

29 Örnek import java.awt.*; extends Frame public class HelloInheritance extends Frame { Frame f; public HelloInheritance(){ super 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(); } Küçük değişikliklerle bileşim yöntemine geçebiliriz

30 Kim daha iyi? Kalıtım Bileşim 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 Temel GUI davranışlarını değiştirmek için daha kolaydır Genelde daha fazla kod yazmak ve referans kullanmak gerekir GUI davranışlarını fazlaca değiştirmek istemiyorsanız faydalıdı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: Kalıtımla alınmış bir metod API içinde bir sınıf myFrame.setBackground(Color.red);

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 Grafiksel Kullanıcı Arayüzü -- Genel bakış -- Temel elemanlar Konteyner (Container) -- Genel bakış -- bileşim vs. kalıtım (composition vs. inheritance) Bileşenler -- örnekler Yerleşim Planı Düzenleyicileri (Layout Managers) -- örnekler

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 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 Canvas: 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. Bileşen Örnekleri

38 Button: 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. Bileşen Örnekleri

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 Grafiksel Kullanıcı Arayüzü -- Genel bakış -- Temel elemanlar Konteyner (Container) -- Genel bakış -- bileşim vs. kalıtım (composition vs. inheritance) Bileşenler -- örnekler Yerleşim Planı Düzenleyicileri (Layout Managers) -- örnekler

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 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); Layout Managers NOT: Orijin 0,0 Sol üst köşe Not: Button ’ların x ve y koordinatları kendi sol üst köşelerinin koordinatlarını ifade eder Click 75 pixel aşağı 25 pixel sağa Bu yaklaşımdaki hata nedir?

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...

46 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()); Layout Managers -- AWT tabanlı olanlar

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.

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

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

50 LayoutManagers: Constraints

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

52 LayoutManager: Örnek Sonuç:

53 BorderLayout yerleşimi planlar: NORTH 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. BorderLayout

54 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} BorderLayout--Örnek

55 Ö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); } } // 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.

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

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

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

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.

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);

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

66 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 GridLayout

67 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)); 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. GridLayout

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

69 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. BoxLayout (3, 1) ‘lik grid bileşenlerin ebatlarının değişmesi için baskı yapar. İstenen konteyner bileşen

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 User Name Password Please Log In 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 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 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 Sonuç: Hmmm. Bu sefer de, BorderLayout grid panelimizi deformasyona uğratmaktadır. Şimdiye kadarki çözümlerimiz basit uygulamalar için çözüm olabilir ancak bu problemi kesin olarak çözelim.

88 Düzeltme Bileşenlerin doğal ebatlarını korumasını istiyoruz: User Name 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 NamePassword box layout (X_AXIS) bunu sağlar.

89 Çözüm myContainer.add (Box.createHorizontalGlue()); myContainer.add(new Button ("hi")); Bu yay etkisini sağlamak için API’ lere başvurulur: 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); this.add(Box.createVerticalGlue()); } 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


"Ajanda Grafiksel Kullanıcı Arayüzü -- Genel bakış -- Temel elemanlar Konteyner (Container) -- Genel bakış -- bileşim vs. kalıtım (composition vs. inheritance)" indir ppt

Benzer bir sunumlar


Google Reklamları