C++ QT No.6: Membuat New Window dari MenuBar

<p><style>#vid_7835891909984875361{display:none;}#txt_7835891909984875361{display:block;}</style><br />Telah kita bahas di awal tutorial bahwa, dengan Qt kita bisa memilih beberapa Base Class saat membuat project Qt, diantaranya adalah QMainWindow, QWidget, dan QDialog. Di antara ketiga tersebut yang paling unik adalah QMainWindow, karena Base Class ini secara otomatik membuatkan beberapa bar tambahan otomatis untuk kita yaitu MenuBar, ToolBar, dan StatusBar.<br /><br />Pada tutorial kali ini, kita akan mencoba mengotak – atik MenuBar untuk membuat sebuah window Dialog baru.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZVBpCDpoDxzwFzIbRLRPzRACgQUu5QcZQTZ4cJ50vbakdvrQFDLxAR1iC_BSp2ggFD7Qm321NoQm9b_e7MiMobxK8q9-odNduVZ1Fa3j2KhKub8GfEkJ18UNbwAtFBhRw0_H4wr8iFK5/s1600/ScreenshotNewWindow2.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZVBpCDpoDxzwFzIbRLRPzRACgQUu5QcZQTZ4cJ50vbakdvrQFDLxAR1iC_BSp2ggFD7Qm321NoQm9b_e7MiMobxK8q9-odNduVZ1Fa3j2KhKub8GfEkJ18UNbwAtFBhRw0_H4wr8iFK5/s1600/ScreenshotNewWindow2.png" /></a><br /><br /><a name="more"></a> <br />Intinya, kita akan membuat sebuah Sub Menu pada Menubar, kemudian kita membuat sebuah event (ingat signal and slot pada tutorial sebelumnya) terhadap submenu yang bila di click maka akan membuat window baru.<br /><br />Hal seperti ini dinamakan event triggered :)<br /><br />Mari kita langsung membuat sebuah project Qt Widget Application dengan Base Class nya adalah QMainWindow. Di sini sebagai contoh kita akan membuat sebuah project “MetuProject” dan “Percobaan1” sebagai class nya,<br />Lihat gambar 1:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg22VlqMRdmkF_meFCalN1Mde9HF1-r0j7cNdmpGKNBWLKsGt40ILUnNIID_vlE3tVG8AAGT5H9KwVF5HFGpQgdWCYRDe_4RazF5AHEEwkEwewvjzE-nj3arsG7FbqATG7xdUJp4cjNffJZ/s1600/1_new_project.PNG" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg22VlqMRdmkF_meFCalN1Mde9HF1-r0j7cNdmpGKNBWLKsGt40ILUnNIID_vlE3tVG8AAGT5H9KwVF5HFGpQgdWCYRDe_4RazF5AHEEwkEwewvjzE-nj3arsG7FbqATG7xdUJp4cjNffJZ/s1600/1_new_project.PNG" /></a><br /><br />Lihat gambar 2:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ws1OnNXwyBtjuJwbGX-1W7u5u6xipYltj3lhgZ8_jiPPIHIVp4yK6C9vPlomfeC2FPHXtEklz3hSy3Sapx38X4vUlOJwDNvh4RRTrtF4jncpVvVOTLQEQPgo5Y4doBNLKL49gSxBFdCR/s1600/2_new_project.PNG" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ws1OnNXwyBtjuJwbGX-1W7u5u6xipYltj3lhgZ8_jiPPIHIVp4yK6C9vPlomfeC2FPHXtEklz3hSy3Sapx38X4vUlOJwDNvh4RRTrtF4jncpVvVOTLQEQPgo5Y4doBNLKL49gSxBFdCR/s1600/2_new_project.PNG" /></a><br /><br />Hem, kayaknya kita tidak perlu mengupas code – code default dari QT Framework ini, untuk yang mungkin belum paham kode – kode ini silahkan browsing di Google yach, :)<br /><br />Mari langsung kita menuju ke QT Ui yaitu “percobaan1.ui”, silahkan anda double click untuk membuka file tersebut pada Qt Designer.<br /><br />Lihat gambar 3:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2oHifsDEXfYiQCJXI_3J6JbLaVInDvtUv7Xl9nDsQFj7BdALtJn37A6ayYgY3DQtbnqKLnuUIGBTJ8ksQX2N4DlcXbeDrSsSdSburjVKWiZp040ZTUbB9dy93-1LJxMYdidvQCC7FdnsC/s1600/3_PercobaanUi.PNG" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2oHifsDEXfYiQCJXI_3J6JbLaVInDvtUv7Xl9nDsQFj7BdALtJn37A6ayYgY3DQtbnqKLnuUIGBTJ8ksQX2N4DlcXbeDrSsSdSburjVKWiZp040ZTUbB9dy93-1LJxMYdidvQCC7FdnsC/s1600/3_PercobaanUi.PNG" /></a><br /><br />Anda bisa lihat pada screenshot di atas, secara default QMainWindow Class akan memberikan sebuah Menubar dan Toolbar untuk kita, nah, yang akan kita otak atik di sini adalah MenuBar nya. Mari kita tambahkan sebuah sub menu “New Window”. Membuatnya pun sangat mudah sekali, silahkan double click, isikan menu, tekan enter, isikan submenu, mudah bukan?<br /><br />Lihat gambar 4:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRt4RSjRdR5YDybe9_87zdzt-rcmaKW3fZSb5YkKE5dp26N8H7tCKcSfLCHjyl4LnZRNwUEYB97fqbs94wcHPudB7Nw1tw5lArwm8XNcEiFQ8LFCMWaWIemeDG0TRFHFbhFrasDPyEM8Y5/s1600/4_CreateSubMenu.PNG" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRt4RSjRdR5YDybe9_87zdzt-rcmaKW3fZSb5YkKE5dp26N8H7tCKcSfLCHjyl4LnZRNwUEYB97fqbs94wcHPudB7Nw1tw5lArwm8XNcEiFQ8LFCMWaWIemeDG0TRFHFbhFrasDPyEM8Y5/s1600/4_CreateSubMenu.PNG" /></a><br /><br />Coba perhatikan, saat kita membuat sebuah sub menu (ext: New Window) maka window action editor yang terletak di sebelah bawah dari window akan membuat sebuah action secara otomatis.<br /><br />Lihat gambar 5:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHTLwqWpRUKAajBLEL8I8dnPG3IY9nBJNPnyXxy_zixSfgbGk_EnOcHaI4mKuW2rCGd0iKW_djtBN3PTSnJzptjyUtDJ9IRC-QlacC-1Kj27hfanfVey9oCS2-urymVtdAQ89fXIFcOK10/s1600/5_ActionEditor.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHTLwqWpRUKAajBLEL8I8dnPG3IY9nBJNPnyXxy_zixSfgbGk_EnOcHaI4mKuW2rCGd0iKW_djtBN3PTSnJzptjyUtDJ9IRC-QlacC-1Kj27hfanfVey9oCS2-urymVtdAQ89fXIFcOK10/s1600/5_ActionEditor.png" /></a><br /><br />Anda bisa lihat, secara otomatis kita membuat “actionNew_Window”. Dari nama action inilah nanti kita bisa menambahkan signals and slots.<br /><br />Nah, mari kita berikan signals and slots, untuk menambahkannya, silahkan click kanan pada action yang sudah kita buat kemudian pilih “go to slots..”.<br /><br />Lihat gambar 6:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgySn5l-28Bwoe-TI5bBnO7RD4AkL3Ij1LnW28RmlieS5MoXAONnaiKfNt1IXAKnQ6Lb8pPCJqcZekqQ1gciBNzEAycWwW0NhDEsMX4RNQFEqK7jd0j7niwSPNrXbsjv8b6Pp4rTq5u90L_/s1600/6_GotoSlots.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgySn5l-28Bwoe-TI5bBnO7RD4AkL3Ij1LnW28RmlieS5MoXAONnaiKfNt1IXAKnQ6Lb8pPCJqcZekqQ1gciBNzEAycWwW0NhDEsMX4RNQFEqK7jd0j7niwSPNrXbsjv8b6Pp4rTq5u90L_/s1600/6_GotoSlots.png" /></a><br /><br />Kemudian, pada signals window, kita perlu menambahkan triggered events, ,, <br />Lihat gambar 7:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMYmf6fqX7MPPvgztKDf9xC6_yuGZyihlaSFu573fTFbfV8gqXHyJjuoSVTOuA4n7ShwHf1ICEbTsZAht6toSaGlMqBTKIIbhmmKdTIsDBxfgUylF0pNzl18ashsm7N3xrxposnJHd8nOw/s1600/7_Triggered.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMYmf6fqX7MPPvgztKDf9xC6_yuGZyihlaSFu573fTFbfV8gqXHyJjuoSVTOuA4n7ShwHf1ICEbTsZAht6toSaGlMqBTKIIbhmmKdTIsDBxfgUylF0pNzl18ashsm7N3xrxposnJHd8nOw/s1600/7_Triggered.png" /></a><br /><br />Signals Triggered ini digunakan seperti onclick pada button. Nah, setelah kita memberikan signals and slots ini, Qt Creator secara otomatis membuat sebuah slots yang diletakkan pada file C++ kita.<br />Lihat gambar 8:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4ToZJZVcXqGqboZTlmH6tSDoj6iOJlyLmhyXrtZ-UYEO-MMV9HO4PCiKAEaTB4MTtjsFeZiHLP-ryQwM0llWJjP-IHhwtc5Bpdj0yL_NdRew7tzB7ehQQkRMRk5TS4eA1yTRPZ5mazjP/s1600/8_TriggeredSlots.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4ToZJZVcXqGqboZTlmH6tSDoj6iOJlyLmhyXrtZ-UYEO-MMV9HO4PCiKAEaTB4MTtjsFeZiHLP-ryQwM0llWJjP-IHhwtc5Bpdj0yL_NdRew7tzB7ehQQkRMRk5TS4eA1yTRPZ5mazjP/s1600/8_TriggeredSlots.png" /></a><br /><br />Nah, sekarang coba run code anda, click sub menu “New Window” yang anda buat, yup apa yang terjadi? Tentu tidak terjadi apa apa karena function kita di atas masih kosong tidak ada declarasi sama sekali :)<br />Skenario kita di awal adalah kita akan menampilkan sebuah Window baru saat sub menu ini diclick.<br /><br />Maka dari itu, kita akan membuat sebuah Qt Widget Baru, yuk kita mulai…<br />Untuk menambahkan Qt Widget baru, anda bisa click kanan project – kemudian pilih Add New Item..<br /><br />Lihat gambar 9:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZWQDxD2gCV_41jnNzY_nb23Ds6j5jvjmaESWKmH_RrDI-v9ecxHtXQoFHXu_5XTpbFmkor1xpqq5pgBoCcOim_MqWOOg0xIdt0CUmSC0hLSnlXPsUOwwYrTImjmPzv00xJpk94TpOkMV-/s1600/9_addNewItem.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZWQDxD2gCV_41jnNzY_nb23Ds6j5jvjmaESWKmH_RrDI-v9ecxHtXQoFHXu_5XTpbFmkor1xpqq5pgBoCcOim_MqWOOg0xIdt0CUmSC0hLSnlXPsUOwwYrTImjmPzv00xJpk94TpOkMV-/s1600/9_addNewItem.png" /></a><br /><br />Kemudian dari window yang mucul, pilihlah Qt , kemudian Pilih Qt Designer Form Class. <br /><br />Dengan ini nanti kita akan membuat sebuah .ui baru dengan beberapa class. Di sini saya membuat class dengan nama OkieDialog.<br /><br />Bila sudah selesai nanti hasilnya adalah seperti ini:<br /><br />Lihat gambar 10:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip07VnONOlF-4CJhiUHZbmI9Q9OWc4osc1n2GHy-fblTsqKwXRsuTZFER8Cr8BKl7-XkW6GpfXowohbCnpo5Ojj1_QRPYHVTvjO6mGdKw-MEqgpP4EJUPgYpY7Vl7wtjB3VLPGMHw6cPUz/s1600/10_OkieDialog.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip07VnONOlF-4CJhiUHZbmI9Q9OWc4osc1n2GHy-fblTsqKwXRsuTZFER8Cr8BKl7-XkW6GpfXowohbCnpo5Ojj1_QRPYHVTvjO6mGdKw-MEqgpP4EJUPgYpY7Vl7wtjB3VLPGMHw6cPUz/s1600/10_OkieDialog.png" /></a><br /><br />Anda bila mengamati dan melihat kode – kode dari file – file yang berhasil kita tambakan ini.<br />Lalu bagaimana memanggil okiedialog ini supaya muncul saat kita mengeclick submenu tadi?<br />Mudah,<br />Coba lihat function yang kita buat tadi:<br /><br />Lihat gambar 11:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjPtBppGY9N2PQ1VIe7pK18W1HItn3fA1H_zPUnVw_-ANdowP-pu6NmACEJtJIPGUsRN8nHSKo47rW8CYloWME_VjwYvO0tXsPCCa0cplbAc9YCH09PORj_sBIesOXDWa26KZbbkNJX5vh/s1600/11_Coding.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjPtBppGY9N2PQ1VIe7pK18W1HItn3fA1H_zPUnVw_-ANdowP-pu6NmACEJtJIPGUsRN8nHSKo47rW8CYloWME_VjwYvO0tXsPCCa0cplbAc9YCH09PORj_sBIesOXDWa26KZbbkNJX5vh/s1600/11_Coding.png" /></a><br /><br />Dengan menambahkan header, dan membuat object baru dari OkieDialog, kita sudah bisa memanggil / membuat sebuah window okiedialog.<br />Mudah bukan???<br />Sebetulnya cara ini bukan satu – satunya untuk memanggil / membuat window okiedialog, masih banyak sekali kode – kode yang bisa anda coba, cobalah browsing :)<br /><br />Semoga bermanfaat,<br />Salam,</p>

Telah kita bahas di awal tutorial bahwa, dengan Qt kita bisa memilih beberapa Base Class saat membuat project Qt, diantaranya adalah QMainWi...

C++ QT No.5: Apa itu signals dan slots?

<p><style>#txt_3624774338526684391{display:block;}#vid_3624774338526684391{display:none;}</style><br />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.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndmlgJ2AhsY3sH9Q3ViikMWyJ5AemhuK_ZfyMJuWkAXt6hKFVc2_Up7DEoKMhHWRJKJbzmIQxjVFvyhq-x-d2F5dGt0Il0ugVlN7zD2THcw57CxjMVoRrAmcebQHP8b5lAqsyiWWhrryU/s1600/ScreenshotSignalNSlot.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndmlgJ2AhsY3sH9Q3ViikMWyJ5AemhuK_ZfyMJuWkAXt6hKFVc2_Up7DEoKMhHWRJKJbzmIQxjVFvyhq-x-d2F5dGt0Il0ugVlN7zD2THcw57CxjMVoRrAmcebQHP8b5lAqsyiWWhrryU/s1600/ScreenshotSignalNSlot.jpg" /></a> <br /><a name="more"></a> <br /><div style="clear:both;">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.<br /><br />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.<br /><br />Begitu pula bila anda seorang Flash Developer (Actionscript), anda akan menemukan hal yang sama untuk komponen button.<br /><br />Saya pribadi lebih suka menyebut perlakuan terhadap komponen button ini dengan nama event, sedangkan fungsi yang dipanggil saat event terjadi adalah event handler. :)<br /><br />Meski sebetulnya banyak yang menyebut dengan event dan function callback :P<br /><br />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.<br /><br />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. <br /><br />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.<br /><br />Lihat gambar 1:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4KVV6ywO7Q7Q_Hbxz60LS6ROW_8GJ-YjDJ8EVPiAVzRIZmhIvi8Up5t5tBlpLBPh2t3ENsNkXPMVyliXfnvIm133VduiUYUZXKdsOU6l-y4Ju3E7gCIkplDd7otCVYvXomnki_sBM6QM/s1600/1_inherited_slots.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4KVV6ywO7Q7Q_Hbxz60LS6ROW_8GJ-YjDJ8EVPiAVzRIZmhIvi8Up5t5tBlpLBPh2t3ENsNkXPMVyliXfnvIm133VduiUYUZXKdsOU6l-y4Ju3E7gCIkplDd7otCVYvXomnki_sBM6QM/s1600/1_inherited_slots.jpg" /></a><br /><br /><b>CONTOH 1 (SATU)</b><br /><br />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. <br /><br />Untuk menambahkan sebuah slot saat komponen diclick kita tinggal click kanan komponen tersebut kemudian pilih Go To Slots… seperti terlihat pada gambar berikut:<br /><br />Lihat gambar 2:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwvVSNGvta3yuRGcK4E9bDXpnU6-ZUvetzLOXwi-c-wNqPdRyEJ2I6EQJ3UQFZWkGV9s0yPCp64mr7SV6sCvf4Wkq7qXULOxOZXcskCxmeXVjSYIeoH9ldJg2pQUj28oboGTYbDNsbKGGk/s1600/2_RightClick_Gotoslot.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwvVSNGvta3yuRGcK4E9bDXpnU6-ZUvetzLOXwi-c-wNqPdRyEJ2I6EQJ3UQFZWkGV9s0yPCp64mr7SV6sCvf4Wkq7qXULOxOZXcskCxmeXVjSYIeoH9ldJg2pQUj28oboGTYbDNsbKGGk/s1600/2_RightClick_Gotoslot.jpg" /></a><br /><br />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.<br />Lihat gambar 3:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiObgPxfHNVNAAnyow783WNTBJSeu6uY297JNbAsWLX71uUGa0-6R1HqFAmkx3aT6bnJTYiOL_cg2gaMrgAiw4L6TeVMwBOckVN1dBt1t7o-v1x0y9ssWooyHsCrxq9aPyO9QKcGJKNYJo-/s1600/3_OnSlot.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiObgPxfHNVNAAnyow783WNTBJSeu6uY297JNbAsWLX71uUGa0-6R1HqFAmkx3aT6bnJTYiOL_cg2gaMrgAiw4L6TeVMwBOckVN1dBt1t7o-v1x0y9ssWooyHsCrxq9aPyO9QKcGJKNYJo-/s1600/3_OnSlot.jpg" /></a><br /><br />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.<br /><br />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,<br /><br />Lihat gambar 4:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs1nGnig3Xi8Nb1FWfaV3ALBo2e1VYrIloabJQaWBxsRbuk-N-SqUVg-68glFk6-wrUzEdZCh_Vujh18h-pFldq7MRK4eQwjiERBzkVF3kA4Uzx6BD5YC4swVeStKlyMAhaX6PxARIE1yO/s1600/4_MessageBox.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs1nGnig3Xi8Nb1FWfaV3ALBo2e1VYrIloabJQaWBxsRbuk-N-SqUVg-68glFk6-wrUzEdZCh_Vujh18h-pFldq7MRK4eQwjiERBzkVF3kA4Uzx6BD5YC4swVeStKlyMAhaX6PxARIE1yO/s1600/4_MessageBox.jpg" /></a><br /><br />Bila anda menggunakan GUI dalam QT Designer untuk menghubungkan antar komponen dengan signal and slot sangatlah mudah,<br /><br /><b>CONTOH 2 (DUA)</b><br /><br />Sebagai contoh, misalnya kita membuat sebuah slider dan sebuah progressbar pada ui kita.<br />Lihat gambar 5:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLX58STWSY0v6i2UE-ruPKX8TxaeSeM6ed71VHHOCzrCOduQLokJioLRJlYHY48j4n34PkhtpcNlDO_oDNKApztXWlg-UwnUTD9Dh6AlRL9o3jEsNjZeUsYentgkozZIofbf0yvG4h0QIC/s1600/5_horizontal_progressbar.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLX58STWSY0v6i2UE-ruPKX8TxaeSeM6ed71VHHOCzrCOduQLokJioLRJlYHY48j4n34PkhtpcNlDO_oDNKApztXWlg-UwnUTD9Dh6AlRL9o3jEsNjZeUsYentgkozZIofbf0yvG4h0QIC/s1600/5_horizontal_progressbar.jpg" /></a><br /><br />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.<br />Lihat gambar 6:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9IziYVzIrpZAa9U2z7LQ-OGVBUC5gtB9wt2cIyFvZFBqdNQV7ppNut7j_xHp0TeSnMgDSroIrbYwsd6P536mH30DUCWVD2m1qYNCtPRvN9W8nq0TSnraGOVRzC9pXWuD2hiYm5E92o7y/s1600/6_drag_slider_to_progress.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9IziYVzIrpZAa9U2z7LQ-OGVBUC5gtB9wt2cIyFvZFBqdNQV7ppNut7j_xHp0TeSnMgDSroIrbYwsd6P536mH30DUCWVD2m1qYNCtPRvN9W8nq0TSnraGOVRzC9pXWuD2hiYm5E92o7y/s1600/6_drag_slider_to_progress.jpg" /></a><br /><br />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.<br />Cobalah anda lepaskan drag anda, maka akan tampil sebuah window connection seperti berikut ini,<br />Lihat gambar 7:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CNaO1gO4c8SaiqtsVDumIoP-uOPzmGVNdUHDpZ0z5m-Y64ewRB9SvMfnSHDoHJwS8oh1rkQzzcTpntbPkLzrgj7jInhmONd4KnuUjDmkAA9SV2a9kA3xoWhuE8KuEJE1lxlxGOq5aRiP/s1600/7_slider_progressbar.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CNaO1gO4c8SaiqtsVDumIoP-uOPzmGVNdUHDpZ0z5m-Y64ewRB9SvMfnSHDoHJwS8oh1rkQzzcTpntbPkLzrgj7jInhmONd4KnuUjDmkAA9SV2a9kA3xoWhuE8KuEJE1lxlxGOq5aRiP/s1600/7_slider_progressbar.jpg" /></a><br /><br />Nah, pada window connection, saya memilih signal valueChanged(int) untuk horizontalslider, kemudian slot untuk progressBar adalah setValue(int).<br /><br />Setelah anda selesai cobalah preview dengan debug, saat anda menggeser slider maka progressbar pun juga ikut bertambah.<br /><br />Lihat gambar 8:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiNCUyh1mcS9DUvKXeOvhH9mdWI7aHNhdUnZ18t_8DCk413EJr_2x1rXejsBAjwy2i4k_wxHMgXe-kM5sKy58ustIIanXYo83C9hkXXRznFuc0y7fYIASBlnRxmJPo2rITZfnS9nwQxHkE/s1600/8_hasil_horizontal_progress.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiNCUyh1mcS9DUvKXeOvhH9mdWI7aHNhdUnZ18t_8DCk413EJr_2x1rXejsBAjwy2i4k_wxHMgXe-kM5sKy58ustIIanXYo83C9hkXXRznFuc0y7fYIASBlnRxmJPo2rITZfnS9nwQxHkE/s1600/8_hasil_horizontal_progress.jpg" /></a><br /><br />Mudah bukan?<br />Itu diatas tadi menggunakan UI, bagaimana kalo kita tidak menggunakan UI tetapi mengetikan kode nya (direct programming)?<br /><br />connect(ui->horizontalSlider,<br />SIGNAL(valueChanged(int)),<br />ui->progressBar,<br />SLOT(setValue(int)));<br /><br />Ini merupakan koneksi signal dan slot antar komponen.<br />Lihat gambar 8.2:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMSUTn3ohyphenhyphenSsfcF8VN6Gp9eHD7Agyx0LGX58RGrQ5f9Tijbq-y5n4rrj2_c9CAHgZGpm3BBiG88OR5aMRd3egjwiRX5BT615pWdwYT-7hLtRGsYnkep2VCCE7DZjwy9o7RrZs9SzNnOFOY/s1600/8_2_direct_programming.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMSUTn3ohyphenhyphenSsfcF8VN6Gp9eHD7Agyx0LGX58RGrQ5f9Tijbq-y5n4rrj2_c9CAHgZGpm3BBiG88OR5aMRd3egjwiRX5BT615pWdwYT-7hLtRGsYnkep2VCCE7DZjwy9o7RrZs9SzNnOFOY/s1600/8_2_direct_programming.jpg" /></a><br /><br />Mari kita lanjut…. Yuuukkk….<br /><br /><b>CONTOH 3 (TIGA)</b><br /><br />Perhatikan kode berikut ini, pertama adalah screenshot kode pada C++ plain, kedua adalah kode slot dan signal pada C++ Qt<br />Lihat gambar 9:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6f9e3CrU3Khyphenhyphen7Dlusf4esPD4h_dy4RrQtNxplBclU2cBtcPQYWE2zJrS79rphV2K7WdLrQz8SOq6_j22OP0PpnzfO_BDSm5U4bKHNHojj_d8t83XWr30pQuSqRo84Y_htr9QOJw_o-cZq/s1600/9_plain_cplus_plus.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6f9e3CrU3Khyphenhyphen7Dlusf4esPD4h_dy4RrQtNxplBclU2cBtcPQYWE2zJrS79rphV2K7WdLrQz8SOq6_j22OP0PpnzfO_BDSm5U4bKHNHojj_d8t83XWr30pQuSqRo84Y_htr9QOJw_o-cZq/s1600/9_plain_cplus_plus.jpg" /></a><br /><br />Ini adalah plain C++ text code , anda bisa lihat, kita membuat sebuah contructor dengan:<br /><br />Counter(){m_value = 0;}<br /><br />Pada contructor ini terlebih dahulu kita mensetting supaya nilai dari variable m_value adalah nol.<br /><br />Berikutnya kita membuat sebuah function int value(){return m_value;} , function ini digunakan untuk mereturn nilai dari m_value nantinya.<br /><br />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 :)<br />Nah, mari kita bandingkan dengan C++ code pada QT yang bisa kita berikan Signals and Slots.<br /><br />Lihat gambar 10:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5BCAQpigYKTlcRahYpGgwEO83JwvpZfJR1ns2CKp9Mf_HVykOQXB_VCyEolN8CHuKJk75F2nT07Ox0ulq2C9xarOXZdJCNKil0g6AJ9A04G9p11VBqE6L1Z74xcqNrxFD3v0GbBKa2an/s1600/10_cplus_plus_qt.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5BCAQpigYKTlcRahYpGgwEO83JwvpZfJR1ns2CKp9Mf_HVykOQXB_VCyEolN8CHuKJk75F2nT07Ox0ulq2C9xarOXZdJCNKil0g6AJ9A04G9p11VBqE6L1Z74xcqNrxFD3v0GbBKa2an/s1600/10_cplus_plus_qt.jpg" /></a><br /><br />Nah,,,,, bisa anda lihat, semua function sama dengan C++ kode plain sebelumnya, hanya saja kita memberikan sebuah type tertentu untuk function, <br /><br />Untuk function void valueChanged(int newValue); kita berikan sebagai signals, sedangkan setValue() kita jadikan sebuah slots.<br /><br />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 :)<br /><br />Contoh ini saya ambil dari QT Help, <br /><br />Sekarang kita akan mencoba untuk mengetikan kode untuk slot setValue(),<br />Lihat gambar 11:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN76mOcFW2lNNenxOZbNg-8434kbVxBRdHj4mBme-HYe0L_0fUaqfm3PyH9AjVY8hZarrfzV4hPm3MorxA4dr-4XiJEOrmzWIocl1QJlNOnnaPQcSyLTPuLxvP4tAN5rfG0E8qqKcH2czD/s1600/11_setvalue.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN76mOcFW2lNNenxOZbNg-8434kbVxBRdHj4mBme-HYe0L_0fUaqfm3PyH9AjVY8hZarrfzV4hPm3MorxA4dr-4XiJEOrmzWIocl1QJlNOnnaPQcSyLTPuLxvP4tAN5rfG0E8qqKcH2czD/s1600/11_setvalue.jpg" /></a><br /><br />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.<br /><br />Emit digunakan untuk meng-emit signals valueChanged();<br /><br />Kemudian, mari kita mencoba memanggil signals and slots ini dengan menggunakan struktur kode connection yaitu:<br />Connect(komponenPertama, signal(), komponenKedua, slot());<br /><br />Lihat gambar 12:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxN0iAKA2J9cu30TLDJ_4b3Ds4soSj95erD0vUV7ipARwf6XflDjuilEk-nGKuitpfujs0eigQ9Tf_LQ-dLOaYpdk-k4IshmgFTlYyhp0nZU-e9BlhiwHPaSUskEqmvTO2VdWatNPYVz8w/s1600/12_setValue_again.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxN0iAKA2J9cu30TLDJ_4b3Ds4soSj95erD0vUV7ipARwf6XflDjuilEk-nGKuitpfujs0eigQ9Tf_LQ-dLOaYpdk-k4IshmgFTlYyhp0nZU-e9BlhiwHPaSUskEqmvTO2VdWatNPYVz8w/s1600/12_setValue_again.jpg" /></a><br /><br />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:<br /><b><br />Connect(ui->horizontalSlider, SIGNAL(valueChanged(int)), ui->progressBar,SLOT(setValue(int)));</b><br /><br />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.<br />Semoga bermanfaat, <br />Salam,<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwZkVUDZ45GaNkmt0uisN4nt10NQ50DC3kjlJdc-Zq7i8z45XCL3lEvnDYTs-m8ULxt52-lGZsa-7IQ7Z-iNTzahRcYTr7fkuPQ4gsNRC4RwQqc5yztOKyMG0ZLAJ_F_xpAi8RfvZs0_uR/s1600/13_QT_SIGNALS_AND_SLOTS.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwZkVUDZ45GaNkmt0uisN4nt10NQ50DC3kjlJdc-Zq7i8z45XCL3lEvnDYTs-m8ULxt52-lGZsa-7IQ7Z-iNTzahRcYTr7fkuPQ4gsNRC4RwQqc5yztOKyMG0ZLAJ_F_xpAi8RfvZs0_uR/s1600/13_QT_SIGNALS_AND_SLOTS.jpg" /></a><br /><br /><br /></div></p>

Dalam pemrograman apapun kita mengenal event dan event handler, ada juga event dan callback. Nah, pada QT, kita juga mengenal hal yang sama ...

C++ QT No.4: Mengenal macam - macam Teknologi User Interface (UI) pada QT

<p><style>#vid_7732201025083812452{display:none;}#txt_7732201025083812452{display:block;}</style><br />Tahukah anda, interaksi antara pengguna dengan logic software dinamakan User Interface disingkat dengan UI. UI ini berwujud bisa sebuah window, bisa tombol, bisa sebuah textarea dan lain sebagainya. Inilah komponen User Interface. Sebagai seorang programmer (pembuat program aplikasi), terlebih programmer yang menggunakan Qt, maka anda akan disediakan beragam UI yang bisa anda pilih sesuai kebutuhan. Ada QtWitget, QtQuick dan QtWebKit. Ketiganya dapat anda pilih sesuai kebutuhan sebagai UI progam anda. Ingin tahu bedanya? Mari kita simak.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNJIRdYlq6YY4yrLIeXHzFo-VUQNkHm-9tA2li1RA85jUuOXWtmO8xUx37oyx8Ik9Dsk5lfQfGvfSDg-Gf2nDoYtnc3aAmgy88wqIgV_D5GnRfExLG3gG-osE61-TswCEh39QF9-fwgFiv/s1600/ScreenshotMengenalTeknoUI.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNJIRdYlq6YY4yrLIeXHzFo-VUQNkHm-9tA2li1RA85jUuOXWtmO8xUx37oyx8Ik9Dsk5lfQfGvfSDg-Gf2nDoYtnc3aAmgy88wqIgV_D5GnRfExLG3gG-osE61-TswCEh39QF9-fwgFiv/s1600/ScreenshotMengenalTeknoUI.jpg" /></a> <br /><br /><a name="more"></a> <div style="clear:both;">Sama seperti Visual Studio yang menyediakan beragam Amazing User Interface tingkat tinggi sampai pengguna bingung memilihnya, Qt menyediakan tiga UI yang dapat kita gunakan. Anda pun bisa menggabungkan ketiganya. :) <br /><br />Qt Creator, sebuah Editor Qt adalah contoh dari perpaduan multiple teknologi UI ini. Coba amati Qt Creator yang selalu anda gunakan tersebut.<br /><br />Qt Creator menggunakan teknologi QtWidget sebagai User Interface pada menu dan kotak dialog nya. Coba perhatikan kembali Welcome Screen dari Qt Creator, lihat, tampilannya berbeda bukan, bahkan button nya sangat berbeda dan tidak biasa, ini karena UI untuk Welcome Screen menggunakan teknologi QtQuick. Lalu dimana letak penggunaan QtWebkit?<br /><br />Yup, perhatikan Help Documentation nya, wow, ini seperti halaman web yang menyatu dengan softwarenya bukan? Ya, teknologi QtWebKit digunakan dalam pembangunan Help Documentation ini.<br /><br />Mari kita lanjut....<br /><br /><b>A.Teknologi User Interface QtQuick</b><br />QtQuick merupakan salah satu Teknologi UI dari Qt yang menggunakan QML dan JavaScript sebagai penyusun UI nya, kita sudah membahas ini pada tutorial sebelumnya [[<a href="http://www.mediatutorial.web.id/2014/04/Apa-itu-Qt-Quick-Application.html">C++ QT No.3: Apa itu Qt Quick Application?</a>]]<br /><br />Mirip seperti XAML yang dikembangkan Microsoft , QML merupakan teknologi binding dari Qt yang memfasilitasi pengguna dengan visual canvas dan rendering engine nya. Teknologi UI ini sangat cocok sekali untuk Hardware Acceleration seperti OpenGL pada VGA driver kita.<br /><br />Jangan salah, bila anda menggunakan QtQuick versi 2, maka memang butuh OpenGL yang disuport oleh VGA anda. OpenGL sekarang begitu terkenal, banyak games – games yang mulai menargetkan OpenGL karena begitu flexibel dan mudah. Tapi sayangnya, OpenGL ini tidak terdapat pada VGA driver bawaan OS. <br /><br />Jadi jangan heran, saat anda install ulang komputer (bahkan Windows 8.1 sekalipun) anda akan menemukan bahwa tidak ada OpenGL pada VGA driver anda. Cara terbaik adalah periksa Motherboard anda dan cari driver VGA yang sesuai dengan Motherboard anda. Biasanya gratis.<br /><br />Animation, Transition, Visual Effect, Shader Effect dan lain – lain merupakan fasilitas yang dapat anda kembangkan saat menggunakan QtQuick sebagai User Interface (UI) aplikasi anda.<br /><br />Amazing bukan?<br /><br /><b>B.Teknologi User Interface QtWidget</b><br />QtWidget merupakan tradisional User Interface element yang biasanya terdapat dalam dekstop environment. Bila anda pengguna linux, maka UI ini merupakan bagian dari KDE. Tapi jangan salah, QtWidget sangat dinamis untuk Windows dan Mac OS. Sehingga bila anda menggunakan QtWidget sebagai UI anda maka tampilannya mirip sekali dengan UI pada OS anda.<br /><br />Bila anda pengguna Windows 8.1 seperti saya dengan Amazing Flat Designnya, maka QtWidget ini menyesuaikan dengan UI OS.<br /><br />Semua standar komponen untuk aplikasi seperti button, textarea, menu dan lain – lain terdapat pada QtWidget ini. Sehingga sangat cocok sekali untuk anda yang gemar membuat aplikasi tradisional standar.<br /><br />Bila kita membuat aplikasi dengan QtWidget, maka saat memulai project, akan muncul pemilihan Base Class, ada tiga yaitu Class QWidget, Class QMainWindow, dan Class Qdialog.<br />Lihat gambar 1:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGN8dOE1fCo5W_0Au6q5DvTNVSuf24wSV3qxGnIHrEAUV4KaQsOnQLcNgtnUs8R52dif2UBv4NqLKosfzhWh03TdRND5AbRQTAJvto_KvNjCY0v0kRREMfuiNwy124ayFFIEnci6xyqa_C/s1600/1_BaseClassPilih.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGN8dOE1fCo5W_0Au6q5DvTNVSuf24wSV3qxGnIHrEAUV4KaQsOnQLcNgtnUs8R52dif2UBv4NqLKosfzhWh03TdRND5AbRQTAJvto_KvNjCY0v0kRREMfuiNwy124ayFFIEnci6xyqa_C/s1600/1_BaseClassPilih.jpg" /></a><br /><br />Perbedaan dari ketiga Base Class di atas adalah berikut ini:<br /><br />* QWidget merupakan base class untuk semua GUI element pada QtWidget User Interface. Coba lah explorasi dan bedakan ketiganya :) <br /><br />* QDialog merupakan sebuah window yang biasanya digunakan untuk mengejutkan pengguna, seperti saat window dialog muncul ketika pengguna harus memasukan input dengan benar atau hal – hal yang lain, tampilan dari Qdialog tidak berbeda dengan Qwidget, anda bisa menggunakan salah satu.<br /><br />* QMainWindow, nah, ini adalah sebuah class yang sangat unik, karena menggunakan feature built in yang sangat populer seperti status bar, toolbar, dan menu bar. Cobalah membuat applikasi QtWidget dengan QmainWindow sebagai base class nya, pasti secara otomatis akan ditampilan menubar , toolbar, dan statusbar.<br /><br /><b>C.Teknologi User Interface QtWebkit</b><br />Tahukah anda bahwa web programing adalah kegiatan yang paling berkembang di dunia saat ini? Tahukah anda bahwa web koding seperti html, css, js sangat populer dan mudah digunakan dan mulai merambah ke teknologi desktop seperti Html5 dan Css3?<br /><br />Lalu kenapa tidak digunakan dalam pemrograman desktop? Ya, dengan menggunakan User Interface QtWebkit ini anda bisa membuat sebuah desktop application dengan menggunakan koding web. Unik bukan?<br /><br />Teknologi QtWebkit menampilkan web content melalui QML, sedangkan C++ API digunakan untuk interaksi dengan web content tersebut.<br /><br />Perlu diperhatikan bersama bahwa pemilihan teknologi adalah biasa, so, tetaplah berkreasi, berikut kita kutipkan beberapa perbandingan antar tiga teknologi UI dari Qt Help Documentation.<br /><br /><table style="background-color: #000;width:100%;"><tr> <td><br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#000;color:#fff;"><br />Qt Quick / Qt Quick Controls<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#000;color:#fff;"><br />Qt Widgets<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#000;color:#fff;"><br />Qt WebKit<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#000;color:#fff;"><br />Comments<br /></td> </tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Used language(s)<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />QML/JS<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />C++<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />HTML/CSS/JS<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br /></td> </tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Native look'n'feel<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Qt Widgets and Qt Quick Controls integrate well to the underlying platform, providing a native look'n'feel on Windows, Linux, and Mac OS X.<br /></td> </tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Custom look'n'feel<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Qt Widgets provide means for customization via style sheets, but Qt Quick is a better performing choice for user interfaces that do not aim to look native.<br /></td> </tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Fluid animated UIs<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Qt Widgets do not scale well for animations, and Qt WebKit's CSS3 animations are not as powerful as Qt Quick animations. Qt Quick offers a convenient and natural way to implement animations in a declarative manner.</td> </tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Touch screen<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Qt Widgets often require a mouse cursor for good interaction, whereas Qt Quick only provides primitive building blocks that were designed with touch interaction in mind. The WebView Qt Quick component has support for multi-touch gestures to interact with web content.</td> </tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Standard industry widgets<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Qt Widgets provide all the bells and whistles, developed over two decades, needed for building standard industry type applications. Qt WebKit Widgets provide widgets and additional classes to render and interact with web content.<br /></td></tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Model/View programming<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Some MVC like concepts exist in Qt WebKit, Qt Quick provides convenient views, but Qt Widgets provide more convenient and complete frameworks. In addition to Qt Quick views, Qt Quick Controls provide a TableView.<br /></td> </tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Rapid UI development<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Thanks to its superior productivity, Qt Quick is an excellent choice for rapid UI prototyping and development.<br /></td></tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />HW accelerated graphics<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Qt Widgets provide QGLWidget for rendering OpenGL graphics, and Qt WebKit supports WebGL, but the OpenGL ES 2.0 or OpenGL 2.0 based Qt Quick Scene Graph has proven to provide the best performance for UIs and for integrating with OpenGL content.<br /></td> </tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Graphical effects<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />The particle system and shader effects available in Qt Quick are more flexible compared to CSS Effects and Shaders available in Qt WebKit. Qt Widgets offer very little in this area.<br /></td></tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Rich text processing<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#fff;"><br />Qt Widgets currently provide the most comprehensive base for implementing text editors. Qt's rich text document classes can also be utilized in Qt Quick and Qt Quick Controls' TextArea, but may require some C++ implementation.<br /></td> </tr><tr> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Existing web content<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />No<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Yes<br /></td> <td style="border:1px solid #fff;padding:5px;background-color:#DDD;"><br />Both Qt Quick and Qt Widgets prodive components for presenting simple rich text, but Qt WebKit is the right choice for presenting full-blown web content.<br /></td></tr></table><br />Mudah - mudahan bermanfaat dan sampai jumpa pada tutorial berikutnya.<br />Salam <br />Last Update 25 April 2014, 17.52 WIB<br /><br /></div></p>

Tahukah anda, interaksi antara pengguna dengan logic software dinamakan User Interface disingkat dengan UI. UI ini berwujud bisa sebuah wind...

C++ QT No.3: Apa itu Qt Quick Application?

<p><style>#vid_3989201570928531887{display:none;}#txt_3989201570928531887{display:block;}</style><br />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<br />Lihat gambar:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6looOpUvvkJBTisSLLhGlQX5Hy0gannRFmOdXVCJ4lMycdSme6K1TIpkHaj0ITJS-XZXK_5jzjatGMB_RW8t6lQb7DY0M61QsLdUp9jEXS79Ic9up6msCn5o8D4FjmsfvJBU7G_LgqDB/s1600/0_screenshot_qt_quick.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6looOpUvvkJBTisSLLhGlQX5Hy0gannRFmOdXVCJ4lMycdSme6K1TIpkHaj0ITJS-XZXK_5jzjatGMB_RW8t6lQb7DY0M61QsLdUp9jEXS79Ic9up6msCn5o8D4FjmsfvJBU7G_LgqDB/s1600/0_screenshot_qt_quick.jpg" /></a><br /><br /><a name="more"></a> <br /><div style="clear:both;">Ada beragam pilihan saat kita akan memulai Qt,<br /><br /><b>1.Qt Widgets Application </b>– 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. <br />Pembuatan app dengan Qt Widgets Application ini nantinya akan berdasarkan MainWindow.<br />Lihat gambar 1:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicX4fvNtqCm5qQYPUiZN4sf-jrJxb5nbb6QiZ5KhK76v_rJXSPyNvbHmy8Cn-i-Xg8e9pIVjqlUAzy_ydSeKfeHwHOCYTmi6qNJUkZLV15L58bUSSwRQn0YDOupWy9P6k48xgcO_nvkrZl/s1600/1_qt_widgets.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicX4fvNtqCm5qQYPUiZN4sf-jrJxb5nbb6QiZ5KhK76v_rJXSPyNvbHmy8Cn-i-Xg8e9pIVjqlUAzy_ydSeKfeHwHOCYTmi6qNJUkZLV15L58bUSSwRQn0YDOupWy9P6k48xgcO_nvkrZl/s1600/1_qt_widgets.jpg" /></a><br /><br />Dengan Qt Widgets Application ini pula, kita akan disuguhkan tampilan UI yang tidak kalah dengan Visual Studio seperti berikut ini,<br />Lihat gambar 2:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbP4ektaW-7WMiMQ6CUa8lGNjIJ7Yf7PjV0vihXdqGL9WaNODdY9DcFTfyAZiC_mcP4JnuLo9X-In6FO3bdI8PB8YVS7z49S7oMQhph03qEcOrH6m7-MMAGGXkP94rdn54Me5LfI88a3ez/s1600/2_nice_ui.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbP4ektaW-7WMiMQ6CUa8lGNjIJ7Yf7PjV0vihXdqGL9WaNODdY9DcFTfyAZiC_mcP4JnuLo9X-In6FO3bdI8PB8YVS7z49S7oMQhph03qEcOrH6m7-MMAGGXkP94rdn54Me5LfI88a3ez/s1600/2_nice_ui.jpg" /></a><br /><br />Sedangkan pada project, kita disuguhkan dengan tree view seperti berikut ini,<br />Lihat gambar 3:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIduQ6drrCnCtxSXFg7vF60DonycHFym-Iwq9Rvxn4PyZiOgMDcdOzpUHGofWsrGKu9_EqCfDNxQ5TmxYj3_sH-d8suA2G1mnLsd3DXRb-xYbKpAZmV2fus5WZ8FXYcvLmUwBtAJgSVnnF/s1600/3_project_of_qt_widgets.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIduQ6drrCnCtxSXFg7vF60DonycHFym-Iwq9Rvxn4PyZiOgMDcdOzpUHGofWsrGKu9_EqCfDNxQ5TmxYj3_sH-d8suA2G1mnLsd3DXRb-xYbKpAZmV2fus5WZ8FXYcvLmUwBtAJgSVnnF/s1600/3_project_of_qt_widgets.jpg" /></a><br /><br />Nah, hal hal di atas adalah bila kita akan membuat desktop app dengan Qt Widgets Application.<br />Lalu bagaimana bila kita membuat desktop app dengan Qt Quick Application? Lihat section berikutnya :)<br /><br /><b>2.Qt Quicks Application</b> – 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.<br /><br />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?<br />Lihat gambar 4:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsjQwblFD5v8yK8HpzLUP5GOPqYGsRP9ZPUpNovIyy2eoqOLWJKAm8i3Fesc5fv-QKZnY2HybputaNqaSI8S6Sq6n9e7pOE6AHhqz15Y_RjC364ZV5CcGzUYeiqMS2aU1VWc5yKYAneeg7/s1600/4_qt_quicks.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsjQwblFD5v8yK8HpzLUP5GOPqYGsRP9ZPUpNovIyy2eoqOLWJKAm8i3Fesc5fv-QKZnY2HybputaNqaSI8S6Sq6n9e7pOE6AHhqz15Y_RjC364ZV5CcGzUYeiqMS2aU1VWc5yKYAneeg7/s1600/4_qt_quicks.jpg" /></a><br /><br />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.<br />Lihat gambar 5:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkarrVOqNZPU2sgsMeQKJQcq9E_zV2lRKD4MQNMMOTWWNW2THBtLoW9Cug5qJvl9-fJm3n0v97PAyV9LQdBo50UxsYh0gNvFUK1F7C0anlFU-p6icOgWh2JZcuKJJeovoyxp1I0P9RBpm/s1600/5_terbungkus_di_qml_file.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkarrVOqNZPU2sgsMeQKJQcq9E_zV2lRKD4MQNMMOTWWNW2THBtLoW9Cug5qJvl9-fJm3n0v97PAyV9LQdBo50UxsYh0gNvFUK1F7C0anlFU-p6icOgWh2JZcuKJJeovoyxp1I0P9RBpm/s1600/5_terbungkus_di_qml_file.jpg" /></a><br /><br />Nah, bila anda familiar dengan Javascript, pasti tidak sulit menguasai Qt Quick ini.<br />PADA TUTORIAL INI KITA AKAN MEMBAHAS TENTANG QT QUICK TERLEBIH DAHULU :)<br /><br /><b>3.Qt Console Application</b><br />Kalo yang satu ini adalah aplikasi console dengan menggunakan C++. Anda bisa melihat kita memperagakan pembuatan aplikasi dengan Console ini pada tutorial sebelumnya.<br /><br /><b>4.HTML5 Application</b><br />Kalo yang ini, kita bisa membuat sebuah desktop application dengan HTML5, Javascript, dan C++ , kita akan membahasnya nanti.<br /><br /><b>5.Qt Quick UI</b><br />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.<br /><br /><b>KEMBALI KE JUDUL, pada tutorial ini kita akan membahas tentang Qt Quick Application.</b><br /><br /><b>NOTE:</b><br />Pada tutorial ini saya menggunakan Qt 5.2.1 dan Qt Creator 3.0. <br /><br />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 <a href="http://qt-project.org/forums/viewthread/40896/" target="_blank">http://qt-project.org/forums/viewthread/40896/</a><br /><br />Mari kita lanjutkan tutorial kita,<br /><br />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.<br /><br />Ok, tanpa banyak basa – basi, mari kita mencoba membuat Hello World dengan Qt Quick Application, ingat, Qt Quick Application bukan Qt Widget Application.<br /><br /><b>Buka file -– Kemudian Pilih New Project --- Pilih Qt Quick Application --- berikan nama project --- klik OK</b><br /><br />Catatan:<br />Dalam proses project baru ini, anda akan mendapati sebuah window untuk memilih Qt Quick Component Set.<br />Lihat gambar 6: <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWbSnTbk0i0iQqW4aEztl20cEJzN2V5G4XuaOUrrkKdgaQq5N7KJOSJ_Gof4O4Rw-sG5yggZjqzuKM-rKSqqh2dnO0EXDe4YS-YWmafbqqme5SqsrPVw4i-p2f6qPCClKt07ZseRhxj9KH/s1600/6_Qt_Quick_Component_Set.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWbSnTbk0i0iQqW4aEztl20cEJzN2V5G4XuaOUrrkKdgaQq5N7KJOSJ_Gof4O4Rw-sG5yggZjqzuKM-rKSqqh2dnO0EXDe4YS-YWmafbqqme5SqsrPVw4i-p2f6qPCClKt07ZseRhxj9KH/s1600/6_Qt_Quick_Component_Set.jpg" /></a><br /><br />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<br /><br />Kembali ke project…<br /><br />Setelah anda membuat project, nanti anda akan mendapati tampilan default seperti pada gambar di bawah ini,<br />Lihat gambar 7:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsr6B3P4nsoIOGwwTmFUBZkBVc6HPW8tOXiG29WQ9HoI1R2_8ZVrWLD1XkzzCNEXxR23KqTGq8wAG-CXLDUsQKoTId3fDzahTbju9PxlmcPnuscDD3P8obMJGMxXBLCu9uhdjeZkhtzsnn/s1600/7_Qt_Quick_Percobaan_Bro.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsr6B3P4nsoIOGwwTmFUBZkBVc6HPW8tOXiG29WQ9HoI1R2_8ZVrWLD1XkzzCNEXxR23KqTGq8wAG-CXLDUsQKoTId3fDzahTbju9PxlmcPnuscDD3P8obMJGMxXBLCu9uhdjeZkhtzsnn/s1600/7_Qt_Quick_Percobaan_Bro.jpg" /></a><br /><br />Anda bisa lihat, saya menggunakan Qt Quick Component 1.1 :P<br /><br />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??<br /><br />Berikut adalah penjelasannya:<br /><br />Rectangle, ini adalah sebuah ‘Rectangle’ , yup, kotak, ini adalah Window kita. Coba hapus semua kode default dan anda ganti dengan kode berikut ini,<br />Lihat gambar 8:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bgvR7r_HBK98zFjA0C5ASs1rE1hIqoWHu8KlGGFIaGDsFhFK4fYuMPx5-4WsPGNlIFMcMv1m7ntFRLrS8f2ss6u3O_DBers0Vkc7pWPJeRGL6R8Q5bZW6pS-l1Q88tql42tw9tX2FjAz/s1600/8_Qt_Yello.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5bgvR7r_HBK98zFjA0C5ASs1rE1hIqoWHu8KlGGFIaGDsFhFK4fYuMPx5-4WsPGNlIFMcMv1m7ntFRLrS8f2ss6u3O_DBers0Vkc7pWPJeRGL6R8Q5bZW6pS-l1Q88tql42tw9tX2FjAz/s1600/8_Qt_Yello.jpg" /></a><br /><br />Silahkan run, dan lihat apa yang terjadi? Ya, anda akan memiliki sebuah window dengan latar belakang kuning, benar bukan??<br /><br />Nah, mari kita tambahkan sebuah kotak lagi seperti pada gambar di bawah ini,<br />Lihat gambar 9:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjORXnI5l6K-7Vmf4MbwpGP_ElzBcfxlCgpvYV7GlakGQQPh0sAQXt8NKUpjw1C-jZXlcqab0k9y0VYSMYYCRv6Z3ogKsvpA7mn9CtySTQ5287uo5LrQC_5umQeL5gGEp0yCogqRIl0phRC/s1600/9_Kotak_merah.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjORXnI5l6K-7Vmf4MbwpGP_ElzBcfxlCgpvYV7GlakGQQPh0sAQXt8NKUpjw1C-jZXlcqab0k9y0VYSMYYCRv6Z3ogKsvpA7mn9CtySTQ5287uo5LrQC_5umQeL5gGEp0yCogqRIl0phRC/s1600/9_Kotak_merah.jpg" /></a><br /><br />Sekarang run, dan lihat seperti apa window kita??? Ya, kita sekarang punya window kuning dan merah,,, wow, mudah sekali ya membuat desktop application :)<br /><br />x dan y di atas adalah jarak x dan y kotak merah terhadap batas window.<br /><br />Silahkan lihat hasilnya pada screenshot berikut, hasil dari run project anda harusnya sama dengan gambar ini,<br />Lihat gambar 10:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2SVE5ySx-KWlMumWzSehdWl_XcJHhlIxA8TnM1pcC-S-XQLVR-YBYBjs2SDFNRmBtt8S2fn7bxYj7ZNAY6dw6onTJQMAQAalEm0wzFOK-hbp7KOqL71Xifu3oj0cgejpIjK4QSEw91d2T/s1600/10_Kotak_Jadi.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2SVE5ySx-KWlMumWzSehdWl_XcJHhlIxA8TnM1pcC-S-XQLVR-YBYBjs2SDFNRmBtt8S2fn7bxYj7ZNAY6dw6onTJQMAQAalEm0wzFOK-hbp7KOqL71Xifu3oj0cgejpIjK4QSEw91d2T/s1600/10_Kotak_Jadi.jpg" /></a><br /><br />Nah, setelah itu, yuk mari kita tambahkan tulisan “Hello World” di kotak merah,,,<br />Lihat gambar 11:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX76kKdZkbq5Ej_FEgtn7GZgsUuPcmvMDtWtJHbuV1awGus46viHCzQx-DldZw4WzY3UO_HxLz5PE9csjH0hyphenhyphenjpZOVVO_t-DQpT3EBd5NHWH6utqOYOXSScXUmIiX1bjuDXxz-P8ZgDfsZ/s1600/11_Tambahkan_Text.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX76kKdZkbq5Ej_FEgtn7GZgsUuPcmvMDtWtJHbuV1awGus46viHCzQx-DldZw4WzY3UO_HxLz5PE9csjH0hyphenhyphenjpZOVVO_t-DQpT3EBd5NHWH6utqOYOXSScXUmIiX1bjuDXxz-P8ZgDfsZ/s1600/11_Tambahkan_Text.jpg" /></a><br /><br />Run dan lihat hasilnya,, wow, mudah bukan????<br /><br />Sekarang, yuk kita otak atik kodenya seperti gambar berikut ini,<br />Lihat gambar 12:<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhwcZEgRTPUTiHfDfxrDBK-kKUNhfG2TizWLJbnmQA_mLm89LFSfjncaUjPAL_XUCfkuRAtgURgR-R8z5eOhK3jcb_IywwcPxVTDCEcynskFK6WMQI8w3mExIAMrHNx8iPGHuD7iax7WHY/s1600/12_Otak_Atik_Code.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhwcZEgRTPUTiHfDfxrDBK-kKUNhfG2TizWLJbnmQA_mLm89LFSfjncaUjPAL_XUCfkuRAtgURgR-R8z5eOhK3jcb_IywwcPxVTDCEcynskFK6WMQI8w3mExIAMrHNx8iPGHuD7iax7WHY/s1600/12_Otak_Atik_Code.jpg" /></a><br /><br />Anda bisa lihat, kita mulai otak – atik kodenya,<br /><br />Untuk Rectangle, kita tambahkan id “kotakMerah”, sedangkan Text di dalamnya kita berikan id “kotakMerahText”.<br /><br />Untuk Text, kita rata tengah-kan baik secara vertical maupun horizontal dengan properties “centerIn” terhadap kotak merah.<br /><br />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?<br /><br />Silahkan run, dan hasilnya nanti akan seperti berikut ini,<br />Lihat gambar 13:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iIda_CJ91SEK_v46RG93gD17vAf1RhuegmRh35FDeo1Lo69fuxOowY78MCIS17dyZwJc0HE4_-wgcI7Pe9UjIFA_tLBkd8AMvBW785RvPeHSBZzX7UBQnw-_DnEnOgUwPvxATXBDAQaJ/s1600/QtQuickAnimation.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iIda_CJ91SEK_v46RG93gD17vAf1RhuegmRh35FDeo1Lo69fuxOowY78MCIS17dyZwJc0HE4_-wgcI7Pe9UjIFA_tLBkd8AMvBW785RvPeHSBZzX7UBQnw-_DnEnOgUwPvxATXBDAQaJ/s1600/QtQuickAnimation.gif" /></a><br /><br />Nah ternyata mudah bukan membuat .exe desktop application dengan menggunakan Qt Quick Application :)<br /><br />Ini hanya pengenalan saja lho, kedepan, kita akan mencoba membuat Qt Quick application yang lain.<br /><br />Demikian tutorial, mudah mudahan bermanfaat.<br /><br />Salam.<br /><br /></div></p>

Saat kita pertama baru mengenal Qt bahkan kebetulan kita juga seorang pemula dalam Qt, pasti akan bingung saat memulai Qt Creator. Bingung i...

C++ QT No.2: Membuat hello world console application (+Variannya)

<p><style>#vid_8298309178206006659{display:none;}#txt_8298309178206006659{display:block;}</style><br />Software yang kita gunakan pada tutorial ini: QT 5.2.1, QT Creator 3.0.1<br /><br />Sudahkah anda membaca tentang QT (dibaca cute)? QT adalah the amazing cross platform application framework yang support diantaranya:<br /><i>Desktop: Windows, Mac OS X, Linux/X11, Solaris<br />Embedded: Embedded Linux (DirectFB, EGLFS, KMS, and Wayland), Windows Embedded (Compact and Standard), Embedded Android, Green Hills Software INTEGRITY, QNX, Wind River VxWorks<br />Mobile: Android, iOS, BlackBerry, Sailfish, WinRT*, Tizen* <br />*Work in progress, technology previews</i><br /><br />Kita cukup mengetikan satu jenis kode, satu jenis framework QT, dan kita bisa me-run nya di beragam platform seperti di atas. Keren kan?<br /><br />Nah, pada tutorial ke – dua ini kita akan mencoba membuat sebuah console application (Hello World). Kita pun juga akan membuat varian – varian dari Hello World kita ini, mulai dari kode sederhana hingga kode kompleks.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh05XDmUmaB-sCQMDBKcridMskEEB3ohklEEXQRA2FD4CkLVt9RdGCkzTxvdnk5OWvaa9INnlWIcd-FaDXkHZoKhAMtWKahXE6F65tWU5i2JMdzoqOESIIEdA7xAGq6sXBWF5LRYlJJRhNS/s1600/Screenshot-HelloWorld-Qt.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh05XDmUmaB-sCQMDBKcridMskEEB3ohklEEXQRA2FD4CkLVt9RdGCkzTxvdnk5OWvaa9INnlWIcd-FaDXkHZoKhAMtWKahXE6F65tWU5i2JMdzoqOESIIEdA7xAGq6sXBWF5LRYlJJRhNS/s1600/Screenshot-HelloWorld-Qt.jpg" /></a><br /><br /><a name="more"></a> <div style="clear:both;">QT merupakan C++, sehingga bila kita ingin membuat console application di QT jangan khawatir, karena codenya sama baik dari class QT maupun standar C++. Bila anda sudah familiar dengan C++, pasti tidak sulit memahami QT.<br /><br />Mari kita buka QT kita, buat project, dan mencoba memilih ‘console application’. Saat anda selesai membuat Project, maka otomatis QT Creator akan membuatkan sebuah template code untuk anda seperti di bawah ini:<br /><br />Lihat gambar 1:<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUpGkDHCFiC2JSxmHSWP7E-GqiqSFlpEwvzMH-UwQj4lN_6h6cvto6NzKe0LHFrqmzce9zS8IBsbYJEXVevXa_orn1LA_F2GmzfjJ5O_-LFNiwNE_L5trMw6COiWqKmY9bt9uqjAtuI8t/s1600/1_Default_Console_Template.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUpGkDHCFiC2JSxmHSWP7E-GqiqSFlpEwvzMH-UwQj4lN_6h6cvto6NzKe0LHFrqmzce9zS8IBsbYJEXVevXa_orn1LA_F2GmzfjJ5O_-LFNiwNE_L5trMw6COiWqKmY9bt9uqjAtuI8t/s1600/1_Default_Console_Template.jpg" /></a><br /><br /><br />Nah, perhatikan screenshot code, kita akan mengenal directives dengan nama <qcoreapplication>. Eh, bentar dulu, masihkah anda ingat apa itu directives??? :P <br />Bila lupa, silahkan baca – baca tutorial C++ standar di MediaTutorial, lihat kategory samping kanan dan buka saja kategory “C Plus Plus”.<br /><br />Ada pertanyaan yang sering diajukan ke MediaTutorial, kenapa kategory nya adalah “C Plus Plus”? Kenapa tidak menggunakan “C++” saja?<br /><br />Karena ‘blogspot’ tidak mendukung “+” pada LABEL nya, bug ini sudah lama dilaporkan ke Google tapi hingga tutorial ini dibuat (Selasa, 25 Feb 2014), tetap saja tidak ada perhatian :P<br /><br />Nah, kembali ke <qcoreapplication>, ini adalah salah satu Class dari QT yang digunakan dalam membuat console application. Ingin tahu lebih tentang class ini??? Anda bisa membuka QT help anda (setelah install QT pasti akan otomatis install help nya juga), dan anda pun bisa membaca setiap method yang ada di dalamnya.<br /><br />Lihat gambar 2:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheJJHpH8Rrj8-yQ6VdCZoKKa5nsR8WD4KnopPA_Ac1Ka0rp69dP5_yHhChjuYlk8h_99BlsuF376fHjhX5sgTs6Vt5o3f-i9VNY688eldIKIbWedREcDReEMS0n7914qP2dW6PdmNXvTdL/s1600/2_qcoreapplication.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheJJHpH8Rrj8-yQ6VdCZoKKa5nsR8WD4KnopPA_Ac1Ka0rp69dP5_yHhChjuYlk8h_99BlsuF376fHjhX5sgTs6Vt5o3f-i9VNY688eldIKIbWedREcDReEMS0n7914qP2dW6PdmNXvTdL/s1600/2_qcoreapplication.jpg" /></a><br /><br />Nah, kembali ke kode template tadi, di sana kita membuat sebuah object a yang merupakan class dari QcoreApplication, kemudian kita memanggil method exec(). Sekali lihat kode nya pasti sudah bisa memahami kan??? Ini adalah OOP dari C++, hayo, yang belum tahu OOP silahkan baca – baca tutorial C++ standar di kategory “C Plus Plus” dari MediaTutorial.<br /><br />Sebetulnya apa sih method exec() ini??<br /><br />Sekali lagi kita akan membuka help pada QT Creator, <br /><br />Lihat gambar 3:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5VPz5U8mDjSwQNnTbRtWgvATTqmZ2_lwgrViiOrYC6Jf66lReZwaZVCnTIwe0zR4U_Ju2Okgh7CmFByOQcDkQmcvkYSRxsZ3DievC3QWw15SOZIrfFA5OR9ORZxsEDtzOKYoexZANXzNh/s1600/3_exec_method.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5VPz5U8mDjSwQNnTbRtWgvATTqmZ2_lwgrViiOrYC6Jf66lReZwaZVCnTIwe0zR4U_Ju2Okgh7CmFByOQcDkQmcvkYSRxsZ3DievC3QWw15SOZIrfFA5OR9ORZxsEDtzOKYoexZANXzNh/s1600/3_exec_method.jpg" /></a><br /><br />Intinya, method exec() digunakan untuk event looping. Tahukah anda apa itu event??? Setiap komputer (saya menggunakan Windows 8.1 64) pasti selalu ada yang namanya event looping, proses ini digunakan untuk mendeteksi adanya event dari komputer, seperti click, scroll, dan lain lain. Bila proses menemukan adanya event , maka akan menjalankan method tersebut.<br /><br />Kita akan membuat contoh penggunaan event looping ini pada tutorial berikutnya.<br /><br />Nah, sekarang, saatnya kita akan membuat sebuah aplikasi Hello World. Kalo kita lihat, aplikasi kita ini sangatlah sedernya, tidak perlu memakai event, perlukah kita membuat object dari QcoreApplication dan memanggil method exec() nya? Yup, bisa anda gunakan, bisa tidak, karena ini baru Hello World saja. Tapi bila anda membuat aplikasi yang kompleks, anda harus selalu menggunakannya.<br /><br />Mari kita mulai mengetikan HelloWorld nya, kita memiliki banyak sekali varian Hello World Console Application, saya yakin banyak pada pemula yang sedang mencari – cari contoh console ini:<br /><br /><b>VARIAN 1:</b><br />Membuat hello world dan C++ standar coding:<br /><script src="http://pastebin.com/embed_js.php?i=z2n7xsmU"></script><br /><br />Lihat kode di atas, pada varian 1 ini kita hanya mengetikan Hello World standar C++, bahkan hampir kita tidak menggunakan class dari QT. Kita pun meng-comment out a.exec(), karena kita belum perlu menggunakan event, jadi tinggal di comment-out. Standard C++ yang kita gunakan adalah iostream dan namespace std. Silahkan run, dan lihat, jalan dengan sempurna kan???<br />Itulah varian Hello World pertama kita :) silahkan dicoba.<br /><br /><b>VARIAN 2:</b><br />Membuat Hello World dengan class QTextStream:<br /><script src="http://pastebin.com/embed_js.php?i=s7jzZfnJ"></script><br /><br />Nah, pada varian 2 ini kita mulai akan menggunakan QTextScream, apa itu class QTextStream? <br /><br />Silahkan anda buka QT Help anda, QTextStream merupakan sebuah class yang digunakan untuk writing and reading text.<br />Pada kode di atas, kita membuat sebuah object out dari class QTextStream ini, kemudian kita memanggil constructornya dan memberikan argument stdout. Ingatkah dengan stdout, stdin, stderr?? Wah kalo lupa ayo ingat – ingat lagi C++ nya,,,,<br /><br />Nah, setelah itu baru kita masukan hello world kita,, silahkan di coba,,,<br /><br /><b>VARIAN 3:</b><br />Membuat Hello World dengan standard Class C++:<br /><script src="http://pastebin.com/embed_js.php?i=n3AFkRwu"></script><br /><br />Masih ingatkah tentang cara membuat Class pada C++? Bila lupa ayo buka buka lagi tutorial C++ di kategory samping kanan ini... :P<br /><br />Pada varian 3 ini kita mencoba membuat class, yang didalamnya terdapa constructor, destructor, dan satu buah method sayHello() , coba lihat kodenya, sangat mudah dipahami bukan???<br /><br /><b>VARIAN 4:</b><br />Membuat Hello World dengan class QTextStream dan Class C++:<br /><script src="http://pastebin.com/embed_js.php?i=frvxGwi1"></script><br /><br />Nah, ini modelnya mirip dengan varian 3, tapi dikembangkan dengan memakai class dari QT yaitu <qtextstream><br />Coba lihat kodenya, mudah dibaca kan??<br /><br /><b>VARIAN 5:</b><br />Membuat Hello World dengan standar Class C++:<br /><script src="http://pastebin.com/embed_js.php?i=qdGvGgut"></script><br /><br />Nah, coba perhatikan kode ini dengan Varian 3, mirip bukan, tapi pasti ada yang beda, ayo coba cari,,, :P<br />Bila anda tidak bisa memahami kode di atas, anda harus melihat dulu tutorial C++ , , , <br />Sama dengan varian 3, cuman pada varian 5 ini kita memberikan argument ke dalam method. Ayo cari,,,, :)<br /><br /><b>VARIAN 6:</b><br />Membuat Hello World dengan QT Class <qdebug><br /><script src="http://pastebin.com/embed_js.php?i=yAC5qJDQ"></script><br /><br />Apa itu QDebug? <br />Ini QDebug lho ya, bukan qDebug, karena berbeda :)<br /><br />QDebug merupakan class yang menyediakan output stream untuk debugging information.<br />QDebug ini digunakan ketika kita ingin menampilkan informasi debugging atau tracing ke tampilan console, file, atau device lain.<br /><br />Kalo qDebug ini merupakan global declaration dari <qtglobal>, temennya qDebug diantaranya adalah qCritical, qWarning, qFatal dan lain – lain .<br />Dalam prosesnya QDebug yang merupakan object selalu memanggil qDebug untuk mendapatkan informasi debugging dan tracing information.<br /><br />Kita akan membahas QDebug nanti pada tutorial yang lain.<br /><br />Kalo kita pakai Qdebug, kita tidak perlu menggunakan ‘<<endl’ atan ‘\n’ , karena Qdebug akan menambahkan sendiri untuk kita.<br /><br /><b>VARIAN 7:</b><br />Membuat Hello World App dengan Class dan Header file.<br />process.h<br />process.cpp<br />main.cpp<br /><br /><b>process.h</b><br /><script src="http://pastebin.com/embed_js.php?i=ds6yQqQK"></script><br /><br /><b>process.cpp</b><br /><script src="http://pastebin.com/embed_js.php?i=VTqBFW9L"></script><br /><br /><b>main.cpp</b><br /><script src="http://pastebin.com/embed_js.php?i=D7QTsB3a"></script><br /><br />Nah, kode – kode di atas adalah juga standard C++, hayo siapa yang belum bisa menulis class dan header??? Silahkan baca – baca tutorial C++ di MediaTutorial terlebih dahulu...<br /><br />Kita membuat sebuah process.h yang berisikan declaration dari class dan method, kemudian kita membuat sebuah process.cpp yang merupakan definition dari class dan object di process.h.<br />Baru kemudian kita membuat main.cpp yang berisikan main() method kita.<br /><br />Pasti sudah pada lupa dengan ‘declaration’ dan ‘definition’. Silahkan dibuka – buka kembali tutorial C++ nya,,, :)<br /><br />Nah, ternyata banyak banget kan model penulisannya, satu hal yang terpenting adalah anda harus bisa C++, tidak perlu jago, cukup sekedar bisa saja, pasti lebih mudah nantinya bila akan terjun ke QT.<br /><br />Demikian tutorial untuk complete beginner, bila anda punya varian Hello World yang lain silahkan posting komentar.<br /><br />Salam,<br /><br /><br /></div></p>

Software yang kita gunakan pada tutorial ini: QT 5.2.1, QT Creator 3.0.1 Sudahkah anda membaca tentang QT (dibaca cute)? QT adalah the amazi...

C++ QT No.1: Mengenal QT Framework untuk Developer C++

<p><style>#vid_5111529902072747624{display:none;} #txt_5111529902072747624{display:block;}</style><br />Mengenal QT Framework (The Amazing Cross-Platform Framework).<br /><br /><b>[[---BEGIN UPDATE---]]</b><br /><br /><b>Update for QT 5.2</b><br />Note: Pada hari ini (Jum’at 21 Feb 2014), tutorial ini diupdate untuk informasi tentang QT 5.2.<br />Saat tutorial ini diupdate (diupdate lho ya bukan ditulis), saya menggunakan QT 5.2, QT Creator 3, dan Visual Studio 2013. Untuk pengguna yang lain sebetulnya sama saja.<br /><br />Amazing, pada versi 5.2 ini QT is everywhere, untuk anda programmer anda bisa menggunakan QT untuk semua platform hanya dengan satu kode yang sama, hebat bukan??<br />Platform yang disupport diantaranya,<br />•Desktop: Windows, Mac OS X, Linux/X11, Solaris<br />•Embedded: Embedded Linux (DirectFB, EGLFS, KMS, and Wayland), Windows Embedded (Compact and Standard), Embedded Android, Green Hills Software INTEGRITY, QNX, Wind River VxWorks<br />•Mobile: Android, iOS, BlackBerry, Sailfish, WinRT*, Tizen* <br />*Work in progress, technology previews<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWSl104Wz4ZhJ7jIuKnggL2GvRLsCHMQEvTwCylK2V-qw5URAAQQVsOZdjnYe7ofWtLNw6h8nEHxgUK5DExBQbo79D4ilddU2iAFb3oY_jOKPayRQYQ-qvjmaCLb1P2i3NqhYjN4eDv0Gl/s1600/ScreenshotQt521.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWSl104Wz4ZhJ7jIuKnggL2GvRLsCHMQEvTwCylK2V-qw5URAAQQVsOZdjnYe7ofWtLNw6h8nEHxgUK5DExBQbo79D4ilddU2iAFb3oY_jOKPayRQYQ-qvjmaCLb1P2i3NqhYjN4eDv0Gl/s1600/ScreenshotQt521.jpg" /></a><br /><br /><a name="more"></a> <br /><br />Pada QT 5.2 terdapat banyak sekali perubahan, penambahan fasilitas, bug fixing dari 5.0 dan 5.1. Ada beberapa module yang ditambahkan diantaranya sebagai berikut:<br />NEW FEATURES:<br />Qt Android Extras<br />Qt Bluetooth<br />Qt Mac Extras<br />Qt NFC<br />Qt Positioning<br />Qt Windows Extras<br /><br /><b>SUPPORT NEW PLATFORM:</b><br /><b>Android</b><br />Full support for camera and recording<br />Low-latency audio (QAudioInput, QAudioOutput)<br />Command-line deployment tool<br />JNI convenience API<br />OpenSSL support<br />Informasi lebih lanjut: <a href="http://qt-project.org/doc/qt-5/android-support.html" target="_blank">http://qt-project.org/doc/qt-5/android-support.html</a><br /><br /><b>iOS</b><br />Media player support<br />Basic camera support (only viewfinder and image capture)<br />Low-latency audio (QAudioInput, QAudioOutput)<br />Informasi lebih lanjut: <a href="http://qt-project.org/doc/qt-5/ios-support.html" target="_blank">http://qt-project.org/doc/qt-5/ios-support.html<br /></a><br /><b>Qt Creator Updates</b><br />Qt Creator 3.0 is released along with Qt 5.2. In Qt Creator 3.0, the following were added:<br />Initial iOS support<br />API cleanup<br />Enhanced Android support<br />Initial debugging backend for the LLDB Debugger (Mac OS X)<br /><br />Nah, untuk lebih jelasnya tentang semua ini, silahkan baca – baca di h<a href="ttp://qt-project.org/doc/qt-5/qt5-intro.html" target="_blank">ttp://qt-project.org/doc/qt-5/qt5-intro.html</a><br /><br /><b>[[---END UPDATE---]]</b><br /><br />QT Framework,QT (dibaca: cute) merupakan framework application cross platform cocok untuk para C++ programer. Apa sih QT itu?? Kenapa harus menggunakan QT?? Apa itu framework?? Apa kegunaannya untuk programer/developer software??<br /><br />QT (bacanya: cute) adalah cross platform development program, yang artinya dapat membuat program untuk berbagai platform. QT tersedia untuk versi Windows, Linux dan Machintos.<br /><br />QT ini merupakan salah satu framework yang dapat mempermudah kita dalam membuat suatu aplikasi dengan pemrograman C++. Pada tutorial-tutorial sebelumnya (kategori C++ native, bukan C++/CLI) kita telah menggunakan framework lain, yaitu wxWidgets. Bila anda menggunakan IDE untuk C++ native, seperti CodeBlocks, anda pun akan menemui pilihan framework yang begitu banyak saat akan membuat ‘new project’ disamping wxWidgets dan QT yang telah kita bahas.<br /><br /><div style="clear:both;">Dengan menggunakan QT kita dapat membuat aplikasi untuk linux, windows, machintos, symbian, maemo/meego, windowsCE, embeded linux dengan sangat mudah.<br /><br />Untuk framework sendiri merupakan sebuah frame yang akan membantu kita dalam menyelesaikan program aplikasi yang ingin kita buat. Anda pasti sudah kenal dengan PHP Framework Codeigniter kan? Nah, dengan Codeigniter, maka semua plugin, module, dan trik-trik penulisan cepat sudah ada dalam satu paket. Sehingga akan sangat membantu untuk developer. Bayangkan kalo kita tidak menggunakan framework sehingga harus mengetik sendiri kode-kode tersebut per-huruf, kapankah software kita akan siap jadi??<br /><br />Mari kita kembali ke QT. Anda dapat membuka QT di <a href="http://qt-project.org" target="_blank">http://qt-project.org</a>. Anda dapat membaca dan melihat demo serta siapa saja yang menggunakan QT.<br /><br />QT adalah cross-platform aplication dan UI Framework untuk developer yang menggunakan bahasa C++ atau QML. QML itu adalah bahasa C++ dari QT yang mirip seperti css dan javascript, anda bisa lihat di <a href="http://qt.digia.com/Product/qt-quick/" target="_blank">http://qt.digia.com/Product/qt-quick/</a>.<br /><br />Nah, kalo QT adalah Framework, lalu apa IDE nya?? Untuk IDE dari QT telah disediakan QT Creator, tetapi anda dapat menggunakan IDE lain seperti CodeBlocks dan VisualStudio. QT Creator merupakan bagian dari Nokia QT SDK (sejak tahun 2008 QT diakuisisi oleh Nokia, <a href="http://qt.nokia.com" target="_blank">http://qt.nokia.com</a> ). Untuk QT Creator kita akan membahas lebih lanjut nanti. QT adalah Framework dibawah lisensi LGPL opensource yang dapat kita gunakan untuk membuat sebuah aplikasi yang gratis maupun aplikasi komersial.<br /><br />Bila anda membuka website QT, anda akan menemukan 3 hal utama yaitu QT, QT Quick dan QT Creator. Untuk QT dan QT Creator sudah jelas, lalu apa itu ‘QT Quick’?<br /><br />Saya akan mengambil keterangan tentang QT Quick dari gudanglinux.wordpress.com seperti berikut ini:<br />“Qt Quick singkatan dari Qt User Interface Creation Kit adalah teknologi antarmuka tingkat atas (high-level user interface technology) yang diklaim secara dramatis memudahkan para pengembang untuk mendisain antarmuka (UI) yang cantik, ‘pixel perfect’ dan ringan disamping ‘touch-enabled’ menggunakan basis pemrograman Qt, tanpa perlu pengetahuan tentang pemrograman C++. Qt Quick diperkenalkan bersama rilis Qt 4.7 bulan Maret lalu dan selanjutnya menjadi bagian dari rilis Qt berikutnya.”<br /><br />Sangat menarik bukan? Lalu apa kelebihannya?? Saya akan mengkutip kembali dari gudanglinux.wordpress.com berikut kelebihannya:<br /><br />•Deklaratif yang mudah digunakan dengan bahasa mirip dengan skrip QML (Qt Meta-Object Language);<br /><br />•Tools didalam Qt Creator IDE termasuk sebuah visual editor yang membantu para pengembang dan disainer menggabungkan elemen-elemen sederhana menjadi sebuah antarmuka animasi;<br /><br />•Kelebihan lainnya adalah pendekatan pemrograman deklaratif yang membantu pembuatan antarmuka-antarmuka menjadi gampang, hanya dengan memerintahkan apa yang harus dibuat dan tidak harus menuliskan bagaimana cara membuatnya.<br /><br />Ah, saya ingat tentang ‘<a href="https://www.facebook.com/groups/395723973845154/" target="_blank">The Maestro Team</a>’ salah satu pengurusnya adalah agan <a href="https://www.facebook.com/herysutrisno101" target="_blank">Hery Sutrisno</a>, group ini merupakan group dibawah naungan Komunitas Indonesia yang rencananya akan mengembangkan pembelajaran C++ dan QT. Maybe bila anda seorang programer dan developer yang tertarik dapat bergabung dengan ‘The Maestro’ group. Kenapa mereka memilih QT dan C++? Saya akan mengkutip quote dari ‘The Maestro’ doc <a href="https://www.facebook.com/groups/395723973845154/396461510438067/" target="_blank">di sini</a>:<br /><blockquote><b>Q: Kenapa saya mengutamakan Qt nokia sebagai framework?</b><br /><i>Qt nokia diciptakan dengan menggunakan bahasa pemogramman C++ dengan lisensi OpenSource sebagai defacto Graphical User Interface Library untuk C++. Dilinux seperti yang anda ketahui terdiri dari KDE dan GNOME. KDE diciptakan dengan menggunakan teknologi C++ dan Qt, sedangkan GNOME diciptakan dengan mengimplementasikan C++ dan GTK. Disini kita bisa melihat ada 2 framework besar yang digunakan secara standard dalam pembuatan OpenSource aplikasi diLinux yang aktiv pembangunanya. Apa yang Maestro ingin tekankan disini adalah Maestro tidak mempermasalahkan framework apa yang akan digunakan kedepanya tetapi Maestro menekankan pemahaman dasar framework tersebut dan Maestro memilih Qt sebagai dasar untuk penguasaan. Karena pada akhirnya ianya akan berlandaskan kepada programming language itu sendiri dan jenis dari software yang akan dibangun.</i><br /></blockquote><br />Kembali ke QT, versi QT saat penulis merelease tutorial ini adalah versi QT 5.0, pengen tau kelebihan dari versi terbaru yang release Desember 2012 kemarin ini?? Berikut merupakan ulasannya yang saya ambil dari <a href="http://qt-project.org/doc/qt-5.0/qtdoc" target="_blank">QTDOCS</a> tepatnya pada link <a href="http://qt-project.org/doc/qt-5.0/qtdoc/qt5-intro.html" target="_blank">'What’s new in QT 5'</a>.<br /><br />QT 5.0 merupakan versi yang direlease akhir 2012, ini adalah versi terbaik dan perbaikan dari versi-versi sebelumnya. Versi ini lebih cepat dari versi sebelumnya sekaligus mendukung paradigm User Interface yang sedang ngetrend saat ini yaitu Touch Screen dan Tablets.<br /><br />QT 5.0 akan sangat memanjakan penggunanya karena sangat mudah dan flexible dengan dukungan Javascript dan QML yang masih berpedoman pada C++. Untuk Javascript Backend sendiri didukung oleh V8 dan QT Webkit 2 yang akan sangat membantu sekali terutama untuk Web Developer HTML5.<br /><br />Ada satu kelebihan lain dibandingkan dengan versi sebelumnya, portabilitas cross platform dalam QT 5 jauh lebih simple.<br /><br />Tutorial pengenalan QT ini akan sangat panjang sekali bila diulas secara lengkap, nah, sebagai gantinya, anda dapat melihat 'what’s new in qt 5' yang akan membahas tentang:<br />-Amazing Graphics Capability and Performance <br />-Qt Quick in Qt 5<br />-WebKit and HTML5<br />-Multimedia<br />-Modularized Qt Libraries<br />-Widgets in Qt 5<br />-Qt Platform Abstraction<br />-New Connection Syntax<br />-Connectivity and Networking<br />-JSON Support<br />-User Input<br /><br /><b>Benar-benar menakjubkan bukan?? </b><br /><br />Nah, pada tutorial berikutnya kita akan membahas installasi QT, pada IDE (di sini saya menggunakan CodeBlocks , VisualStudio dan QT Creator)<br /><br /></div></p>

Mengenal QT Framework (The Amazing Cross-Platform Framework). [[---BEGIN UPDATE---]] Update for QT 5.2 Note: Pada hari ini (Jum’at 21 Feb 20...