JavaFX Tutorial (Türkçe)

Kısım 1: Scene Builder

Screenshot AddressApp Part 1

Kısım 1 deki başlıklar

  • JavaFX i tanıma
  • JavaFX projesi oluşturma ve başlatma
  • Kullanıcı arayüzü tasarımı için Scene Builder kullanımı
  • Model-Görünüm–Kontrol (MVC) düzeni kullanarak temel uygulama yapısı

Gereksinimler

Eclipse Konfigürasyonu

Eclipse’e JDK 8 kullanmasını ve Scene Builder'ı nereden bulacağını söylememiz lazım:

  1. Eclipse Preferences'ı açın ve Java | Installed JREs e gidin.

  2. Add…‘e tıklayın, Standard VM seçin ve JDK 8 in kurulum Klasörünü seçin.

  3. Diğer JRE ve JDK ları kaldırın böylece JDK 8 varsayılan haline gelir.
    Preferences JDK

  4. Java | Compiler a gidin. Compiler compliance level ı 1.8 yapın.
    Preferences Compliance

  5. JavaFX preferences a gidin. Scene Builder exe dosasının yolunu gösterin.
    Preferences JavaFX

Faydalı Bağlantılar

Aşağıdaki bağlantıları yer işareti olarak kaydedebilirsiniz:

Şimdi başalayalım!


Yeni bir JavaFX projesi oluştur

Eclipse te (e(fx)clipse kurulu) File | New | Other… a gidin ve JavaFX Project seçin.
Proje ismini verin (ör. AddressApp) ve Finish e tıklayın.

Eğer otomatik olarak oluşturulmuşsa application paketini ve içeriğini silin.

Paketleri Oluştur

Başlangıçtan itibaren iyi yazılım tasarım ilkelerini takip edeceğiz. Çok önemli iyi ilkelerden birisi [Model-Görüntü-Kontrol (MVC)] ilkesidir (http://en.wikipedia.org/wiki/Model_View_Controller). Buna göre kodumuzu üç parçaya bölüyoruz ve her biri için bir paket oluşturuyoruz (src klasöre sağ tıkla, New… | Package):

  • ch.makery.address - kontrol sınıflarının birçoğunu içerir (= iş mantığı)
  • ch.makery.address.model - model sınıflarını içerir
  • ch.makery.address.view - görünümleri içerir

Not: Görünüm paketimizde doğrudan tek bir görünümle ilgili olan bazı kontroller de olacak. Bunlara görünüm-kontrolleri diyelim.


FXML Yerleşim Dosyası Oluşturma

Kullanıcı arayüzü oluşturmanın iki yolu var. Ya XML dosyası ile yapılır ya da herşey Java da kodlanır. Internete baktığınızda her ikisini de görürsünüz. Biz birçok kısım için XML (.fxml ile biten) kullanacağız. Bunun kontrol ve görünümü ayrı tutmanın daha temiz bir yolu olarak görüyorum. Dahası XML dosyamızı düzenlemek için Scene Builder'ı kullanabiliriz. Bu sayede doğrudan XML ile uğraşmayacağız.

Görünüm paketine sağ tıklayın ve PersonOverview isminde yeni bir FXML Document oluşturun.

New FXML Document

New PersonOverview


Scene Builder ile tasarım

Note: Eğer çalıştırmayı başaramazsanız tutorial'ın bu kısmının kaynağını indirin ve içindeki fxml ile deneyin.

PersonOverview.fxml'e sağ tıklayın ve Open with Scene Builder‘ı seçin. Şimdi Scene Builder'ı sadece AncherPane (soldaki Hierarchy altında) ile göreceksiniz.

(Eğer Scene Builder açılmazsa, Window | Preferences | JavaFX‘e gidin ve Scene Builder kurulumu için doğru yolu gösterin).

1.Hierarchy’den Anchor Pane‘i seçin ve Layout altında (sağ tarafta) boyutu ayarlayın:
Anchor Pane Boyutu

  1. Kütüphaneden ana alana sürükleyerek Split Pane (Horizontal Flow) ekleyin. Hierarchy‘deki Split Pane‘e sağ tıklayın ve Fit to Parent seçin.
    Fit to Parent

  2. Split Pane‘in sol tarafına TableView (Controls‘un altında) sürükleyin. TableView'ı seçin (sütun değil) ve aşağıdaki düzen kısıtlamalarını TableView’e uygulayın. Bir AnchorPane içerisinde her zaman için çapaları dört kenara balayabilirsiniz (Düzen hakkında daha fazla bilgi için).
    TableView Anchors

  3. Preview | Show Preview in Window menüsüne giderek doğru davranıp davranmadığına bakın. Pencerenin boyutunu değiştirmeyi deneyin. Kenarlara çapalandığı için TableView'ın da pencereyle beraber boyut değiştirmesi gerekir.

  4. Sütun metinlerini (Properties altında) “First Name” ve “Last Name” olarak değiştirin.
    Sütun Metinleri

  5. TableView‘ı seçin ve Column Resize Policy (Properties altında) olarak constrained-resize seçin. Böylece sütunların mevcut alanın tamamını kaplaması sağlanır.
    Column Resize Policy

  6. Sağ tarafa “Person Details” metiniyle bir Label ekleyin (ipucu: Label‘ı bulmak için aramayı kullanın). Yerleşimini çapaları kullanarak ayarlayın.
    Person Details Label

  7. Sağ tarafa GridPane ekleyin, seçin ve yerleşimini çapalarla düzenleyin (top, right and left).
    GridPane Layout

  8. Hücrelere aşaıdaki etiketleri (label) ekleyin.
    Not: GridPane’e satır eklemek için varolan satırlardan birisini seçin (sarıya döner) satır numarasına sağ tıklayın ve “Add Row"u seçin.
    Etiketleri Ekleme

  9. Alta bir ButtonBar ekleyin. Bar’a üç buton ekleyin. Şimdi çapaları (sağ ve alt) ButtonBar‘a bağlayın ki doğru yerde dursunlar.
    Button Group

  10. Şimdi aşağıdaki gibi birşey görmeniz gerekiyor. Preview menüsünü kullanarak yeniden boyutlanma davranışını test edin.
    Preview


Ana Uygulamayı Oluşturma

Kök yerleşim için başka bir FXML’e ihtiyacımız var. Bu dosya bir menu bar içerecek ve oluşturduğumuz PersonOverview.fxml'i içine alacak.

  1. View paketi içerisinde RootLayout.fxml isminde yeni bir FXML Document oluşturun. Bu defa kök elemanı olarak BorderPane seçin.
    New RootLayout

  2. Scene Builder’da RootLayout.fxml'i açın.

  3. BorderPane‘i Pref Width 600 ve Pref Height 400 olarak boyutlandırın.
    RootLayout Size

  4. TOP kısma MenuBar ekleyin. Menü fonksiyonlarını şimdilik gerçeklemeyeceğiz.
    MenuBar

JavaFX Ana Sınıfı

Şimdi uygulamamızı RootLayout.fxml ile başlatan ve merkeze PersonOverview.fxml ekleyen main java class oluşturmamız gerekiyor.

  1. Projeye sa tıklayın ve New | Other…‘ı seçin ve JavaFX Main Class‘ı seçin.
    New JavaFX Main Class

  2. Sınıfı MainApp olarak adlandıracağız ve ch.makery.address kontrol paketine koyacağız (not: Bu view ve model altpaketlerinin ana paketidir).
    New JavaFX Main Class

Oluşturulan MainApp.java sınıfı Application sınıfından türetilir ve iki metod içerir. Bu yapı JavaFX Uygulamasını başlatmak için gereken temel yapıdır. Bizim için en önemli kısmı start(Stage primaryStage) metodudur. Uygulama main metod içerisinden balatıldığında (launched) bu metod otomatik olarak çağırılır.

Gördüğünüz gibi start(...) metodu parametre olarak bir Stage alır. Aşağıdaki grafik tüm avaFX uygulamalarının yapısını göstermektedir:

New FXML Document
Image Source: http://www.oracle.com

Aynı tiyatro gibi: Stage (sahne) ana kapsayıcıdır ve genelde sınırları olan, küçültme, büyütme ve kapatma butonları olan bir Pencere'dir. Stage içerisine bir Scene (manzara) eklersiniz ve bu başka bir Scene ile değiştirilebilir. Scene içerisine AnchorPane, TextBox vb. gerçek JavaFX düğümleri eklenir.

Bu konuda daha fazla bilgi için şuraya bakın Working with the JavaFX Scene Graph.


MainApp.java'yı açın ve kodu aşağıdaki ile değiştirin:

package ch.makery.address;

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class MainApp extends Application {

    private Stage primaryStage;
    private BorderPane rootLayout;

    @Override
    public void start(Stage primaryStage) {
        this.primaryStage = primaryStage;
        this.primaryStage.setTitle("AddressApp");

        initRootLayout();

        showPersonOverview();
    }
    
    /**
     * Kök Yerleşimi Başlatır.
     */
    public void initRootLayout() {
        try {
            // Load root layout from fxml file.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(MainApp.class.getResource("view/RootLayout.fxml"));
            rootLayout = (BorderPane) loader.load();
            
            // Show the scene containing the root layout.
            Scene scene = new Scene(rootLayout);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * Kök yerleşim içerisinde kişi önizlemeyi gösterir.
     */
    public void showPersonOverview() {
        try {
            // Load person overview.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(MainApp.class.getResource("view/PersonOverview.fxml"));
            AnchorPane personOverview = (AnchorPane) loader.load();
            
            // Set person overview into the center of root layout.
            rootLayout.setCenter(personOverview);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
	/**
	 * Main stage i gönderir.
	 * @return
	 */
	public Stage getPrimaryStage() {
		return primaryStage;
	}

    public static void main(String[] args) {
        launch(args);
    }
}

Kod içerisindeki yorumlar ne olduğu hakkında fikir verecektir.

Uygulamayı çalıştırdığınızda bu kısmın başındaki ekran görünümüne benzer birey görmeniz gerekir.

Sık Karşılaşılan Sorunlar

Eğer JavaFX belirttiğiniz fxml dosyasını bulamazsa aşağıdaki hata mesajını alabilirsiniz:

java.lang.IllegalStateException: Location is not set.

Bu problemi çözmek için fxml dosyasının isminin yazımında hata yapmadığınızı tekrar kontrol edin!

Hala çalışştıramazsanız, tutorial'ın bu kısmının kaynağını indirip içindeki fxml ile deneyin.

Sırada Ne Var?

Tutorial Kısım 2 de AddressApp uygulamamıza biraz veri ve işlevsellik ekleyeceğiz.

İlginizi çekebilecek diğer makaleler

Comments