GRAPHICAL USER INTERFACE (GUI) (Lanjutan)

12 GRAPHICAL USER INTERFACE (GUI) (Lanjutan) 12.1. Frame Frame adalah sebuah objek yang mengumpulkan beberapa objek sejenis dalam sebuah daerah tertentu di dalam window. Frame akan membuat pengguna lebih mudah memahami sistem yang dirancang dengan melihat kumpulan objek tersebut. Tidak seperti objek yang lain, Frame tidak memerlukan callback. Hal ini dikarenakan memang tidak ada aksi tertentu jika objek ini digunakan. Frame berbentuk kotak berisi (opaque). Oleh karena itu, jika frame dipanggil setelah beberapa objek dikumpulkan, objek-objek tersebut akan tertutup oleh frame. Untuk mengatasinya, diperlukan perintah Bring to Front dan Send to Back, untuk mengembalikan kembali objek-objek yang tertutup olehnya. Atau, letakkan terlebih dahulu Frame, baru kemudian letakan objek lain yang akan digroupkan. 12.2. Checkbox Check box adalah sebuah objek yang menghasilkan sebuah aksi tertentu ketika diaktifkan. Pada saat diaktifkan, terdapat suatu indikasi (check mark) untuk menunjukkan apakah suatu pilihan dicek (dipilih) atau tidak. Check box biasa digunakan untuk memberikan pilihan bebas kepada pengguna, seperti pilihan mode, tipe proses atau sistem satuan. Check box memiliki Value (nilai) pada setiap keadaannya. Pada saat ditekan, chek box akan bernilai maksimum (biasanya diset 1) dan sebaliknya akan bernilai minimum (0) pada saat tidak ditekan. Callback untuk check box dirancang untuk menentukan aksi yang akan dilakukannya berdasarkan harga Value tersebut. 12.3. Radion Button Radio Button adalah objek yang serupa dengan check box, tetapi memiliki sifat eksklusif mutualisme. Sifat eksklusif mutualisme adalah suatu sifat dimana hanya satu

buah button saja yang dapat aktif dalam suatu waktu. Radio button diaktifkan dengan cara menekan mouse pada salah satu button yang diinginkan. Button yang ditekan akan memiliki indikasi berupa titik hitam (dot) sebagai tanda bahwa ia telah ditekan. Pada umumnya, beberapa radio button akan dikumpulan dalam suatu Frame tertentu. Setiap radio button memiliki dua keadaan, yaitu: keadaan dipilih atau tidak dipilih. Oleh karena itu, dalam suatu kumpulan radio button, diset agar button yang dipilih memiliki Value = 1, sedangkan yang tidak dipilih memiliki Value = 0. Dengan demikian, sifat eksklusif mutualisme akan tercapai. Penggunaan Frame, Check box dan Radio button diperlihatkan pada program di bawah ini. Program ini memberikan penawaran pilihan kepada pengguna melalui Radio button dan Check box. Radio button terdiri dari 4 (empat) pilihan konversi valuta asing yang dapat dipilih dan dikumpulkan dalam suatu Frame. Sedangkan, check box memberikan pilihan data yang akan dipakai. Hasil pilihan konversi valuta asing dari radio button akan ditampilkan pada Static Text diatasnya. Demikian juga dengan hasil pilihan check box. Tampilan Layout Editor dari program ditampilkan pada Gambar 12.1 di bawah ini yang disimpan dengan nama file pilihan3.fig. Gambar 12.1. Layout Editor berisi Static Text, Radio button dan Check box Untuk menghubungkan antar objek, maka diperlukan instruksi callback pada masing-masing objek sesuai dengan rancangannya. Masing-masing radio button memiliki instruksi callback tersendiri agar dapat memiliki sifat ekslusif mutualisme. Kemudian, mengirimkan String untuk ditampilkan pada Static Text diatasnya (text2) sesuai dengan pilihan radio button. Sedangkan callback bagi check box dilakukan dengan menentukan state dan value-nya. Setelah itu, data String tertentu dikirimkan ke Static Text (text3). Instruksi disimpan dalam file pilihan3.m. Bagian dari file tersebut (untuk memudahkan, bagian yang lain tidak dituliskan) ditampilkan di bawah ini. GUI hasil rancangan sebelum dan sesudah pilihan dilakukan dapat dilihat pada Gambar 12.2. function radiobutton1_callback(hobject, eventdata, handles) set (handles.text2,'string','dolar - Rupiah'); set (handles.radiobutton1,'value',1); set (handles.radiobutton2,'value',0); set (handles.radiobutton3,'value',0); set (handles.radiobutton4,'value',0);

function radiobutton2_callback(hobject, eventdata, handles) set (handles.text2,'string','euro - Rupiah'); set (handles.radiobutton1,'value',0); set (handles.radiobutton2,'value',1); set (handles.radiobutton3,'value',0); set (handles.radiobutton4,'value',0); function radiobutton3_callback(hobject, eventdata, handles) set (handles.text2,'string','rupiah - Dolar'); set (handles.radiobutton1,'value',0); set (handles.radiobutton2,'value',0); set (handles.radiobutton3,'value',1); set (handles.radiobutton4,'value',0); function radiobutton4_callback(hobject, eventdata, handles) set (handles.text2,'string','rupiah - Euro'); set (handles.radiobutton1,'value',0); set (handles.radiobutton2,'value',0); set (handles.radiobutton3,'value',0); set (handles.radiobutton4,'value',1); function checkbox1_callback(hobject, eventdata, handles) state = get(handles.checkbox1,'value'); if state == 0 set(handles.text3,'string','data kemarin'); else set(handles.text3,'string','data hari ini'); end Gambar 12.2. Tampilan GUI Frame, Radio Button dan Check Box 12.4. Popup Menu Popup Menu adalah objek yang menampilkan beberapa pilihan jika pengguna menekan mouse pada panah yang terdapat pada bagian kanan objek ini. Popup Menu sangat berguna ketika program ingin memberikan pilihan kepada pengguna yang bersifat ekslusif mutualisme tetapi tidak ingin menggunakan ruangan yang terlalu banyak pada window (seperti Radio Button). Pilihan-pilihan yang ingin ditampilkan dituliskan pada Property Inspector bagian String. Setiap baris pada bagian ini, akan menampilkan sebuah pilihan pada Popup Menu. Selain itu, setiap pilihan akan memiliki Value tertentu secara berurutan. Pilihan pertama akan memiliki Value sama dengan 1 dan seterusrnya dengan pilihan-pilihan berikutnya. Berdasarkan harga Value inilah Callback ditentukan dimana setiap Value akan memiliki aksi tertentu.

Gambar 12.3. Properti Inspector dan String untuk Popup Menu 12.5. List Box Cara lain menampilkan pilihan adalah menggunakan List Box. Objek ini, seperti Popup Menu, menyediakan pilihan kepada pengguna dengan menampilkan semua pilihan yang ada. Sebuah slider dan sepasang anak panah disiapkan di sebelah kanan untuk menggerakkan scroll ke atas dan ke bawah untuk menampilkan pilihan yang ada. Pilihan dituliskan pada Property Inspector bagian String. Setiap baris pada bagian ini, akan menampilkan sebuah pilihan. Mekanisme penentuan harga Value juga diterapkan pada objek List Box ini. Berdasarkan harga Value ini sistem pemanggilan Callback dapat dilakukan. Berikut ini dibahas contoh penggunaan Popup Menu dan List Box pada sebuah program Daftar Menu. Pada program tersebut terdapat sebuah Popup Menu yang menampilkan Daftar Makanan dan sebuah List Box yang menampilkan Daftar Minuman. Hasil pemilihan Popup Menu dan List Box akan ditampilkan pada sebuah Static Text setelah Push Button (berisi data string Total Pesanan) ditekan. Layout Editor program ditampilkan pada Gambar 12.4. Program ditulis pada file bernama popmenu.m. Tampilan GUI setelah program dijalankan, pilihan ditentukan dan push button ditekan tampak pada Gambar 12.5. Gambar 12.4. Layout Editor berisi Popup Menu dan List Box Gambar 12.5. Tampilan GUI Popup Menu dan List Box function pushbutton1_callback(hobject, eventdata, handles) % hobject handle to pushbutton1 (see GCBO) % eventdata reserved - to be defined in a version of MATLAB % handles structure with handles and user data (see GUIDATA) %Pengambilan harga Value pada Popup Menu dan List Box value1 = get(handles.popupmenu1,'value') value2 = get(handles.listbox1,'value') %Pengecekan Value pada Popup Menu dan String yang dihasilkan if value1 == 1 str1 = 'Nasi Goreng'

elseif value1 == 2 str1 = 'Mie Goreng' else str1 = 'Mie Rebus' end %Pengecekan Value pada List Box dan String yang dihasilkan if value2 == 1 str2 = 'Teh Manis Hangat' elseif value2 == 2 str2 = 'Teh Manis Dingin' else str2 = 'Minuman Dingin' end %Pengiriman String ke Edit Text str = sprintf('1. %s\n2. %s',str1,str2) set(handles.text5,'string',str) Pada contoh ini, callback hanya terdapat pada Push Button. Sehingga, semua instruksi callback hanya terdapat pada bagian ini saja. Bagian awal instruksi callback merupakan pengambilan harga Value pada masing-masing objek. Kemudian, harga Value tersebut dicek untuk dapat ditentukan aksi menurut hasil pilihan pada Popup Menu dan List Box. Hasil pilihan itu, kemudian, dituliskan dalam data string yang siap ditampilkan pada Edit Text. 12.6. Slider Slider adalah sebuah objek yang cukup menarik. Objek ini menerima input dari pengguna dalam bentuk sebuah batang. Input didapat dengan cara menekan mouse yang terdapat pada batang dan menggerak-gerakkannya. Selain itu, input dapat pula dihasilkan dengan cara menekan mouse pada salah satu dari panah yang terdapat pada slider. Harga input merupakan sebuah nilai di dalam jangkaan tertentu yang telah diatur pada Property Inspector. Slider dapat dirancang secara horizontal maupun vertikal. Penentuan bentuk slider ini tergantung dari lebar dan tinggi slider ketika seorang pengguna meletakkanya pada Layout Editor. Ketika slider memiliki lebar yang lebih besar dari tingginya, maka ia akan berbentuk horizontal, dan sebaliknya slider akan berbentuk vertikal jika tingginya lebih besar dari lebarnya. Penggunaan slider ditampilkan pada bagian berikut ini, berupa perhitungan konversi suhu dari derajat Celcius ke Reamur dan Fahrenheit. Slider digunakan untuk mengambil data bagi suhu dalam derajat Celcius. Kemudian, bersamaan dengan

pengambilan data tersebut, dilakukan juga perhitungan konversinya ke derajat yang lain. Hasil pengambilan data input dan perhitungan konversi ditampilkan pada Edit Text yang berbeda. Program ini disimpan dengan nama suhu.fig dan suhu.m. Layout Editor program ditampilkan pada Gambar 12.6. dan hasil GUI diperlihatkan pada Gambar 12.7. Gambar 12.6. Layout Editor berisi Slider Gambar 12.7. Tampilan GUI Slider Program untuk mengambil data input dari Slider, melakukan perhitungan konversi dan menampilkannya pada Edit Text terdapat pada bagian berikut ini. function slider1_callback(hobject, eventdata, handles) % hobject handle to pushbutton1 (see GCBO) % eventdata reserved - to be defined in a version of MATLAB % handles structure with handles and user data (see GUIDATA) %Pengambilan Value dari Slider value = get (handles.slider1,'value') % String untuk dikirim ke Edit Text bagi Derajat Celcius str1 = sprintf('%4.2f ocelcius',value) set (handles.text2,'string',str1) %Konversi & String bagi Derajat Reamur reamur = 4/5*value str2 = sprintf('%4.2f oreamur',reamur) set (handles.text3,'string',str2) %Konversi & String bagi Derajat Celcius fahrenheit = 9/5*value+32 str3 = sprintf('%4.2f ofahrenheit',fahrenheit) set (handles.text4,'string',str3) 12.7. Axes Objek terakhir yang terdapat pada GUIDE adalah Axes. Objek ini menyediakan fasilitas untuk menampilkan grafik pada GUI. Grafik yang ditampilkan memiliki sifat-sifat sama dengan grafik pada M-File, seperti warna, jenis garis, atribut dan lain-lain. Berbeda dengan objek lainnya, Axes tidak memerlukan callback untuk mengaktifkan grafik. Sehingga, diperlukan objek lain, seperti Push Button, untuk mengirimkan data yang akan ditampilkan pada Axes.

Di bawah ini, diperlihatkan contoh program menggunakan Axes, dimana terdapat Popup Menu untuk memilih jenis grafik yang akan ditampilkan. Terdapat 3 (tiga) pilihan pada Popup Menu yaitu: grafik sinus, grafik cosinus dan grafik sinus dan cosinus secara bersamaan. Program disimpan dengan nama file grafik.fig dan grafik.m. Tampilan Layout Editor diperlihatkan pada Gambar 12.8. Karena pengaktifan Axes menggunakan objek Popup Menu, maka program Callback dituliskan pada bagian Popup Menu. Bagian awal program menampilkan pengambilan harga Value sebagai hasil pilihan pada Popup Menu. Kemudian, data untuk grafik disiapkan. Bagian akhir program menggambarkan proses pengecekan pilihan dan aksi yang akan dilakukan berdasarkan pilihan tersebut. Gambar 12.8. Layout Editor berisi Axes function popupmenu1_callback(hobject, eventdata, handles) % hobject handle to popupmenu1 (see GCBO) % eventdata reserved - to be defined in a version of MATLAB % handles structure with handles and user data (see GUIDATA) %Pengambilan Value dari Popup Menu value = get(handles.popupmenu1,'value'); %Penyiapan Data Grafik %Data X x = linspace(0,2*pi,50); %Data Y y1 = sin(x); y2 = cos(x); %Pengecekan harga Value pada Popup Menu dan aksi yang dihasilkan switch value case 1 hold off end plot(x,y1,'rp'); case 2 hold off plot(x,y2,'b*') case 3 hold off plot(x,y1,'rp'); hold on; plot(x,y2,'b*'); % Axes menampilkan grafik sinus % Axes menampilkan grafik cosinus % Axes grafik sinus dan cosinus

Gambar 12.9. Tampilan GUI Axes