Grafik Kullanıcı Arayüzü

MAT214 BİLGİSAYAR PROGRAMLAMA II DERSİ
Ders 8: Grafik Kullanıcı Arayüzü
(Graphical User Interface-GUI)
Yard. Doç. Dr. Alper Kürşat Uysal
Bilgisayar Mühendisliği Bölümü
[email protected]
Ders Web Sayfası: http://ceng.anadolu.edu.tr/Ders.aspx?dersId=107
1
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
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
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.
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
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
Pencere Yaratmak
• Aşağıdaki import 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
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
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
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
}}
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‐11
Kilometer Converter Uygulaması Kullanıcı Grafik Arayüzü
Text Field
Window Title
Label
Button
12‐12
Bileşenlerin Eklenmesi
private
private
private
…
message
JLabel message;
JTextField kilometers;
JButton calcButton;
= 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.
12‐13
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.
12‐14
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
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
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
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
KAYNAKÇA
1. Turhan Çoban, Java Bilgisayar Diliyle Programlama.
2. Starting Out with Java 5th Edition (Tony Gaddis): From Control Structures through Objects
19

Download Report