{"id":283,"date":"2020-03-19T18:05:41","date_gmt":"2020-03-19T18:05:41","guid":{"rendered":"https:\/\/unydevelopernetwork.com\/?p=283"},"modified":"2020-03-20T01:59:54","modified_gmt":"2020-03-20T01:59:54","slug":"tutorial-ui-desain-jframe-dengan-netbeans-part-2","status":"publish","type":"post","link":"https:\/\/unydevelopernetwork.com\/index.php\/2020\/03\/19\/tutorial-ui-desain-jframe-dengan-netbeans-part-2\/","title":{"rendered":"Tutorial: UI Desain JFrame Dengan Netbeans (Part 2)"},"content":{"rendered":"Reading Time: <\/span> 5<\/span> minutes<\/span><\/span>\n

Selamat datang kembali di blogs UNYDeveloperNetwork. Pada postingan kali ini, Saya akan melanjutkan dari postingan saya sebelumnya<\/a>, yakni mendesain UI untuk aplikasi Java dengan JFrame Pada Netbeans. Pada artikel sebelumnya<\/a>, Saya sudah memberikan tutorial bagaimana cara mengganti Look & Feel<\/strong><\/em> <\/strong>dan mengganti ikon app. Sekarang Saya akan melanjutkan tutorial ke tahapan yang lebih kompleks. <\/p>\n\n\n\n\n\n\n\n

Pada artikel kali ini, Saya akan memberikan tutorial bagaimana memformat Window Type, Window Behavior<\/strong><\/em>, Layout Space<\/strong><\/em>, dan Fonts<\/strong><\/em>. Mari kita simak bersama. <\/p>\n\n\n\n

1. Window Type<\/h2>\n\n\n\n
\"\"<\/figure>
\n

Ada tiga jenis Windows Type<\/em> yang tersedia dalam properties JFrame Netbeans yakni: NORMAL, UTILITY, dan POPUP. Untuk mengganti Window type ini, Anda hanya perlu mengklik pada suatu JFrame, dan cari property type<\/strong> pada Properties<\/strong> <\/p>\n<\/div><\/div>\n\n\n\n

Sekarang, mari kita perhatikan contoh untuk NORMAL dan UTILITY<\/p>\n\n\n\n

\"\"
NORMAL Window Type<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
UTILITY Window Type<\/figcaption><\/figure><\/div>\n\n\n\n

Anda sudah dapat melihat perbedaan antara NORMAL dan UTILITY Window type. Anda kini dapat berkreasi dengan project aplikasi Anda dengan menggunakan Window Type ini.<\/p>\n\n\n\n

2. Window Behavior<\/h2>\n\n\n\n
\"\"<\/figure>
\n

Window behavior yang dimaksud di sini adalah kemampuan window app untuk dapat di resize. Untuk mengubah behavior ini, Anda hanya perlu mengklik pada suatu JFrame, dan mencari property resizable <\/strong>pada Properties<\/strong>.<\/p>\n<\/div><\/div>\n\n\n\n

Mari kita perhatikan perbedaan antara resizable <\/strong>dan not resizable<\/strong>.<\/p>\n\n\n\n

\"\"
Window Behavior dengan not resizable<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Window Behavior dengan resizable<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n

Dapat kita lihat perbedaannya. Pada Window Behavior dengan not resizable<\/strong>, tombol maximize tidak aktif (disabled). Selain itu, cursor resizable<\/strong> juga tidak aktif sehingga window tidak dapat diubah – ubah ukurannya (statis). <\/p>\n\n\n\n

Berbeda sekali dengan Window Behavior dengan resizable<\/strong>, tombol maximize aktif sehingga memungkinkan window dapat di maximize. Selain itu, cursor resizable <\/em><\/strong>juga aktif ketika Anda mendekatkan cursor pada salah satu sudut window yang memungkinkan ukuran window dapat diubah ubah ukurannya (dinamis).<\/p>\n\n\n\n

3. Layout Space<\/h2>\n\n\n\n

Layout space adalah ruang kosong antar komponen. Adanya Layout space ini untuk membantu penataan UI supaya lebih rapi. Sekarang mari kita perhatikan desain layout di bawah ini. <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Dapat kita perhatikan, antara JLabel<\/strong> dan JTextField<\/strong> masih terdapat space. Spacenya pun juga masih terlihat cukup lebar. Hal ini dikarenakan, layout space pada layout designer<\/strong> Netbeans membagi tiga space default yakni Default Small, Default Medium, <\/strong>dan Default Large. <\/strong>Namun, apakah kita dapat mengatur space tersebut sesuai dengan kemauan Kita? jawabannya. Iya, Bisa! Bagaimanakah caranya? Perhatikan langkah berikut.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Klik space di antar dua komponen yang akan dipersempit spacenya. Secara default, akan dimunculkan ukuran space yang sedang dipakai. <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Langkah selanjutnya adalah, klik kanan pada space tersebut, dan pilih Edit Layout Space<\/strong>. <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Akan muncul kotak toolbox untuk mengatur Layout Space<\/strong>. Secara default ada tiga pilihan, seperti yang sudah Saya sebutkan di atas. Namun, kita dapat langsung menggantinya dengan angka.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Seperti pada contoh di atas yang Saya berikan, Saya memberikan value 0 untuk space antara dua komponen. Lalu bagaimana hasilnya?<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Yak, contoh di atas adalah layout yang Layout Space<\/strong> antar dua komponennya Saya set 0. Sekarang mari kita lihat hasilnya jika di run. <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Dapat kita lihat, desain aplikasinya mulai tampak rapi dan user friendly.<\/strong> Sekarang kita rapikan sedikit Layout Space<\/strong> bagian bawah supaya lebih rapi lagi. <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Tangkapan layar di atas adalah hasil akhir dari pengaturan Layout Sapce<\/strong>. Kini kita akan menuju bagian akhir dari part 2 ini. Yakni, mengatur fonts.<\/p>\n\n\n\n

4. Fonts<\/h2>\n\n\n\n

Bagian terakhir dari artikel ini adalah mengatur fonts<\/strong>. kita akan mengatur fonts <\/strong>supaya desain layout kita lebih user friendly<\/strong>. Pertama kita akan jenis font<\/strong>. Untuk mengaturnya, klik pada salah satu komponen yang mendukung properties fonts<\/strong>, kemudian pada properties pilih font<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Selanjutnya, kita dapat mengatur jenis font, <\/strong>style font, <\/strong> dan ukuran font<\/strong> sesuai dengan keinginan kita. Pada contoh yang Saya berikan, Saya menggunakan font <\/strong>Segoe UI dengan style bold dan ukuran 12 untuk komponen JLabel<\/strong>. Sedangkan untuk JTextField<\/strong> Saya menggunakan font<\/strong> Segoe UI dengan style Plain dan ukuran 18. Hasil desainnya adalah seperti tangkapan layar di bawah ini.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Sekarang, saya membuat teks pada kedua JLabel <\/strong>menjadi kapital. Tujuannya adalah untuk membuat label semakin tegas dan mudah dibaca oleh user.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Langkah terakhir adalah melakukan re-design pada Layout Space<\/strong> dan Window Size<\/strong><\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Ketika di run maka hasilnya adalah sebagai berikut.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Dengan demikian, berakhir sudah part 2 dari Tutorial: UI Desain JFrame Dengan Netbeans ini. Semoga bermanfaat untuk kita semua. Apabila Anda memiliki pertanyaan, jangan sungkan meninggalkannya di kolom komentar. Jika Anda ingin mencuplik artikel ini, jangan lupa juga sertakan URL nya. Silakan tunggu part 3 nya.. ^_^ <\/p>\n\n\n\n

ARTIKEL TERKAIT<\/h4>\n\n\n\n