Cara Menggunakan Menu di Netbeans untuk Mendesain Swing GUI

Apakah Anda ingin mempelajari cara menggunakan menu di NetBeans untuk mendesain GUI Swing? Anda dapat menambahkan menu ke formulir Java Anda, seperti File, Edit, View, dan sebagainya. Setiap menu memiliki item menu, dan item-item ini, pada gilirannya, dapat memiliki submenu. Di sini, kami akan menunjukkan kepada Anda cara mengkonfigurasi menu di NetBeans. Tetap bersama kami.

Pengaturan menu di Netbeans

Untuk memulai, kami tunjukkan cara mengkonfigurasi menu di Netbeans. Mari kita lihat caranya:

Anda mungkin juga tertarik membaca tentang: Kesalahan Terdeteksi di Basis Data Pembaruan Windows

• langkah 1: Kembali ke tampilan Desain. Di palet NetBeans, temukan item bilah menu:

• langkah 2: Seret satu ke bagian atas formulir Anda. Saat Anda melepaskan tombol mouse, Anda akan memiliki bilah menu File dan Edit default:

Namun, tidak ada item menu yang ditambahkan secara default. Untuk menambahkan milik Anda, Anda harus melakukan hal berikut:

• langkah 3- Klik item menu Arsipuntuk memilihnya. Dengan item menu File dipilih, klik kanan. Menu baru akan muncul. Memilih Tambahkan dari Palet > Item Menu:

• langkah 4: Item menu akan ditambahkan ke menu File Anda:

Yang akan Anda lakukan adalah menambahkan item menu untuk membuka dan menyimpan file.

• langkah 5: Klik dua kali teks default jMenuItem1. Ini kemudian akan disorot, sehingga Anda dapat menulis di atasnya:

• langkah 6: Menulis terbuka, lalu tekan tombol ENTER di papan ketik Anda:

• langkah 7: Tambahkan item menu lainnya di sepanjang proses. Kali ini, tulislah Menyimpan sebagai item menu:

CATATAN : Seperti yang Anda lihat di atas, Anda dapat menambahkan pintasan ke item menu Anda.

• langkah 8: Klik item menu yang terbuka, lalu pintasannya:

CATATAN : Setelah pintasan dipilih, lihat jendela properti:

• langkah 9: Cari elemennya mencekik dan klik tombol kecil di sebelah kanan baris. Sebuah kotak dialog muncul:

Anda dapat mengatur tombol pintasan mana yang Anda inginkan untuk item menu dari kotak dialog ini. Pintasan yang umum digunakan adalah CTRL + O. Ketik O di dalam kotak dan Shift + O akan muncul.

• langkah 10: Hapus centang item tersebut perubahan dan merek Ctrl dan sebaliknya:

• langkah 11: Klik menerima dan pintasan akan ditambahkan ke item menu Java Anda:

integrasi

Untuk melihat apakah semua ini berhasil, klik lagi item menu Buka untuk menyorotnya.

• langkah 1: Sekarang klik kanan. Di menu yang muncul, pilih Peristiwa > Tindakan > Tindakan yang diambil. Ini akan membuat rintisan untuk item menu. Masukkan kode berikut ini:

javax.swing.JOptionPane.showMessageDialog(FormObjects.ini, "Buka");

Ini hanyalah kotak pesan.

• langkah 2: Jalankan program Anda dan ujilah. Klik File> Bukadan Anda akan melihat kotak pesan muncul.
• langkah 3: Klik menerima untuk menyingkirkannya. Sekarang coba pintasan Anda.
• langkah 4: Tahan tombolnya Ctrl di papan ketik Anda. Tahan dan tekan huruf O. Sekali lagi, menu akan muncul.

Hentikan program Anda dan kembali ke stub Anda. Komentari kotak pesan. Yang akan Anda lakukan adalah menulis kode untuk menampilkan kotak dialog. Pengguna kemudian dapat memilih file untuk dibuka. Kami akan melakukannya di bagian selanjutnya.

Desain Swing GUI dengan menu di Netbeans

Bagian ini memberikan panduan melalui proses pembuatan antarmuka pengguna grafis (GUI) untuk aplikasi bernama ContactEditor menggunakan NetBeans IDE GUI Builder.

Dalam prosesnya, Anda akan merancang antarmuka pengguna grafis yang memungkinkan Anda melihat dan mengedit informasi kontak orang-orang yang termasuk dalam database karyawan. Anda juga akan belajar cara:

• Gunakan antarmuka pembuat GUI
• Buat wadah GUI, tambahkan
• Ubah ukuran dan sejajarkan komponen
• Sesuaikan penahan komponen
• Atur perilaku pengubahan ukuran komponen secara otomatis
• Edit properti komponen

Anda dapat melakukan semua ini melalui menu di Netbeans

Memulai desain menu di Netbeans

GUI Builder IDE memungkinkan Anda membuat GUI berbasis menu yang terlihat profesional di Netbeans tanpa pengetahuan mendalam tentang administrator desain. Anda dapat mendesain formulir Anda hanya dengan menempatkan komponen di mana pun Anda inginkan.

Membuat Proyek melalui menu di Netbeans

Karena semua pengembangan Java di IDE berlangsung di dalam proyek, kita harus terlebih dahulu membuat proyek ContactEditor baru untuk menyimpan kode sumber dan file proyek lainnya.

Proyek IDE adalah sekumpulan file sumber Java ditambah metadata terkait, termasuk file properti khusus proyek, skrip build Ant yang mengontrol pengaturan build dan run, dan file projectxml yang memetakan target Ant ke perintah IDE .

Meskipun aplikasi Java sering kali terdiri dari beberapa proyek IDE, untuk keperluan tutorial ini, kita akan membuat aplikasi sederhana yang disimpan seluruhnya dalam satu proyek melalui menu di Netbeans.

Untuk membuat proyek aplikasi ContactEditor baru:

• langkah 1: Memilih File > Proyek baru. Alternatifnya, Anda dapat mengklik ikon tersebut Proyek baru di bilah alat IDE.
• langkah 2: Di panel kategori, pilih node Java dan di panel Proyek, Pilih Aplikasi Java. Klik berikut.
• langkah 3: Memasuki Hubungi Editor di bidang Nama Proyek dan tentukan lokasi proyek.
• langkah 4: Biarkan kotak centang tidak dipilih Gunakan folder khusus untuk menyimpan perpustakaan.
• langkah 5: Pastikan kotak centang Tetapkan sebagai proyek utama dipilih dan menonaktifkan bidang tersebut Buat kelas utama.
• langkah 6: Klik menyelesaikan.

IDE akan membuat folder ContactEditor di sistem Anda pada lokasi yang telah ditentukan. Folder ini berisi semua file yang terkait dengan proyek, termasuk skrip Ant Anda, folder untuk menyimpan file sumber dan pengujian, serta folder untuk metadata khusus proyek. Untuk melihat struktur proyek, gunakan jendela File di IDE.

Buat wadah JFrame melalui menu di Netbeans

Setelah membuat aplikasi baru, Anda mungkin memperhatikan bahwa folder Paket Sumber di jendela Proyek berisi node kosong bernama <paket default>.

Untuk melanjutkan membangun antarmuka, kita perlu membuat wadah Java di dalamnya kita akan menempatkan komponen GUI lain yang diperlukan.

Pada langkah ini kita akan membuat container menggunakan komponen JFrame dan menempatkan container tersebut dalam paket baru.

Untuk menambahkan container JFrame melalui menu di Netbeans, Anda harus melakukan hal berikut:

• langkah 1: Di jendela Proyek, klik kanan pada Hubungi Editor simpul dan pilih Baru> Formulir JFrame. Alternatifnya, Anda dapat menemukan formulir JFrame memilih Baru > Lainnya > Formulir GUI Ayun > Formulir JFrame.
• langkah 2: Memasuki HubungiEditorUIsebagai nama kelas.
• langkah 3: Memasuki ku . contacteditorseperti paketnya.
• langkah 4: Klik menyelesaikan.

IDE membuat formulir ContactEditorUI dan kelas ContactEditorUI di dalam aplikasi ContactEditorUI.java dan membuka formulir ContactEditorUI di GUI Builder . Perhatikan bahwa paket my.contacteditor menggantikan paket default.

Kenali GUI Builder dan menu di Netbeans

Sekarang kita telah menyiapkan proyek baru melalui menu di Netbeans untuk aplikasi kita, mari luangkan waktu sejenak untuk mengenal antarmuka GUI Builder.

Saat kami menambahkan kontainer JFrame , IDE membuka formulir ContactEditorUI yang baru dibuat di tab Editor dengan toolbar yang berisi beberapa tombol, seperti yang ditunjukkan pada ilustrasi di atas.

Formulir ContactEditor terbuka di tampilan Desain GUI Builder , dan tiga jendela tambahan secara otomatis muncul di sepanjang tepi IDE, memungkinkan Anda untuk menavigasi, mengatur, dan mengedit formulir GUI saat Anda membuatnya.

Berbagai jendela GUI Builder dalam menu di Netbeans meliputi:

Mari kita lihat berbagai jendela GUI Builder dalam menu di Netbeans antara lain:

Bidang desain:

Jendela utama GUI Builder untuk membuat dan mengedit formulir GUI Java. Tombol Source pada toolbar memungkinkan Anda melihat kode sumber suatu kelas, tombol Layout memungkinkan Anda melihat tampilan grafis komponen GUI, dan tombol History memungkinkan Anda mengakses riwayat perubahan lokal pada file tersebut.

Tombol tambahan pada toolbar menyediakan akses mudah ke perintah umum, seperti memilih antara mode seleksi dan koneksi , menyelaraskan komponen , mengkonfigurasi perilaku pengubahan ukuran otomatis komponen, dan melihat pratinjau formulir.

Browser

Memberikan representasi seluruh komponen, baik visual maupun non-visual, dalam aplikasi Anda sebagai hierarki pohon. Browser juga menyediakan informasi visual tentang komponen pohon mana yang sedang diedit di GUI Builder dan memungkinkan Anda mengatur komponen di panel yang tersedia.

Palet.

Daftar komponen tersedia yang dapat disesuaikan yang berisi tab untuk komponen JFC/Swing, AWT, dan JavaBeans, serta pengelola tata letak. Selain itu, Anda dapat membuat, menghapus, dan mengatur ulang kategori yang ditampilkan di palet menggunakan penyesuai.

Jendela Properti

Menampilkan properti komponen yang dipilih saat ini di GUI Builder, jendela Navigator, jendela Proyek, atau jendela File.

Jika Anda mengklik tombol Sumber , IDE akan menampilkan kode sumber Java aplikasi di Editor dengan bagian kode yang secara otomatis dihasilkan oleh GUI Builder yang ditunjukkan oleh area abu-abu (yang berubah menjadi biru saat dipilih), yang disebut Blok Terlindungi.

Blok yang dilindungi adalah area yang dilindungi dan tidak dapat diedit dalam tampilan Kode Sumber . Anda hanya dapat mengedit kode yang muncul di area putih Editor saat Anda berada dalam tampilan Kode Sumber.

Jika Anda perlu melakukan perubahan pada kode di dalam blok yang dilindungi, mengklik tombol Desain akan mengembalikan Editor IDE ke GUI Builder, di mana Anda dapat melakukan penyesuaian yang diperlukan pada formulir. Saat Anda menyimpan perubahan, IDE akan memperbarui kode sumber file tersebut.

Bagi pengembang tingkat lanjut, Pengelola Palet tersedia dan memungkinkan Anda untuk menambahkan komponen kustom dari JAR, pustaka, atau proyek lain ke palet. Untuk menambahkan komponen kustom melalui Pengelola Palet , pilih Alat > Palet > Komponen Swing/AWT.

Hal pertama yang pertama pada menu di Netbeans

Sekarang setelah Anda terbiasa dengan antarmuka GUI builder, saatnya untuk mulai mengembangkan antarmuka pengguna untuk aplikasi ContactEditor kita.

Di bagian ini, kita akan melihat bagaimana menggunakan palet IDE untuk menambahkan berbagai komponen GUI yang kita perlukan ke formulir kita.

Berkat paradigma tata letak gratis IDE, Anda tidak perlu lagi bersusah payah dengan administrator tata letak untuk mengontrol ukuran dan posisi komponen dalam wadahnya.

Yang perlu Anda lakukan hanyalah drag dan drop komponen yang Anda perlukan ke formulir GUI Anda seperti yang ditunjukkan pada ilustrasi di bawah.

Menambahkan Komponen: Dasar-dasar

Meskipun Pembuat GUI IDE menyederhanakan proses pembuatan GUI Java, akan sangat membantu jika Anda membuat sketsa tampilan antarmuka yang Anda inginkan sebelum Anda mulai mendesainnya.

Sekarang mari kita lihat ilustrasinya dan perhatikan perilaku "drag and drop" dari IDE saat melakukan hal ini.

Untuk menambahkan JPanel dari menu di Netbeans:

1. Di jendela Palette, pilih komponen Panel dari kategori Swing Containers dengan mengklik dan melepaskan tombol mouse.
2. Memindahkan kursor ke sudut kiri atas formulir di GUI Builder. Ketika komponen diposisikan di dekat tepi atas dan kiri wadah, pedoman penyelarasan horizontal dan vertikal akan muncul yang menunjukkan margin yang diinginkan. Klik pada formulir untuk menempatkan JPanel di lokasi ini.

Komponen JPanel muncul di formulir ContactEditorUI yang disorot dengan warna oranye, menunjukkan bahwa komponen tersebut telah dipilih. Setelah melepaskan tombol mouse, indikator kecil muncul untuk menunjukkan hubungan jangkar komponen, dan node JPanel yang sesuai ditampilkan di jendela Navigator, seperti yang ditunjukkan pada ilustrasi berikut.

Selanjutnya, kita perlu mengubah ukuran JPanel untuk memberikan ruang bagi komponen yang akan kita tempatkan di dalamnya nanti, tapi mari kita luangkan waktu sejenak untuk menunjukkan fitur tampilan GUI Builder yang lain.

Untuk melakukan ini, kita perlu membatalkan pilihan JPanel yang baru saja kita tambahkan. Karena kita belum menambahkan batas judul, panelnya hilang.

Namun, perhatikan bahwa ketika Anda mengarahkan kursor ke JPanel, batasnya berubah menjadi abu-abu terang sehingga posisinya dapat terlihat jelas. Anda hanya perlu mengklik di mana saja di dalam komponen untuk memilihnya kembali dan membuat pengendali pengubah ukuran dan indikator jangkar muncul kembali.

Untuk mengubah ukuran JPanel pada menu di Netbeans:

• langkah 1: Pilih JPanel yang baru saja Anda tambahkan. Driver berukuran persegi kecil muncul kembali di sekeliling komponen.
• langkah 2: Klik dan tahan tombol pengubah ukuran di tepi kanan JPanel dan seret hingga garis perataan putus-putus muncul di dekat tepi formulir.
• langkah 3: Lepaskan pegangan ubah ukuran untuk mengubah ukuran komponen.

Komponen JPanel membentang hingga menjangkau antara margin kiri dan kanan wadah sesuai dengan offset yang direkomendasikan, seperti yang ditunjukkan pada ilustrasi berikut.

Mengulangi prosesnya

Sekarang kita telah menambahkan panel untuk menyimpan informasi nama UI, kita perlu mengulangi proses untuk menambahkan panel lain tepat di bawah panel pertama untuk informasi email.

Merujuk pada ilustrasi berikut, ulangi dua tugas sebelumnya, perhatikan posisi yang disarankan oleh GUI Builder.

Perhatikan bahwa jarak vertikal yang disarankan antara kedua JPanel jauh lebih sempit daripada jarak batas. Setelah Anda menambahkan JPanel kedua, ubah ukurannya agar mengisi ruang vertikal yang tersisa pada formulir.

Karena kita ingin membedakan fungsi di bagian atas dan bawah GUI secara visual, kita perlu menambahkan batas dan judul pada setiap JPanel.

Pertama-tama kita akan mencapai hal ini menggunakan jendela Properties dan kemudian mencobanya menggunakan menu pop-up.

Untuk menambahkan batas judul ke JPanels pada menu di Netbeans:

• langkah 1: Pilih JPanel teratas di GUI Builder.
• langkah 2: Di jendela Properti, klik tombol elipsis (…) di sebelah Properti perbatasan.
• langkah 3: Di redaksi Perbatasan JPanel yang muncul, pilih nodenya Berjudul Perbatasan di panel Perbatasan yang tersedia.
• langkah 4: Pada panel Properties di bawah, masukkan nama untuk properti Judul.
• langkah 5: Klik elipsis (…) di sebelah properti Font, pilih Negrita untuk Gaya font dan masukkan 12 untuk ukurannya. Klik menerima untuk keluar dari kotak dialog.
• langkah 6: Pilih JPanel bagian bawah dan Ulangi langkah 2 hingga 5, namun kali ini klik kanan pada JPanel dan akses jendela Properties menggunakan menu pop-up. Masukkan Email untuk properti Judul.

Batas judul ditambahkan ke kedua komponen JPanel.

Tambahkan komponen individual ke formulir

Sekarang kita perlu mulai menambahkan komponen yang akan menyajikan informasi kontak sebenarnya dalam daftar kontak kita. Dalam tugas ini kita akan menambahkan empat JTextFields yang akan menampilkan informasi kontak dan JLabels yang akan menjelaskannya.

Saat Anda melakukannya, lihat pedoman horizontal dan vertikal yang ditampilkan oleh GUI Builder, yang menyarankan jarak komponen yang diinginkan seperti yang ditentukan oleh tampilan dan nuansa sistem operasi Anda.

Hal ini memastikan bahwa GUI Anda secara otomatis dirender sesuai dengan tampilan dan nuansa sistem operasi target saat runtime.

Untuk menambahkan JLabel ke form dari menu di Netbeans:

• langkah 1: Di jendela Palette, pilih komponen Label dari kategori Swing Controls.
• langkah 2: Pindahkan kursor ke atas nama JPanel yang kita tambahkan tadi. Ketika muncul garis pedoman yang menunjukkan bahwa JLabel terletak di pojok kiri atas JPanel dengan margin kecil di tepi atas dan kiri, klik untuk menempatkan label.

JLabel ditambahkan ke formulir dan node yang sesuai yang mewakili komponen tersebut ditambahkan ke jendela Inspector.

Sebelum melanjutkan, kita perlu mengedit teks tampilan JLabel yang baru saja kita tambahkan. Meskipun Anda dapat mengedit teks tampilan komponen kapan saja, cara termudah adalah melakukannya saat Anda menambahkannya.

Untuk mengedit teks tampilan JLabel:

• langkah 1: Klik dua kali JLabel untuk memilih teks tampilannya.
• langkah 2: Menulis Nama Depan: dan tekan Enter.

Nama JLabel baru ditampilkan dan lebar komponen disesuaikan sebagai hasil edit. Sekarang kita akan menambahkan JTextField sehingga kita dapat melihat fitur penyelarasan dasar GUI Builder.

Untuk menambahkan JTextField ke formulir:

• langkah 1: Di jendela Palette, pilih komponen Text Field dari kategori Swing Controls.
• langkah 2: Memindahkan kursor langsung ke sebelah kanan Nama Depan:JLabel yang baru saja kita tambahkan. Ketika panduan horizontal muncul yang menunjukkan bahwa garis dasar JTextField sejajar dengan JLabel dan jarak antara dua komponen disarankan dengan panduan vertikal, klik untuk menempatkan JTextField.

JTextField masuk ke posisinya pada formulir yang sejajar dengan garis dasar JLabel, seperti yang ditunjukkan dalam ilustrasi berikut. Perhatikan bahwa JLabel telah bergerak sedikit ke bawah agar sejajar dengan garis dasar bidang teks tertinggi. Seperti biasa, sebuah node yang mewakili komponen ditambahkan ke jendela Navigator.

Sebelum kita melanjutkan, kita perlu menambahkan JLabel dan JTextField tambahan tepat di sebelah kanan yang baru saja kita tambahkan, seperti yang ditunjukkan pada ilustrasi berikut. Kali ini masukkan Nama Belakang: sebagai teks tampilan JLabel dan biarkan teks placeholder JTextFields seperti sekarang.

Untuk mengubah ukuran JTextField dari menu di Netbeans:

• langkah 1: Pilih JTextField yang baru saja kita tambahkan di sebelah kanan Nama Belakang:
• langkah 2: Seret pegangan pengubah ukuran dari tepi kanan JTextField ke tepi kanan JPanel yang terpasang.
• langkah 3: Ketika pedoman perataan vertikal muncul yang menyarankan margin antara bidang teks dan tepi kanan JPanel, lepaskan tombol mouse untuk mengubah ukuran JTextField.

Batas kanan JTextField sejajar dengan margin batas yang direkomendasikan oleh JPanel, seperti yang ditunjukkan dalam ilustrasi berikut.

Tambahkan beberapa komponen ke formulir dari menu di Netbeans

Sekarang kita akan menambahkan JLabel "Title:" dan "Nickname:" yang mendeskripsikan dua JTextField yang akan kita tambahkan sebentar lagi. Kita akan menyeret dan meletakkan komponen sambil menekan tombol Shift untuk menambahkannya dengan cepat ke formulir.

Saat Anda melakukannya, perhatikan lagi bahwa GUI Builder menampilkan pedoman horizontal dan vertikal yang menyarankan jarak komponen yang diinginkan.

Untuk menambahkan beberapa JLabel ke formulir:

• langkah 1: Di jendela Palet, pilih komponen Label dari kategori tersebut Kontrol osilasi dengan mengklik dan melepaskan tombol mouse.
• langkah 2: Memindahkan kursor ke formulir tepat di bawahnya Nama Depan:JLabel yang kami tambahkan tadi. Apabila terlihat garis pedoman tepi kiri JLabel baru sejajar dengan tepi kiri JLabel lama dan terdapat margin kecil diantara keduanya, tekan shift dan klik untuk menempatkan JLabel pertama.
• langkah 3: Sambil terus menekan tombol Tombol Shift, letakkan JLabel lain tepat di sebelah kanan JLabel pertama. Pastikan untuk melepaskan tombol Shift sebelum menempatkan JLabel kedua. Jika Anda lupa melepas tombol Shift sebelum memasang JLabel terakhir, cukup tekan tombol Melarikan diri.

JLabels ditambahkan ke formulir dengan membuat baris kedua, seperti yang ditunjukkan dalam ilustrasi berikut. Node yang mewakili setiap komponen ditambahkan ke jendela browser.

Sebelum melanjutkan, kita perlu mengedit nama JLabels agar kita bisa melihat efek perataan yang akan kita atur nanti.

Untuk mengedit teks tampilan JLabels dari menu di Netbeans:

• langkah 1: Klik dua kali JLabel pertama untuk memilih teks tampilan Anda.
• langkah 2: Menulis Judul: dan tekan Enter.
• langkah 3: Ulangi langkah 1 dan 2, masuk Nama panggilan: untuk nama kedua milik JLabel.

Nama JLabel baru ditampilkan pada formulir dan digulir sebagai hasil edit lebarnya, seperti yang diperlihatkan dalam ilustrasi berikut.

Masukkan komponen dari menu di Netbeans

Seringkali diperlukan penambahan komponen di antara komponen yang sudah ditempatkan pada formulir. Setiap kali Anda menambahkan komponen di antara dua komponen yang sudah ada, GUI Builder secara otomatis mengubahnya untuk memberikan ruang bagi komponen baru.

Untuk mendemonstrasikannya, kita akan menyisipkan JTextField di antara JLabel yang kita tambahkan sebelumnya, seperti yang ditunjukkan dalam dua ilustrasi berikut.

Untuk menyisipkan JTextField di antara dua JLabel:

• langkah 1: Di jendela Palet, pilih komponen bidang teks dari kategori tersebut Kontrol osilasi.
• langkah 2: Pindahkan kursor ke atas Judul:y Nama panggilan: JLabels di baris kedua sehingga JTextField tumpang tindih keduanya dan sejajar dengan garis dasarnya. Jika Anda kesulitan menempatkan bidang teks baru, Anda dapat memindahkannya ke garis panduan kiri Nama panggilan JLabel seperti terlihat pada gambar pertama di bawah ini.
• langkah 3: Klik untuk menempatkan JTextField di antaranya Judul:y Nama panggilan:

JTextField masuk ke posisinya di antara dua JLabel. JLabel paling kanan digeser ke kanan JTextField untuk mengakomodasi pengguliran horizontal yang disarankan.

Kita masih perlu menambahkan JTextField tambahan ke formulir yang akan menampilkan nama panggilan setiap kontak di sisi kanan formulir.

Untuk menambahkan JTextField dari menu di Netbeans:

• langkah 1: Di jendela Palet, pilih komponen bidang teks dari kategori Ayunan.
• langkah 2: Memindahkan kursor ke sebelah kanan Nama panggilanlabel dan klik untuk menempatkan bidang teks.

JTextField masuk ke posisinya di sebelah JLabel di sebelah kirinya.

Untuk mengubah ukuran JTextField dari menu di Netbeans:

• langkah 1: Seret pengendali ubah ukuran Nama panggilan:dari JTextField label yang Anda tambahkan pada tugas sebelumnya di sebelah kanan JPanel terlampir.
• langkah 2: Ketika pedoman perataan vertikal muncul yang menyarankan margin antara bidang teks dan batas JPanel, lepaskan tombol mouse untuk mengubah ukuran JTextField.

Batas kanan JTextField disejajarkan dengan margin batas yang direkomendasikan JPanel dan Pembuat GUI menyimpulkan perilaku pengubahan ukuran yang sesuai.

• langkah 3: Tekan Ctrl-S untuk menyimpan file.

Menu di Netbeans bergerak maju

Penyelarasan adalah salah satu aspek paling mendasar dalam menciptakan GUI yang terlihat profesional. Di bagian sebelumnya, kita melihat sekilas fitur penyelarasan IDE dengan menambahkan komponen JLabel dan JTextField ke formulir ContactEditorUI.

Selanjutnya, kita akan melihat lebih dalam fitur penyelarasan GUI Builder saat kita mengerjakan komponen lain yang kita perlukan untuk aplikasi kita.

Penyelarasan Komponen

Setiap kali Anda menambahkan komponen ke formulir, GUI Builder secara efektif menyelaraskannya, sebagaimana dibuktikan dengan pedoman penyelarasan yang muncul. Namun, terkadang perlu juga untuk menentukan hubungan yang berbeda antar kelompok komponen.

Sebelumnya, kami menambahkan empat JLabel yang kami butuhkan untuk GUI ContactEditor kami, tapi kami tidak menyelaraskannya. Sekarang kita akan menyelaraskan kedua kolom JLabels sehingga tepi kanannya sejajar.

Untuk menyelaraskan komponen dari menu di Netbeans:

• langkah 1: Tekan dan tahan tombol Ctrl dan klik untuk memilih Nama Depan: y Judul: JLabels di sisi kiri formulir.
• langkah 2: Klik tombol Berbaris di sebelah kanan pada toolbar. Alternatifnya, Anda dapat mengeklik kanan salah satunya dan memilih Sejajarkan > Kanan di kolom pada menu pop-up.
• langkah 3: Ulangi ini juga untuk Nama Belakang: Y Nama panggilan:

Posisi JLabels berubah sehingga tepi kanan teks tampilannya sejajar. Hubungan jangkar diperbarui, menunjukkan bahwa komponen telah dikelompokkan.

Sebelum kita menyelesaikan JTextFields yang kita tambahkan sebelumnya, kita perlu memastikan bahwa dua JTextFields yang kita sisipkan di antara JLabels diatur untuk diubah ukurannya dengan benar.

Berbeda dengan dua JTextField yang kita rentangkan ke tepi kanan formulir, perilaku komponen yang disisipkan yang dapat diubah ukurannya tidak diatur secara otomatis.

Untuk mengatur perilaku komponen yang dapat diubah ukurannya:

• langkah 1: Tahan tombolnya kontrol dan klik pada dua komponen JTextField yang dimasukkan untuk memilihnya di GUI Builder.
• langkah 2: Dengan kedua JTextFields dipilih, klik kanan salah satunya dan pilih Ubah Ukuran Otomatis > Horizontal dari menu pop-up.

JTextFields dikonfigurasi untuk mengubah ukuran secara horizontal saat runtime. Pedoman penyelarasan dan indikator jangkar diperbarui, memberikan umpan balik visual tentang hubungan komponen.

Untuk mengonfigurasi komponen dengan ukuran yang sama:

• langkah 1: Tahan tombolnya kontrol dan klik pada empat JTextFields pada formulir untuk memilihnya.
• langkah 2: Dengan JTextFields dipilih, klik kanan salah satunya dan pilih Mendirikan el mismo ukuran > Lebar sama dari menu pop-up.

JTextFields semuanya diatur dengan lebar yang sama dan indikator ditambahkan ke tepi atas masing-masing, memberikan umpan balik visual tentang hubungan komponen.

Sekarang kita perlu menambahkan JLabel lain yang akan menulis JComboBox yang memungkinkan pengguna memilih format informasi yang akan ditampilkan oleh aplikasi ContactEditor kita.

Untuk menyelaraskan JLabel ke sekelompok komponen dari menu di Netbeans:

• langkah 1: Di jendela Palet, pilih komponen Label dari kategori tersebut
• langkah 2: Pindahkan kursor ke bawah Nama Depany Judul JLabels di sisi kiri JPanel. Ketika muncul panduan yang menunjukkan bahwa tepi kanan JLabel baru sejajar dengan tepi kanan kelompok komponen di atas (kedua JLabel), klik untuk menempatkan komponen.

JLabel masuk ke posisi rata kanan dengan kolom JLabels di atas, seperti yang ditunjukkan dalam ilustrasi berikut. GUI Builder memperbarui baris status penyelarasan yang menunjukkan jarak komponen dan hubungan jangkar.

Seperti pada contoh sebelumnya, klik dua kali JLabel untuk memilih teks tampilannya lalu Masukkan Format Tampilan: nama tampilan. Perhatikan bahwa ketika JLabel masuk ke posisinya, komponen lainnya bergeser untuk mengakomodasi teks tampilan yang lebih panjang.

Penyelarasan garis dasar dari menu di Netbeans

Setiap kali Anda menambahkan atau memindahkan komponen yang menyertakan teks (JLabels, JTextFields, dll.), IDE menyarankan perataan yang didasarkan pada garis dasar teks dalam komponen. Saat kita menyisipkan JTextField tadi, misalnya, garis dasarnya otomatis sejajar dengan JLabel yang berdekatan.

Sekarang kita akan menambahkan kotak kombo yang memungkinkan pengguna memilih format informasi yang akan ditampilkan oleh aplikasi ContactEditor kita.

Saat kita menambahkan JComboBox, kita akan menyelaraskan garis dasarnya dengan teks JLabel. Lihat kembali pedoman penyelarasan garis dasar yang tampaknya membantu kita dalam penentuan posisi.

Untuk menyelaraskan garis dasar komponen dari menu di Netbeans:

• langkah 1: Di jendela Palet, pilih komponen Lukisan kategori gabungan Kontrol osilasi.
• langkah 2: Memindahkan kursor langsung ke sebelah kanan JLabel yang baru saja kita tambahkan. Ketika muncul panduan horizontal yang menunjukkan bahwa garis dasar JComboBox sejajar dengan garis dasar teks di JLabel dan jarak antara kedua komponen disarankan dengan garis panduan vertikal, klik untuk menempatkan kotak kombo.

Komponen masuk ke posisi sejajar dengan garis dasar teks di JLabel di sebelah kirinya, seperti yang ditunjukkan dalam ilustrasi berikut. GUI Builder menampilkan baris status yang menunjukkan jarak komponen dan hubungan jangkar.

Untuk mengubah ukuran JComboBox dari menu di Netbeans:

• langkah 1: Pilih ComboBox di Pembuat GUI.
• langkah 2: Seret pengendali pengubah ukuran di tepi kanan JComboBox ke kanan hingga muncul pedoman penyelarasan yang menyarankan offset yang diinginkan antara tepi JComboBox dan JPanel.

Seperti yang ditunjukkan dalam ilustrasi berikut, batas kanan JComboBox sejajar dengan margin batas yang direkomendasikan JPanel, dan lebar komponen secara otomatis diatur agar ukurannya disesuaikan dengan formulir.

• langkah 3: Tekan Ctrl-S untuk menyimpan file.

Mengedit model komponen berada di luar cakupan tutorial ini, jadi untuk saat ini kita akan membiarkan daftar item placeholder JComboBox apa adanya.

Di sini Anda dapat membaca tentang: Cara Membuat Database Inventaris di Access

Tinjau kembali apa yang telah kita pelajari

Kita telah memulai dengan baik dalam membangun GUI ContactEditor kita , tetapi mari kita luangkan waktu sejenak untuk merangkum apa yang telah kita pelajari saat kita menambahkan beberapa komponen yang dibutuhkan antarmuka kita.

Sejauh ini, kami telah fokus pada penambahan komponen ke GUI ContactEditor kami menggunakan panduan perataan IDE untuk membantu kami dalam penempatan.

Namun, penting untuk dipahami bahwa bagian integral lain dari penempatan komponen adalah penahan. Meskipun kami belum membicarakannya, Anda telah memanfaatkan fitur ini tanpa menyadarinya.

Seperti disebutkan di atas, setiap kali Anda menambahkan komponen ke formulir, IDE menyarankan posisi yang diinginkan dari tampilan dan nuansa target dengan pedoman.

Setelah ditempatkan, komponen baru juga ditambatkan ke tepi kontainer atau komponen terdekat untuk memastikan bahwa hubungan komponen tetap terjaga saat runtime. Di bagian ini, kami akan fokus untuk menyelesaikan berbagai hal dengan cara yang lebih tangkas sambil menunjukkan pekerjaan yang dilakukan pembuat GUI di balik layar.