Tuesday, June 17, 2014

JavaFx - Berpindah Scene (FXML) Part1

Pada Netbeans 7.4 ke atas (kalo g salah) sudah ada contoh perpindahan scene. Nama projectnya Login bla bla bla (lupa, maklum udah tua). Tapi, kalo dilihat-lihat scriptnya lumayan membingungkan terutama buat yang pertama kali atau baru-baru aja belajar javaFx ( seperti saya :D ). Nah, pada kesempatan kali ini saya mau mencoba menjelaskan "Bagaimana sih pindah-pindah scene(tampilannya) di JavaFx?". Lanjutgan~


Konsep

Perpindahan scene pada javaFx pada dasarnya adalah merubah apa yang ditampilkan di root panel nya (you don't say *plak). Pada saat pembuatan awal project (saya di eclipse btw), script yg digenerate adalah

Mari kita perhatikan pada setScene. setScene merupakan method yang digunakan untuk mengeset scene(you don't say lagi). Dengan method inilah nanti kita bisa mengubah-ubah scene yang ditampilkan, terutama yang melalui fxml. Caranya, kita buat root pane nya, di script di atas yaiut BorderPane, setelah itu buat object Scene baru dan masukkan pane nya dan primaryStage.setScene(scene).


MULAI~

Karena yang akan kita lakukan ada berpindah dari scene 1 ke scene 2, maka kita siapkan 2 buah file fxml.
Ini contoh 2 file fxml yang akan kita gunakan pada tutorial ini.






Pertama-tama, kita buat variable local untuk menampung Stage yg ada di method start(). Hal ini dibutuhkan dikarenakan kita tidak bisa memperoleh Stage yang sedang ditampilkan secara langsung. Setelah itu, kita buat sebuah method untuk me"load" fxml yang akan kita tampilkan. Kira-kira seperti ini scriptnya :


Belum selesai sampai disini. Script di atas, pada method loadFXML() kita melakukan pemanggilan fxml lalu memasukkannya ke variable object dari AnchorPane yaitu pane. Setelah itu, pane dimasukkan ke Scene yg kita buat sebagai root pane nya. Barulah Scene yg kita buat tadi kita masukkan ke stage menggunakan setScene() yg ada di stage.
Langkah berikutnya adalah membuat method untuk memanggil view1.fxml dan view2.fxml. Kita buat secara terpisah karena nantinya akan kita gunakan berpindah-pindah scene melalui controller tiap-tiap view. Kita akan bahas nanti, sekarang adalah membuat method untuk memanggil view1.fxml dan view2.fxml. Berikut scriptnya  :


Oke, done buat ngeload view1 sm view2 nya. Lalu, apa sekarang? Coba deh sekarang panggil loadView1() atau loadView2() di method start(), kayak gini contohnya :



Coba deh ganti itu loadView1() sm loadView2() terus run lagi projectnya. Yang tampil pasti view2.fxml nya

Untuk sementara, ini source code full nya :



Oke guys, sampe disini dulu ya. Sampe ketemu di Part2. Btw, untuk Part2 nya kita bakalan ke pindah-pindah scene pake tombol. See ya~

No comments:

Post a Comment