PRAKTIKUM I

TUJUAN

Mahasiswa dapat menggunakan Scene Builder untuk mendesain antar muka pengguna program
berbasis GUI pada javafx

DASAR TEORI

JavaFX Scene Builder memungkinkan Anda dengan cepat merancang antarmuka pengguna
aplikasi JavaFX dengan menyeret komponen UI dari sebuah perpustakaan komponen (library) UI
dan meletakkannya ke daerah tampilan konten (view content). Kode FXML untuk layout UI yang
anda buat pada tool ini secara otomatis di-gerate di belakang layar.

Scene Builder dapat digunakan sebagai tooldesain mandiri, tetapi juga dapat digunakan dalam
hubungannya dengan Java IDE sehingga Anda dapat menggunakan IDE untuk menulis,
membangun, dan menjalankan kode sumber controller yang Anda gunakan dengan antarmuka
pengguna aplikasi Anda. Meskipun Scene Builder terintegrasi lebih erat dengan NetBeans IDE,
tapi juga dapat terintegrasi dengan IDE java lainnya, seperti eclips. Integrasi ini memungkinkan
Anda untuk membuka dokumen FXML menggunakan Tema Builder, menjalankan sampel Tema
Builder, dan menghasilkan template untuk file sumber pengendali.

Integrasi JavaFX Scene Builder dengan NetBeans IDE menyediakan pembangunan alur kerja
yang optimal. Pada hal ini diasumsikan bahwa anda telah menginstal Scene Builder sebelum
melanjutkan dengan sisa bab ini.

LANGKAH PRAKTIKUM

Jika anda belum menginstal scene builder silahkan install terlebih dahaulu. Anda bisa
mendapatkannya di http://gluonhq.com/labs/scene-builder/#download

Langkah selanjutnya, integrasikan IDE anda dengan scene builder

1. Dari menu utama IDE, pilih Tools dan pilih Tools >> Options.
2. Pada jendela Options, klik Java dan kemudian tab JavaFX
 Membuat Project FXML baru di JavaFX

Dalam NetBeans IDE, Anda menggunakan wizard baru untuk membuat baru JavaFX FXML
Aplikasi, yang merupakan proyek JavaFX yang didasarkan pada tata letak FXML. Setelah proyek
dibuat, Anda dapat mengedit file FXML menggunakan Scene Builder

1. Dari menu utama NetBeans IDE, pilih File, lalu pilih New Project.
2. Pada kotak dialog New Project, pilih kategori JavaFX dan JavaFX FXML

Aplikasi proyek, seperti yang ditunjukkan pada Gambar berikut

Menyunting File FXML Dengan Scene Builder
Anda dapat memodifikasi file FXML Anda menggunakan editor NetBeans IDE atau dengan
membuka menggunakan Tema Builder. Seperti ditunjukkan dalam Gambar dibawah, Anda dapat
memilih Open untuk mengedit file FXML dengan tool Scene Builder atau pilih Edit untuk
mengedit file FXML dengan editor Netbeans FXML

Jika anda memilih open maka anda akan dihadapkan pada jendela scene builder seperti pada
gambar berikut
1. Buat project baru
Langkah berikutnya, buat project JavaFX baru di NetBeans dan beri nama SendMail.

2. Buat file FXML baru

Pada jendela Projects klik kanan package sendmail lalu pilih New | New FXML.

Pada jendela New Empty FXML isi nama FXML dengan MainUI lalu klik tombol Next.

Pada halaman selanjutnya, beri tandai kotak cek Use Java Controller lalu klik tombol Finish.
3. Edit file FXML
Klik kanan file MainUI.fxml pada jendela Project Explorer kemudian pilih Open untuk
membukanya menggunakan Scene Builder. Cara lain untuk membuka file FXML di Scene
Builder adalah dengan dobel klik pada file tersebut. Jika Anda ingin mengedit file xml-nya
langsung tanpa menggunakan Scene Builder yang harus Anda lakukan adalah klik kanan pada
file tersebut lalu pilih Edit.

MainUI.FXML akan terbuka di jendela Scene Builder seperti gambar berikut.

Sebagaimana Anda lihat, kita sudah mempunyai kanvas yang masih kosong yang akan kita isi
sesuai dengan kebutuhan aplikasi kita. Kalau Anda perhatikan di bagian kiri bawah jendela
Scene Builder (bagian yang berlabel Document), di sana sudah ada AnchorPane yang akan
menjadi induk dari layout UI yang akan kita buat. Kalau mau, Anda bisa menggunakan elemen
layout yang lain misalnya VBox, HBox dan lain-lain untuk induk layout tapi untuk tutorial kali
ini saya akan menggunakan AnchorPane.

Untuk membuat form seperti gambar di awal tutorial ini kita mulai dengan menambahkan satu
buah VBox ke dalam AnchorPane. Buka jendela Containers yang ada di bagian Library (sebelah
kiri aplikasi SceneBuilder) lalu pilih VBox dan seret ke bagian tengah SceneBuilder seperti
gambar di bawah.
Kemudian buka tab Layout di bagian kanan jendela SceneBuilder dan isi pada semua sisi Anchor
Pane Constraints. Pada bagian Spacing isikan juga nila 5 untuk memberi jarak antar control.
Untuk bagian alamat email pada form ini, kita akan menggunakan GridPane. Klik GridPane dari
bagian Containers dan letakkan di atas VBox yang tadi kita tambahkan.

Seperti kita lihat, SceneBuilder telah membuat dua kolom dan tiga baris di GridPane ini.
Selanjutnya kita atur lebar kolom di GridPane ini. Klik kolom 0, lalu pada tab Layout set Never
pada bagian HGrow dan set 80 pada bagian Pref. Width.
Kemudian klik kolom 1 dan set parameternya seperti gambar berikut.

Setelah selesai mengatur lebar kolom, kita mulai tambahkan kontrol-kontrol yang dibutuhkan.
Klik Label dari tab Controls di sebelah kiri SceneBuilder dan seret ke GridPane pada kolom 0
dan baris 0.
Kemudian atur teks yang ditampilkan label tersebut pada tab Properties menjadi From :.

Tambahkan dua label lagi masing-masing ke baris 1 dan baris 2 di kolom 1 dan beri label To :
dan CC : sehingga tampilan desainnya seperti gambar berikut :

Beikutnya kita tambahkan tiga buah TextField di kolom 1 masing-masing baris 0, 1 dan 2. Sama
seperti waktu Anda menambahkan label, untuk menambahkan TextField juga tinggal klik dan
seret ke posisi yang kita inginkan.
Berikutnya kita tambhkan TextArea dan Button di bawah GridPane.

Set teks pada Button menjadi Submit pada tab Properties. Klik TextArea dan set Vgrow pada
tab Layout menjadi Always. Inilah tampilan akhir form kita.
Untuk melihat pratinjau (Previewi) dari desain kita, klik menu Preview | Preview in Window.

Bila tampilannya sudah sesuai dengan keinginan, simpan desain dengan klik menu File | Save
pada SceneBuilder. Untuk sekrang ini Anda bisa menutup jendela SceneBuilder atau bisa juga
hanya di minimize dan buka kembali jendela NetBeans IDE untuk menampilkan form yang tadi
kita buat.

4. Memuat UI dari file FXML

Berikutnya kita akan menampilkan form yang sudah dibuat sebelumnya. Kembali ke NetBeans
IDE dan buka file SendMail.java. Ganti teks pada tombol btn dengan Kirim Email dan hapus
baris kode pada event handler untuk tombol btn.
Selanjutnya, isikan kode program di bawah ini (yang ditandai) menggantikan kode program yang
dicoret pada gambar di atas.
Jangan lupa untuk mengimpor komponen yang dibutuhkan.

Terakhir kita tinggal melakukan kompilasi dan menjalankan program. Klik tombol Run pada
toolbar NetBeans IDE. Jika tidak ada kesalahan tampilan aplikasi akan seperti berikut :
Coba klik tombol bertuliskan Kirim Email. Aplikasi akan menampilkan form yang kita desain
sebelumnya menggunakan Scene Builder.

Belum ada interaksi di form ini karena pada tutorial ini saya hanya menunjukkan bagamana
mendesain tampilannya. Pada tutorial berikutnya saya akan menunjukkan bagaimana membuat
form kita bisa berinteraksi dengan user.
TUGAS PRAKTIKUM
Buatlah form login dengan kombinasi username dan password beserta tombol pada umumnya form
login. Ketika dimasukkan username dan password dan ditekan tombol login akan menampilkan
jendela baru dan menampilkan username yang telah dimasukkan.

Note : Jika tidak selesai dikerjakan di laboratorium dengan waktu praktikum maka dikerjakan di
rumah/kost tapi tetap dikonsultasikan kepada asisten praktikum