Hoşgeldin Misafir

Eclipse ile JavaFX Projesi Oluşturma

SurHan

28 Kas 2017
4,186 Mesaj

Aktiflik

Seviye

Deneyim

TIM / GÖREV:
Java çok güçlü bir dil olmasına rağmen, bugüne kadar kullanıcı arayüzü tasarımı açısından rakiplerinin bir adım gerisinde kalmıştır. En yaygın kullanılan swing tabanlı kütüphaneler bile modern tasarımlar gerçekleştirme noktasında beklentileri karşılayamamaktadır. Java’nın bu eksikliği JavaFX teknolojisi ile çözüme kavuşmuştur. JavaFX hem masaüstü, hem mobil, hem de internet uygulamaları geliştirmek isteyen kullanıcılar için modern ve estetik tasarımlar oluşturmamızı sağlayan bir kütüphanedir.--


Tasarımlar FXML dili kullanılarak, XML benzeri bir şekilde oluşturulur.  Bu durum java kodlarıyla, tasarım kodlarını birbirinden tamamen ayrılmasını da mümkün hale getirmiştir. Ayrıca tasarımda CSS kullanılabilmesi diğer bir artı özellik olarak karşımıza çıkmaktadır.---

 JavaFX hakkında bu kadar bilgi verdikten sonra bir JavaFX projesini Eclipse programı ile nasıl oluşturabiliriz inceleyelim.--

JavaFX Projesi Oluşturmak için Gerekli Bileşenler---


1- JavaFx için öncelikle JavaFx SDK’nın yüklü olması gerekiyor. Daha önce ayrı bir paket halinde yüklenen bu SDK, 7u6 versiyonundan sonra Java JDK’nin içerisine entegre edilmiş durumda. Yani son sürüm SDK indirdiğinizde JavaFX paketin içerisinde geliyor.----
2- SDK’yı yüklemek yeni bir javafx projesi açmak için yeterli olmuyor. Eclipse için gerekli olan e(fx)clipseeklentisini sitesinden indirip kurmanız gerekli. Yükleme sonrasında artık yeni bir JavaFX projesi oluşturabilirsiniz.----
3- İlk projenizi oluşturduğunuzda kullanıcı arayüzü oluşturmak için projenize yeni bir FXML dosyası eklemeniz gerekiyor. Bu FXML dosyası üzerinde kolay tasarım yapabilmek için bir designer kullanmak daha avantajlı olduğundan son olarak JavaFX Scene Builder programını Oracle’in sitesinden indirip kuruyoruz. İhtiyacımız olan her şey bu kadar.----

İlk Projemizi Hazırlayalım----

Project Explorer üzerinde projemiz aşağıdaki gibi görüntüleniyor olması lazım. Eklediğimiz FXML uzantılı dosyası sağ tıklayarak Scene Builder ile açıyoruz.--


javafx-proje.jpg
-


Eclipse Project Explorer Penceresi-

Program ilk açıldığında bir adet boyutsuz AnchorPane sayfaya eklenmiş olarak geliyor. Boyutunu büyüterek 300×200 olarak ayarladıktan sonra basit bir Kullanıcı Giriş Formu tasarlayalım. Tasarım için aşağıdaki örnekten faydalanabilirsiniz.-

javafx-form.jpg
-


Scene Builder Programı-Form Tasarımı-
-

Tasarım bittikten sonra kullandığımız kontrollere sağ taraftaki Code panelinden bir fx:id atıyoruz. Bu o kontrole verdiğimiz isim olacak ve java kodları ile erişim yapmak için kullanacağız. Ben textfield’lara txtAdve txtSifre isimlerini verdim. Buton ise bir olayı tetikleyeceği için OnAction kısmına çalıştıracağı metodun ismini yazıyoruz. Buna da kontrolEt ismini koyalım. İşlem bittikten sonra  Kaydet diyerek Scene Builder’ ı kapatabilirsiniz.---
Şimdi projemizde ki Main.java dosyasını açarak kodları aşağıdaki gibi değiştiriyoruz.-


-

Kod:
package application;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
 
public class Main extends Application {
 
       @Override
       public void start(Stage primaryStage) {
             try {
                    AnchorPane root = (AnchorPane)FXMLLoader.load(getClass().getResource("MainUI.fxml"));
                    Scene scene = new Scene(root,300,200);
                    scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
                    primaryStage.setScene(scene);
                    primaryStage.show();
             } catch(Exception e) {
                    e.printStackTrace();
             }
       }
       public static void main(String[] args) {
             launch(args);
       }
}
 Kod içerisinde fxml dosyanızın ismini (bende MainUI.fxml) değiştirdikten sonra programı çalıştırabilirsiniz. Programın sorunsuz çalışıp, tasarımınızın karşınıza gelmesi gerekiyor.-
-


javafx-first-run.jpg
-



JavaFX İlk Çalıştırma-

Peki form üzerindeki kontrollere nasıl erişip kullanıcının girdiği veriler ile işlem yapacağız. Bu noktada projemize yeni class ekleyelim. Ben sınıfıma MainController.java ismini koydum.  Öncelikle classımıza Initializable sınıfını implements etmemiz gerekiyor. Aşağıdaki kodları inceleyiniz. @FXML diyerek FXML dosyamızdaki kontrollere atıfta bulunulduğuna dikkat edin.-
-


Kod:
package application;
import java.net.URL;
import java.util.ResourceBundle;
import javax.swing.JOptionPane;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextField;
 
public class MainController  implements Initializable {
 
       @FXML
       private TextField txtAd;
       @FXML
       private TextField txtSifre;
 
       @Override
       public void initialize(URL arg0, ResourceBundle arg1) {
             // TODO Auto-generated method stub            
       }
 
       @FXML
       private void kontrolEt(){
 
             if(txtAd.getText()=="admin" && txtSifre.getText()=="1234")
                    JOptionPane.showMessageDialog(null, "Giriş Başarılı","Bilgilendirme Mesajı",JOptionPane.INFORMATION_MESSAGE);
             else
                    JOptionPane.showMessageDialog(null, "Kullanıcı Adı veya Şifre Hatalı","Bilgilendirme Mesajı",JOptionPane.INFORMATION_MESSAGE);
       }
}




Son olarak bu yazdığımız MainController dosyamızı  FXML dosyamız ile ilişkilendirmemiz gerekiyor. FXML dosyamızı tekrar SceneBuilder ile açarak sol taraftaki Controller panelinden projemizde oluşturduğumuz MainController dosyamızı seçerek, kaydedip Scene Builder’i kapatıyoruz.-
-


javafx-controller-iliskilendirme.jpg
-


Controller İlişkilendirme-

Projeyi Run edip, çalışıp çalışmadığını kontrol edelim.-
-


javafx-last-run.jpg
-


Projenin Tamamlanmış Hali-



-