Komponen Antarmuka

App Designer dan uifigure menawarkan puluhan komponen, tetapi sebagian besar app nyata dibangun dari belasan komponen inti saja. Menguasai katalog ini — properti kuncinya, event yang dipancarkannya, dan tempatnya dalam hierarki container — membuat kita bisa membaca app orang lain dan merancang app sendiri tanpa membuka dokumentasi berulang kali. Chapter ini memetakan komponen inti, lalu menunjukkan pembuatannya secara programatik. Cakupannya:

• katalog komponen inti: properti kunci dan callback utama
• properti styling dan penonaktifan komponen
• hierarki container: panel, tab, grid layout
• contoh deklaratif uifigure + komponen + uigridlayout

Katalog Komponen Inti #

Setiap komponen adalah objek dengan properti dan callback property. Tabel berikut merangkum yang paling sering kita pakai:

Dua perilaku komponen patut dicatat lebih awal. Pertama, Edit Field bertipe "numeric" menolak input non-numerik secara otomatis: MATLAB menampilkan error tooltip dan mengembalikan nilai lama yang valid — dokumentasi resmi menyebut perilaku ini secara eksplisit, dan properti Limits menjaga nilai tetap dalam rentang. Kedua, DropDown menyimpan pilihan di Value; jika ItemsData diisi, Value berisi data yang terasosiasi dengan item terpilih, bukan teksnya.

Properti Styling dan Penonaktifan #

Penampilan komponen dikendalikan properti yang seragam lintas komponen: FontSize, FontName, FontWeight, FontColor, BackgroundColor, dan FontAngle. Ukuran dan letak ditentukan Position dalam satuan piksel — [x y lebar tinggi] — atau didelegasikan ke grid layout (dibahas di bawah). Satu jebakan klasik dari dokumentasi resmi uilabel: ketika kita memperbesar FontSize atau memperpanjang Text, label bisa terpotong karena ukurannya tidak ikut membesar; kita perlu memperbarui Position(3:4) (lebar dan tinggi) atau menaruh label dalam grid yang barisnya "fit".

Hierarki Container #

Komponen tidak melayang sendirian — semuanya punya parent. Struktur parent-child inilah yang membentuk hierarki antarmuka:

GridLayout adalah container terpenting untuk app modern. Grid membagi area menjadi baris dan kolom tak terlihat; tinggi baris dan lebar kolom didefinisikan sekali, lalu setiap komponen cukup menyebut posisi selnya. Nilai "fit" berarti ukuran mengikuti isi, "1x" berarti sisa ruang dibagi rata — kombinasi inilah yang membuat app tetap rapi saat jendela diubah ukurannya.

Contoh Programatik: Form Lengkap #

Cuplikan berikut membentuk form sederhana secara programatik — sintaksnya diambil langsung dari pola dokumentasi resmi (MATLAB-only, tidak dapat dijalankan di Octave):

fig = uifigure;

g = uigridlayout(fig, [2 2]);
g.RowHeight = {'fit', '1x'};
g.ColumnWidth = {'fit', '1x'};

lblSuhu = uilabel(g, "Text", "Suhu (C):");
lblSuhu.Layout.Row = 1;
lblSuhu.Layout.Column = 1;

efSuhu = uieditfield(g, "numeric", ...
    "Limits", [15 40], "Value", 28);
efSuhu.Layout.Row = 1;
efSuhu.Layout.Column = 2;

ddKota = uidropdown(g, ...
    "Items", ["Jakarta", "Bandung", "Surabaya"]);
ddKota.Layout.Row = 2;
ddKota.Layout.Column = [1 2];

btnProses = uibutton(fig, "push", ...
    "Text", "Proses", ...
    "ButtonPushedFcn", @(src, event) prosesData(efSuhu, ddKota));

Ketika kode di atas dieksekusi di desktop MATLAB, jendela tampil berisi grid dua baris: baris pertama berpasangan label dan edit field angka (nilai awal 28, rentang dibatasi 15..40), baris kedua berisi dropdown tiga kota, dan tombol Proses di pojok bawah jendela. Mengetik angka di luar batas pada edit field otomatis ditolak; setiap perubahan nilai memicu ValueChangedFcn jika kita mendaftarkannya.

Mari kita bedah baris-baris kode di atas:

1. Baris 3 (uigridlayout(fig, [2 2])): grid 2x2 dibuat sebagai anak figure; seluruh komponen selanjutnya bertumpu pada grid ini.
2. Baris 4-5 (RowHeight / ColumnWidth): baris pertama "fit" (mengikuti tinggi komponen), baris kedua "1x" (memakan sisa ruang); kolom pertama "fit" untuk label.
3. Baris 7-12 (Layout.Row / Layout.Column): komponen menempati sel dengan properti Layout — dropdown memakai [1 2] untuk melebar dua kolom.
4. Baris 20-22 ("Limits", [15 40]): edit field angka memvalidasi rentang secara bawaan — pengguna tidak bisa menyimpan 50.
5. Baris 25-27 (@(src, event) prosesData(...)): callback tombol dibuat sebagai anonymous function yang menyeret dua handle komponen ke fungsi kerja — pola resmi dari dokumentasi uibutton.

Komponen sebagai Data: Validasi Terisolasi #

Bagian yang bisa diuji tanpa jendela adalah aturan komponen: batas numeric, daftar item dropdown, batas slider. Berkas contoh.m menyimpan konfigurasi komponen sebagai struct lalu memvalidasi nilai terhadap aturannya:

katalog = [ ...
    buatKomponen('EditFieldSuhu', 'numeric', ...
        struct('batas', [15 40])), ...
    buatKomponen('DropDownKota', 'dropdown', ...
        struct('items', {{'Jakarta', 'Bandung', 'Surabaya'}})), ...
    buatKomponen('SliderVolume', 'slider', ...
        struct('batas', [0 100]))];

uji = { ...
    'EditFieldSuhu', 28; ...
    'EditFieldSuhu', 55; ...
    'DropDownKota',  'Bandung'; ...
    'DropDownKota',  'Bogor'; ...
    'SliderVolume',  70};

fprintf('Katalog komponen: %d komponen terdaftar\n', numel(katalog));
for k = 1:size(uji, 1)
    nama = uji{k, 1};
    nilai = uji{k, 2};
    komp = cariKomponen(katalog, nama);
    [ok, pesan] = validasiNilai(komp, nilai);
    if ok
        fprintf('%-14s = %-8s VALID   (%s)\n', nama, tampil(nilai), pesan);
    else
        fprintf('%-14s = %-8s TIDAK VALID (%s)\n', nama, tampil(nilai), pesan);
    end
end

Fungsi validasiNilai() di dalam berkas mengarahkan aturan per tipe: numeric dan slider memeriksa rentang batas (padanan properti Limits), dropdown memeriksa keanggotaan di items (padanan Items). Inilah pola yang dipakai callback nyata sebelum menyimpan nilai dari komponen.

Output yang Dihasilkan:

Katalog komponen: 3 komponen terdaftar
EditFieldSuhu  = 28       VALID   (batas 15..40)
EditFieldSuhu  = 55       TIDAK VALID (batas 15..40)
DropDownKota   = Bandung  VALID   (items: Jakarta, Bandung, Surabaya)
DropDownKota   = Bogor    TIDAK VALID (items: Jakarta, Bandung, Surabaya)
SliderVolume   = 70       VALID   (batas 0..100)

Ringkasan #

Komponen inti App Designer terbagi input (Button, Edit Field, DropDown, Slider, CheckBox), output (Label, TextArea, Table, UIAxes), dan container (Panel, Tab, GridLayout, ButtonGroup). Properti kuncinya seragam: Text, Value, Items, Limits, Enable, plus properti styling (FontSize, FontColor, BackgroundColor). GridLayout dengan RowHeight/ColumnWidth dan Layout.Row/Layout.Column menggantikan perhitungan piksel manual. Kode pembentukan komponen adalah MATLAB-only, sehingga yang kita uji di contoh.m adalah aturan datanya — batas, daftar item, dan validasi nilai — yang terbukti berjalan di Octave.