Digital Sains: QLabel Clickable Pada QT Designer

Kembali lagi dengan saya, kali ini saya akan mencoba berbagi tentang bagaimana caranya membuat object dari QLabel menjadi dapat menerima signal clicked. Sebelum jauh melangkah untuk memulai tutorial kali ini, saya akan memberi tahu sekilas tentang Method Connection pada QT adalah dengan menggunakan Signal dan Slot. Intinya adalah suatu metode yang menghubungkan atau mengkomunikasikan antara object satu ke object yang lain. Signal adalah suatu metode yang memberikan sinyal atau event atau kejadian dari suatu object yang dilakukan bisa dari user atau program itu sendiri kepada object yang lain. Slot adalah suatu tindakan atau respon dari object yang telah diberikan signal dari object lain tersebut.

Pada QLabel, tidak ada signal yang menerima event clicked, sehingga kita harus melakukan custom pada widget atau object QLabel tersebut. Langsung saja untuk tau bagaimana melakukan customnya, kita mulai tutorial kali ini.

Kita melanjutkan program pada tutorial sebelumnya yang berjudul Insert Qlabel Dengan Image Pada QT. Pada tutorial sebelumnya kita sudah membuat program sederhana dengan memasukkan gambar pada sebuah QLabel. Nantinya pada program tersebut untuk QLabel yang telah dibuat akan dapat menerima signal clicked dari user dan akan merespon signal clicked tersebut. Pertama kali yang akan kita lakukan adalah dengan menambahkan sebuah file baru dengan cara seperti gambar berikut ini.

Gambar Add New File

Setelah memilih pilihan Add New. Maka kita akan diminta memilih untuk membuat file baru apa yang kita butuhkan. Kemudian pilihlah pilihan seperti gambar berikut ini.

Gambar New File Class

Setelah itu pilih Choose dan akan diminta memberikan nama class baru tersebut. Pada tutorial ini, class baru tersebut saya beri nama Clickable. Lihat seperti gambar berikut ini

Gambar Define New Class

Setelah sudah seperti gambar di atas, langsung saja pilih Next dan Finish. Kemudian akan bertambah file yaitu clickable.h pada Headers dan clickable.cpp pada Sources. Setelah penambahan file class selesai, selanjutnya kita akan menambahkan beberapa baris code pada masing-masing file seperti clickable.h, clickable.cpp, mainwindow.h dan mainwindow.cpp.

Berikut adalah penambahan atau modifikasi code pada file clickable.h

1:  #ifndef CLICKABLE_H  
2:  #define CLICKABLE_H  
3:  #include <QLabel>  
4:  class Clickable : public QLabel  // Kelas Clickable menjadi turunan dari class QLabel
5:  {  
6:    Q_OBJECT // sebuah macro yang berkepentingan dalam signals dan slots untuk object 
7:  public:  
8:    explicit Clickable(QWidget *parent=0);  
9:    ~Clickable();  
10:  signals:  
11:    void clicked();  // agar QLabel nanti dapat menerima signal clicked
12:  protected:  
13:    void mousePressEvent(QMouseEvent *ev); // bermula dari mousePressEvent, signal clicked akan dipancarkan (emit)  
14:  };  
15:  #endif // CLICKABLE_H

Setelah file clickable.h ditambah atau dimodifikasi codenya, maka selanjutnya adalah file clickable.cpp. Berikut adalah penambahan atau modifikasi code pada file clickable.cpp.

1:  #include "clickable.h"  
2:  Clickable::Clickable(QWidget *parent) : QLabel(parent)  
3:  {  
4:  }  
5:  void Clickable::mousePressEvent (QMouseEvent *ev){  
6:    emit clicked();  
7:  }  
8:  Clickable::~Clickable()  
9:  {  
10:  }

Pada baris 5-6 berguna saat sebuah event mouse diclick pada QLabel, maka akan memancarkan signal clicked. Itulah yang membuat QLabel dapat menerima signal clicked. Setelah menambah atau memodifikasi code pada clickable.cpp, selanjutnya adalah sedikit menambahkan beberapa baris code pada file mainwindow.h. Berikut adalah penambahan atau modifikasi code pada file mainwindow.h

1:  #ifndef MAINWINDOW_H  
2:  #define MAINWINDOW_H  
3:  #include <QMainWindow>  
4:  namespace Ui {  
5:  class MainWindow;  
6:  }  
7:  class MainWindow : public QMainWindow  
8:  {  
9:    Q_OBJECT  
10:  public:  
11:    explicit MainWindow(QWidget *parent = 0);  
12:    ~MainWindow();  
13:  private slots:  
14:    void on_lblHello_clicked();  
15:  private:  
16:    Ui::MainWindow *ui;  
17:  };  
18:  #endif // MAINWINDOW_H

Penambahan baris code pada file mainwindow.h ini adalah pada baris 13-14, yaitu berguna saat QLabel menerima atau dipancarkan signal clicked, maka sebuah slot (yang merespon signal) akan melakukan sebuah perintah. Slots yang kita buat sendiri yang berhubungan dengan object yang kita buat dari Qt Designer, memiliki pola penamaan yang harus kita setujui bersama. Pola pembuatan slotsnya yaitu on_(nama object)_(nama signal). Karena pada program di tutorial ini object QLabel adalah bernama lblHello dan signalnya adalah clicked, sehingga demikian slotsnya menjadi on_lblHello_clicked. Setelah penambahan baris code pada file mainwindow.h, maka selanjutnya terakhir adalah penambahan baris code pada file mainwindow.cpp. Berikut adalah penambahan baris code dari file mainwindow.cpp.

1:  #include "mainwindow.h"  
2:  #include "ui_mainwindow.h"  
3:  #include <QMessageBox>  
4:  #include <QString>  
5:  MainWindow::MainWindow(QWidget *parent) :  
6:    QMainWindow(parent),  
7:    ui(new Ui::MainWindow)  
8:  {  
9:    ui->setupUi(this);  
10:  }  
11:  void MainWindow::on_lblHello_clicked (){  
12:    QMessageBox::information (this, QString("Information"),QString("Gambar QLabel telah diclick !"), QMessageBox::Ok);  
13:  }  
14:  MainWindow::~MainWindow()  
15:  {  
16:    delete ui;  
17:  }

Penambahan baris code pada file mainwindow.cpp ini terletak pada baris 11-13, berguna untuk saat QLabel tersebut diclick oleh user, maka akan menampilkan suatu perintah, yang mana perintah dari baris 11-13 adalah untuk menampilkan alert atau QMessageBox dengan judul "Information", pesannya "Gambar QLabel telah diclick !" dan memiliki tombol Ok. Setelah penambahan baris code pada semua file selesai. Maka selanjutnya kita masuk ke dalam mainwindow.ui. Kemudian click kanan pada QLabel yang sudah berada di form, pilih Promote to. Setelah memilih Promote to, maka akan tampil window seperti berikut ini.

Gambar Window Promoted Widgets

Pada isian Promoted class name, masukkan nama file yang telah kita buat pada awal tadi, kalau di dalam tutorial ini, nama kelasnya adalah Clickable. Ingat ! penamaan kelasnya case-sensitive. Setelah itu pilih Promote.

Semua langkah sudah selesai dilakukan, tinggal dilakukan compile dan dieksekusi saja programnya. Maka jika berhasil akan tampil program yang seperti ini saat QLabel diclick.