Bagaimana menambahkan tombol dan teks ke proyek JavaFX - dummies

Sebagai programmer java awal, Anda akan ingin menambahkan sesuatu ke proyek JavaFX Anda. Saat Anda membuat program GUI bertenaga tinggi, Anda memulai dengan membuat jendela dengan tombol dan widget lainnya. Kemudian Anda menambahkan metode untuk menanggapi penekanan tombol, klik tombol, dan hal-hal serupa lainnya.

Di sini, Anda menggunakan file XML untuk menjelaskan sebuah tombol dan kolom teks:

1Buka proyek JavaFX Anda.

Lihat di Explorer Paket Eclipse untuk proyek baru ini.

2Kunjungi cabang proyek baru di Eclipse's Package Explorer.

Carilah cabang aplikasi, yang ada di dalam cabang src.

3Klik kanan (atau di Mac, klik kontrol) cabang aplikasi. Pada menu konteks yang muncul, pilih File → New → Other.

Kotak dialog Select A Wizard muncul.

4Dalam kotak dialog Select A Wizard, pilih cabang JavaFX. Di cabang JavaFX, klik dua kali item Dokumen FXML Baru.

Kotak dialog File FXML muncul.

5Di kolom Nama kotak dialog, ketik nama untuk file baru Anda lalu klik Finish.

Sebutkan berkas Root .

Anda mengetikkan nama Root, tapi e (fx) clipse membuat file yang bernama lengkap Root. fxml

Akar baru ini. File fxml menjelaskan tata letak tombol, kolom teks, dan hal lainnya di aplikasi JavaFX baru Anda.

6 Klik kanan (atau di Mac, control-click) Root baru. cabang fxml di Eclipse's Package Explorer. Pada menu konteks yang muncul, pilih Open with SceneBuilder.

Jendela aplikasi Scene Builder muncul.

Jendela Scene Builder berisi beberapa area:

Bagian tengah jendela Scene Builder berisi panel Konten , tempat Anda melihat pratinjau aplikasi baru Anda. (Saat ini, tidak ada yang bisa dilihat oleh aplikasi Anda, jadi panel Konten adalah ruang kosong yang besar.)

Bagian kiri atas jendela berisi panel Library , yang menampung bagian Containers, bagian Kontrol, dan beberapa bagian lainnya.

Di dunia GUI, hal-hal seperti tombol, bidang teks, label, dan kotak centang disebut kontrol . Bagian Kontrol Panel Perpustakaan membentuk palet. Untuk membuat jendela GUI, Anda dapat menarik kontrol dari palet dan menjatuhkannya ke panel Konten.

Bagian kiri bawah jendela berisi panel Dokumen , yang berisi bagian Hirarki dan bagian Controller. Bagian Hirarki berisi item AnchorPane.

Bagian Hirarki berisi pohon yang menunjukkan elemen jendela Anda yang berada di dalam elemen lain.Bagian Controller membantu Anda menghubungkan jendela yang Anda desain dengan kode Java aplikasi.

Bagian paling kanan jendela berisi panel Inspektur , yang berisi bagian Properti, bagian Tata Letak, dan bagian Kode.

Di bagian Properties, Anda menjelaskan fitur elemen di jendela Anda. Di bagian Kode, Anda memberi nama metode Java yang terkait dengan elemen di jendela Anda.

jarak tempuh Anda mungkin berbeda! Petunjuk ini bekerja pada rilis pratinjau Scene Builder 2. 0. Jika Anda memiliki versi Scene Builder yang berbeda, langkah Anda mungkin sedikit berbeda.

7Pilih item AnchorPane di bagian Hirarki.

Penanda muncul di tengah panel Konten Scene Builder.

8Drag penanda di panel Konten untuk memperbesar AnchorPane.

AnchorPane akan membesar.

9Cari entri TextField di bagian Controls pada panel Library

Kemudian seret kontrol TextField ke AnchorPage di panel Content.

10Cari entri Button di bagian Controls pada panel Library.

Tarik tombol kontrol ke AnchorPage di panel Konten.

11Dalam menu utama, pilih File → Save.

Melakukannya menghemat file FXML baru Anda.

12Tutup aplikasi Scene Builder.

Saat kembali ke meja kerja Eclipse, Anda bisa melihat kode baru di Root Anda. file fxml

Klik dua kali Root. cabang fxml di Package Explorer untuk melihat kode file. Jika Anda tidak melihat kata-kata TextField dan Button dalam kode, klik mouse Anda di dalam jendela editor. (Mengklik mouse Anda memperbarui editor untuk mencerminkan perubahan yang dilakukan oleh Scene Builder.) Jika kode di editor sepertinya tidak menjorok dengan benar, klik mouse Anda di area kosong di editor dan tekan Ctrl-Shift-F.

Kapan pun Anda ingin memformat kode di editor Eclipse (membuat kode lebih mudah dibaca dan lebih mudah dimengerti) tekan Ctrl-Shift-F.

13Edit bagian utama proyek. file java

Tuliskan pernyataan akar BorderPane dan tambahkan pernyataan akar orang tua, seperti yang ditunjukkan pada huruf tebal pada Listing 20-3.

Hasil edit pada Listing 20-3 menghubungkan aplikasi ke Root yang baru Anda siapkan. tata letak fxml

14Lahkan proyeknya.

Bila Anda melakukannya, Anda akan melihat proyek Anda menggunakan Root. file fxml