KOMPONEN DASAR GUI

KOMPONEN DASAR GUI

GUI(GRAPHICAL USER INTERFACE )

GUI = Grafical User Interface adalah teknik pemrograman window dengan menggunakan komponen window sehingga user dapat berinteraksi dengan nyaman dengan window Seluruh komponen window seperti Menu, Label, Button dll adalah subclass dari class Component§ Interface berfungsi sebagai sarana bantu agar user dapat berinteraksi dengan program
GUI (Graphic User Interface )
- Interface yang digunakan dalam bentuk grafikIstilah Penting pada GUI

- Container adalah Wadah untuk meletakkan

komponen- komponen GUI. Komponen GUI mewarisi kelas JComponent, antara lain:
1. Tombol: JButton, JCheckBox, JRadioButton, JMenuItem
2. Combo box: JCombobox
3. List: JList
4. Menu: JMenu, J MenuItem
5. Label: JLabel
6. Text Field:JTextField
7. Tabel : JTabel

Komponen yang ada pada Graphical User Interface di Matlab

Matlab adalah suatu software yang digunakan untuk manipulasi matriks, fungsi dan data, implementasi algoritma, pembuatan antarmuka baik dalam komputasi numerik maupun dalam bahasa pemrograman. Kalo belum kenal mungkin bisa di baca disini dulu. Pada matlab terdapat antarmuka yang memudahkan penggunaan komputer berupa ikon grafis, yang ini sering disebut GUI.

Apa itu GUI? GUI (Graphical User Interface) adalah interface yang dibangun dengan obyek grafik seperti tombol, kotak, panel, teks, slider, dan menu agar mudah di pelajari dan digunakan khalayak orang banyak.

Pada GUI mempunyai kelebihan tersendiri dibandingkan dengan bahasa pemrogram yang lain antara lain:

GUIDE Matlab banyak digunakan dan cocok untuk aplikasi-aplikasi berorientasi sains, sehingga banyak peneliti dan mahasiswa menggunakan GUIDE Matlab untuk menyelesaikan riset atau tugas akhirnya.
GUIDE Matlab mempunyai fungsi built-in yang siap digunakan dan pemakai tidak perlu repot membuatnya sendiri.
Ukuran file, baik FIG-file maupun M-file, yang dihasilkan relatif kecil.
Kemampuan grafisnya cukup andal dan tidak kalah dibandingkan dengan bahasa pemrograman lainnya.

Jenis-jenis dan Penggunaan GUI

Pada matlab, untuk menjalankan GUI dengan cara ketik GUIDE pada command.

>>guide [enter]

Kemudian akan muncil tampilan kotak dialog seperti pada gambar berikut ini

Untuk mempermudah pengerjaan dalam pembuatan suatu tampilan, pada GUI menyediakan beberapa template yang langsung dapat digunakan antara lain: Blank GUI, GUI with Uicontrols, GUI with Axes and Menu, Modal Questions Dialog. Tampilan jenis-jenis GUI bisa dilihat pada gambar berikut ini:

GUI dengan uicontrol

GUI dengan axes dan menu

GUI dengan dialog pertanyaan

Pada pilihan Create New GUI terdapat menu GUIDE templates yang memiliki beberapa tipe dasar dari GUI, sehingga dapat dilakukan modifikasi pada template agar menjadi GUI seperti yang diharapkan. Sebagai pemula, digunakan Blank GUI (Default) yang merupakan sebuah GUI dengan figure kosong dan merupakan kondisi default dari GUIDE dan diplih jika memang akan membuat sebuah aplikasi dengan komponen yang layout-nya tidak terdapat pada GUI template yang lain. Setelah memilih Blank GUI templates, maka akan muncul tampilan Menu Utama. Tampilan menu utama ditunjukkan pada gambar berikut

Tampilan menu utama pada GUI matlab dengan mode bank

Komponen Pada GUI

Komponen palet pada GUIDE Matlab dapat dilihat pada gambar berikut ini

Jenis-jenis komponen yang digunakan pada GUI

Pushbutton

Pushbutton merupakan jenis kontrol berupa tombol tekan yang akan menghasilkan tindakan jika diklik, misanya tombol OK, Cancel, Hitung, Hapus, dan sebagainya. Untuk menampilkan tulisan pada pushbutton kita dapat mengaturnya melalui property inspector dengan mengklik obyek pushbutton pada figure, lalu mengklik toolbar property inspector atau menggunakan klik kanan lalu pilih property inspector.untuk tampilan push button dapat dilihat pada gambar berikut ini

Tampilan penggunaan push button pada GUI matlab

Toggle Button

Toggle button memiliki fungsi yang sama dengan pushbutton. Perbedaanya adalah saat pushbutton ditekan, maka tombol akan kembali pada posisi semula jika tombol mouse dilepas, sedangkan pada toggle button, tombol tidak akan kembali ke posisi semula, kecuali kita menekannya kembali.

Radio Button

Radio button digunakan untuk memilih atau menandai satu pilihan dari beberapa pilihan yang ada. Misalnya, sewaktu kita membuat aplikasi operasi Matematika (penjumlahan, pengurangan, perkalian, dan pembagian).

Edit Text dan Static Text

Edit text digunakan untuk memasukkan atau memodifikasi suatu text yang diinputkan dari keyboard, sedangkan static text hanya berguna untuk menampilkan text/tulisan, sehingga kita tidak bisa memodifikasi/mengedit text tersebut kecuali memalui property inspector.

Frames

Frames merupakan kotak tertutup yang dapat digunakan untuk mengelompokkan kontrol-kontrol yang berhubungan. Tidak seperti kontrol lainnya, frames tidak memiliki rutin callback.

Checkboxes

Kontrol checkboxes berguna jika kita menyediakan beberapa pilihan mandiri atau tidak bergantung dengan pilihan-pilihan lainnya. Contoh aplikasi penggunaan checkboxes adalah ketika kita diminta untuk memilih hobi. Karena hobi bisa lebih dari satu, maka kita dapat mengklik checkboxes lebih dari satu kali.

Slider

Slider berguna jika kita menginginkan inputan nilai tidak menggunakan keyboarad, tatapi hanya dengan cara menggeser slider secara vertical maupun horizontal ke nilai yang kita inginkan. Dengan menggunakan slider, kita lebih fleksibel dalam melakukan pemasukan nilai data karena kita dapat mengatur sendiri nilai max, nilai min, serta sliderstep.

Pop Up Menu

Pop Up menu berguna menampilkan daftar pilihan yang didefinisikan pada String Propoerty ketika mengklik tanda panah pada aplikasi dan memiliki fungsi yang sama seperti radio button. Ketika tida dibukak, popup menu hanya menampilkan satu item yang menjadi pilihan pertama pada String Property. Popupmenu sangat bermanfaat ketika kita ingin memberi sebuah pilihan tanpa jarak, tidak seperti radiobutton.

Axes

Axes berguna untuk menampilkan sebuah grafik atau gambar (image). Axes sebenarnya tidak masuk dalam UIControl, tetapi axes dapat deprogram agar pemakai dapat berinteraksi dengan axes dan obyek grafik yang ditampilkan melalui axes.

Komponen Komponen Tools Pada Netbeans Swing Containers

No.	Tools	Fungsi
1.	Panel	Untuk mengelompokkan komponen-komponen.
2.	Split Pane	Menampilkan dua komponen dalam ruang yang tetap, memungkinkn user untuk menentukan ukuran ruang yang dipilih untuk setiap komponen.
3.	Tool Bar	Sebagai tempat untuk menampilkan tool-tool yang bertujuan mempermudah user dalam mengoperasikan beberapa tool-tool yang mungkin sering digunakan.
4.	Internal Frame	Merupakan frame internal (di dalam frame utama). membuat banyak window (multi-window) di dalam satu frame.
5.	Tabbed Pane	Membuat frame yang terdiri dari tab-tab yang bisa dipilih oleh user.
6.	Scroll Pane	Menyediakan scroll bar di sekeliling perubahan ukuran komponen.
7.	Desktop Pane
8.	Layered Pane	Menyediakan tiga lapis dimensi untuk memposisikan komponen.

Swing Controls

No.	Tools	Fungsi
1.	Label	Untuk memberikan keterangan tambahan atau indentitas pada tombol atau perintah lainnya.
2.	Toggle Button	Button yang selalu berada dalam salah satu dari dua kondisi. Setiap klik pada button akan merubah dari kondisi satu ke kondisi lainnya.
3.	Radio Button	Untuk meminta user agar memilih satu dari lebih dua pilihan, contoh penggunaannya adalah ketika kita mengisi data diri untuk pilihan jenis kelamin.
4.	Combo box	Berfungsi untuk menyisipkan beberapa pilihan / perintah, sehingga dengan Combo Box ini lebih menghemat tempat, karena dalam Combo Box ini terdiri dari beberapa pilihan.
5.	Text Field	Untuk membuat kolom agar kelak bisa diisi perintah-perintah teks atau angka oleh user, semisal pada pembuatan aplikasi kalkulator “text field” berfungsi menampilkan hasil dari hitungan kalkulator tersebut.
6.	Scroll Bar	Untuk menggeser jendela (windows) secara vertikal.
7.	Progress Bar	Digunakan untuk menampilkan status proses.
8.	Password Field	Tempat untuk mengisikan password yang kita miliki.
9.	Separator	Berfungsi sebagai “sekat” atau pemisah antar garis yang ada pada aplikasi atau software yang nantinya akan dibuat.
10.	Editor Pane	Sebuah panel yang digunakan untuk mengedit tulisan.
11.	Tabel	Menampilkan atau menyisipkan tabel pada aplikasi yang nantinya akan kita buat.
12.	Button	Kontrol yang tampil pada layar dengan bentuk tertentu yang mirip dengan tombol persegi panjang dengan tulisan di tengahnya.
13.	Check Box	Memilih lebih dai satu pilihan, dengan menyimpan data dan akan menampilkannya ketika di klik.
14.	Button Group	Untuk menggabungkan seluruh button supaya menjadi satu kesatuan fungsi.
15.	List	Untuk menampilkan beberapa item.
16.	Text area	Tempat mengetikkan tulisan yang berada dalam kotak yang mempunyai fungsi scroll.
17.	Slider	Berfungsi sebagai visualisasi proses perjalanan dari sebuah musik atau video.
18.	Formatted Field
19.	Spinner	Berisi angka yang diletakkan secara ringkas atau berupa daftar, ketika kita membutuhkan angka lebih kecil, kita tinggal klik tanda panah sampai muncul angka yang kita inginkan, atau sebaliknya misalkan kita butuh angka lebih besar klik tanda panah sampai muncul angka yang kita inginkan.
20.	Text pane	Menampilkan teks dan membolehkan user untuk mengeditnya.
21.	Tree	Menampilkan data dalam bentuk hirarkis.

Swing Menus

No.	Tools	Fungsi
1.	Menu Bar	Untuk menciptakan tab-tab menu yang nantinya dipergunakan untuk perintah menu yang diinginkan.
2.	Menu	Membentuk perintah menu yang masih bisa dilanjutkan ke menu yang lebih khusus.
3.	Menu Item	Berisi perintah-perintah spesifik yang ada dalam menu bar, sehingga perintah-perintah pada menu item lebih khusus.
4.	Menu Item/CheckBox	Memberi tanda (V) pada menu perintah tertentu supaya komputer melakukan seperti apa yang kita perintahkan.
5.	Menu Item/Radio Button	Untuk melakukan rating atau survey sesuatu alamat website atau digunakan pada perintah pemilihan halaman cetakan pada printer.
6.	Popup Menu	Menu yang akan tampil secara otomatis atau apabila kita menggerakkan kursor mouse pada area tertentu, biasanya berisi tentang informasi suatu obyek/icon/menu.
7.	Separator	Berfungsi sebagai “sekat” atau pemisah antar garis yang ada pada aplikasi atau software yang nantinya akan dibuat.

Contoh Gambar Komponen Dasar GUI

Search This Blog

PEMROGRAMAN BERORIENTASI OBJECT