{"id":260,"date":"2020-03-14T06:14:42","date_gmt":"2020-03-14T06:14:42","guid":{"rendered":"https:\/\/unydevelopernetwork.com\/?p=260"},"modified":"2020-03-20T02:01:14","modified_gmt":"2020-03-20T02:01:14","slug":"tutorial-ui-desain-jframe-dengan-netbeans-part-1","status":"publish","type":"post","link":"https:\/\/unydevelopernetwork.com\/index.php\/2020\/03\/14\/tutorial-ui-desain-jframe-dengan-netbeans-part-1\/","title":{"rendered":"Tutorial: UI Desain JFrame Dengan Netbeans (Part 1)"},"content":{"rendered":"Reading Time: <\/span> 4<\/span> minutes<\/span><\/span>\n

Selamat datang di blog UNYDevelopernetwork. Pada postingan kali ini kita akan bermain kembali dengan menggunakan java. Namun, kita tidak akan memulai dari 0, karena kita akan menggunakan project yang sudah kita mulai sebelumnya. Pada postingan kali ini, Saya akan memberikan tutorial pertama, tentang UI\/UX Desain JFrame dengan menggunakan Netbeans. Bagaimanakah langkahnya? Mari kita simak postingan ini.<\/p>\n\n\n\n\n\n\n\n

Sebelum Anda melanjutkan membaca postingan ini, Anda hendaknya sudah memulainya dari artikel: Tutorial: Membuat Aplikasi Desktop Untuk Windows dengan Java<\/a>. Pada artikel tersebut, Saya sudah sedikit banyak memberikan pembahasan tentang membuat aplikasi Java desktop dengan menggunakan Netbeans. Pada artikel tersebut, Saya juga telah memberikan contoh bagaimana membuat jendela (window) JFrame dapat berada di tengah tengah layar. <\/p>\n\n\n\n

Pada artikel kali ini, Saya akan memperdalamnya. Saya akan membagi artikel ini dalam beberapa sub bagian supaya Anda mudah membacanya. Mari kita mulai.<\/p>\n\n\n\n

Look & Feel<\/h2>\n\n\n\n

Apabila kita membuat aplikasi Java dengan menggunakan Netbeans, maka UI yang kita peroleh pertama adalah seperti tangkapan layar di bawah ini.<\/p>\n\n\n\n

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

Desain aplikasi seperti itu karena secara default<\/em> aplikasi yang dibuat dengan Netbeans menggunakan Nimbus <\/em><\/strong>Look & Feel<\/em>. Lalu, Apakah kita dapat mengganti Look & Feel <\/em>tersebut? Jawabannya, IYA!. Kita dapat menggantinya dengan Look & Feel<\/em> yang disupport oleh sistem operasi kita. Bagaimana cara menggantinya? Pertama kita buka Source Code kita dengan cara mengklik tombol Source<\/strong>.<\/p>\n\n\n\n

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

Setelah itu scroll ke bawah dan cari baris berikut ini.<\/p>\n\n\n\n

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

Klik tanda ” + <\/strong>” yang terletak di sisi kiri kode untuk meng-expand baris kode yang tersembunyi. Anda akan menemukan blok baris untuk Look & Feel<\/strong><\/p>\n\n\n\n

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

PERHATIKAN <\/strong>pada baris berikut ini. <\/p>\n\n\n\n

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

Pada baris tersebut terdapat value “Nimbus”<\/strong>. Value tersebut yang akan kita utak atik untuk mengubah Look & Feel <\/strong>aplikasi java kita<\/p>\n\n\n\n

1. WINDOWS<\/strong><\/p>\n\n\n\n

Untuk membuat aplikasi seperti desain UI Windows, maka kita tinggal mengganti Nimbus <\/strong>dengan Windows<\/strong>. Perhatikan perubahan baris kode berikut.<\/p>\n\n\n\n

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

Bagaimanakah outputnya? Mari kita lihat.<\/p>\n\n\n\n

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

Yap, tampilannya sudah sesuai dengan UI Windows. <\/p>\n\n\n\n

2. WINDOWS CLASSIC<\/strong><\/p>\n\n\n\n

Untuk dapat mengubahnya menjadi Windows Classic, Anda dapat mengulangi langkah sebelumnya, dengan mengubah Nimbus<\/strong> menjadi Windows Classic<\/strong><\/p>\n\n\n\n

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

3. GTK+<\/strong> (Linux only)<\/p>\n\n\n\n

Untuk dapat mengubahnya menjadi GTK+, Anda dapat mengulangi langkah sebelumnya, dengan mengubah Nimbus<\/strong> menjadi GTK+<\/strong>.<\/p>\n\n\n\n

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

Namun, bagaimana jika ternyata aplikasi itu dikembangkan di Linux dan dijalankan di Windows (maupun sebaliknya)? Tenang, Secara default, GUI aplikasi ke mode standar. Seperti tampilan di bawah ini.<\/p>\n\n\n\n

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