Saat kita pertama baru mengenal Qt bahkan kebetulan kita juga seorang pemula dalam Qt, pasti akan bingung saat memulai Qt Creator. Bingung ini disebabkan karena ada beberapa pilihan type dalam project pertama yang akan kita buat. Seperti pada gambar berikut ini, type project manakah yang akan kita pilih?? Hayo pilih,,, :P
Lihat gambar:
Ada beragam pilihan saat kita akan memulai Qt,
1.Qt Widgets Application – kebanyakan bila kita akan membuat sebuah desktop app, maka pilihan inilah yang digunakan, dengan menggunakan Qt Widgets, maka kita disediakan UI yang sangat interaktif oleh Qt Designer.
Pembuatan app dengan Qt Widgets Application ini nantinya akan berdasarkan MainWindow.
Lihat gambar 1:
Dengan Qt Widgets Application ini pula, kita akan disuguhkan tampilan UI yang tidak kalah dengan Visual Studio seperti berikut ini,
Lihat gambar 2:
Sedangkan pada project, kita disuguhkan dengan tree view seperti berikut ini,
Lihat gambar 3:
Nah, hal hal di atas adalah bila kita akan membuat desktop app dengan Qt Widgets Application.
Lalu bagaimana bila kita membuat desktop app dengan Qt Quick Application? Lihat section berikutnya :)
2.Qt Quicks Application – ini adalah teknologi yang sangat unik. Kita bisa membuat sebuah desktop application dengan Javascript. Jadi sangat cocok sekali bila anda sebelumnya adalah developer web, anda bisa menggunakan tool – tool web anda untuk membuat Desktop application.
Dengan Qt Quicks Application, kita bisa menggunakan Qml yang digabungkan dengan Javascript untuk membuat applikasi. Kita pun bisa menggunakan C++ pada aplikasi ini, unik bukan?
Lihat gambar 4:
Lihat, saya menggunakan QtQuick 1.1, lihat juga, semua kode itu terdapat kode Javascript nya bukan? Lihat juga, kode – kode ini semua terbungkus dalam file qml.
Lihat gambar 5:
Nah, bila anda familiar dengan Javascript, pasti tidak sulit menguasai Qt Quick ini.
PADA TUTORIAL INI KITA AKAN MEMBAHAS TENTANG QT QUICK TERLEBIH DAHULU :)
3.Qt Console Application
Kalo yang satu ini adalah aplikasi console dengan menggunakan C++. Anda bisa melihat kita memperagakan pembuatan aplikasi dengan Console ini pada tutorial sebelumnya.
4.HTML5 Application
Kalo yang ini, kita bisa membuat sebuah desktop application dengan HTML5, Javascript, dan C++ , kita akan membahasnya nanti.
5.Qt Quick UI
Qt Quick UI digunakan untuk membuat Qml file yang nantinya bisa kita integrasikan (tidak bisa berjalan sendiri) dengan project kita. Kita juga akan membahasnya nanti.
KEMBALI KE JUDUL, pada tutorial ini kita akan membahas tentang Qt Quick Application.
NOTE:
Pada tutorial ini saya menggunakan Qt 5.2.1 dan Qt Creator 3.0.
Mungkin ada yang menjumpai problem saat men-develop Qt Quick Application, padahal semua baik – baik saja saat menggunakan Qt Widget Application, bisa melihat pertanyaan di forum ini http://qt-project.org/forums/viewthread/40896/
Mari kita lanjutkan tutorial kita,
Meski belajar Qt Quick itu sangat mudah, anda harus familiar dengan prinsip pemrograman dan pengetahuan dasar Javascript. Karena bila kita bicara tentang Qt Quick, maka akan jauh lebih mudah bila kita mengerti dasar Javascript.
Ok, tanpa banyak basa – basi, mari kita mencoba membuat Hello World dengan Qt Quick Application, ingat, Qt Quick Application bukan Qt Widget Application.
Buka file -– Kemudian Pilih New Project --- Pilih Qt Quick Application --- berikan nama project --- klik OK
Catatan:
Dalam proses project baru ini, anda akan mendapati sebuah window untuk memilih Qt Quick Component Set.
Lihat gambar 6:
Pastikan VGA Driver anda terinstall OPENGLsehingga anda bisa menggunakan Qt Quick Component 2.0 . Tetapi bila VGA Driver anda masih onboard bawaan OS, mungkin tidak terdapat OPENGL di VGA anda, sehingga bila anda menggunakan Qt Quick Component versi 2.0 akan banyak error di sana sini, solusinya adalah menggunakan versi 1.1
Kembali ke project…
Setelah anda membuat project, nanti anda akan mendapati tampilan default seperti pada gambar di bawah ini,
Lihat gambar 7:
Anda bisa lihat, saya menggunakan Qt Quick Component 1.1 :P
Nah, kode – kode di atas adalah default kode Qt Quick Application. Silahkan run atau debug, nanti anda akan mendapati sebuah window dengan lebar 360px dan tinggi 360px. Mudah bukan??
Berikut adalah penjelasannya:
Rectangle, ini adalah sebuah ‘Rectangle’ , yup, kotak, ini adalah Window kita. Coba hapus semua kode default dan anda ganti dengan kode berikut ini,
Lihat gambar 8:
Silahkan run, dan lihat apa yang terjadi? Ya, anda akan memiliki sebuah window dengan latar belakang kuning, benar bukan??
Nah, mari kita tambahkan sebuah kotak lagi seperti pada gambar di bawah ini,
Lihat gambar 9:
Sekarang run, dan lihat seperti apa window kita??? Ya, kita sekarang punya window kuning dan merah,,, wow, mudah sekali ya membuat desktop application :)
x dan y di atas adalah jarak x dan y kotak merah terhadap batas window.
Silahkan lihat hasilnya pada screenshot berikut, hasil dari run project anda harusnya sama dengan gambar ini,
Lihat gambar 10:
Nah, setelah itu, yuk mari kita tambahkan tulisan “Hello World” di kotak merah,,,
Lihat gambar 11:
Run dan lihat hasilnya,, wow, mudah bukan????
Sekarang, yuk kita otak atik kodenya seperti gambar berikut ini,
Lihat gambar 12:
Anda bisa lihat, kita mulai otak – atik kodenya,
Untuk Rectangle, kita tambahkan id “kotakMerah”, sedangkan Text di dalamnya kita berikan id “kotakMerahText”.
Untuk Text, kita rata tengah-kan baik secara vertical maupun horizontal dengan properties “centerIn” terhadap kotak merah.
Kemudian kita berikan “MouseArea”, lihat dan amati kode di atas, saat MouseArea kita klik, maka kita tambahkan jarak x 20 pixel, dan saat itu pula kita ganti text dari “kotakMerahText”. Mudah dipahami kan?
Silahkan run, dan hasilnya nanti akan seperti berikut ini,
Lihat gambar 13:
Nah ternyata mudah bukan membuat .exe desktop application dengan menggunakan Qt Quick Application :)
Ini hanya pengenalan saja lho, kedepan, kita akan mencoba membuat Qt Quick application yang lain.
Demikian tutorial, mudah mudahan bermanfaat.
Salam.
1.Qt Widgets Application – kebanyakan bila kita akan membuat sebuah desktop app, maka pilihan inilah yang digunakan, dengan menggunakan Qt Widgets, maka kita disediakan UI yang sangat interaktif oleh Qt Designer.
Pembuatan app dengan Qt Widgets Application ini nantinya akan berdasarkan MainWindow.
Lihat gambar 1:
Dengan Qt Widgets Application ini pula, kita akan disuguhkan tampilan UI yang tidak kalah dengan Visual Studio seperti berikut ini,
Lihat gambar 2:
Sedangkan pada project, kita disuguhkan dengan tree view seperti berikut ini,
Lihat gambar 3:
Nah, hal hal di atas adalah bila kita akan membuat desktop app dengan Qt Widgets Application.
Lalu bagaimana bila kita membuat desktop app dengan Qt Quick Application? Lihat section berikutnya :)
2.Qt Quicks Application – ini adalah teknologi yang sangat unik. Kita bisa membuat sebuah desktop application dengan Javascript. Jadi sangat cocok sekali bila anda sebelumnya adalah developer web, anda bisa menggunakan tool – tool web anda untuk membuat Desktop application.
Dengan Qt Quicks Application, kita bisa menggunakan Qml yang digabungkan dengan Javascript untuk membuat applikasi. Kita pun bisa menggunakan C++ pada aplikasi ini, unik bukan?
Lihat gambar 4:
Lihat, saya menggunakan QtQuick 1.1, lihat juga, semua kode itu terdapat kode Javascript nya bukan? Lihat juga, kode – kode ini semua terbungkus dalam file qml.
Lihat gambar 5:
Nah, bila anda familiar dengan Javascript, pasti tidak sulit menguasai Qt Quick ini.
PADA TUTORIAL INI KITA AKAN MEMBAHAS TENTANG QT QUICK TERLEBIH DAHULU :)
3.Qt Console Application
Kalo yang satu ini adalah aplikasi console dengan menggunakan C++. Anda bisa melihat kita memperagakan pembuatan aplikasi dengan Console ini pada tutorial sebelumnya.
4.HTML5 Application
Kalo yang ini, kita bisa membuat sebuah desktop application dengan HTML5, Javascript, dan C++ , kita akan membahasnya nanti.
5.Qt Quick UI
Qt Quick UI digunakan untuk membuat Qml file yang nantinya bisa kita integrasikan (tidak bisa berjalan sendiri) dengan project kita. Kita juga akan membahasnya nanti.
KEMBALI KE JUDUL, pada tutorial ini kita akan membahas tentang Qt Quick Application.
NOTE:
Pada tutorial ini saya menggunakan Qt 5.2.1 dan Qt Creator 3.0.
Mungkin ada yang menjumpai problem saat men-develop Qt Quick Application, padahal semua baik – baik saja saat menggunakan Qt Widget Application, bisa melihat pertanyaan di forum ini http://qt-project.org/forums/viewthread/40896/
Mari kita lanjutkan tutorial kita,
Meski belajar Qt Quick itu sangat mudah, anda harus familiar dengan prinsip pemrograman dan pengetahuan dasar Javascript. Karena bila kita bicara tentang Qt Quick, maka akan jauh lebih mudah bila kita mengerti dasar Javascript.
Ok, tanpa banyak basa – basi, mari kita mencoba membuat Hello World dengan Qt Quick Application, ingat, Qt Quick Application bukan Qt Widget Application.
Buka file -– Kemudian Pilih New Project --- Pilih Qt Quick Application --- berikan nama project --- klik OK
Catatan:
Dalam proses project baru ini, anda akan mendapati sebuah window untuk memilih Qt Quick Component Set.
Lihat gambar 6:
Pastikan VGA Driver anda terinstall OPENGLsehingga anda bisa menggunakan Qt Quick Component 2.0 . Tetapi bila VGA Driver anda masih onboard bawaan OS, mungkin tidak terdapat OPENGL di VGA anda, sehingga bila anda menggunakan Qt Quick Component versi 2.0 akan banyak error di sana sini, solusinya adalah menggunakan versi 1.1
Kembali ke project…
Setelah anda membuat project, nanti anda akan mendapati tampilan default seperti pada gambar di bawah ini,
Lihat gambar 7:
Anda bisa lihat, saya menggunakan Qt Quick Component 1.1 :P
Nah, kode – kode di atas adalah default kode Qt Quick Application. Silahkan run atau debug, nanti anda akan mendapati sebuah window dengan lebar 360px dan tinggi 360px. Mudah bukan??
Berikut adalah penjelasannya:
Rectangle, ini adalah sebuah ‘Rectangle’ , yup, kotak, ini adalah Window kita. Coba hapus semua kode default dan anda ganti dengan kode berikut ini,
Lihat gambar 8:
Silahkan run, dan lihat apa yang terjadi? Ya, anda akan memiliki sebuah window dengan latar belakang kuning, benar bukan??
Nah, mari kita tambahkan sebuah kotak lagi seperti pada gambar di bawah ini,
Lihat gambar 9:
Sekarang run, dan lihat seperti apa window kita??? Ya, kita sekarang punya window kuning dan merah,,, wow, mudah sekali ya membuat desktop application :)
x dan y di atas adalah jarak x dan y kotak merah terhadap batas window.
Silahkan lihat hasilnya pada screenshot berikut, hasil dari run project anda harusnya sama dengan gambar ini,
Lihat gambar 10:
Nah, setelah itu, yuk mari kita tambahkan tulisan “Hello World” di kotak merah,,,
Lihat gambar 11:
Run dan lihat hasilnya,, wow, mudah bukan????
Sekarang, yuk kita otak atik kodenya seperti gambar berikut ini,
Lihat gambar 12:
Anda bisa lihat, kita mulai otak – atik kodenya,
Untuk Rectangle, kita tambahkan id “kotakMerah”, sedangkan Text di dalamnya kita berikan id “kotakMerahText”.
Untuk Text, kita rata tengah-kan baik secara vertical maupun horizontal dengan properties “centerIn” terhadap kotak merah.
Kemudian kita berikan “MouseArea”, lihat dan amati kode di atas, saat MouseArea kita klik, maka kita tambahkan jarak x 20 pixel, dan saat itu pula kita ganti text dari “kotakMerahText”. Mudah dipahami kan?
Silahkan run, dan hasilnya nanti akan seperti berikut ini,
Lihat gambar 13:
Nah ternyata mudah bukan membuat .exe desktop application dengan menggunakan Qt Quick Application :)
Ini hanya pengenalan saja lho, kedepan, kita akan mencoba membuat Qt Quick application yang lain.
Demikian tutorial, mudah mudahan bermanfaat.
Salam.