Pembahasan dibagian 1

• Mengenal JavaFX
• Membuat dan memulai proyek JavaFX
• Menggunakan Scene Builder untuk desain antar muka pengguna
• Struktur dasar aplikasi menggunakan pola Model-View-Controller (MVC)

Prasyarat

• Java JDK 8 terbaru (termasuk JavaFX 8).
• Eclipse 4.4 atau lebih besar dengan e(fx)clipse plugin. Eclipse 4.3 atau lebih besar dengan e(fx)clipse plugin dar website e(fx)clipse. Sebagai alternatif bisa menggunakan situs pembaharuan untuk instalasi Eclipse.
• Scene Builder 8.0 (provided by Gluon because Oracle hanya memberikan ini dalam bentuk code).

Konfigurasi Eclipse

Kita perlu untuk memberitahu Eclipse untuk menggunakan JDK 8 dan dimana dapat ditemukannya Scene Builder:

1. Buka preferensi Eclipse dan arahkan ke Java | Installed JREs.

2. Klik Add…, pilih Standard VM dan pilih Directory instalasi JDK 8 anda.

3. Hapus JRE atau JDK lainnya, sehingga JDK 8 menjadi baku.
   

4. Arahkan ke Java | Compiler. atur Compiler compliance level to 1.8.
   

5. Arahkan ke preferensi JavaFX. Rincikan alamat pengeksekusi Scene Builder.
   

Link-link membantu

Anda mungkin ingin menandai tautan berikut:

• Java 8 API - JavaDoc kelas-kelas baku java
• JavaFX 8 API - JavaDoc untuk kelas-kelas JavaFX
• ControlsFX API - JavaDoc untuk kontrol-kontrol tambahan JavaFX ControlsFX project
• Oracle’s JavaFX Tutorials - Tutorial resmi JavaFX oleh Oracle

Sekarang, mari kita mulai!

Buat Sebuah Proyek JavaFX

Di Eclipse (dengan e(fx)clipse telah terpasang) arahakan ke File | New | Other… dan pilij JavaFX Project.
tetapkan nama proyek (contoh AddressApp) dan klik Finish.

Hapus paket application berserta isinya jika tela dibuat secara otomatis.

Membuat Paket-Paket

Tepat dimulai dari awal kita akan mengikuti prinsip-prinsip desain perangkat lunak yang bagus. Satu prinsip yang sangat penting bahwa Model-Tampilan-Pengendali (Model-View-Controller). Berdasar pada hal ini kita memisahkan kode kita menjadi tiga bagian dan membuat masing-masing paket (klik kanan pada src-folder, New… | Package):

• ch.makery.address - berisi umumnya kelas-kelas pengendali (=logika bisnis)
• ch.makery.address.model - memuat kelas-kelas model
• ch.makery.address.view - memuat tampilan-tampilan

Catatan: Paket tampilan kita juga akan memuat beberapa kontroller yang secara langsung terhubung pada tampilan. Sebuat saja view-controllers.

Buat berkas Tataletak FXML

Ada dua cara untuk membuat antarmuka pengguna. Entah menggunakan berkas XML atau langsung memprogram semuanya didalam Java. Carilah di internet, dan anda pasti menemukan 2 cara ini. Kita akan menggunakan XML (berakhiran .fxml) untuk kebanyakan bagian. Saya menemukan ini cara yang lebih bersih untuk menjaga controller dan view terpisah secara mandiri. Selanjutnya, kita dapat menggunakan Scene Builder untuk memperbaharui XML, yang berarti kita tidak akan langsung berhubungan dengan XML.

Klik kanan pada paket ch.makery.address.view dan buat berkas baru bernama PersonOverview.

Mendesain dengan Scene Builder

(jika Scene builder tidak dapat terbuka, pergi ke “Window | Prefrences | JavaFX” dan atur

Klik kanan pada PersonOverview.fxml dan pilih Open with Scene Builder. Sekarang anda seharusnya melihat Scene Builder dengan sebuah AncherPane (terlihat di bawah Hierarchy pada sisi kiri).

1. Pilih Anchor Pane di Hierarchy adan sesuaikan ukuran di bawah pada Layout (pada sisi kanan):
   

2. Tambah sebuah Split Pane (Horizontal Flow) tutorial/part1/anchor-pane-size.png

3. Tambah sebuah Split Pane (Horizontal Flow) dengan menyeret dari Library kepada area utama. Klik kanan pada Split Pane pada tampilan Hierarchy dan pilih Fit to Parent.
   

4. Seret TableView (dari Controls) ke bagian sisi kiri dari SplitPane. Pilih TableView (bukan sebuah kolom) dan atur kendala Tataletak pada TableView. Didalam AnchorPane kamu akan bisa selalu mengatur jangkar pada 4 perbatasan (Informasi lebih lanjut pada tataletak).
   

5. Pada menu Preview | Show Preview in Window untuk melihat apakah memiliki perilaku yang tepat. Coba ubah ukuran jendela. Ukuran TableView seharusnya mengikuti perubahan jendela, sebagaimana telah di kaitkan pada perbatasan.

6. Mengganti teks kolom (pada Properties) ubah ke “First Name” dan “Last Name”.
   

7. PilihTableView lalu constrained-resize untuk Column Resize Policy (pada Properties). Ini memastikan bahwa kolom-kolom akan selalu mengisi ruang kosong yang ada.
   

8. Tambahkan Label pada sisi kanan dengan teks “Person Details” (petunjuk: gunakan pencarian untuk menemukan Label). Sesuaikan tataletak menggunakan jangkar.
   

9. Tambahkan GridPane pada sisi kanan, pilih dan sesuaikan tataletak menggunakan jangkar (atas, kanan, dan kiri).
   

10. Tambah label-label berikut ke sel-sel.
    Catatan: Untuk menambah pada GridPane pilih sebuah baris(akan berwarna kuning), klik kanan dan pilih “Add Row”.
    

11. Tambah sebuah ButtonBar di bawah, lalu tambah 3 tombol pada bar. Sekarang, atur jangkar (kanan dan bawah) pada ButtonBar sehingga itu tetap pada tempat yang tepat.
    

12. Sekarang anda seharusnya melihat sesuatu seperti berikut. Gunakan menu Preview untuk mencoba perilaku perubahan ukuran.

Buat Aplikasi Utama

Kita perlu FXML baru untuk tata letak akar yang akan berisi sebuah palang menu dan membungkus PersonOverview.fxml yang baru kita buat.

1. Buat dokumen FXML didalam paket view bernama RootLayout.fxml. Kali ini pilih BorderPane sebagai elemen akar.

2. Buka RootLayout.fxml didalam Scene Builder.

3. Ubah ukuran BorderPane dengan Pref Width diatur ke 600 dan Pref Height diatur ke 400.
   

4. Tambahkan MenuBar ke celah teratas. Kita tidak akan menerapkan fungsi menu saat ini.
   

Kelas Utama JavaFX

Sekarang kita perlu membuat main java class yang menjalankan aplikasi kita dengan RootLayout.fxml dan menambah PersonOverview.fxml pada posisi tengah.

1. Klik kanan pada proyek dan pilih New | Other… kemudian JavaFX Main Class.
   

2. Kita akan panggil MainApp dan menaruh ini didalam paket Controller ch.makery.address (Catatan: ini adalah paket induk dari view dan anak paketmodel).
   

Kelas MainApp.java dihasilkan dari Application dan berisi dua metode. Ini adalah struktur dasa yang kita perlukan untuk memulai Aplikasi JavaFX. Bagian terpenting untuk kita adalah metode start(Stage primaryStage).Ini secara otomatis dipanggil dari dalam metode main.

Seperti yang anda lihat metode start(...) menerima Stage sebagai parameter. Grafik berikut menjelaskan struktur dari tiap aplikasi JavaFX:

Image Source: http://www.oracle.com

Seperti sebuah drama pertunjukan: Stage adalah penampung utama yang biasanya adalah Windowdengan sebuah batasan, dan beserta tombol-tombol mengecilkan, membesarkan, dan tutup. Didalam Stage anda menambah Scene yang tentunya dapat diganti oleh Scene lainnya. Didalam Scene simpul seperti AnchorPane, TextBox, dan lain-lain ditambahkan.

Untuk informasi lebih lanjut mengenai ini, beralih pada Working with the JavaFX Scene Graph.

Buka MainApp.java dan ganti kode yang ada dengan :

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();
    }
    
    /**
     * Initializes the root layout.
     */
    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();
        }
    }

    /**
     * Shows the person overview inside the root layout.
     */
    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();
        }
    }
    
	/**
	 * Returns the main stage.
	 * @return
	 */
	public Stage getPrimaryStage() {
		return primaryStage;
	}

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

Berbagai macam komentar seharusnya dapat memberikan anda beberapa petunjuk mengenai apa yang dilakukan.

Jika anda menjalankan aplikasi sekarang, anda seharusnya melihat sesuatu seperti tangkapan layar seperti di awal mula artikel.

Permasalahan yang sering terjadi

Jika JavaFX tidak dapat menemukan berkas fxml yang telah dispesifikasikan, anda mungkin mendapatkan pesan error seperti:

java.lang.IllegalStateException: Location is not set.

Untuk mengatasi ini, periksa duakali nama dari berkas fxml tersebut. Jika masih tidak berfungsi, unduh kode sumber dari tutorial ini, dan coba dengan fxml terlampir.

Berikutnya ?

Di Tutorial bagian 2 kita akan menambah beberapa data fungsi pada AddressApp.

Beberapa artikel menarik lainnya

• JavaFX Dialogs (resmi)
• JavaFX Date Picker
• JavaFX Event Handling Examples
• JavaFX TableView Sorting and Filtering
• JavaFX TableView Cell Renderer