KOMPONEN

ANTARMUKA
GRAFIS
INTERAKSI MANUSIA DAN KOMPUTER
ENDAH TRI ESTHI H.
PENDAHULUAN

 Komponen antarmuka grafis :bentuk–bentuk

tampilan yang dipakai pada paket-paket
program aplikasi, baik yang bekerja pada
mode teks maupun grafik
MACAMMACAM KOMPONEN DASAR
ANTARMUKA GRAFIS
 1.Tomboltekan
 2.SpinBox
 3.ListBox
 4.ComboBox
 5.TombolRadio/radiobutton
 6.CheckButton
 7.Penggeser(SlidingBaratauSlider)
 8.Icon
 9.TextBox
 10.EditorBo
TOMBOL TEKAN (1)
 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.
TOMBOL TEKAN (2)
 Warna latar belakang untuk tombol tekan
yang sering digunakan adalah abu-abu muda
dengan pembatas tombol adalah hitam atau
abu-abu tua.
GAMBAR TOMBOL TEKAN
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
SPIN BOX (2)
 SpinBox terdiri atas dua bagian:
 -bagian untuk menampilkan nilai peubah
yang dimaksud 
 kotak putih-bagian pengontrol nilai
bergambar anak panah ke atas dan ke
bawah
GAMBAR SPIN BOX
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.
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)
GAMBAR LIST BOX
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.
GAMBAR COMBO BOX
PERBEDAAN COMBO BOX DAN
LIST BOX
 1.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.
 2.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)
KAPAN HARUS MENGGUNAKAN
LIST BOX?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
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.
GAMBAR CHECK BOX
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
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
GAMBAR RADIO
BUTTON/TOMBOL RADIO
PERSAMAAN RADIO BUTTON
DENGAN CHECK BOX
 1. Fungsinya sama-sama untuk menampilkan
sejumlah pilihan yang dapat dipilih oleh
pengguna.
 2.Secara fisik, check box maupun radio
button sama-sama berdiri sendiri tanpa
mempengaruhi satu sama lain.
 3.Struktur data yang diperluka untuk
membuat check box sama dengan struktur
data untuk membuat radio butto
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
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
GAMBAR SCROLL BAR
SELESAI
 TERIMAKASIH