Tampilan GUI di NetBeans

1. Tampilan GUI di NetBeans

2.  GUI atau Graphical User Interface adalah bentuk antarmuka pengguna
yang memungkinkan user agar dapat berinteraksi dengan perangkat
elektronik. Bisa juga diartikan sebagai sebuah sistem komponen visual
interaktif untuk software komputer.
 Secara umum, sistem operasi Graphical User Interface terdiri dari jendela,
menu, tombol, icon, dan widget lainnya yang didesain dengan
tujuan user friendly atau bisa digunakan oleh semua pengguna umum.
GUI sendiri dapat dikendalikan dengan berbagai macam alat input,
seperti mouse, keyboard, ataupun touchscreen.
 Awalnya, Graphical User Interface dikembangkan oleh Xerox Pako Alto di
tahun 1970 akhir. Setelahnya, sistem ini digunakan oleh Apple untuk
Macintosh-nya dan Microsoft untuk sistem operasi Windows-nya.

3. Cara Kerja GUI
 Sistem Graphical User Interface menggunakan prinsip yang sesuai
dengan pola software model-view-controller, yang memisahkan
representasi informasi internal dan eksternal yang ditampilkan
pada pengguna. Jadi, pengguna hanya akan melihat fungsi mana
yang bisa digunakan tanpa perlu memahami input kode untuk
memproses perintah tersebut.
 Karena sifat GUI yang independen dari fungsi
aplikasi, developer bisa mengubah tampilan dari suatu sistem
operasi atau perangkat lunak aplikasi.

4. Kelebihan GUI
 Sistem Graphical User Interface menggunakan prinsip
yang sesuai dengan pola software model-view-
controller, yang memisahkan representasi informasi
internal dan eksternal yang ditampilkan pada
pengguna. Jadi, pengguna hanya akan melihat fungsi
mana yang bisa digunakan tanpa perlu memahami
input kode untuk memproses perintah tersebut.
 Karena sifat GUI yang independen dari fungsi
aplikasi, developer bisa mengubah tampilan dari suatu
sistem operasi atau perangkat lunak aplikasi.

5. Kekurangan GUI
 Salah satu kekurangan Graphical User Interface adalah keterbatasan interaksi
yang bisa dilakukan. Karena sudah bersifat pre-programmed, pengguna hanya
bisa melakukan interaksi yang sudah ditentukan oleh developer. Fungsionalitas
sebuah sistem yang sudah diatur sedemikian rupa menjadi tidak dapat diganti
sesuai dengan kebutuhan pengguna.
 Graphical User Interface juga dinilai lebih lambat dibanding command-based
interface dan membutuhkan penyimpanan yang lebih besar. Dimana tentunya
berpengaruh terhadap kinerja dan kecepatan mesin. Terlebih pada komputer
dengan spesifikasi rendah. Begitu pun dengan daya yang lebih banyak
digunakan dalam pemrosesannya dibandingkan dengan jenis antarmuka
lainnya.
 Bagi pengguna, Graphical User Interface memang mempermudah aktivitas
mereka. Namun, dari sisi developer, mereka harus bekerja ekstra untuk
membuat desain dan mengimplementasi fungsi sistem agar bisa ditampilkan
dengan GUI.

6. Konsep Dasar GUI
1. Tampilan Yang Enak Dilihat (Aesthetically Pleasing).
 Memberikan daya tarik visual pada desain dengan mengikuti prinsip-prinsip presentasi dan
desain grafis berikut :
• Gunakan gambar yang penuh warna namun tidak terlalu mencolok
• Meningkatkan kualitas gambar agar user bisa menikmati dengan jelas gambar
• Menyederhanakan warna dan grafis secara efisien

7. Konsep Dasar GUI
2. Kejelasan (Clarity)
 Antarmuka harus jelas secara visual, konseptual dan linguistik, termasuk :
• Elemen Visual
• Fungsi
• Metaphors
• Kata dan Text

8. Konsep Dasar GUI
3. Tingkat Kecocokan (Compability)
Pastikan desain yang dibuat cocok dengan user/pengguna, task dan fungsi pada desain, produk serta adopsi perspektif
pengguna
4. Configurability
 Memungkinkan personalisasi yang mudah, konfigurasi dan konfigurasi ulang pengaturan untuk pengguna.
• Meningkatkan rasa kontrol
• Mendorong peran aktif dalam pemahaman

9. Konsep Dasar GUI
5. Komprehensif (Comprehensibility)
 Suatu sistem harus mudah dipahami dan dipelajari. Seorang pengguna harus mengetahui hal berikut ini pada desain
yang dibuat :
• Apa yang dilakukan ?
• Apa yang mereka lihat ?
• Kapan mereka melakukannya ?
• Dimana mereka melakukannya ?
• Mengapa mereka melakukannya ?
• Bagaimana cara mereka melakukannya ?
• Alur tindakan, tanggapan, persiapan visual, dan informasi harus dalam urutan yang masuk akal yang mudah diingat dan
ditempatkan dalam konteks yang jelas.

10. Konsep Dasar GUI
6. Konsisten
Meskipun melalui banyak update atau perubahan, suatu sistem haruslah :
• Memiliki tampilan yang mirip
• Memiliki kegunaan yang serupa.
• Beroperasi dengan cara yang sama
• Tindakan yang sama harus selalu menghasilkan hasil yang sama.
• Fungsi elemen tidak boleh berubah
• Posisi elemen standar tidak boleh berubah.

11. Konsep Dasar GUI
7. Control
 Pengguna harus memiliki kendali atas interaksi pada desain yang dibuat
• Suatu action harus dihasilkan dari permintaan pengguna secara eksplisit
• Action harus dilakukan dengan cepat
• Action harus mampu menghentikan atau mengakhiri
• Pengguna seharusnya tidak pernah terputus karena kesalahan
• Konteks yang dipertahankan harus dari perspektif pengguna.
• Sarana untuk mencapai tujuan harus fleksibel dan kompatibel dengan keterampilan, pengalaman,
kebiasaan, dan preferensi pengguna.
• Hindari mode karena mereka membatasi tindakan yang tersedia bagi pengguna.
• Izinkan pengguna untuk menyesuaikan aspek antarmuka, sambil selalu menyediakan serangkaian
standar yang tepat.

12. Konsep Dasar GUI
8. Directness
 Menyediakan cara langsung untuk menyelesaikan suatu tugas (task) :
• Alternatif yang tersedia harus terlihat secara visual,
• Efek tindakan pada objek harus terlihat.
9. Mudah Dikenali (Familiarity)
 Gunakan konsep bahasa yang akrab bagi pengguna.
• Menjaga antarmuka tetap alami, meniru pola perilaku pengguna.
• Gunakan metafora dunia nyata.

13. Konsep Dasar GUI
10. Efisien
• Minimalkan gerakan mata dan tangan, dan tindakan kontrol lainnya.
• Transisi antara berbagai kontrol sistem harus mengalir dengan mudah dan bebas.
• Sistem navigasi harus sesingkat mungkin.
• Gerakan mata melalui layar harus jelas dan berurutan.
• Mengantisipasi keinginan dan kebutuhan pengguna bila memungkinkan.

14. Konsep Dasar GUI
11. Flexibility
 Suatu sistem harus fleksibel terhadap berbagai kebutuhan penggunanya, memungkinkan tingkat
dan jenis kinerja berdasarkan:
• Pengetahuan dan keterampilan masing-masing pengguna.
• Pengalaman setiap pengguna.
• Preferensi pribadi setiap pengguna
• Kebiasaan setiap pengguna
• Kondisi saat itu

15. Konsep Dasar GUI
12. Forgiveness
• Berikan opsi bantuan ketika pengguna melakukan kesalahan pada desain kamu
• Ketika kesalahan terjadi, berikan pesan konstruktif cara mengatasinya.
13. Recovery
 Suatu sistem harus mengizinkan :
• Perintah atau tindakan untuk dihapuskan atau dibalik.
• Kembali ke titik tertentu jika kesulitan muncul (Undo).

16. Konsep Dasar GUI
14. Predictability
 Pengguna harus dapat mengantisipasi perkembangan suatu task atau tugas yang ada pada
desain
 Berikan elemen layar yang berbeda dan dapat dikenali
• Berikan isyarat pada hasil tindakan yang akan dilakukan
• Semua harapan harus dipenuhi secara seragam dan lengkap.

17. Konsep Dasar GUI
15. Responsive
 Suatu sistem harus bisa dengan cepat merespon permintaan pengguna dan responsif meliputi hal :
• Visual
• Textual
• Auditory
16. Simpel
• Buat Desain Interface sesederhana mungkin
• Berikan fitur default
• Minimalkan titik alignment layar.
• Berikan keseragaman dan konsistensi

18. Konsep Dasar GUI
17. Transparansi
• Mengizinkan pengguna untuk fokus pada tugas atau task, tanpa mempedulikan mekanisme
antarmuka.

19. Cara Membuat Tampilan GUI di NetBeans
1. Membuat Project
2. Membuat JFrame Form
Klik kanan pada package, contohnya nama package adalah tampilan, silahkan
sesuaikan dengan milik kalian jika sudah punya package yang berbeda.

20. Bagaimana Jika di NetBeans IDE
pilihan JFrame Form ?
 klik pilihan Other, setelah itu akan muncul jendela baru seperti pada contoh
gambar di bawah ini:

21.  Pada bagian Categories, silahkan kalian klik Swing GUI Forms. Setelah itu lihat pada bagian File Types,
silahkan pilih JFrame Form lalu klik Next.
 Setelah memilih JFrame Form, selanjutnya beri nama JFrame Formnya. Untuk namanya bebas atau sesuaikan
dengan apa yang ingin dibuat. Jika sudah maka akan muncul tampilan seperti pada contoh gambar di bawah
ini:

22. Membuat Tampilan GUI
 Pada langkah ini akan dimulai membuat tampilannya. Perhatikan pada bagian
sebelah kanan yang diberi tanda warna merah

23. Di situlah letak komponen-komponen yang nantinya akan dibutuhkan. Kita dapat
memilih komponen apa saja yang dibutuhkan pada aplikasi yang akan dibuat. Misalnya
membuat formulir kontak, dan formulir kontak yang akan dibuat memiliki desain
tampilan seperti pada contoh gambar di bawah ini:

24. Komponen-komponen yang dibutuhkan adalah :
• 5 Label
• 3 Text Field
• 1 Text Area
Cara meletakan komponen-komponennya :
Pilih dan klik komponen yang dibutuhkan, lalu arahkan ke JFrame Form lalu lepaskan.

25. Komponen Dasar Java Swing
1. Top-level Container
 Merupakan container dasar dimana komponen lainnya diletakkan. Toplevel
Container ini terdiri dari Frame, Dialog, dan Applet yang diimplementasikan
dalam class JFrame, JDialog, dan JApplet.

2. Intermediate Container
 Merupakan komponen perantara untuk peletakkan komponen lainnya, yaitu
class JPanel.

26. 3. Atomic Container
 Merupakan komponen yang memiliki fungsi spesifik dan biasanya user
berinteraksi langsung dengan jenis komponen ini. Komponen ini terdiri dari:
JButton, JTextField, dan JTextArea.
4. Layout Manager
 Layout Manager berfungsi untuk mengatur posisi dari komponen yang diletakkan
pada container. Terdapat lima macam layout, yaitu: class BorderLayout,
Boxlayout, FlowLayout, GridBagLayout, dan GridLayout.
5. Event Handling
 Event Handling berfungsi untuk menangani event yang dilakukan user, misalnya
menekan tombol, mengklik mouse, dan lain sebagainya.