Membuat Form Login di JavaFX ~ KambengPuyol

Membuat form login adalah aktivitas umum ketika anda sedang mengembangkan aplikasi . kali ini kambengpuyol akan membagikan tutorial ini kepada anda yang sekarang lagi belajar pemrograman javaFX. Dalam tutorial ini, Anda akan menggunakan JavaFX untuk membangun form login yang ditunjukkan pada gambar login di bawah. Tutorial ini mengajarkan Anda dasar-dasar tata letak layar, bagaimana menambahkan kontrol ke panel tata letak, dan bagaimana menciptakan peristiwa input.

Contoh gambar form login dengan javaFX.

Alat yang digunakan dalam tutorial ini Persiapan adalah NetBeans IDE. Sebelum Anda mulai, pastikan bahwa versi NetBeans IDE yang Anda gunakan mendukung JavaFX 2. Lihat Persyaratan Sistem untuk rincian.

Buat Proyek

Tugas pertama Anda adalah untuk membuat proyek JavaFX di NetBeans IDE dan beri nama Login:

    1.Dari menu File, pilih New Project.
    2.Dalam kategori aplikasi JavaFX, pilih Aplikasi JavaFX. Klik Next.
    3.Nama Login proyek dan klik Finish.

Ketika Anda membuat proyek JavaFX, NetBeans IDE menyediakan aplikasi Hello World sebagai titik awal, yang Anda telah lihat jika Anda mengikuti tutorial Hello World.
    4.Hapus start () metode yang dihasilkan NetBeans IDE dan menggantinya dengan kode berikut

@Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("JavaFX Welcome");
        
        primaryStage.show();
    }

Tip: Setelah Anda menambahkan kode sampel menjadi proyek NetBeans, tekan Ctrl (atau cmd) + Shift + I untuk mengimpor paket yang dibutuhkan. Ketika ada pilihan laporan impor, memilih salah satu yang dimulai dengan JavaFX.

Buat Tata Letak GridPane

Untuk form login, menggunakan tata letak GridPane karena memungkinkan Anda untuk membuat grid fleksibel baris dan kolom di mana untuk layout kontrol. Anda dapat menempatkan kontrol dalam setiap sel dalam grid, dan Anda dapat membuat sel-sel kontrol rentang sesuai kebutuhan.

Kode untuk membuat tata letak GridPane adalah sebagai berikut: Tambahkan kode sebelum primaryStage.show garis ();

GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));

Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);

membuat objek GridPane dan memberikan ke jaringan bernama variabel. Properti keselarasan mengubah posisi default dari grid dari atas kiri dari adegan ke pusat. Sifat kesenjangan mengelola jarak antara baris dan kolom, sedangkan properti padding mengelola ruang di sekitar tepi panel grid. Para insets berada di urutan atas, bawah kanan, dan kiri. Dalam contoh ini, ada 25 piksel padding di setiap sisi.

Adegan ini dibuat dengan panel grid sebagai simpul akar, yang merupakan praktek umum ketika bekerja dengan kontainer tata letak. Dengan demikian, sebagai jendela diubah ukurannya, node dalam jaringan panel diubah ukurannya sesuai dengan tata letak kendala mereka. Dalam contoh ini, panel jaringan tetap di tengah saat Anda tumbuh atau menyusut jendela. Sifat bantalan memastikan adanya padding sekitar panel jaringan ketika Anda membuat jendela kecil.

Kode ini menentukan lebar dan tinggi untuk adegan 300 oleh 275. Jika Anda tidak menetapkan dimensi adegan, adegan default ke ukuran minimum yang diperlukan untuk menampilkan isinya.
Tambahkan Teks, Label, dan Bidang Teks

Anda dapat melihat bahwa form membutuhkan judul "Selamat Datang" dan teks dan password untuk mengumpulkan informasi dari pengguna. berikut Kode untuk menciptakan kontrol ini. Tambahkan kode ini setelah baris yang menentukan properti padding grid.

Text scenetitle = new Text("Welcome");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);

Label userName = new Label("User Name:");
grid.add(userName, 0, 1);

TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);

Label pw = new Label("Password:");
grid.add(pw, 0, 2);

PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);

Baris pertama membuat objek teks yang tidak dapat diedit, menyetel teks ke Welcome, dan memberikan ke sebuah variabel bernama scenetitle. Baris berikutnya menggunakan metode setfont () untuk mengatur keluarga font, berat, dan ukuran dari variabel scenetitle. Menggunakan gaya inline adalah tepat dimana style terikat untuk variabel, tetapi teknik yang lebih baik untuk styling elemen antarmuka pengguna Anda adalah dengan menggunakan style sheet. Dalam tutorial berikutnya, Bentuk Fancy dengan JavaFX CSS, Anda akan menggantikan gaya inline dengan style sheet.

Para grid.add () metode menambahkan variabel scenetitle ke jaringan tata letak. Penomoran untuk kolom dan baris dalam grid dimulai dengan nol, dan scenetitle ditambahkan dalam kolom 0, baris 0. Dua yang terakhir argumen dari grid.add () metode mengatur rentang kolom ke 2 dan rentang baris ke 1.

Garis berikutnya membuat objek Label dengan teks Nama Pengguna pada kolom 0, baris 1 dan Lapangan objek teks yang dapat diedit. Kolom teks ditambahkan ke pane kotak di kolom 1, baris 1. Sebuah password dan label dibuat dan ditambahkan ke panel grid dalam cara yang sama.

Ketika bekerja dengan panel grid, Anda dapat menampilkan garis grid, yang berguna untuk tujuan debugging. Dalam hal ini, Anda mengatur properti gridLinesVisible menjadi true. Kemudian, ketika Anda menjalankan aplikasi ini, Anda akan melihat baris untuk kolom grid dan baris serta sifat kesenjangan, seperti yang ditunjukkan pada Gambar berikut.

Tambahkan Tombol dan Teks

yang diperlukan untuk aplikasi ini adalah kontrol Tombol untuk mengirimkan data dan kontrol Teks untuk menampilkan pesan ketika pengguna menekan tombol.

Pertama, membuat tombol dan posisi di kanan bawah, yang merupakan penempatan tombol yang umum untuk melakukan tindakan yang mempengaruhi seluruh formulir. Tambahkan kode ini sebelum kode untuk pemandangan.

Button btn = new Button("Sign in");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);

Baris pertama membuat tombol bernama btn Masuk dengan label, dan baris kedua menciptakan tata letak panel HBox bernama hbBtn dengan jarak 10 pixel. Jendela HBox menetapkan alignment untuk tombol yang berbeda dari keselarasan diterapkan pada kontrol lain di panel grid. Properti keselarasan memiliki nilai Pos.BOTTOM_RIGHT, yang posisi node di bagian bawah ruang secara vertikal dan pada tepi kanan dari ruang horisontal. Tombol tersebut akan ditambahkan sebagai anak pane HBox, dan panel HBox ditambahkan ke grid di kolom 1, baris 4.

Sekarang, tambahkan kontrol Teks untuk menampilkan pesan, seperti yang ditunjukkan pada kode berikut. Tambahkan kode ini sebelum kode untuk pemandangan.

final Text actiontarget = new Text();
        grid.add(actiontarget, 1, 6);

gambar dibawah menunjukkan bentuk sekarang. Anda tidak akan melihat pesan teks sampai Anda bekerja melalui bagian berikutnya dari tutorial, Tambah Kode Menangani Acara.

Tambahkan Kode untuk Menangani Acara

Akhirnya, membuat tombol menampilkan pesan teks bila pengguna menekan itu. Tambahkan kode berikut. sebelum kode untuk pemandangan.

btn.setOnAction(new EventHandler<ActionEvent>() {
 
    @Override
    public void handle(ActionEvent e) {
        actiontarget.setFill(Color.FIREBRICK);
        actiontarget.setText("Sign in button pressed");
    }
});

Para setOnAction () metode yang digunakan untuk mendaftarkan event handler yang menetapkan objek actiontarget untuk Masuk tombol ditekan bila pengguna menekan tombol. Warna dari objek actiontarget diatur untuk batu bata tahan api merah.
Jalankan Aplikasi

Jalankan aplikasi dan klik Masuk di tombol. Gambar berikut menunjukkan hasil. Jika Anda mengalami masalah, maka kita lihat kode di file Login.java