Arsip Tag: qt creator

Qt Creator – Mengasosiasikan Shortcut Key dengan Menu


Bismillahirrahmanirrahim.

qt-creator-logoSalah satu hal paling sering saya lakukan dengan Qt Creator adalah membuka gitk. Saya perlu belajar VCS (dalam hal ini, Git) dan karena itu gitk sangat penting. Dengannya, saya bisa melihat secara visual garis pengembangan program yang saya buat. Namun cukup repot untuk membuka gitk terus menerus, karena saya harus membuka menu Tools > Launch gitk setiap kali perlu. Tentu lebih mudah kalau saya asosiasikan saja menu tersebut dengan shortcut key. Berikut ini langkah-langkahnya dimulai dari menu Tools > Options. Semoga tulisan ini bermanfaat.

Pengaturan

Menu_034 Options_032

Langkah-Langkah

Perhatikan gambar di atas, terutama nomor-nomor urutnya yang berwarna merah.

1. Buka entri pertama yaitu Environment.
2. Buka tab Keyboard.
3. Cari nama menu yang ingin diasosiasikan, dalam contoh ini gitk.
4. Tekan shortcut key yang diinginkan, dalam contoh ini Alt+G Alt+I.
5. Pastikan kolom Shortcut di atas berisi shortcut yang sudah diasosiasikan. Tekan OK.

Tentang Tulisan Ini

Tulisan ini adalah bagian dari seri tulisan Qt Creator sebagai IDE. Tulisan ini tidak ditutup kemungkinannya untuk direvisi. Semoga tulisan ini bermanfaat.

Pemrograman Qt 15 – QToolButton, QFont, dan setStyleSheet()


Bismillahirrahmanirrahim.

Tulisan ini tersedia dalam PDF.

qt-creator-logoQToolButton (saudara kembar QPushButton) adalah widget Qt yang mampu menayangkan ikon sekaligus teks di dalam tombol. Sebagai berita gembira, Qt juga mampu mengatur fonta tombol dengan QFont. Sebagai pelengkap, Qt juga memiliki dukungan penuh untuk style sheet agar Anda bisa mengubah total wajah suatu widget agar sesuai kebutuhan Anda. Misalnya, dengan itu Anda mengubah warna background suatu QLabel sekaligus mengubah fonta teksnya (cukup style sheet tanpa QFont). Semua itu akan dibahas dalam tutorial ini dalam wujud prototipe aplikasi yang mudah diingat wujudnya. Semoga tulisan ini bermanfaat. Baca lebih lanjut

Kumpulan Tutorial C++ & Source Code Qt Framework Edisi 1 – 11


Bismillahirrahmanirrahim.

qt-creator-logoBerikut ini tutorial C++ beserta contoh kode sumbernya. Semua kode di sini adalah hasil dari pemrograman Qt saya. Semua kode saya ditulis di Linux dan program saya semuanya memakai Qt Framework untuk menghasilkan GUI. Anda bisa gunakan karya saya ini untuk membuat aplikasi yang lebih bermanfaat. Lisensi semua karya saya ini bebas untuk dipakai apa saja selama tidak untuk maksiat kepada Allah. Semoga bermanfaat. Baca lebih lanjut

Qt Creator dan Git


Bismillahirrahmanirrahim.

qt-creator-logoSemua orang kini menggunakan Git dan Github. Apa itu? Git adalah program manajemen versi untuk kode sumber. Siapa saja yang hidupnya dekat dengan pemrograman akan mengenal sesuatu yang namanya SCM (Source Code Management) dan VCS (Version Control System). Git memiliki dua sifat ini, yakni sebagai SCM dan VCS sekaligus. Git sangatlah populer saat ini di kalangan orang yang dekat dengan pemrograman. Ia adalah pesaing baru untuk VCS-VCS sebelumnya semisal SVN, CVS, Mercurial, Bazaar, dan lain-lain. Ia menggeser semua CVS era lama dengan fitur-fiturnya. Saya menulis ini karena sangat tertarik dan bersemangat dengan Git. Saya baca buku-buku tentang Git dan mendaftar di Github. Memang masih bingung tetapi sangat menyenangkan! Dalam tulisan ini, saya ingin mencatat apa yang saya temukan dalam Qt Creator yang sudah dihidupkan fitur git-nya.

Apa itu Git dan Github?

Git adalah SCM dan VCS yang sifatnya terdistribusi dan fitur utamanya adalah kecepatan. Kalau kita bingung dengan istilah-istilah ini, bayangkanlah semua aplikasi yang pernah kita gunakan. Bagaimana bisa developer aplikasi merilis versi 1.2.3 setelah 1.2.2? Bagaimana mereka bisa membuat patch? Bagaimana mereka membuka development aplikasi mereka kepada semua orang dan tidak kacau hasil aplikasinya (seperti misalnya proyek KDE)? Jawabannya adalah dengan menggunakan Version Control System (VCS). VCS inilah yang bertanggung jawab mengurus versi aplikasi yang dibuat dan menyimpan setiap versi pada tempatnya. Dengan VCS ini, kita bisa melacak perubahan apa yang terjadi pada kode sumber, membuat patch (dengan diff), membandingkan versi baru dengan sebelumnya, menyatukan perubahan yang dibuat oleh banyak orang, dan lain-lain. Pokoknya Source Code Management. Git itu VCS, sedangkan Github itu Git di server cloud sana yang siap menampung kode kita.

Cara Kerja Git

Bekerja dengan Git itu hanyalah akan berputar pada hal-hal ini:

  1. commit,
  2. push,
  3. pull,
  4. diff,
  5. patch,
  6. stash,
  7. branch, dan
  8. merge.

Saya tidak jelaskan satu per satu artinya karena saya belum paham. Saya cuma punya penjelasan yang sangat sederhana berdasar percobaan saya sendiri. Lebih enak model cerita begini saja, ya?

  1. Saya instal git di Ubuntu saya terlebih dahulu.
  2. Saya buat sebuah proyek GUI baru di Qt Creator dengan memilih Git sebagai VCS untuk proyek ini. qt-git3
  3. Saya dapat lima berkas dasar yang dibuat otomatis oleh Qt Creator, seperti biasa. Saya biarkan isinya default tanpa diubah.
  4. Saya melakukan commit pertama untuk merekam versi awal dari proyek saya. Tekan Alt+G (jangan lepas Alt) lalu Alt+C. Saya isi keterangan bahwa ini versi awal lalu OK. Inilah commit. Commit ini sama layaknya Ctrl+S setiap kita mengubah dokumen Writer kita. a-commit-pertama
  5. Saya melakukan perubahan pada berkas mainwindow.cpp dengan menambahkan satu baris komentar saja. Lalu Ctrl+S (wajib).
  6. Setelah itu, saya coba diff yakni membuat patch. Apa itu? Ya inilah keajaiban VCS yakni mengetahui perubahan apa yang telah dilakukan terhadap proyek. Sekecil apa pun, perubahan pasti akan terlihat. Tanda + ini artinya baris yang ditambahkan. Diff melakukan delta yakni selisih antara proyek yang sudah diubah dengan proyek sebelumnya, sama seperti rumus matematika selisih = nilaibaru – nilaiawal. b-diff-pertamaku
  7. Selain diff bisa melacak perubahan dalam 1 berkas, ia juga bisa melacak perubahan untuk seluruh berkas di dalam proyek kita. Ini bakalan berguna ketika kegiatan pemrograman mulai mempunyai banyak berkas. Cara saya adalah menambahkan sebaris komentar di setiap berkas teks dalam proyek lalu saya simpan semuanya dan saya lakukan Diff Project (Alt+G, jangan lepas Alt, Alt+Shift+D). Hasilnya? Tanda –  berarti baris yang dihapus.c-diff-banyak-berkas-sekaligus
  8. Branch dilakukan untuk menyalin proyek jadi sebuah proyek baru (branch baru/cabang baru) dan untuk eksperimen di branch baru itu tanpa mengganggu sedikit pun branch asli/branch master. Jadi branch itu ada master (proyek pertama dan utama kita) dan branch selain master. Branch selain master bisa dibuat untuk menambah fitur baru, membersihkan bug, dan lain-lain lalu kemudian setelah beres bisa disatukan lagi perubahannya dengan master branch. Ini jawabannya mengapa developer bisa menambahkan fitur baru dan menyediakan update aplikasi buat kita. Kita mengaktifkan branch yang mau diubah isinya dengan perintah Checkout lalu kita ubah dan branch lain yang tidak di-checkout maka tidak akan terpengaruh. pindah-branch-ke-master
  9. Diff antar-branch. Apa saja perubahan yang dilakukan antara master branch dengan branch baru? diff-antar-branch
  10. Merge branch, gunanya untuk menggabungkan perubahan dalam satu branch ke dalam branch yang lain. Dari sini tampak jelas kegunaan VCS yakni memungkinkan untuk membuat salinan proyek lalu kita berkreasi dengan salinan itu, kemudian jika kreasi sukses maka perubahannya dikirim ke proyek aslinya sehingga proyek asli menjadi versi baru yang memiliki fitur baru pula. merge-branch
  11. Bonus: GUI untuk mengelola Git kita: gitk dan QGitgitk-setelah-semua-ini-terjadi qgit-setelah-semua-ini-terjadi

Apa Hubungan Qt Creator dan Git?

Qt Creator bisa menggunakan Git untuk mengelola kode sumber kita. Lihat gambar ini.

qt-git

Pada gambar di atas, menu Git hidup semuanya. Kita bisa lihat perintah-perintah Git macam Commit, Diff, Patch, dan lain-lain.

qt-git1

Pengaturan version control dalam Qt Creator.

qt-git2

Qt Creator mendukung banyak Version Control System di antaranya Bazaar, Mercurial, Subversion, Perforce, dan CVS. Hanya saja, semuanya tidak saya instal di Ubuntu saya sehingga warnanya merah di pengaturan. Kecuali Git saja karena sudah saya instal.

Demikian dulu hasil percobaan saya. Semoga ini bermanfaat.

Referensi

  1. http://qt-project.org/doc/qtcreator-2.7/creator-version-control.html
  2. http://ebb.org/bkuhn/blog/2011/01/23/git-shared-repository-tutorial.html
  3. http://en.wikipedia.org/wiki/File:Git-logo.svg
  4. Google: tutorial qt creator git merge branch – Google Search

[PDF] Unduh Tutorial Pemrograman GUI dengan Qt C++ Edisi 1-7


Bismillahirrahmanirrahim.

Unduh Satu Per Satu

Berikut ini kumpulan tutorial pemrograman GUI Qt yang mencapai edisi 7 sampai sekarang. Ini semua PDF yang direct link. Semoga bermanfaat.

Pemrograman Qt 1 – Membuat Dialog, GroupBox, Layout, dan Tombol dengan Menulis Kode (Bukan Designer)

Pemrograman Qt 2 – Mendayagunakan QGroupBox dan QHBoxLayout untuk Membentuk Kolom dalam QDialog

Pemrograman Qt 3 – Mendayagunakan QFrame dan QVBoxLayout untuk Membentuk Kolom Lebih Banyak dalam QDialog

Pemrograman Qt 4 – QStackedLayout dan QComboBox untuk Window Layering

Pemrograman Qt 5 – QStackedLayout dan QPushButton untuk Layering (setCurrentIndex)

Pemrograman Qt 6 – Membuat Program GUI Sederhana Menggunakan Sebanyak Mungkin Kelas (QStackedLayout, QPushButton, QLabel, QComboBox, dan Lainnya)

Pemrograman Qt 7 – Menjalankan Perintah Linux dari GUI C++ dengan Mudah Menggunakan system()

Unduh Sekaligus Satu Paket PDF

Tautan: http://www.mediafire.com/download/f76q15p246qgh6q/Tutorial_Pemrograman_GUI_Qt_C%2B_Edisi_1-7.tar.gz
Ukuran: 1.6 MB

Unduh Sekaligus Satu Paket Saved Web Pages (HTML)

Tautan: http://www.mediafire.com/download/mm6dn0l5xhmmycm/Pemrograman_Qt_1-7_Laman_Web_(Non-PDF).zip
Ukuran: 6 MB

Pemrograman Qt 7 – Menjalankan Perintah Linux dari GUI C++ dengan Mudah Menggunakan system()


Bismillahirrahmanirrahim.

Sudah lama saya nantikan untuk membuat GUI dari perintah-perintah Terminal. Banyak sekali perintah Terminal atau kombinasi dari perintah + aplikasi lain yang lebih pantas kalau dibuatkan GUI. Apa saja? Lihat apt-id dan alldeb milik nif dari FUI. Ini aplikasi untuk backup aplikasi satu per satu dan backup-nya bisa diinstal di Ubuntu yang lain. Sangat pantas kalau dibuatkan GUI. Hanya itu? Tidak. Satu pintu ini (yakni memanggil perintah bash Linux dari dalam C++) kalau sudah terbuka, maka akan jadi sangat-sangat lebar lowongan untuk membuat aplikasi GUI dari aplikasi CLI yang sudah ada. Dalam posting 7 ini, saya hanya akan mencontohkan satu aplikasi GUI dengan 3 tombol. Setiap tombol jika diklik maka memanggil perintah “echo ‘metamorfosa’ > metamorfosa.txt“, “ls -l > metamorfosa-ls.txt“, dan “mkdir metamorfosa“. Ingat, sekali pintu ini terbuka, seluruh perintah terminal dapat dipanggil dari dalam program C++ kita. Dan tentulah bisa dipanggil hanya dengan tombol. Ini insya Allah bentuk realisasi dari posting saya sebelunya: https://malsasa.wordpress.com/2013/04/13/linux-desktop-masih-kurang-user-friendly/. Sungguh, saya jamin pembuatan program ini (yang sudah 1 tahun lebih saya cari caranya) adalah sangat mudah. Ternyata oh ternyata.

Wujud Program yang Diinginkan

ngite-ketujuh25

Kode

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QtGui>

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog();
    QVBoxLayout     *layoututama;
    QPushButton     *tombolsatu;
    QPushButton     *tomboldua;
    QPushButton     *tomboltiga;
    QLabel          *label;

public slots:
    void echo_metamorfosa();
    void ls_metamorfosa();
    void mkdir_metamorfosa();

private:

};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    layoututama     =   new QVBoxLayout;
    tombolsatu      =   new QPushButton("cat > metamorfosa.txt");
    tomboldua       =   new QPushButton("ls -l > metamorfosa_ls.txt");
    tomboltiga      =   new QPushButton("mkdir metamorfosa");
    label           =   new QLabel;

    tombolsatu->setFixedSize(188,55);
    tomboldua->setFixedSize(188,55);
    tomboltiga->setFixedSize(188,55);
    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(label);
    setLayout(layoututama);

    connect(tombolsatu, SIGNAL(clicked()), this, SLOT(echo_metamorfosa()));
    connect(tomboldua, SIGNAL(clicked()), this, SLOT(ls_metamorfosa()));
    connect(tomboltiga, SIGNAL(clicked()), this, SLOT(mkdir_metamorfosa()));
}

void Dialog::echo_metamorfosa()
{
    system("echo 'metamorfosa' > metamorfosa.txt");
}

void Dialog::ls_metamorfosa()
{
    system("ls -l > metamorfosa_ls.txt");
}

void Dialog::mkdir_metamorfosa()
{
    system("mkdir metamorfosa");
}

Pembahasan

Bagian paling penting yang menjadikan sebuah C++ bisa memanggil perintah terminal adalah kode

system("echo 'metamorfosa' > metamorfosa.txt");
system("ls -l > metamorfosa_ls.txt");
system("mkdir metamorfosa");

Di dalam parameter, kita menuliskan string yang isinya perintah bash (Terminal) kita. Amat sangat mudah, bukan? Kalau sudah bisa ini, kita gabungkan dengan tutorial 5 kemarin sehingga perintah tersebut berada dalam tombol. Jadi kalau tombol diklik, perintah itu jalan. Sangat mudah, bukan?

Hasil Tombol Pertama

Tombol cat > metamorfosa.txt akan menciptakan sebuah berkas metamorfosa.txt yang isinya tulisan metamorfosa. Sebelumnya saya minta maaf karena ada perbedaan. Tombol bertuliskan cat > metamorfosa tetapi perintahnya di dalamnya malah echo ‘metamorfosa’ > metamorfosa.txt. Yah, yang penting intinya bikin berkas teks yang isinya tulisan metamorfosa-lah. Jika belum mengerti perintah-perintah bash yang saya pakai dalam program ini, silakan merujuk ke Tutorial Shell Dasar 5 Menit.

ngite-ketujuh20bIsinya metamorfosa.txt ketika dibuka dengan Kate:

ngite-ketujuh24

Kesimpulan tombol pertama: perintah bash sukses dieksekusi dari satu klik GUI.

Hasil Tombol Kedua

ngite-ketujuh21b

Ini isi dari berkas metamorfosa_ls.txt setelah dibuka dengan Kate:resized_ngite-ketujuh23

Hasil Tombol Ketiga

Ini hasil dari tombol ketiga yaitu mkdir metamorfosa:

ngite-ketujuh22bHasilnya? Tentu saja membuat folder yang bernama metamorfosa.

Perbandingan dengan C/C++ Tanpa Qt

Tentu sebelum saya menyentuh Qt, saya tes dulu Rujukan 1 dengan C murni. Saya ketik dengan nano lalu saya kompilasi dengan gcc (yang C++ tentu saya kompilasi dengan g++). Saya jalankan dan alhamdulillah, bisa! Perintah yang saya sertakan dalam program itu benar-benar dipanggil dan jalan. Ini buktinya.

Kode C

ngite-ketujuh33

Perhatikan, cuma perintah echo dan pwd yang dipanggil.

Hasil Kompilasi

ngite-ketujuh34

Dan benarlah bahwa echo dan pwd itu berjalan sebagaimana mereka jalan di Terminal. Alhamdulillah.

Unduh Kode Sumber

Program Qt kali ini bernama Embrio-Metamorfosa.

Tautan: http://www.mediafire.com/download/guqrb3blh5tosuz/Embrio-Metamorfosa.tar.gz (3 KB)

Kode sumber C dan C++ untuk program CLI saya juga sertakan. Di dalamnya sudah ada petunjuk kompilasi.

Tautan: http://www.mediafire.com/download/tk0tzbl889o7v29/Embrio-Metamorfosa_Murni_C-C%2B.tar.gz (3 KB)

Kesimpulan

  1. Seluruh perintah Terminal (bash) bisa dipanggil dari GUI alias bisa dibuatkan GUI-nya melalui C++ dengan fungsi system().
  2. Saya ada kesempatan untuk membuat GUI untuk repository changer bagi Ubuntu dan IGOS Nusantara.
  3. Saya ada kesempatan untuk membuat GUI untuk alldeb dan apt-id ( salah satu inovasi terbaik yang pernah saya lihat dari hacker Indonesia)
  4. Saya bisa membuat GUI untuk perintah Terminal apa pun walau lebih dari satu perintah digabung jadi satu.
  5. Walau belum tentu saya bisa lakukan semua itu.

Rujukan

Qt Creator – Qwt, Pustaka Pengganti TeeChart untuk Simulasi Realtime Signal Plotting di Linux (Contoh Program Osiloskop)


Bismillahirrahmanirrahim.

Di luar pemrograman kemarin, sering saya tidak melakukan penulisan kode. Sering saya ingin mencoba examples yang disediakan oleh Qt. Kemarin saya menginstal pustaka Qwt dari repo (karena ketertarikan besar saya untuk mencari pengganti TeeChart di Linux) dan baru hari ini tahu kalau Qwt sama seperti Qt Creator, sama-sama membawa example programs siap pakai. Saya tahu dari mencari bagaimana real time plotting dengan Qwt. Pokoknya grafik sinyal output harus dinamis dan bisa berubah-ubah sesuai input. Eh, pada suatu forum disebut Oscilloscope Example milik Qwt. Lho, memangnya ada? Saya coba cari dengan locate di bash Ubuntu saya dan ketemu. Letaknya di /usr/share/doc/libqwt-doc/examples/. Di situ ada banyak sekali folder example programs. Nah, salah satunya bernama oscilloscope. Saya salin folder itu ke Publik dan membukanya dengan Qt Creator. Ini hasilnya.

qwt-osiloskopa

Hasilnya sungguh realtime seperti TeeChart. Bahkan bisa jadi ini lebih baik. Beranimasi, sinyalnya dinamis, bergerak terus, dan sinyal berubah-ubah sesuai data yang dimasukkan saat runtime. Saya sendiri sangat kaget saat berhasil mengompilasi Osiloskop ini di Qt Creator. Mirip sekali dengan Osiloskop di dunia nyata dan yang sangat menggembirakan adalah akhirnya saya temukan pengganti TeeChart di Linux. Saya sangat gembira malam ini, walhamdulillah.

qwt-osiloskop1a

Apa yang dimaksud dengan realtime? Ya mudahnya, output akan berubah sesuai input yang dimasukkan pada saat itu juga. Lihat, perhatikan knob bundar Amplitude. Saya perkecil maka bentuk sinyal juga menyusut. Persis Osiloskop aslinya. Kalau yang di bawah ini, perhatikan knob Frequency. Saya perkecil, sinyal menjadi renggang tidak lagi mampat. Sungguh persis Osiloskop aslinya. Yang paling penting, ini membuktikan bahwa kita bisa membuat simulasi realtime signal plotting dengan menggunakan pustaka di Linux. Jadi tidak hanya di Windows saja dengan pustaka TeeChart dan IDE Microsoft Visual Studio yang kedua-duanya komersial melainkan juga di Linux bisa bahkan Qwt selaku pustaka dan Qt Creator selaku IDE sama-sama gratis bahkan open source. Suatu keberuntungan buat kita.

qwt-osiloskop2a

Untuk Siapa Tulisan Ini?

  1. Peneliti/pelajar yang ingin membuat aplikasi simulasi real time plotting di Linux.
  2. Peneliti/pelajar yang ingin pengganti TeeChart yang gratis dan open source di Linux.
  3. Programer yang butuh pustaka untuk aplikasi simulasi Biorhytm atau komputasi medikal yang lain.

Behind The Scene Tulisan Ini

TeeChart

Gara-gara TeeChart. Saya sendiri tidak tahu menahu gambar di atas ini program untuk apa. Namun yang paling penting, program ini menayangkan grafik sinyal-sinyal secara dinamis. Lalu kita bisa memasukkan angka-angka di kotak putih sebelah kanan itu dan sinyal-sinyalnya sungguh bisa berubah-ubah. Ini dinamakan simulasi. Dan ini dilakukan dengan bahasa C, pada Microsoft Visual C++, dengan pustaka charting yang bernama Steema TeeChart. Saya bisa mengatakannya karena saya sempat melihat sendiri orang yang membuat program ini. Satu hal saja yang saya pikirkan kala itu (mungkin 4 bulan lalu) bahwa saya harus temukan pengganti TeeChart untuk Linux. Harus bisa dibuat simulasi serupa (tentunya yang realtime bukan yang statis) di Linux. Namun kala itu saya belum tahu sama sekali adanya pustaka-pustaka untuk plotting di Linux.

Selama ini, sejak sebelum posting Qt pertama saya di sini, saya mencari pustaka-pustaka pengganti TeeChart untuk Linux. Cukup sulit menemukannya walau sudah saya temukan calon-calonnya:

  1. OpenGL (saya sudah tahu sebelum keinginan mencari itu ada, tetapi terlalu sulit)
  2. Matplotlib http://matplotlib.sourceforge.net/
  3. GNUplot http://www.gnuplot.info/
  4. QCustomPlot http://qcustomplot.com/ (paling menarik buat saya)
  5. wxPlot http://wxcode.sourceforge.net/showcomp.php?name=wxPlot
  6. wxMathPlot http://wxmathplot.sourceforge.net/
  7. libgraph http://savannah.nongnu.org/projects/libgraph/‎
  8. koolplot http://koolplot.codecutter.org/
  9. EasyBMP http://easybmp.sourceforge.net/‎
  10. plotutils http://gnu.org/s/plotutils/
  11. plplot http://plplot.sourceforge.net
  12. wxArt2d http://wxart2d.org/moin/WxArt2dScreenShots
  13. MathGL http://mathgl.sourceforge.net/
  14. Scidavis http://scidavis.sourceforge.net/ (bukan pustaka)
  15. DISLIN http://www.dislin.de/
  16. wxChart http://wxcode.sourceforge.net/components/wxchart/
  17. PyQtGraph http://www.pyqtgraph.org/
  18. GUIQwt https://code.google.com/p/guiqwt/
  19. Chaco http://code.enthought.com/projects/chaco/gallery.php
  20. Qwt http://qwt.sourceforge.net/ (sebenarnya masih ada yang lain, hanya saja yang saya temukan cuma sekian).

Supaya nyata, ini saya sertakan skrinsot jadi salah satu pustaka (PyQtGraph, open source):

pyqtgraph-plotting

Serta satu lagi, yakni Matplotlib (open source):

Dan harus saya sebut juga laman yang mengantarkan saya kepada semua pustaka plotting yang ada:

  1. http://stackoverflow.com/questions/296199/is-there-any-out-of-the-box-2d-3d-plotting-library-for-c
  2. http://wiki.python.org/moin/NumericAndScientific/Plotting
  3. http://qt-project.org/forums/viewthread/14819 (mengantar saya pada QCustomPlot)

Yang saya pikirkan kala membuka semua laman itu hanyalah: “ini bisa realtime apa tidak?“. Soalnya saya ingin yang realtime bukan yang statis. Akhirnya semua ini berakhir pada Qwt setelah saya melihat dua laman ini:

  1. http://www.swharden.com/blog/2013-05-08-realtime-data-plotting-in-python/ (gara-gara ini saya semangat lagi mencari setelah saya anggap sudah mustahil, saya melihat Qt Designer di sana dan kaget sekali)
  2. http://codingexodus.blogspot.com/2013/01/getting-started-with-qwt.html (saya coba dan berhasil)

Hasilnya saya cari keterangan soal Qwt dan alhamdulillah ternyata jawabannya ada di dalam examples milik Qwt. Supaya nyata juga, ini skrinsot folder oscilloscope asli milik Qwt.

resized_qwt-osiloskop5

Kode

Ada satu hal penting setelah mengimpor satu folder oscilloscope ke dalam Qt Creator. Anda harus menambahkan satu baris kode ini di dalam .pro Anda.

CONFIG += qwt

atau dipastikan Qt Creator Anda error karena tidak bisa menemukan letak header-header Qwt. Saya menggunakan Qt Creator 4.8 pada Ubuntu 12.04 dan error kalau tidak ada baris ini. Setelah ditulis baru jalan programnya seperti skrinsot pertama. Mudah sekali, bukan?

Unduh Kode Sumber

Tautan: http://otodidak.freeserver.me/tarball/oscilloscope.tar.gz
Ukuran: 8 KB

Kesimpulan

Qwt adalah pustaka Qt untuk realtime signal plotting pengganti TeeChart di Linux. Bisa digunakan untuk sinyal sinus biasa sampai simulasi Osiloskop.

Penutup

Semoga tulisan ini bermanfaat untuk Anda sekalian.

Qt Creator – Tip Trik Efisien Memrogram C++ dalam IDE Edisi 2


Bismillahirrahmanirrahim.

Ini posting di luar pemrograman, lanjutan yang kemarin. Kali ini temanya cuma dua yakni soal duplicate line dan skema warna kode.

Duplicate Line

Ini sangat berguna kala ada beratus baris yang polanya sama. Daripada harus Ctrl+C lalu Ctrl+V, mending Ctrl+D. Jadi, letakkan kursor di satu baris lalu Ctrl+D maka baris tersebut langsung dikopi di bawahnya. Serta, kalau ada sekian baris yang dipilih, lalu Ctrl+D dijalankan, maka seluruh baris tersebut diduplikat di bawahnya. Ini fitur yang saya temukan di aplikasi Geany dan AutoIt IDE. Sangat berguna dan sangat memangkas waktu. Begini skrinsotnya biar lebih jelas.

Sebelum Ctrl+D:

ngite-ketujuh18

Setelah Ctrl+D 3 kali:

ngite-ketujuh19

Cara mengaturnya ada pada Tools > Options > Environment > TAB Keyboard > cari string CopyLineDown. Lihat gambar ini.

ngite-ketujuh17

Skema Warna Kode

Mungkin seseorang cocok dengan skema warna gelap macam ini dibanding yang putih biasanya. Ternyata Qt Creator menyediakannya (seperti Kate). Bagaimana cara mengaturnya?

resized_ngite-ketujuh14

Tools > Text Editor > TAB Font & Colors > Vim (dark). Tersedia pilihan Intellij IDEA juga. Dan Anda bisa mengkustomisasinya sekehendak Anda.

resized_ngite-ketujuh15
Semoga ini bermanfaat.

Pemrograman Qt 6 – Membuat Program GUI Sederhana Menggunakan Sebanyak Mungkin Kelas (QStackedLayout, QPushButton, QLabel, QComboBox, dan Lainnya)


Bismillahirrahmanirrahim.

Alhamdulillah. Setelah kemarin saya menuai keberhasilan layering sebagaimana yang saya harap, kini saatnya berlatih memperluas program yang sudah bisa layering dengan macam-macam kelas yang saya belum kenal. Ini untuk memperlancar membuat program. Di sini saya membuat satu program dengan 4 layer. Setiap layer diwakili oleh satu tombol. Bedanya, kali ini saya unggah kode sumbernya lengkap di dalam paket ZIP. Silakan diunduh dan dibuka di Qt Creator Anda. Semoga ini bermanfaat.

Mockup

compressed_resized_SAM_6254

Tidak seperti biasanya, saya kali ini menggambar mockup-nya dahulu di kertas. Ini penting karena akan susah sekali program ditulis kalau harus mengimajinasikan semuanya. Lebih mudah kalau digambar dulu desainnya lalu nanti tinggal menulis kode sesuai gambar. Lakukan ini juga kala Anda ingin membuat program besar.

Wujud Program yang Diinginkan

ngite-ketujuh

Saya cinta http://ilmoe.com

ngite-ketujuh1 ngite-ketujuh2 ngite-ketujuh3

Daftar Kelas Qt yang Dipakai

  1. QVBoxLayout
  2. QHBoxLayout
  3. QStackedLayout
  4. QFrame
  5. QPushButton
  6. QComboBox
  7. QLabel
  8. QPixmap
  9. QRadioButton

Daftar Method Qt yang Dipakai

  1. setReadOnly (baru)
  2. setText (baru)
  3. setPixmap (baru)
  4. addWidget
  5. setAlignment (baru)
  6. addLayout
  7. setContentsMargins (baru)
  8. addItem (baru)
  9. setLayout
  10. setFrameShape
  11. setFrameShadow
  12. setLayout
  13. connect
  14. setCurrentIndex

Qt Creator dalam Kode

resized_ngite-ketujuh10 resized_ngite-ketujuh11

ngite-ketujuh6

Kode Program

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog();

    QVBoxLayout     *layoututama;
    QVBoxLayout     *layouta;
    QVBoxLayout     *layoutb;
    QVBoxLayout     *layoutc;
    QVBoxLayout     *layoutd;
    QHBoxLayout     *layoute;
    QHBoxLayout     *layoutf;

    QFrame          *frameutama;
    QFrame          *framea;
    QFrame          *frameb;
    QFrame          *framec;
    QFrame          *framed;

    QLabel          *labela;
    QLabel          *labelagambar;
    QLabel          *labelb;
    QLabel          *labelc;
    QLabel          *labeld;

    QPushButton     *tombola;
    QPushButton     *tombolb;
    QPushButton     *tombolc;
    QPushButton     *tombold;

    QPushButton     *tombolgga;         //gg = gak guna
    QPushButton     *tombolgga1;
    QPushButton     *tombolggb;
    QPushButton     *tombolggb1;

    QTextEdit       *textedit;

    QRadioButton    *radioa;
    QRadioButton    *radiob;
    QRadioButton    *radioc;
    QRadioButton    *radiod;

    QComboBox       *comboa;
    QComboBox       *combob;
    QComboBox       *comboc;
    QComboBox       *combod;

    QStackedLayout  *stack;

public slots:
    void            gantia();
    void            gantib();
    void            gantic();
    void            gantid();

private:

};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"                     //IDE yang dipakai adalah Qt Creator
#include "ui_mainwindow.h"                  //https://malsasa.wordpress.com

Dialog::Dialog()
{

    //deklarasi semua objek dahulu

    layoututama     =   new     QVBoxLayout;        //layout
    layouta         =   new     QVBoxLayout;
    layoutb         =   new     QVBoxLayout;
    layoutc         =   new     QVBoxLayout;
    layoutd         =   new     QVBoxLayout;
    layoute         =   new     QHBoxLayout;
    layoutf         =   new     QHBoxLayout;

    framea          =   new     QFrame;             //frame
    frameb          =   new     QFrame;
    framec          =   new     QFrame;
    framed          =   new     QFrame;

    labela          =   new     QLabel;             //label
    labelagambar    =   new     QLabel;
    labelb          =   new     QLabel;
    labelc          =   new     QLabel;
    labeld          =   new     QLabel;

    tombola         =   new     QPushButton("1");   //pushbutton
    tombolb         =   new     QPushButton("2");
    tombolc         =   new     QPushButton("3");
    tombold         =   new     QPushButton("4");

    tombolgga       =   new     QPushButton("GGA"); //pushbutton gak guna
    tombolgga1      =   new     QPushButton("GGA 1");
    tombolggb       =   new     QPushButton("GGB");
    tombolggb1      =   new     QPushButton("GGB 1");

    radioa          =   new     QRadioButton("RADIO 1");    //radio button
    radiob          =   new     QRadioButton("RADIO 2");
    radioc          =   new     QRadioButton("RADIO 3");
    radiod          =   new     QRadioButton("RADIO 4");

    textedit        =   new     QTextEdit("<span style="text-decoration: underline;"><i><b>INI ADALAH TEXTEDIT</b></i></span>");      //QTextEdit bisa mem-parsing HTML
    textedit->setReadOnly(true);

    comboa          =   new     QComboBox;                  //combo box
    combob          =   new     QComboBox;
    comboc          =   new     QComboBox;
    combod          =   new     QComboBox;

    stack           =   new     QStackedLayout;             //primadona kita

    //SELESAI DEKLARASI PEMBUATAN OBJEK
    //deklarasi labela dengan tulisan

    labela->setText("<b>INI HALAMAN 1</b>");        //GILA, Qt bisa mem-parsing HTML dalam string dalam parameter sekalipun
    labelb->setText("<i>INI HALAMAN 2</i>");        //Qt benar-benar enak
    labelc->setText("<span style="text-decoration: underline;">INI HALAMAN 3</span>");        //tag yang diterima <b> <i> <span style="text-decoration: underline;">
    labeld->setText("<span style="color: red;">INI HALAMAN 4</span>");      //hanya QLabel dan QTextEdit saja, kelas lain tidak menerima HTML

    //deklarasi gambar untuk labelagambar

    labelagambar->setPixmap(QPixmap(":/gambar/download.png"));      //ditemukan pada 23 Agustus 2013
    //sumber: http://qt-project.org/forums/viewthread/15365
    //ternyata cuma begini saja deklarasinya, gak usah kelas QImage atau QPixmap atau QPicture sama sekali

    //deklarasi pengisian layouta dengan item-item halaman 1

    layouta->addWidget(labela);
    layouta->setAlignment(labela, Qt::AlignHCenter);
    layouta->addWidget(labelagambar);
    layoutf->addWidget(tombolgga);
    layoutf->addWidget(tombolgga1);
    layouta->addLayout(layoutf);
    layouta->setContentsMargins(1,1,1,55);          //ukuran terakhir adalah margin vertikal bawah

    //deklarasi pengisian layoutb dengan item-item halaman 2

    layoutb->addWidget(labelb);
    layoutb->setAlignment(labelb, Qt::AlignHCenter);
    layoutb->addWidget(textedit);
    layoutb->addWidget(tombolggb);
    layoutb->addWidget(tombolggb1);

    //deklarasi pengisian layoutc dengan item-item halaman 3

    layoutc->addWidget(labelc);
    layoutc->setAlignment(labelc, Qt::AlignTop);
    layoutc->setAlignment(labelc, Qt::AlignHCenter);
    layoutc->addWidget(radioa);
    layoutc->setAlignment(radioa, Qt::AlignTop);
    layoutc->setAlignment(radioa, Qt::AlignHCenter);
    layoutc->addWidget(radiob);
    layoutc->setAlignment(radiob, Qt::AlignTop);
    layoutc->setAlignment(radiob, Qt::AlignHCenter);
    layoutc->addWidget(radioc);
    layoutc->setAlignment(radioc, Qt::AlignTop);
    layoutc->setAlignment(radioc, Qt::AlignHCenter);
    layoutc->addWidget(radiod);
    layoutc->setAlignment(radiod, Qt::AlignTop);
    layoutc->setAlignment(radiod, Qt::AlignHCenter);
    layoutc->setContentsMargins(1,1,1,111);         //ini harus ada

    //deklarasi pengisian layoutd dengan item-item halaman 4

    layoutd->addWidget(labeld);
    layoutd->setAlignment(labeld, Qt::AlignHCenter);
    layoutd->addWidget(comboa);
    layoutd->addWidget(combob);
    layoutd->addWidget(comboc);
    layoutd->addWidget(combod);
    layoutd->setContentsMargins(1,1,1,111);

        //begini cara mengisi item-item combo box
        //kalau pakai addItems tambah bingung karena
        //harus pakai objek List, jika tidak maka gagal

        comboa->addItem("KUCING");      //ingat, addItem bukan addItems
        comboa->addItem("AYAM");
        comboa->addItem("SAPI");

        combob->addItem("JERUK");
        combob->addItem("STROBERI");
        combob->addItem("APEL");

        comboc->addItem("BAYAM");
        comboc->addItem("KANGKUNG");
        comboc->addItem("KUBIS");

        combod->addItem("MERICA");
        combod->addItem("GARAM");
        combod->addItem("BAWANG PUTIH");

    //kemudian deklarasi pemasangan antara frame dengan layout

    framea->setLayout(layouta);
    frameb->setLayout(layoutb);
    framec->setLayout(layoutc);
    framed->setLayout(layoutd);

    //deklarasi frame agar terlihat wujudnya

    framea->setFrameShape(QFrame::StyledPanel);
    frameb->setFrameShape(QFrame::StyledPanel);
    framec->setFrameShape(QFrame::StyledPanel);
    framed->setFrameShape(QFrame::StyledPanel);

    framea->setFrameShadow(QFrame::Raised);
    frameb->setFrameShadow(QFrame::Raised);
    framec->setFrameShadow(QFrame::Raised);
    framed->setFrameShadow(QFrame::Raised);

    //memasukkan objek sebagai layer

    stack->addWidget(framea);
    stack->addWidget(frameb);
    stack->addWidget(framec);
    stack->addWidget(framed);

    //mengisi layoute dengan tombol-tombol supaya bisa horizontal persis mockup

    layoute->addWidget(tombola);
    layoute->addWidget(tombolb);
    layoute->addWidget(tombolc);
    layoute->addWidget(tombold);

    //memasukkan layout kecil ke dalam layout utama

    layoututama->addLayout(stack);
    layoututama->addLayout(layoute);

    //memasang layoututama ke dalam Dialog

    setLayout(layoututama);

    //memberi fungsi untuk setiap tombol

    connect(tombola, SIGNAL(clicked()), this, SLOT(gantia()));      //A semua
    connect(tombolb, SIGNAL(clicked()), this, SLOT(gantib()));      //B semua
    connect(tombolc, SIGNAL(clicked()), this, SLOT(gantic()));      //C semua
    connect(tombold, SIGNAL(clicked()), this, SLOT(gantid()));      //D semua
    //cara baca kode ini: kalau tombol c diklik, maka Dialog memanggil fungsi gantic
    //receiver-nya harus "this", tidak boleh "Dialog", tidak juga "stack"

}

//deklarasi fungsi-fungsi untuk tombol

void Dialog::gantia()
{
    stack->setCurrentIndex(0);
}

void Dialog::gantib()
{
    stack->setCurrentIndex(1);
}

void Dialog::gantic()
{
    stack->setCurrentIndex(2);          //jika Dialog memanggil fungsi ini, maka
}                                       //stack layer nomor 2 akan maju ke depan

void Dialog::gantid()
{
    stack->setCurrentIndex(3);
}

Analisis Kode Program

mainwindow.h

Tidak ada yang berbeda dari posting nomor 5 kemarin. Pokoknya, semua objek harus dideklarasikan di sini dahulu karena akan digunakan dalam layer dan ada fungsi yang memanggil fungsi di luar tubuhnya.

mainwindow.cpp

Di sini banyak yang penting dan berbeda. Yang sama dengan kemarin adalah deklarasi ulang semua kelas yang sudah dideklarasikan tetapi bentuk deklarasi harus pendek namaObjeknya = new NamaKelasnya; tanpa tanda pointer (*) dan tanpa NamaKelas depan. Yang berbeda dari kemarin karena adanya kelas-kelas baru semisal QTextEdit (untuk menulis teks), QLabel, QPixmap, dan lain-lain, di antaranya:

QTextEdit

textedit        =   new     QTextEdit("<u><i><b>INI ADALAH TEXTEDIT</b></i></u>");
textedit->setReadOnly(true);

Inilah deklarasi objek QTextEdit. Sama saja dengan kelas yang lain. Ajaibnya, ia menerima HTML di dalam string di dalam parameter dan mem-parsing-nya saat runtime. Ini sangat mengesankan saya bahwa Qt melakukan hal yang sangat memudahkan saya memformat nantinya. Kalau begini, mungkin saya bisa menulis ulang Otodidak dalam Qt dengan memasukkan gambar sekaligus tulisan (dan tulisan itu bisa miring bisa tebal) di dalam satu kotak saja. Qt bisa mem-parsing HTML untuk QTextEdit.

Maksud dari method setReadOnly adalah menjadikan objeknya QTextEdit nanti tidak bisa ditulisi lagi. Hanya bisa dibaca saja. Itu kalau diset nilainya true. Perhatikan, apa-apa method yang mengubah perilaku suatu objek, seringkali namanya diawali dengan set. Jadi, kita akan lebih cepat kerja dengan Qt Creator kala mencari method karena tahu tanda-tandanya.

QLabel

labela->setText("<b>INI HALAMAN 1</b>");
labelb->setText("<i>INI HALAMAN 2</i>");
labelc->setText("<u>INI HALAMAN 3</u>");
labeld->setText("<font color='red'>INI HALAMAN 4</font>");

Ini pengisian teks untuk QLabel. Digunakanlah method setText milik QLabel. Ajaibnya lagi, parameter string di dalam QLabel menerima HTML dan mem-parsing-nya ketika runtime. Ini pun sangat menguntungkan saya. Saya bisa mewarnai dan membagaimanakan tulisan dalam label sesuka saya. Ini akan sangat membantu untuk kita membentu UI dan UX yang baik untuk aplikasi. Ini (wallahu a’lam) belum saya temukan kala menggunakan Java platform (Netbeans).

QPixMap

labelagambar->setPixmap(QPixmap(":/gambar/download.png"));

Ini adalah tindakan mengisi QLabel dengan gambar. Tentu gambar sudah diimpor terlebih dahulu ke dalam proyek. Lihat posting sebelumnya untuk cara mengimpor gambar. Caranya ternyata dengan method setPixmap miliknya QLabel. Lalu di dalam parameternya dipanggillah QPixmap dengan parameter lagi berupa string, yang string itu berisi path ke gambar yang diimpor. Gambarnya adalah banner http://ilmoe.com, website favorit saya.

QVBoxLayout & QHBoxLayout

layouta->addWidget(labela);
layouta->setAlignment(labela, Qt::AlignHCenter);
layouta->addWidget(labelagambar);
layoutf->addWidget(tombolgga);
layoutf->addWidget(tombolgga1);
layouta->addLayout(layoutf);
layouta->setContentsMargins(1,1,1,55);

Ini meskipun sudah Anda ketahui semuanya, masih penting karena menata objek-objek ke dalam layout. Di sini yang berlaku sebagai layout vertikal adalah layouta dan yang horizontal itu layoutf. Yang vertikal untuk judul dan gambar, yang horizontal untuk dua tombol GG. Lihat foto mockup di atas pada HALAMAN 1.

Yang unik di sini adalah method setAlignment milik QVBoxLayout. Di dalam parameternya ada dua buah isi. Yang pertama adalah objek/widget, dan yang kedua adalah kode alignment (perataan). Isi yang pertama ini adalah labela dan Qt::AlignHCenter. Maksud kode ini adalah jadikan labela itu Center secara horizontal, pada layouta. Seperti ini juga untuk objek-objek lain. Inilah cara kita untuk menata supaya objek-objek dalam layout itu rapi. Kalau tidak begini, lihat saja. Nanti objek-objek Anda bisa awut-awutan letaknya.

Method setContensMargins ini saya gunakan untuk menarik semua objek ke atas. Karena jika tidak begitu, semua objek terlihat turun mendekati garis paling bawah. Ini tidak rapi. Makanya saya kasih angka 55 supaya ada jarak antara objek paling bawah dengan garis frame bawah. Hasilnya HALAMAN 1 terlihat rapi. Semua objek berada pas di tengah-tengah frame.

QComboBox

comboa->addItem("KUCING");
comboa->addItem("AYAM");
comboa->addItem("SAPI");

combob->addItem("JERUK");
combob->addItem("STROBERI");
combob->addItem("APEL");

comboc->addItem("BAYAM");
comboc->addItem("KANGKUNG");
comboc->addItem("KUBIS");

combod->addItem("MERICA");
combod->addItem("GARAM");
combod->addItem("BAWANG PUTIH");

Inilah cara untuk mengisi tiap-tiap combo box dengan opsi. Hasilnya bisa dilihat pada skrinsot berikut:

ngite-ketujuh9

Untuk kode-kode setelah baris 118 ini, walhamdulillah sudah saya tulis keterangannya pada posting nomor 5.

Rangkuman

  1. Kelas yang bisa meng-handle HTML adalah QLabel dan QTextEdit (yang lainnya belum diketahui). Yang jelas, QPushButton tidak bisa meng-handle HTML.
  2. Memasukkan gambar ke dalam QLabel sangat mudah, tidak usah membuat objek baru. Cukup deklarasikan: label->setPixmap(QPixmap(“:/prefix/namagambar.png”);.
  3. Ukuran horizontal layer pada semua layer pada QStackedLayout mengikuti ukuran isi layer terpanjang.
  4. Kode-kode alignment untuk parameter kedua dalam setAlignment milik QVBoxLayout/QHBoxLayout adalah Qt::AlignCenter, Qt::AlignHCenter, Qt::AlignVCenter, Qt::AlignJustify, Qt::AlignBottom, Qt::AlignRight, dan Qt::AlignLeft. Bisa dipilih sendiri dengan Qt Creator.

Unduh

Kode Sumberhttp://otodidak.freeserver.me/tarball/Embrio-B.tar.gz
Ukuran: 34 KB

Pemrograman Qt 4 – QStackedLayout dan QComboBox untuk Window Layering


Bismillahirrahmanirrahim.

Saya ingin membuat program yang bisa layering. Saya tidak tahu istilah resmi untuk ini tetapi bayangkanlah aplikasi GUI yang jika satu tombol diklik, maka sebagian atau seluruh isi jendela berubah jadi susunan lain. Anda sering melihatnya di aplikasi yang tidak seperti Word, tidak seperti Excel, tidak seperti Notepad, tidak seperti Firefox. Mereka statis. Anda sering melihatnya ketika Anda menginstal aplikasi di Windows. Jika Anda klik Next/Back, sebagian isi jendela berubah. Yang seperti itu yang saya inginkan. Kali ini saya berhasil membuatnya dengan memanfaatkan QStackedLayout dan QComboBox. Sayang, saya hanya bisa memakai QComboBox bukan QPushButton, padahal yang saya maukan adalah QPushButton. Tetapi tidak apa. Ini insya Allah menambah pengetahuan kita dalam membuat aplikasi Qt.

Wujud Program yang Diinginkan

ngite-keempat ngite-keempat1

Pokoknya, tampilan dari satu jendela berubah total jika saya memilih salah satu opsi tampilan dari 4 yang ada. Sederhana saja. Saya hanya memasukkan tombol dalam setiap QFrame yang masing-masing QFrame itu bisa dipanggil ke atas (makanya saya kasih nama layering) dengan combo box.

Daftar Kelas Qt yang Dipakai

  1. QDialog = dipakai untuk membuat jendela tertinggi
  2. QVBoxLayout = dipakai untuk membuat kontainer yang menampung setiap blok/grup dari tombol
  3. QPushButton = dipakai untuk membuat tombol
  4. QFrame = dipakai untuk menggantikan QGroupBox dalam hal menampung tombol-tombol jadi satu blok/grup.
  5. QStackedLayout = dipakai untuk membentuk layer–layer tampilan yang setiap layernya bisa berisi widget apa saja.
  6. QComboBox = dipakai untuk mewakili masing-masing layer dan untuk switching antarlayer.

Daftar Method Qt yang Dipakai

  1. addWidget -> dipakai oleh QVBoxLayout, QStakedLayout
  2. setMinimumSize -> dipakai oleh QFrame
  3. setLayout -> dipakai oleh QFrame dan QDialog
  4. setMaximumWidth -> dipakai oleh QPushButton
  5. setFrameShadow -> dipakai oleh QFrame untuk membentuk bayangan; opsi-opsinya adalah QFrame::Raised, QFrame::Sunken, dan QFrame::Plain
  6. addItem -> dipakai oleh QStackedLayout untuk membuat opsi-opsi yang bisa diklik. Persis saat Anda memilih font di Word.
  7. setFrameShape -> dipakai oleh QFrame untuk membentuk wujud panel apakah itu timbul atau tenggelam; opsi-opsinya adalah QFrame::StyledPanel [dipakai oleh default-nya Qt Creator GUI Builder], QFrame::Box
  8. connect -> dipakai di antara QComboBox dengan QStackedLayout.

Qt Creator dan Kode

ngite-keempat2

Kode Program

Sama saja dengan ngite kemarin, hanya ada mainwindow.cpp yang paling penting. Jika bingung dengan kode Qt, silakan merujuk ke tulisan Qt sebelum ini.

#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    QVBoxLayout *mainlayout     =   new QVBoxLayout;
    QVBoxLayout *layouta        =   new QVBoxLayout;
    QVBoxLayout *layoutb        =   new QVBoxLayout;
    QVBoxLayout *layoutd        =   new QVBoxLayout;
    QPushButton *tombola        =   new QPushButton("A");
    QPushButton *tombolb        =   new QPushButton("B");
    QPushButton *tombolc        =   new QPushButton("C");
    QPushButton *tombold        =   new QPushButton("D");
    QFrame      *framea         =   new QFrame;
    QFrame      *frameb         =   new QFrame;
    QFrame      *framed         =   new QFrame;
    QStackedLayout *stackia     =   new QStackedLayout;
    QComboBox   *combo          =   new QComboBox;

    combo->addItem(tr("A"));
    combo->addItem(tr("B"));
    combo->addItem(tr("C"));
    combo->addItem(tr("D"));

    tombold->setFixedSize(55,55);

    layouta->addWidget(tombola);
    layoutb->addWidget(tombolb);
    layoutd->addWidget(tombold);

    framea->setLayout(layouta);
    frameb->setLayout(layoutb);
    framea->setMinimumSize(88,88);
    frameb->setMinimumSize(88,88);
    framed->setLayout(layoutd);

    //membentuk frame
    framea->setFrameShape(QFrame::StyledPanel);
    framea->setFrameShadow(QFrame::Raised);
    frameb->setFrameShape(QFrame::StyledPanel);
    frameb->setFrameShadow(QFrame::Raised);
    framed->setFrameShape(QFrame::StyledPanel);
    framed->setFrameShadow(QFrame::Raised);

    //mengecilkan ukuran tombol c
    tombolc->setMaximumWidth(33);

    stackia->addWidget(framea);
    stackia->addWidget(frameb);
    stackia->addWidget(tombolc);
    stackia->addWidget(framed);

    mainlayout->addLayout(stackia);

    mainlayout->addWidget(combo);
    setLayout(mainlayout);

    connect(combo, SIGNAL(activated(int)), stackia, SLOT(setCurrentIndex(int)));
}

Analisis Kode Program

Sedikit saja sebenarnya yang istimewa dari program ke-4 ini. Cukup tahu hal ini maka Anda bisa memodifikasi program menjadi lebih istimewa.

SATU

combo->addItem(tr("A"));
combo->addItem(tr("B"));
combo->addItem(tr("C"));
combo->addItem(tr("D"));

Gunanya untuk menambahkan opsi-opsi pada combo box.

DUA

connect(combo, SIGNAL(activated(int)), stackia, SLOT(setCurrentIndex(int)));

Ini sangat istimewa. Inilah inti dari pemrograman Qt yakni SIGNAL dan SLOT. Method connect() ini adalah suatu penghubung antara objek yang mengeluarkan SIGNAL dan objek yang menerimanya yaitu memiliki SLOT. Ini maksudnya jika suatu objek mengeluarkan SIGNAL tertentu maka objek satunya melakukan fungsi tertentu. Itu saja. Dan inilah yang saya pakai untuk mengendalikan layer di dalam QStackedLayout dengan menggunakan QComboBox. Kita pun pasti akan menggunakannya dalam mengendalikan objek lainnya dengan tombol atau dengan objek lainnya pula. Karena itu, inilah inti dari pemrograman Qt.

combo -> objek dari QComboBox
stackia -> objek dari QStakedLayout

Hasil Akhir

ngite-keempat

Rangkuman

  1. Layering dilakukan dengan QStackedLayout karena ia mengakomodasi frame-frame sebagai layer dan mampu mengatur susunannya yang kita lihat dengan SLOT setCurrentIndex().
  2. Layer-layer di dalam QStackedLayout bisa diatur mana yang terlihat dengan mengaturnya dari QComboBox dengan menghubungkan mereka berdua memakai connect().
  3. Sementara yang saya tahu, hanya QComboBox yang mampu mengatur layer dalam QStackedLayout dan QPushButton belum berhasil mengaturnya. Anda bisa melihat buktinya di sini dan di sini. Tampaknya, QStackedLayout ingin selalu dberi masukan berupa integer sementara QPushButton tidaklah seperti QComboBox yang mengeluarkan nilai integer untuk setiap opsi yang kita tentukan. Misalnya yaa, A itu 1, B itu 2, C itu 3, dan seterusnya seperti kode di atas.