pembuatan komponen antarmuka grafis · komponen antarmuka grafis yang digunakan untuk mengatur...
TRANSCRIPT
![Page 1: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/1.jpg)
PEMBUATAN KOMPONEN
ANTARMUKA GRAFIS
![Page 2: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/2.jpg)
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.
Untuk itu kita harus mempelajari bagaimana cara pembuatan
komponen antarmuka grafis.
![Page 3: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/3.jpg)
KOMPONEN ANTARMUKA GRAFIS
Adalah bentuk–bentuk tampilan antarmuka yang
dipakai pada paket–paket program aplikasi, baik yang
bekerja pada mode teks maupun pada mode grafik
Komponen Antarmuka grafis antara lain :
1. Tombol Tekan
2. Spin Box
3. List Box
4. Combo Box
5. Tombol Radio
6. Check Box
7. Label Box
![Page 4: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/4.jpg)
1. TOMBOL TEKAN
•Digunakan untuk mengaktifkan suatu aktivitas apabila tombol
tersebut ditekan menggunakan mouse (Click Mouse).
•Jenis tombol dinamakan tombol tekan karena ketika kita
menekan (click) tombol tersebut maka akan terlihat bahwa
seolah-olah tombol “masuk” ke dalam layar monitor, seperti
halnya ketika kita menekan sebuah tombol pada HP.
![Page 5: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/5.jpg)
CONTOH : Ok Cancel
Command Button pada
Microsoft Visual Basic 6.0
merupakan salah satu contoh
Tombol Tekan
![Page 6: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/6.jpg)
2. SPIN BOX Komponen antarmuka grafis yang digunakan untuk mengatur
nilai suatu peubah, biasanya bertipe numerik, dengan
menambah atau mengurangkannya dengan suatu nilai
tertentu dan nilai maksimum dan minimum peubah
dinyatakan dengan jelas
Pada dasarnya, sebuah spin box digunakan untuk menampilkan
suatu peubah saat itu dan kemudian nilai peubah tersebut
akan bertambah ketika user menekan tombol dengan anak
panah ke atas, atau berkurang ketika user menekan tombol
anak panah ke bawah.
Pertambahan atau pengurangan nilai peubah tersebut dapat
diatur sesuai kebutuhan.
![Page 7: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/7.jpg)
Dalam spin box, nilai maksimum dan minimum
peubah harus dinyatakan dengan jelas agar
tombol tidak memutar (spinning) terus-menerus.
Spin
Box
![Page 8: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/8.jpg)
3. List Box Digunakan untuk menampilkan sejumlah pilihan yang
tersedia yang dapat dipilih oleh pengguna program.
Biasanya pilihan yang dapat dipilih berupa pilihan
tunggal, tetapi dalam kondisi tertentu juga dimungkinkan
untuk membuat pilihan jamak (multiple choices).
Pada dasarnya, sebuah list box hanya terdiri atas bagian
yang digunakan untuk menampilkan pilihan-pilihan yang
tersedia.
Terkadang terjadi suatu keadaan dimana panjang suatu
pilihan lebih besar dibandingkan dengan lebar list box.
Untuk itu, list box tersebut harus ditambahkan penggeser
(scrollbar), baik vertikal maupun horizontal.
![Page 9: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/9.jpg)
CONTOH
List Box
![Page 10: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/10.jpg)
List Box pada
Microsoft Visual
Basic 6.0
List Box dengan
scrollbar baik vertikal
maupun horizontal
![Page 11: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/11.jpg)
4. COMBO BOX
Mempunyai fungsi yang sama dengan list box, yaitu
untuk menampilkan sejumlah pilihan yang dapat dipilih
secara bebas oleh pengguna.
2 perbedaan antara list box dengan combo box:
a. Jika pada list box semua atau sebagian pilihan yang
tersedia langsung akan terlihat, sedangkan pada combo
box pilihan tidak akan terlihat sampai pengguna
menekan tombol kontrol.
b. Pada list box pengguna hanya dapat memilih pilihan
yang tersedia, sedang pada combo box pengguna
dapat memasukkan pilihan yang mungkin tidak ada
dalam daftar pilihan yang tersedia
![Page 12: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/12.jpg)
CONTOH Combo Box
![Page 13: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/13.jpg)
Combo Box pada
Microsoft Visual
Basic 6.0
![Page 14: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/14.jpg)
KAPAN PENGGUNAAN LIST BOX DAN COMBO
BOX Telah disebutkan bahwa list box dan combo box mempunyai
fungsi yang sama, yaitu sama-sama untuk menampilkan sejumlah pilihan yang dapat dipilih oleh user.
Kapan sebaiknya menggunakan list box dan kapan sebaiknya menggunakan combo box ???
Pertimbangan untuk memilih salah satu dari kedua komponen tersebut, terutama tergantung dari seberapa besar bagian layar yang akan digunakan untuk menampilkan komponen-komponen tersebut.
![Page 15: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/15.jpg)
Jika layar cukup lebar, maka sebaiknya menggunakan list box
karena user dapat mengetahui secara langsung sebagian
atau seluruh pilihan yang tersedia.
Tapi jika layar tidak cukup luas untuk menampilkan pilihan,
maka jalan terbaik adalah menggunakan combo box.
![Page 16: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/16.jpg)
5. TOMBOL RADIO
Sejumlah pilihan yang memungkinkan
pengguna untuk memilih salah satu pilihan
yang tersedia, pilihan tersebut dapat bernilai on
atau off yang ditandai dengan tanda tertentu.
![Page 17: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/17.jpg)
CONTOH
Radio
Button
![Page 18: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/18.jpg)
Radio Button (Tombol
Radio) pada Microsoft
Visual Basic 6.0
![Page 19: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/19.jpg)
6. CHECK BOX
Sejumlah pilihan yang memungkinkan
pengguna untuk memilih salah satu atau lebih
pilihan yang tersedia.
![Page 20: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/20.jpg)
CONTOH
Check Box
![Page 21: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/21.jpg)
Check Box
pada Microsoft Visual
Basic 6.0
![Page 22: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/22.jpg)
7. LABEL BOX
Digunakan untuk memberikan komentar atau
memberi nama pada masing – masing
komponen antarmuka grafis
![Page 23: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/23.jpg)
Label Box
pada Microsoft Visual
Basic 6.0
![Page 24: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/24.jpg)
MENDESAIN
WINDOW
![Page 25: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/25.jpg)
PEMBAHASAN
1. Memilih Jenis Window
2. Mendesain bagian window
3. Mendesain Primary Window
Document window
Application window
Utility window
Dialogs and Alerts
Mendesain Title
Mendesain Border and Windows Command
Modality
Focus
![Page 26: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/26.jpg)
MEMILIH JENIS WINDOW
1. Document window
![Page 27: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/27.jpg)
2. Application window
![Page 28: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/28.jpg)
3. Utility window
![Page 29: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/29.jpg)
4. Dialogs and Alerts
![Page 30: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/30.jpg)
MENDESAIN BAGIAN WINDOW
Tampilan Windows XP
![Page 31: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/31.jpg)
Tampilan Windows Classic
![Page 32: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/32.jpg)
Tampilan Window B II for Linux
![Page 33: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/33.jpg)
1. MENDESAIN TITLE
Setiap window sebaiknya diberi judul (title). Sebuah judul
window yang bagus berisi informasi yang relevan.
Beri judul yang berbeda pada tiap window yang sedang
dibuka.
![Page 34: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/34.jpg)
2. MENDESAIN BORDER AND WINDOWS COMMAND
Border Window
![Page 35: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/35.jpg)
Shape Window
![Page 36: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/36.jpg)
3. Modality
Sebuah modal window melarang user berinteraksi
dengan window lain dalam aplikasi yang sama
(application modal) atau aplikasi yang lain termasuk
desktop itu sendiri (system modal)
Non-Modal window tidak melarang berhubungan
dengan aplikasi utama atau window lain.
![Page 37: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/37.jpg)
4. FOCUS
Tiga mekanisme:
a. Click to focus : berarti sebuah window mendapat focus karena diklik oleh user
b. Point to focus : berarti sebuah window mendapat focus karena ditunjuk oleh mouse. Dikenal juga dengan “sloppy focus”
c. Keyboard focus : berarti sebuah window mendapat focus karena dipilih user menggunakan shortcut keyboard seperti Alt+Tab.
Focus berarti user menentukan window mana yang
seharusnya menerima data dari keyboard, mouse, atau
device input yang lain.
![Page 38: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/38.jpg)
MENDESAIN PRIMARY WINDOW
Primary window umumnya mempresentasikan data user
seperti dokumen teks pada aplikasi word processor,
gambar pada aplikasi pengolah gambar, spreadsheet
pada aplikasi seperti excel, dsb.
Normalnya primary window mempunyai sebuah border,
sebuah menubar, dan sebuah status bar, dan
mungkin juga mempunyai satu atau lebih toolbar.
![Page 39: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/39.jpg)
Aplikasi Contoh Title
Microsoft Word Document1 – Microsoft Word
Microsoft Excel Microsoft Excel – Book1
Microsoft Project Microsoft Project – Project1
Aplikasi Contoh Title
Adobe Reader Adobe Reader – [Document.pdf]
Macromedia Dreamweaver 8 Macromedia Dreamweaver 8 –
[Untitled-1(XHTML)]
1. MENDESAIN TITLE
Aplikasi yang menyebutkan ekstensi file
![Page 40: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/40.jpg)
Aplikasi yang menyertakan informasi penting lainnya
Aplikasi Contoh Title
Macromedia Fireworks 8 Macromedia Fireworks 8 – [Untitled-
1.png@50%]
Aplikasi yang tidak berbasis dokumen
Aplikasi Contoh Title
Calculator Calculator
Norton Antivirus Norton Antivirus
Aplikasi yang memberikan keterangan tambahan
sehubungan dengan status aplikasi
Aplikasi Contoh Title
Address Book Address Book – Main Identity
MySQL Query Browser MySQL Query Browser –
root@localhost:3306
![Page 41: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/41.jpg)
2. WINDOW COMMANDS
Pada primary window, mempunyai beberapa perintah yang
terdapat pada control boxnya:
Close : Keluar dari window
Maximize : Memperbesar Window
Minimize : Memperkecil tampilan window
Restore Down : Kembali ke tampilan awal
![Page 42: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/42.jpg)
3. HUBUNGAN DENGAN DOKUMEN DAN WINDOW
Single Document Interface (SDI)
Aplikasi single document interface menempatkan
masing-masing dokumen pada sebuah primary
window tersendiri. Jadi tiap – tiap dokumen terasa
sebagai sebuah aplikasi yang berdiri sendiri.
![Page 43: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/43.jpg)
Contoh aplikasi SDI adalah Microsoft Word
![Page 44: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/44.jpg)
Controlled Single Document Interface (CSDI)
CSDI adalah aplikasi yang ruangnya untuk menu tidak
cukup untuk masing – masing dokumen yang terbuka,
sehingga tampak ada primary window yang hanya terdiri
dari menu, sedangkan primary window lainnya berisi
dokumen, dimana dokumen tersebut dikontrol melalui
primary window control (yang berisi menu)
![Page 45: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/45.jpg)
CONTOH APLIKASI CSDI ADALAH GIMP
![Page 46: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/46.jpg)
Multiple Document Interface (MDI)
MDI menampilkan beberapa dokumen dalam window
tunggal.
Window ini dapat menggunakan panned, tabbed, atau
menampilkan lebih dari satu sekaligus.
![Page 47: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/47.jpg)
CONTOH APLIKASI MDI ADALAH MACROMEDIA
FLASH MX
![Page 48: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/48.jpg)
4. MENDESAIN UTILITY WINDOW
Instanst Apply
Window yang mengijinkan user mengubah nilai atau setting
seperti property atau preference, update nilai – nilai atau
setting akan serta merta membuat perubahan pada
window
![Page 49: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/49.jpg)
CONTOH INSTANT APPLY ADALAH CUSTOMIZE PADA
MICROSOFT WORD
![Page 50: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/50.jpg)
Explicit Apply
Window yang dapat merubah suatu nilai – nilai dengan
secara eksplisit.
Ciri khas explicit apply yaitu mempunyai 3 button :
1. Apply : Mengimplementasikan semua setting dalam window,
tetapi utility window tidak langsung ditutup
2. Cancel : Mereset semua perubahan pada setting dimana
nilai – nilai dikembalikan ke keadaan saat window ini
dibuka.
3. Ok : Mengimplementasikan semua setting pada window dan
menutup window preference
![Page 51: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/51.jpg)
CONTOH EXPLICIT APPLY
![Page 52: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/52.jpg)
Property Window
Adalah tempat user dapat
melihat dan mengubah
karakteristik sebuah objek,
seperti dokumen, file, atau
aplikasi.
Contoh property pada MS.Word
![Page 53: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/53.jpg)
Preferences Window
Adalah window tempat
user dapat memodifikasi
tampilan window maupun
tingkah lakunya.
Contoh Option pada MS. Word
![Page 54: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/54.jpg)
Toolboxes
Window untuk mengakses sekumpulan aksi maupun
toggle dengan tampilan toolbar kecil seperti button.
Contoh Toolboxes pada VB 6.0
![Page 55: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/55.jpg)
Toolbox Categories
Pengelompokkan Toolbox berdasarkan fungsinya
Contoh :
![Page 56: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/56.jpg)
5. MENDESAIN ALERTS
Alert menyediakan informasi tentang keadaan sebuah
sistem aplikasi atau menanyakan informasi penting tentang
proses selanjutnya dari sebuah task khusus.
![Page 57: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/57.jpg)
Alert Text
Terdiri dari dua jenis :
1. Primary text , menyediakan informasi singkat atau usulan
tindakan kepada user yang terdiri dari satu kalimat.
2. Secondary text, menyediakan informasi yang lebih detail
tentang problem atau anjuran tindakan kepada user.
![Page 58: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/58.jpg)
Alerts Button
Menyediakan tombol persetujuan untuk melupakan alert
atau melakukan tindakan selanjutnya berdasarkan
informasi pada Primary text.
Button–button yang biasa ada di alert :
Cancel, Help, Yes, No, Save, Abort, dsb
![Page 59: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/59.jpg)
Information Alerts
Memberitahukan sebuah informasi kepada user sebelum
melanjutkan aksinya atau menampilkan informasi yang
memang diminta oleh user.
Ok
You have an appointment with Mr. M. Haddil Fuad
in 30 Minutes
![Page 60: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/60.jpg)
• Error Alerts
Digunakan untuk menampilkan peringatan error saat
operasi yang diminta tidak dapat dilakukan secara
lengkap.
No
There were build errors. Contonue?
Yes
![Page 61: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/61.jpg)
• Confirmation Alerts
Melakukan konfirmasi ketika user ingin menghapus
datanya atau melakukan aktivitas yang akan
menimbulkan resiko.
![Page 62: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/62.jpg)
• Save Confirmation Alerts
Membantu user agar tidak kehilangan dokumen/
perubahan pada dokumen ketika menutup aplikasi.
![Page 63: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/63.jpg)
• Authentication Alerts
Memaksa user memasukkan informasi yang diperlukan
untuk dapat mengakses informasi lebih lanjut.
User Name
Password
Ok
Authentication Pada Suatu Aplikasi Authentication Pada Linux
![Page 64: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/64.jpg)
6. MENDESAIN DIALOG BOXES
Border Ya
Modality Dapat berupa modal maupun non modal window
Title Format Nama Perintah
Resizing Biasanya tidak dapat diubah ukurannya oleh user
kecuali pada kasus khusus
Button Dapat mengikuti pedoman yang digunakan alerts.
Dialog boxes (kotak dialog) menyediakan pertukaran
informasi, atau dialog, antara user dan aplikasi. Dapat
menggunakan kotak dialog untuk menangkap informasi
yang diperlukan dari user untuk tugas atau aksi tertentu,
misalkan percetakan
Pedoman umum membuat kotak dialog:
![Page 65: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/65.jpg)
Additional Button
Kita dapat menambahkan button tambahan selain
affirmative button (tombol persetujuan) dan cancel
Pedoman memberi button tambahan :
Tempatkan button tambahan dalam satu area di bagian
bawah kotak dialog di sebelah kiri button standar.
Aturlah button berdekatan dengan kontrol yang
berhubungan dengan button tersebut.
![Page 66: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/66.jpg)
Layout
Sebaiknya menyusun kontrol dengan memperhatikan arah
pengguna aplikasi membaca dimana umumnya biasanya
dari kiri ke kanan dan dari atas ke bawah. Karena itu
tempatkan kontrol utama sedekat mungkin dengan posisi
ujung kiri atas.
![Page 67: PEMBUATAN KOMPONEN ANTARMUKA GRAFIS · Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan ... (scrollbar), baik vertikal](https://reader033.vdocuments.pub/reader033/viewer/2022052813/60984bd1e99c64566f4094c3/html5/thumbnails/67.jpg)
CONTOH PADA MACROMEDIA FLASH MX