Ajanda

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 Yol Haritamız

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 Yol Haritamız

3. Downloading libcrypt ... Enter Edit File 40% Cancel Open Save Save As... Quit 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.) 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. 1. 2. 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ı? MFCve Her zaman "BSoD" Önce AWT, sonra JFCya da "Swing" Aslında, uzun hikaye. Kısacası, JFC, Sun firmasının Microsoft ‘un MFC ‘sine bir cevabı niteliği taşımaktadır.

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

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ı 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ışı

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 Yol Haritamız

11. File Edit Help CLICK ME 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. offset offset

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

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 Yol Haritamız

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

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

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

28. Tek seviye kalıtımı koruyoruz API’ye bakmayı unutmayın Örnek 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(); } } Yapıcıyı çağırıyoruz Dolayısıyla show metodu da çağrılmış oluyor.

29. Ö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şagiden 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 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 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. 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: • 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. Bileşen Örnekleri • 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.

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 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. Layout Managers 75 pixel aşağı Click 25 pixel sağa • 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); 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

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

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) WEST (batı) EAST (doğu) CENTER (merkez) SOUTH (güney)

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