Komponen Antarmuka Grafis

Antarmuka Pengguna Grafi
s atau apg (graphical user interface atau gui) adalah jenis antarmuka pengguna yang menggunakan metode interaksi pada peranti elektronik secara grafis (bukan perintah teks) antara pengguna dan komputer.

Komponen Antarmuka Grafis

Hal yang paling penting dalam mewujudkan interaksi manusia dan komputer yang optimal adalah media perantara manusia dan komputer sehingga terciptanya sebuah interaksi antara keduanya. Media perantara tersebut adalah program aplikasi yang memiliki desain tampilan menarik perhatian pengguna. 

Sederhana, dan mudah digunakan oleh pengguna. Dalam sejarah perkembangan komputer, dahulu tampilan pada aplikasi yang digunakan masih hanya berbentuk teks putih dan berlatarbelakang hitam.

Jika dahulu tampilan bukanlah yang utama, maka sekarang dalam perkembangan teknologi, desain tampilan dan proses sistem merupakan 2 hal yang utama dalam menciptakan aplikasi yang sesuai dengan kubutuhan pengguna. 

Desain tampilan saat ini sudah berkembang dengan menggunakan antarmuka grafis.Ada beberapa komponen antarmuka grafis yang perlu diketahui dan diperhatikan dalam perancangan tampilan yang mudah diterima oleh pengguna.

Dari berbagai komponen grafik yang banyak digunakan, berikut ini merupakan komponen dasar dari antarmuka grafis adalah sebagai berikut:

A. Tombol Tekan (Button)
Komponen ini digunakan untuk mengaktifkan suatu proses atau melanjutkan proses ke proses lainnya, contoh untuk tombol save, edit, delete, dan sebagainya. Tombol tekan juga harus dibuat berintegrasi dengan aksi klik mouse sehingga dapat dilakukan fungsi tekan ketika tombol akan dipilih. 

Untuk memudahkan pengguna mengetahui fungsi dari tombol tekan yang tersedia, biasanya tombol diberi label berupa teks. Misal tombol berfungsi untuk melakukan proses save maka label dari tombol tersebut adalah ‘SAVE’.

Komponen Antarmuka Grafis
Gambar A. Tombol Tekan

B. Spin Box
Komponen antarmuka grafis yang berfungsi untuk mengatur nilai suatu peubah, yang biasanya bertipe numerik, dengan menambahkan atau mengurangkannya.

Komponen Antarmuka Grafis
Gambar B. Spin Box pada Format Document Word

C. List Box
Berbeda dengan spin box, list box digunakan untuk menampilkan sejumlah pilihan yang tersedia dengan mode teks atau numeric yang dapat dipilih oleh pengguna secara langsung  melalui bantuan scrollbar (penggeser) dalam box. 

List box biasanya dipilih jika layar kosong yang tersedia masih cukup banyak untuk menampilkan semua pilihan yang ada pada tampilan.

Komponen Antarmuka Grafis
Gambar C. List Box


D. Combo Box
Combo box memiliki fungsi yang sama dengan list box, perbedaannya dalam penampilannya. Pada list box, isi pilihan ditampilkan langsung seluruhnya, sedangkan pilihan pada combo box tidak akan terlihat langsung oleh pengguna kecuali pengguna menekan tombol anak panah yang melekat pada combo box. 

Combo box biasanya dipilih, jika lebar layar tidak cukup luas untuk menampilkan semua pilihan yang ada.

Komponen Antarmuka Grafis
Gambar D. Combo Box

E. Tombol Radio (Radio Button)
Komponen ini digunakan untuk memilih satu atau lebih pilihan dari sejumlah pilihan yang tersedia dengan tampilan setiap pilhan yang dipilih maka akan mengaktifkan salah satu radio button seperti tombol bullet.

Komponen Antarmuka Grafis
Gambar E. Radio Button

F. Check Box
Hampir sama dengan tombol radio, perbedaannya adalah bentuk tampilan ketika salah satu pilihan dipilih akan mengaktifkan salah satu checkbox yang dipilih. Selain itu menggunakan chek box dapat memilih lebih dari satu pilihan sedangkan radio button hanya satu pilihan.

Komponen Antarmuka Grafis
Gambar F. Check Box

G. Sliding Bar / Scroll Bar (Penggeser)
Komponen sliding bar disediakan apabila ada kemungkinan pengguna membuat teks atau gambar melebih lebar laya tampilan, sehingga dibutuhkan tools untuk menampilkan gambar atau teks yang tidak muat ditampilkan pada satu layar dengan cara menggeser layar kekiri atau kekanan dan keatas atau kebawah. 

Komponen penggeser diataranya adalah panah penggeser dikanan dan dikiri atau diatas dan dibawah, thumbpad, dan daerah kerja thumbpad. Jika penggeser ditempatkan horizontal maka thumbpad digeser pada daerah kerjanya kea rah kiri atau kanan atau menekan tanda panah sebanyak jumlah geser.

Komponen Antarmuka Grafis
Gambar G. Sliding Bar / Scroll bar

H. Icon
Komponen ini berfungsi sama seperti tombol tekan hanya saja jika tombol tekan berbentuk sederhana sepeti persegi panjang dan sejenisnya sedangkan icon cenderung berbentuk gambar yang mewakili fungsi dari icon itu sediri ketika dipilih oleh pengguna. 

Cara menggunakannya sama seperti tombol tekan yaitu ditekan dengan cara diklik menggunakan mouse atau sejenisnya.

I. Text Box
Text box merupakan media pengisian data dan biasanya terhubung langsung dengan database. Data yang diisi berupa teks, dan data yang diisi tidak akan berfungsi apa-apa jika tidak ada aksi penyimpanan selanjutnya.

Setiap komponen tentunya memiliki fungsi yang berbeda-beda.Tombol tekan biasanya digunakan untuk mengaktifkan suatu aktivitas selanjutnya dari sistem apabila tombol tersebut ditekan menggunakan mouse atau diberi aksi klik mouse baik menggunakan mouse ataupun touchpad. 

Mode teks dan mode grafik merukan 2 hal yang tidak dapat dipisahkan dalam membuat tampilan karena apabila anda merancang komponen antarmuka grafis tanpa penjelas berupa teks hanya akan membuat pengguna tidak paham dengan tampilan yang anda buat dan hal ini dapat menyebankan tidak ada interakasi. 

Demikian juga sebaliknya, teks tanpa komponen antarmuka grafik hanya membuat tampilan aplikasi anda terliha statis dan kaku. Oleh sebab itu komponen antarmuka grafis dapat membuat antarmuka terlihat lebih dinamis.

Dalam setiap bahasa pemograman tingkat tinggi sudah mendukung rancang bangun tampilan/ antarmuka grafis sehingga bukan hal yang sulit untuk menciptakan antarmuka grafis.Contoh bahasa pemograman tingkat tinggi yang mendukung antarmuka grafis adalah JAVA, VISUAL BASIC, HTML, dll.

Sedangkan editor bahasa pemograman tingkat tinggi yang mendukung dan memudahkan desain tampilan grafis seperti NetBeans, Dreamweaver, VBNet, dll.Biasanya sebelum dapat bekerja pada mode grafik maka terlebih dahulu harus melakukan inisilisasi mode grafik.

Inisialisasi bukan hal yang tidak asing lagi bagi mereka yang bekerja membuat program, proses ini merupakan tahap awal yang perlu dipersiapkan seoran programmer ataupun analis sistem.

Akan tetapi perlu diperhatikan penempatan setiap komponen antarmuka grafis harus sesuai dengan proses sistem pada setiap halaman/ antarmuka dan bentuk/ ukuran yang konsisten sehingga user memahami secara langsung fungsi setiap komponen dan mudah digunakan.  

Selain penempatan hal kedua yang perlu diperhatikan adalah pemilihan warna yang mendukung komponen antarmuka grafis.Komponen antarmuka grafis dapat berkembang lebih dinamis lagi tidak hanya sebatas contoh yang dibahas pada diktat ini.

Unit Instlasi Mode Grafik

Sebelum kita bekerja pada mode grafik, maka terlebih dahulu kita harus menginisialisasi mode gerafik tersebut. Inisialisasi mode grafik dilakukan dengan terlebih dahulu melakukan deteksi otomatis pada kartu grafik yang dipakai menggunakan fungsi detectdan kemudian memlakukan inisialisasi mode grafik menggunakan prosedur intGraph. 

Meskipun demikian, karena inisialisasi grafik dapat juga mengalami kegagalan karena beberapa sebab, maka akan lebih bai bila terjadi kesalahan inisiaalisasi mode grafik maka kesalahan itu perlu dilaporkan kepada pengguna.Dalam diktat ini membahas menggunakan bahasa pemrograman turbo pascal

InitGrp dapat dibuat   untuk  mengemas statement-statement untuk inisialisasi mode grafik dan pelaporan kesalahan, sehingga memudahkan pengguna bila sewaktu-waktu memerlukannya.  Dengan adanya unit InitGrp yang dituliskan diatas. 

Pengguna setiapa Kali akan masuk ke dalam mode grafik, cukup menambahkan nama InitGrp pada Deklarasi pirantinya, dan selanjutnya inisialisasi mode grafik diaktifkan menggunakan perintah:

1. SiapkanGrafik (Driver,Mode)
2. Dengan Driver danMode  adalah peubah bertipe integer

Demikian artikel mengenai Komponen Antarmuka Grafis, semoga informasi yang diberikan bermanfaat.