MAT214 BİLGİSAYAR PROGRAMLAMA II DERSİ Ders 12: Grafik Kullanıcı Arayüzü (Graphical User Interface-GUI)

Transkript

1 MAT214 BİLGİSAYAR PROGRAMLAMA II DERSİ Ders 12: Grafik Kullanıcı Arayüzü (Graphical User Interface-GUI) Yard. Doç. Dr. Alper Kürşat Uysal Bilgisayar Mühendisliği Bölümü Ders Web Sayfası: 1

2 GRAFİK KULLANICI ARAYÜZÜ Şu ana kadarki programlarımızda konsol tipi program kullanımı gördük. Grafik program kontrolunda kullanırken program ekranımızda bir grafik penceresi olarak açık durur. Kullanıcı klavye, fare gibi ara birimler kullanarak programa komut gönderir. Komutlar dinleyici (Listener) dediğimiz alt metodlar tarafından alınarak gerekli işlemler yerine getirilir. 2

3 GRAFİK KULLANICI ARAYÜZÜ Örneğin bir düğme verilmişse biz düğmeye bastığımızda düğmeye bağlı düğme dinleyicisi harekete geçer ve içinde tanımladığımız komutları yerine getirir. Bu bölümde değişik kontrolleri ve işlevlerini ve bunları kullanarak Grafik ortamda programlamayı inceleyeceğiz. Burada tüm yaptığımız kullanıcı için daha etken bir kullanım platformu oluşturmaktır. Arka planda çalışacak olan sınıflar yine aynı yapıda olacaklardır. 3

4 GRAFİK KULLANICI ARAYÜZÜ Aşağıda GUI bileşenlerine örnekler verilmiştir : buttons, labels, text fields, check boxes, radio buttons, combo boxes, and sliders.

5 Olay Güdümlü Programlama Grafik arayüz için çalışan programlar olay güdümlü (event driven) olmalıdır. Bir olay programın içerisinde gerçekleşen button a ya da mouse a tıklanması gibi bir aktivitedir. Button a tıklanması gibi bir olaya karşı bir tepki verilecektir. Bir olay dinleyicisi (event listener) örneğin button un tıklanıp tıplanmadığını takip eder ve eğer tıklanmışsa buna karşılık olarak bir tepki verir. Verilen bu tepki programda ilgili bölümlerde yazılan kodlar ile ilgilidir. 12 5

6 GRAFİK KULLANICI ARAYÜZÜ ÖRNEK 1 import javax.swing.jframe; public class GUIOrnek1 { public static void main(string[] args) { final int WINDOW_WIDTH = 350; // Window width in pixels final int WINDOW_HEIGHT = 250; // Window height in pixels // Create a window. JFrame window = new JFrame(); // Set the title. window.settitle("a Simple Window"); // Set the size of the window. window.setsize(window_width, WINDOW_HEIGHT); // Display the window. window.setvisible(true); } } 6

7 Pencere Yaratmak Aşağıdakiimport ifadesi swing bileşenlerini kullanmak içindir: import javax.swing.*; main methodunda, iki adet sabit değer bulunmaktadır: final int WINDOW_WIDTH = 350; final int WINDOW_HEIGHT = 250; Bu sabit değerler açılacak pencerenin (frame) boyutlarını belirlemek içindir. Bunlar piksel değerleri olarak kullanılacaktır. Piksel, ekrandaki en küçük bir birim noktadır. 12 7

8 Pencere Yaratmak Öncelikle JFrame sınıfının bir nesnesini yaratmamız gerekiyor: JFrame window = new JFrame(); Bu ifade: Bellekte bir JFrame nesnesi yarattı settitle metodunun içerisine yazılan metin görüntülen pencerenin başlığı olacaktır. window.settitle("a Simple Window"); Bir JFrame başlangıçta görünmez durumdadır. 12 8

9 Pencere Yaratmak Aşağıdaki kod pencereyi görünür hale getirir: window.setvisible(true); setvisible methodu boolean bir parametre alır. true pencereyi görünür hale getirir. false pencereyi görünmez hale getirir. Pencerenin büyüklüğü ise şu şekilde ayarlanır: window.setsize(window_width, WINDOW_HEIGHT); 12 9

10 GRAFİK KULLANICI ARAYÜZÜ ÖRNEK 2 import javax.swing.*; public class GUIOrnek2 extends JFrame { final int WINDOW_WIDTH = 320; // Window width in pixels final int WINDOW_HEIGHT = 70; // Window height in pixels /** Constructor */ public GUIOrnek2() { // Set this window's title. settitle("a Simple Window"); // Set the size of this window. setsize(window_width, WINDOW_HEIGHT); // Create a label to display a message. JLabel messagelabel = new JLabel("This class has it's own main method."); // Add the label to the content pane. add(messagelabel); // Display the window. setvisible(true); } /** The main method creates an instance of the GUIOrnek2 class, which causes it to display its window. */ public static void main(string[] args) { GUIOrnek2 guiornek2 = new GUIOrnek2(); 10 }}

11 Bileşenleri Ekleme Swing bileşenlerin pencereye eklenmesi için çeşitli yöntemler sunar. 3 temel bileşen aşağıda verilmiştir: JLabel : Metin görüntüleyen alan. JTextField : Kullanıcının giriş yapabileceği metin kutusu. JButton : Tıklandığında bir işlem gerçektirecek olan düğme (button)

12 Kilometer Converter Uygulaması Kullanıcı Grafik Arayüzü Window Title Text Field Label Button 12 12

13 Bileşenlerin Eklenmesi private JLabel message; private JTextField kilometers; private JButton calcbutton; message = new JLabel( "Enter a distance in kilometers"); kilometers = new JTextField(10); calcbutton = new JButton("Calculate"); Yukarıdaki kod üç Swing bileşenini tanımlar ve bunlardan nesne yaratır

14 Bileşenlerin Eklenmesi Bir content pane JFrame nesnelerinin bir parçası olan bir konteyner dır. JFrame e eklenen her bileşen content pane e eklenmelidir. Bunu da JFrame sınıfının add methodu ile yaparız. content pane görünür değildir ve kenar çizgileri yoktur. Bir panel de GUI bileşenlerini yerleştirek için aynı amaçla kullanılabilir

15 Bileşenlerin Eklenmesi Panel ler GUI bileşenlerini tek başlarına görüntüleyemez. Paneller genellikle birbiriyle alakalı GUI bileşenlerini organize biçimde ekrana yerleştirmek için kullanılır. Paneller JPanel sınıfı kullanılarak yaratılır. private JPanel panel; panel = new JPanel(); panel.add(message); panel.add(kilometers); panel.add(calcbutton); 12 15

16 Bileşenlerin Eklenmesi Bileşenler önce panel üzerinde yerleştirilir ve daha sonra panel JFrame in content pane i içerisine konulur. add(panel); 12 16

17 GRAFİK KULLANICI ARAYÜZÜ ÖRNEK 3 1. KISIM import javax.swing.*; public class KiloConverter extends JFrame { private JPanel panel; // To reference a panel private JLabel messagelabel; // To reference a label private JTextField kilotextfield; // To reference a text field private JButton calcbutton; // To reference a button private final int WINDOW_WIDTH = 310; // Window width private final int WINDOW_HEIGHT = 100; // Window height public KiloConverter() { // Set the window title. settitle("kilometer Converter"); // Set the size of the window. setsize(window_width, WINDOW_HEIGHT); // Build the panel and add it to the frame. buildpanel(); // Add the panel to the frame's content pane. add(panel); } // Display the window. setvisible(true); 17

18 GRAFİK KULLANICI ARAYÜZÜ ÖRNEK 3-2. KISIM /** The buildpanel method adds a label, text field, and and a button to a panel. */ private void buildpanel() { // Create a label to display instructions. messagelabel = new JLabel("Enter a distance in kilometers"); } // Create a text field 10 characters wide. kilotextfield = new JTextField(10); // Create a button with the caption "Calculate". calcbutton = new JButton("Calculate"); // Create a JPanel object and let the panel // field reference it. panel = new JPanel(); // Add the label, text field, and button // components to the panel. panel.add(messagelabel); panel.add(kilotextfield); panel.add(calcbutton); public static void main(string[] args) { KiloConverter kc = new KiloConverter(); } } 18

19 KAYNAKÇA 1. Turhan Çoban, Java Bilgisayar Diliyle Programlama. 2. Starting Out with Java 5th Edition (Tony Gaddis): From Control Structures through Objects 19