Insert QLabel Dengan Image Pada QT Designer

Pada tutorial perdana kali ini, saya akan mencoba berbagi tentang bagaimana menyisipkan gambar pada QLabel di QT Designer. Sebelum masuk kepada inti tutorial ini, saya ingin bercerita sedikit tentang apa itu QT (dibaca : Kiut) ? QT adalah suatu Toolkit atau sebuah Framework Cross-Platform untuk membuat program dengan GUI (Graphical User Interface) yang umumnya berbasis bahasa pemrograman C++.

Oke tanpa berbasa-basi lagi, langsung saja saya mulai tutorial perdana saya ini, bismillah. Sebelumnya saya memberitahukan QT yang saya pakai adalah QT 5.4.0, bagi teman-teman yang belum memilikinya bisa didownload langsung di Download QT 5.4 x86 untuk Windows. Cara menginstallnya cukup mudah, tinggal pilih tombol next saja selama masih ada tombol next, lalu jangan lupa saat request apa yang diinstall, ceklis semua yang bisa diceklis agar semua yang dibutuhkan nanti ke depannya sudah tersedia semua seperti development untuk Android dan lain-lainnya.

Mari kita mulai, pertama kali membuka QT Creator teman-teman yang sudah terinstall. Lalu pilih New File or Project, isikan nama project sesuai dengan keinginan teman-teman. Kalau sudah selesai, akan muncul tampilan seperti ini pada main window project QT Creator.

Gambar Main Window Project QT Creator

Pada project yang saya buat, saya namakan project HelloWorld. Kemudian click kanan pada nama project yang telah teman-teman buat, jika pada saya, berarti click kanan pada HelloWorld, pilih Add New, lalu pada Files and Classes pilih QT dan pilih QT Resource File. Kemudian beri nama file tersebut. QT Resource File ini nantinya akan menjembatani antara alamat file yang akan digunakan dengan program yang memang selalu membutuhkan file external seperti gambar, audio dan lain-lainnya. Penggunaan QT Resource File ini akan membuat kita tidak perlu takut akan kesalahan pembacaan alamat file ketika suatu program dijalankan di berbeda platform.

Tambahkan prefix dengan memilih tombol Add, lalu masukan gambar yang diinginkan untuk nantinya digunakan pada QLabel. Berikut contoh jika sudah dimasukkan file gambar ke dalam QT Resource File.

Gambar QT Resource File

Setelah gambar sudah dimasukkan ke dalam QT Resource File, kemudian kita masuk ke dalam design editor QT dengan cara cukup mengclick dua kali file yang berada pada folder Forms, berformat .ui. Jika pada yang saya buat, maka saya mengclick dua kali pada mainwindow.ui. Lalu kita akan berpindah ke pada tampilan design editor QT

Gambar QT Designer Editor

Pada QT Designer Editor, untuk yang sebelah kiri adalah kumpulan object yang nantinya akan kita bisa pakai ke dalam sebuah form. Cara menggunakannya hanya tinggal melakukan drag and drop saja ke dalam form, persis seperti saat melakukan desain form pada VB.Net dengan IDE nya Visual Studio. Setelah QLabel (Note: Label di designer editor adalah QLabel) sudah berada di form, kemudian pada bagian properties, pilihlah pixmap dan setelah dipilih, kita akan diminta browsing file gambar yang kita inginkan, pilihlah QT Resource File yang sebelumnya telah kita buat. Formatnya adalah .qrc. Setelah dipilih, maka selanjutnya pilihlah gambar yang berada pada file yang berformat .qrc tersebut yang telah kita buat. Setelah semuanya selesai, maka program bisa dicompile dan dirun. Hasilnya akan kurang lebih seperti ini.

Gambar Hasil Output Program HelloWorld

Sekian dari tutorial perdana saya ini, semoga dapat bermanfaat, jangan lupa untuk tetap menanti tutorial saya selanjutnya ya :D .