Dalam pemrograman apapun kita mengenal event dan event handler, ada juga event dan callback. Nah, pada QT, kita juga mengenal hal yang sama tapi berbeda, yaitu signals dan slots. Inilah yang membedakan Framework QT dengan Framework C++ yang lain. Bisa dibilang signals seperti event, sedangkan slots seperti callback function.
Pernahkah anda mencoba bahasa pemrograman lain, C# misalnya, bahasa modern tingkat tinggi yang berjalan pada .NET ini tidak mengenal signals and slots, tapi mengenal event.
Bila anda seorang web developer, pasti juga sangat familiar dengan event dan event handler pada Javascript / Jquery / Css, misalnya pada komponen button, maka anda bisa temui beberapa event seperti onClick, onMouseOver, onMouseOut, dan lain sebagainya.
Begitu pula bila anda seorang Flash Developer (Actionscript), anda akan menemukan hal yang sama untuk komponen button.
Saya pribadi lebih suka menyebut perlakuan terhadap komponen button ini dengan nama event, sedangkan fungsi yang dipanggil saat event terjadi adalah event handler. :)
Meski sebetulnya banyak yang menyebut dengan event dan function callback :P
Nah, signals dan slots pun demikian, signals bisa dibilang event, sedangkan slots bisa dibilang function callback atau event handler atau fungsi yang terpanggil saat kejadian terjadi.
Perbedaan antara Slots dengan Callback atau Event handler adalah Callback tidak Type Safe, kita tidak tahu apakah event akan memanggil Callback dengan Argument yang tepat.
Signal dan Slot ini digunakan untuk berkomunikasi antar object. QT Widgets memiliki predefined signals and slots (bawaan/default), kitapun bisa membuat slot atau signal milik kita sendiri. Sebagai contoh slots dari komponen QPushButton misalnya, QPushButton ini memiliki banyak slot baik slot dari komponen itu sendiri maupun slots yang diwariskan dari dari class lain QAbstractButton, QWidget, QObject, seperti terlihat pada screenshot help berikut ini.
Lihat gambar 1:
CONTOH 1 (SATU)
Sebagai contoh mari kita membuat sebuah project dari Qt Widgets Application, dan berikan sebuah QPushButton component pada ui nya. Kita akan mencoba untuk menambahkan sebuah signal saat komponen ini diclick.
Untuk menambahkan sebuah slot saat komponen diclick kita tinggal click kanan komponen tersebut kemudian pilih Go To Slots… seperti terlihat pada gambar berikut:
Lihat gambar 2:
Dari window Go to slot yang muncul saya akan mencoba untuk memilih signal clicked(), artinya memberikan event saat komponen QPushButton tadi diclick. Maka kita akan menuju ke kode seperti pada gambar berikut ini.
Lihat gambar 3:
Nah, itu adalah slot dari signal clicked() kita tadi, slot bisa dibilang merupakan juga sebuah function. Ya, slot ini adalah functions. Slot bisa digunakan untuk menerima signal tetapi slot ini juga merupakan normal member functions.
Silahkan anda tambahkan kode anda pada slot/function diatas, nanti pasti saat ada signal clicked() dari QPushButton maka function ini akan dieksekusi, contoh pada screenshot berikut ini,
Lihat gambar 4:
Bila anda menggunakan GUI dalam QT Designer untuk menghubungkan antar komponen dengan signal and slot sangatlah mudah,
CONTOH 2 (DUA)
Sebagai contoh, misalnya kita membuat sebuah slider dan sebuah progressbar pada ui kita.
Lihat gambar 5:
Sangat mudah sekali untuk menambahkan signal and slot, pada scenario ini kita ingin menambahkan sebuah signal terhadap slider, dan saat signal terjadi maka sebuah function harus dipanggil untuk menyerasikan progressbar.
Lihat gambar 6:
Nah, pastikan anda mengclick tombol untuk ke mode edit slot, kemudian tinggal click horizontal slider – kemudian drag ke slider. Maka otomatis kita telah menghubungkan kedua buah object dengan Signal and Slots.
Cobalah anda lepaskan drag anda, maka akan tampil sebuah window connection seperti berikut ini,
Lihat gambar 7:
Nah, pada window connection, saya memilih signal valueChanged(int) untuk horizontalslider, kemudian slot untuk progressBar adalah setValue(int).
Setelah anda selesai cobalah preview dengan debug, saat anda menggeser slider maka progressbar pun juga ikut bertambah.
Lihat gambar 8:
Mudah bukan?
Itu diatas tadi menggunakan UI, bagaimana kalo kita tidak menggunakan UI tetapi mengetikan kode nya (direct programming)?
connect(ui->horizontalSlider,
SIGNAL(valueChanged(int)),
ui->progressBar,
SLOT(setValue(int)));
Ini merupakan koneksi signal dan slot antar komponen.
Lihat gambar 8.2:
Mari kita lanjut…. Yuuukkk….
CONTOH 3 (TIGA)
Perhatikan kode berikut ini, pertama adalah screenshot kode pada C++ plain, kedua adalah kode slot dan signal pada C++ Qt
Lihat gambar 9:
Ini adalah plain C++ text code , anda bisa lihat, kita membuat sebuah contructor dengan:
Counter(){m_value = 0;}
Pada contructor ini terlebih dahulu kita mensetting supaya nilai dari variable m_value adalah nol.
Berikutnya kita membuat sebuah function int value(){return m_value;} , function ini digunakan untuk mereturn nilai dari m_value nantinya.
Kemudian function berikutnya adalah void setValue(int value); yang nantinya digunakan untuk meng-set nilai dari m_value; tapi ingat, function ini baru declarasi , kita belum mengetikan kode untuk fungsi ini :)
Nah, mari kita bandingkan dengan C++ code pada QT yang bisa kita berikan Signals and Slots.
Lihat gambar 10:
Nah,,,,, bisa anda lihat, semua function sama dengan C++ kode plain sebelumnya, hanya saja kita memberikan sebuah type tertentu untuk function,
Untuk function void valueChanged(int newValue); kita berikan sebagai signals, sedangkan setValue() kita jadikan sebuah slots.
Ah, hampir lupa, semua class yang mengandung Signals and Slots harus menyebutkan Q_OBJECT di bagian awal dari declarasi. Dan class ini harus diturunkan dari QOBJECT :)
Contoh ini saya ambil dari QT Help,
Sekarang kita akan mencoba untuk mengetikan kode untuk slot setValue(),
Lihat gambar 11:
Nah, ini adalah slot dari setValue, bisa anda lihat, intinya, bila m_value (nilai default) tidak sama dengan value (nilai baru) maka m_value diganti nilainya dengan value.
Emit digunakan untuk meng-emit signals valueChanged();
Kemudian, mari kita mencoba memanggil signals and slots ini dengan menggunakan struktur kode connection yaitu:
Connect(komponenPertama, signal(), komponenKedua, slot());
Lihat gambar 12:
Bila merujuk pada aturan penulisan signals and slots ini, maka anda bisa lihat kembali pada contoh dua, kita mengetikan seperti berikut ini untuk koneksi antara HorizontalSlider dengan ProgressBar:
Connect(ui->horizontalSlider, SIGNAL(valueChanged(int)), ui->progressBar,SLOT(setValue(int)));
OK, akhirnya sekian tutorial singkat tentang SIGNALS AND SLOTS, untuk contoh yang lain silahkan anda bisa membaca pada HELP QT ataupun bisa mencari referensi dari mesin pencari seperti google.
Semoga bermanfaat,
Salam,
Bila anda seorang web developer, pasti juga sangat familiar dengan event dan event handler pada Javascript / Jquery / Css, misalnya pada komponen button, maka anda bisa temui beberapa event seperti onClick, onMouseOver, onMouseOut, dan lain sebagainya.
Begitu pula bila anda seorang Flash Developer (Actionscript), anda akan menemukan hal yang sama untuk komponen button.
Saya pribadi lebih suka menyebut perlakuan terhadap komponen button ini dengan nama event, sedangkan fungsi yang dipanggil saat event terjadi adalah event handler. :)
Meski sebetulnya banyak yang menyebut dengan event dan function callback :P
Nah, signals dan slots pun demikian, signals bisa dibilang event, sedangkan slots bisa dibilang function callback atau event handler atau fungsi yang terpanggil saat kejadian terjadi.
Perbedaan antara Slots dengan Callback atau Event handler adalah Callback tidak Type Safe, kita tidak tahu apakah event akan memanggil Callback dengan Argument yang tepat.
Signal dan Slot ini digunakan untuk berkomunikasi antar object. QT Widgets memiliki predefined signals and slots (bawaan/default), kitapun bisa membuat slot atau signal milik kita sendiri. Sebagai contoh slots dari komponen QPushButton misalnya, QPushButton ini memiliki banyak slot baik slot dari komponen itu sendiri maupun slots yang diwariskan dari dari class lain QAbstractButton, QWidget, QObject, seperti terlihat pada screenshot help berikut ini.
Lihat gambar 1:
CONTOH 1 (SATU)
Sebagai contoh mari kita membuat sebuah project dari Qt Widgets Application, dan berikan sebuah QPushButton component pada ui nya. Kita akan mencoba untuk menambahkan sebuah signal saat komponen ini diclick.
Untuk menambahkan sebuah slot saat komponen diclick kita tinggal click kanan komponen tersebut kemudian pilih Go To Slots… seperti terlihat pada gambar berikut:
Lihat gambar 2:
Dari window Go to slot yang muncul saya akan mencoba untuk memilih signal clicked(), artinya memberikan event saat komponen QPushButton tadi diclick. Maka kita akan menuju ke kode seperti pada gambar berikut ini.
Lihat gambar 3:
Nah, itu adalah slot dari signal clicked() kita tadi, slot bisa dibilang merupakan juga sebuah function. Ya, slot ini adalah functions. Slot bisa digunakan untuk menerima signal tetapi slot ini juga merupakan normal member functions.
Silahkan anda tambahkan kode anda pada slot/function diatas, nanti pasti saat ada signal clicked() dari QPushButton maka function ini akan dieksekusi, contoh pada screenshot berikut ini,
Lihat gambar 4:
Bila anda menggunakan GUI dalam QT Designer untuk menghubungkan antar komponen dengan signal and slot sangatlah mudah,
CONTOH 2 (DUA)
Sebagai contoh, misalnya kita membuat sebuah slider dan sebuah progressbar pada ui kita.
Lihat gambar 5:
Sangat mudah sekali untuk menambahkan signal and slot, pada scenario ini kita ingin menambahkan sebuah signal terhadap slider, dan saat signal terjadi maka sebuah function harus dipanggil untuk menyerasikan progressbar.
Lihat gambar 6:
Nah, pastikan anda mengclick tombol untuk ke mode edit slot, kemudian tinggal click horizontal slider – kemudian drag ke slider. Maka otomatis kita telah menghubungkan kedua buah object dengan Signal and Slots.
Cobalah anda lepaskan drag anda, maka akan tampil sebuah window connection seperti berikut ini,
Lihat gambar 7:
Nah, pada window connection, saya memilih signal valueChanged(int) untuk horizontalslider, kemudian slot untuk progressBar adalah setValue(int).
Setelah anda selesai cobalah preview dengan debug, saat anda menggeser slider maka progressbar pun juga ikut bertambah.
Lihat gambar 8:
Mudah bukan?
Itu diatas tadi menggunakan UI, bagaimana kalo kita tidak menggunakan UI tetapi mengetikan kode nya (direct programming)?
connect(ui->horizontalSlider,
SIGNAL(valueChanged(int)),
ui->progressBar,
SLOT(setValue(int)));
Ini merupakan koneksi signal dan slot antar komponen.
Lihat gambar 8.2:
Mari kita lanjut…. Yuuukkk….
CONTOH 3 (TIGA)
Perhatikan kode berikut ini, pertama adalah screenshot kode pada C++ plain, kedua adalah kode slot dan signal pada C++ Qt
Lihat gambar 9:
Ini adalah plain C++ text code , anda bisa lihat, kita membuat sebuah contructor dengan:
Counter(){m_value = 0;}
Pada contructor ini terlebih dahulu kita mensetting supaya nilai dari variable m_value adalah nol.
Berikutnya kita membuat sebuah function int value(){return m_value;} , function ini digunakan untuk mereturn nilai dari m_value nantinya.
Kemudian function berikutnya adalah void setValue(int value); yang nantinya digunakan untuk meng-set nilai dari m_value; tapi ingat, function ini baru declarasi , kita belum mengetikan kode untuk fungsi ini :)
Nah, mari kita bandingkan dengan C++ code pada QT yang bisa kita berikan Signals and Slots.
Lihat gambar 10:
Nah,,,,, bisa anda lihat, semua function sama dengan C++ kode plain sebelumnya, hanya saja kita memberikan sebuah type tertentu untuk function,
Untuk function void valueChanged(int newValue); kita berikan sebagai signals, sedangkan setValue() kita jadikan sebuah slots.
Ah, hampir lupa, semua class yang mengandung Signals and Slots harus menyebutkan Q_OBJECT di bagian awal dari declarasi. Dan class ini harus diturunkan dari QOBJECT :)
Contoh ini saya ambil dari QT Help,
Sekarang kita akan mencoba untuk mengetikan kode untuk slot setValue(),
Lihat gambar 11:
Nah, ini adalah slot dari setValue, bisa anda lihat, intinya, bila m_value (nilai default) tidak sama dengan value (nilai baru) maka m_value diganti nilainya dengan value.
Emit digunakan untuk meng-emit signals valueChanged();
Kemudian, mari kita mencoba memanggil signals and slots ini dengan menggunakan struktur kode connection yaitu:
Connect(komponenPertama, signal(), komponenKedua, slot());
Lihat gambar 12:
Bila merujuk pada aturan penulisan signals and slots ini, maka anda bisa lihat kembali pada contoh dua, kita mengetikan seperti berikut ini untuk koneksi antara HorizontalSlider dengan ProgressBar:
Connect(ui->horizontalSlider, SIGNAL(valueChanged(int)), ui->progressBar,SLOT(setValue(int)));
OK, akhirnya sekian tutorial singkat tentang SIGNALS AND SLOTS, untuk contoh yang lain silahkan anda bisa membaca pada HELP QT ataupun bisa mencari referensi dari mesin pencari seperti google.
Semoga bermanfaat,
Salam,