Transcript 05-Komponen Antarmuka Grafis - Elista

Komponen Antarmuka Grafis
Pertemuan 4
Pemrograman Antar Muka Grafis
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.
• Dokumentasi rancangan dapat dikerjakan atau
dilakukan dalam beberapa cara:
a) Membuat sketsa pada kertas
b) Menggunakan peranti prototipe GUI,
c) Menuliskan tekstual yang menjelaskan tentang kaitan
antara satu jendela dengan jendela yang lain,
d) Menggunakan peranti bantu yang
disebut CASE (Computer Aided Software Engineering).
Komponen Dasar Antarmuka Grafis
1. Tombol tekan
2. Spin Box
3. List Box
4. Combo Box
5. Tombol Radio/radio button
6. Check Button
7. Penggeser (Sliding Bar atau Slider)
8. Icon
9. Text Box
10. Editor Box
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.
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)
• 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.
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 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.
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 button.
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
vertikal
horisontal
Layout
• Penggunaan layout manager memudahkan
programer untuk menyusun komponenkomponen GUI dibandingkan dengan menentukan
ukuran eksak dan posisi setiap komponen,
sehingga para programmer akan lebih
berkonsentrasi terhadap urusan "look and feel"
saja.
Border Layout
• BorderLayout menempatkan komponen dengan
pendekatan arah mata angin. Komponen-komponen pada
layout ini ditempatkan pada posisi north, south, west,
center, east.
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.
Box Layout
• Layout jenis ini meletakkan komponen-komponen
dalam satu baris atau satu kolom saja.
Card Layout
• Card Layout menampilkan container-container/panelpanel seperti tumpukan kartu. Hanya satu container yang
akan tampil untuk satu waktu.
Grid Layout
• Grid layout merupakan layout manager berbentuk
grid. Semua komponen dalam layout ini memiliki
ukuran yang sama.
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.
Soal Latihan 1
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!
Form Designer
• www.jotform.com
• www.formlogix.com
• Argo form designer
(http://www.argocomputing.com.au)
Form Designer
Templates