Komponen Antarmuka Grafis

1. Komponen Antarmuka Grafis Pertemuan 4 Pemrograman Antar Muka Grafis

2. Pendahuluan • Salah satu kriteria penting agar program aplikasi yang kita buat mempunyai sifat ramah dengan pengguna (user friendly) adalah program aplikasi tersebut haruslah mempunyai tampilan yang menarik perhatian user, biasanya berkaitan dengan antarmuka grafis yang mampunyai banyak kelebihan dalam memperindah tampilan dibandingkan dengan tektual. • Komponen antarmuka grafis merupakan bentuk –bentuk tampilan yang dipakai pada paket-paket program aplikasi, baik yang bekerja pada mode teks maupun grafik.

3. Dokumentasi rancangan dapat dikerjakan atau dilakukan dalam beberapa cara: • Membuat sketsa pada kertas • Menggunakan peranti prototipe GUI, • Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang lain, • Menggunakan peranti bantu yang disebutCASE (Computer Aided SoftwareEngineering).

4. Komponen Dasar Antarmuka Grafis • Tombol tekan • Spin Box • List Box • Combo Box • Tombol Radio/radio button • Check Button • Penggeser (Sliding Bar atau Slider) • Icon • Text Box • Editor Box

5. Tombol Tekan • Digunakan untuk mengaktifkan suatu aktivitas apabila tombol tersebut ditekan menggunakan mouse (klik mouse). • Teknik penampilan tombol tekan pada layar perlu diperhatikan, sehingga tampilan tombol tekan tersebut terkesan merupakan tombol tiga dimensi yang ketika dipilih terlihat seperti jika kita menekan tombol yang sebenarnya. • Warna latar belakang untuk tombol tekan yang sering digunakan adalah abu-abu muda dengan pembatas tombol adalah hitam atau abu-abu tua.

6. Gambar Tombol Tekan

7. Spin Box (1) • Digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan menambahkan atau mengurangkannya dengan suatu nilai tertentu. - Nilai peubah akan bertambah ketika pengguna menekan tombol dengan anak panah ke atas, atau berkurang ketika pengguna menekan anak panah ke bawah. • Pada spin box, nilai maksimum dan minimum peubah harus dinyatakan dengan jelas agar tombol ini tidak memutar (spinning) terus menerus.

8. Spin Box (2) • Spin Box terdiri atas dua bagian : - bagian untuk menampilkan nilai peubah yang dimaksud  kotak putih - bagian pengontrol nilai  bergambar anak panah ke atas dan ke bawah.

9. Gambar Spin Box

11. List Box (1) • Komponen antarmuka grafis yang digunakan untuk menampilkan sejumlah pilihan sekaligus pada layar tampilan yang dapat dipilih oleh pengguna. • Setelah pengguna memilih salahsatu dari sekian banyak pilihan yang tersedia di list box, pilihan terpilih tersebut akan disimpan sebagai nilai dari sebuah peubah.

12. List Box (2) • Pada dasarnya sebuah list box hanya terdiri atas bagian yang digunakan untuk menampilkan pilihan-pilihan yang tersedia. • Permasalahan yang sering terjadi: - Kadang pilihan yang ada cukup banyak sehingga list tidak mampu menampung semua pilihan yang ada. - Panjang suatu pilihan (jika berupa teks) lebih besar daripada lebar list box. • Solusi : menambahkan penggeser (scrollbar).

13. Gambar List Box

15. Combo Box • Fungsinya sama dengan list box - menampilkan sejumlah pilihan yang dapat dipilih secara bebas oleh pengguna. • Kata “combo” merupakan singkatan dari “combination” yang artinya lewat komponen itu pengguna dapat memilih pilihan dari sejumlah pilihan yang tersedia atau dapat mengetikkan pilihan dia sendiri pada tempat yang disediakan.

16. Gambar Combo Box

18. Perbedaan Combo Box dan List Box • Pada list box : semua atau sebagian pilihan yang tersedia langsung akan terlihat. Pada combo box : pilihan-pilihan tidak akan terlihat sampai pengguna menekan tombol kontrol pada combo box yang dimaksud. • Pada list box : pengguna hanya dapat memilih pilihan yang tersedia. Pada combo box : pengguna dapat mengetikkan pilihannya sendiri (yang mungkin tidak ada dalam daftar pilihan yang tersedia).

19. Kapan Harus Menggunakan List Box atau Combo Box ? • Tergantung dengan lebar layar yang tersedia untuk menampilkan pilihan-pilihan yang ada. - Jika lebar layar cukup luas, bisa menggunakan list box. - Jika lebar layar tidak cukup luas untuk menampilkan semua pilihan, bisa menggunakan combo box.

20. Check Box • Digunakan untuk memilih satu atau lebih pilihan dari sejumlah pilihan yang tersedia • Check Box biasanya dioperasikan dalam sebuah kelompok. • Check box cocok dipakai jika pemrogram memberi kebebasan pengguna untuk memilih lebih dari satu pilihan. Contoh : untuk form data pribadi harus mengisi hobi, jika mempunyai hobi lebih dari satu, maka lebih tepat menggunakan check box.

21. Gambar Check Box

22. Radio Button/Tombol Radio (1) • Pada dasarnya sama dengan check box. • Tombol radio terdiri atas 2 bagian : - bagian pengendali yang berupa lingkaran kecil - label, yang menunjukkan atribut tombol radio yang dimaksud. • Tombol radio hanya dapat menampilkan satu pilihan yang dapat bernilai ON atau OFF dengan tanda tertentu.

23. Radio Button/Tombol Radio (2) • Secara fisik, masing-masing tombol radio bersifat Otonom, artinya satu sama lain tidak saling tergantung. • Secara operasional, tombol radio dapat di ON atau OFF –kan ketika pengguna mengklik bagian pengendali atau pada bagian label. • Tapi pada program yang akan disajikan, pengguna hanya dapat mengklik bagian pengendali/lingkaran kecil saja untuk meng-ON kan sebuah tombol menu sehingga secara otomatis meng-OFF kan tombol menu lain yang semula dalam keadaan ON.

24. Gambar Radio Button/Tombol Radio

26. Persamaan Radio Button dengan Check Box • Fungsinya sama-sama untuk menampilkan sejumlah pilihan yang dapat dipilih oleh pengguna. • Secara fisik, check box maupun radio button sama-sama berdiri sendiri tanpa mempengaruhi satu sama lain. • Struktur data yang diperluka untuk membuat check box sama dengan struktur data untuk membuat radio button.

27. Perbedaan Radio Button dengan check Box • Pada sekelompok radio button yang tersedia pengguna hanya dapat memilih salah satu pilihan, sedang pada check box, pengguna dapat memilih satu atau bahkan semua pilihan yang tersedia.

29. Penggeser/Slider/Scroll bar • Digunakan untuk menggeser layar untuk memperlihatkan bagian lain dari tampilan yang semula tidak terlihat, sekaligus menghilangkan bagian yang semula terlihat. • Penggeseran dapat dilakukan pada arah kiri-kanan (horisontal) maupun atas-bawah (vertikal). • Ada 2 bagian penggeser : - Penggeser horisontal - Penggeser vertikal

30. Gambar Scroll Bar vertikal horisontal

31. Layout • Penggunaan layout manager memudahkan programer untuk menyusun komponen-komponen GUI dibandingkan dengan menentukan ukuran eksak dan posisi setiap komponen, sehingga para programmer akan lebih berkonsentrasi terhadap urusan "look and feel" saja.

32. Border Layout • BorderLayout menempatkan komponen dengan pendekatan arah mata angin. Komponen-komponen pada layout ini ditempatkan pada posisi north, south, west, center, east.

33. FlowLayout • FlowLayout adalah layout yang menyusun komponen dari kiri ke kanan, selanjutnya ke baris berikutnya. Jika ukuran windows diperbesar ukuran komponen pada FlowLayout tidak berubah.

34. Box Layout • Layout jenis ini meletakkan komponen-komponen dalam satu baris atau satu kolom saja.

35. Card Layout • Card Layout menampilkan container-container/panel-panel seperti tumpukan kartu. Hanya satu container yang akan tampil untuk satu waktu.

36. Grid Layout • Grid layout merupakan layout manager berbentuk grid. Semua komponen dalam layout ini memiliki ukuran yang sama.

37. Grid Bag Layout • Grid bag layout adalah pengaturan layout yang dapat digunakan untuk meletakkan komponen secara bebas. Setiap komponen dapat menempati ukuran yang berbeda dengan komnponen lainnya. • Setiap komponen dapat menempati lebih dari satu grid.

38. Soal Latihan 1

39. Latihan 2 • Buatlah program berbasis GUI yang menerima inputan dua buah bilangan dan dapat melakukan operasi penjumlahan, pengurangan, perkalian, dan pembagian dua bilangan tersebut, lalu menampilkan hasilnya!

40. Form Designer • www.jotform.com • www.formlogix.com • Argo form designer (http://www.argocomputing.com.au)

41. Form Designer

42. Templates