Pengantar Elektronika di Linux – Aplikasi Pengganti EAGLE, Proteus, dan Multisim untuk Desain Rangkaian dan PCB

Bismillahirrahmanirrahim.

Tulisan ini tersedia dalam PDF.

Tulisan ini berisi daftar software pengganti EAGLE, Multisim, Proteus, dan aplikasi elektro serupa di Linux. Software elektronika di Linux saya bagi menjadi dua bagian besar, yakni perancangan dan simulasi. Perancangan di sini mewakili software pengganti EAGLE sedangkan simulasi mewakili software pengganti Multisim/Proteus. Kemudian, saya membagi kategori pengganti EAGLE menjadi perancang skematik murni, perancang PCB layout murni, dan perancang skematik yang termasuk perancang PCB. EAGLE sendiri termasuk kategori software yang mampu merancang skema sekaligus PCB. Dan sebagai kabar baik, EAGLE versi Linux telah dirilis bahkan sudah ada di repo Ubuntu saat ini. Ulasan ringkasnya saya letakkan di bawah. Tulisan ini disusun sedemikian rupa supaya mengantarkan Anda yang ingin lebih dalam menguasai salah satu software dengan dicantumkannya banyak pranala referensi dalam setiap software yang disebutkan. Semoga tulisan ini bermanfaat. 

Pemrograman Qt 8 – QVBoxLayout, QHBoxLayout, QGridLayout dan Sifat-Sifatnya

Bismillahirrahmanirrahim.

Kelebihan pemrograman visual adalah adanya layout yang secara otomatis akan mengatur penataan apa pun objek yang kita tuliskan di jendela. Pendek kata, kita tidak perlu lagi mengatur ukuran matematis (X,Y) dari setiap objek GUI satu per satu karena sudah diotomatisasi oleh layout. Di Java SWING, saya menemukan FreeLayout, GridLayout, BoxLayout, AbsoluteLayout, dan lain-lain. Di Qt Framework ini, saya menemukan QVBoxLayout, QHBoxLayout, QGridLayout, QFormLayout, dan lain-lain pula. Saya akan membahas 3 layout Qt yang sudah saya gunakan dalam latihan-latihan saya kemarin dan ini bisa Anda pakai dalam program apa pun. Penting, bisa diletakkan lebih dari 1 jenis layout dalam 1 jendela. Semoga bermanfaat untuk Anda.

Manfaat Nyata Layout

Misalkan Anda ingin membuat program dengan empat tombol berjajar ke samping seperti gambar ini:

maka tidak perlulah Anda menulis kode peletakan x sekian y sekian untuk masing-masing tombol dan sampai berjam-jam memosisikan ukurannya biar simetris seperti gambar. Tidak perlu. Cukup buat objek layout horizontal lalu masukkan kode tombol-tombol ke dalam layout itu. Otomatis si layout horizontal akan mengatur tombol-tombol Anda berjajar ke samping. Setiap Anda masukkan satu tombol ke dalam layout, ia akan diletakkan persis di sebelah kanan tombol sebelumnya. Otomatis. Begitu pula dengan kebutuhan penataan tombol yang vertikal, atau kebutuhan penataan yang seperti keramik-keramik lantai (grid), atau malah ingin bebas menentukan ukuran secara manual semuanya, juga bisa. Gambar ini contoh program yang memakai layout vertikal:

Nah, sangat praktis, bukan? Layout di Qt (maupun di framework lain) itu berguna sekali. Dan apakah hanya untuk tombol? Tentu tidak. Seluruh objek GUI (QWidget) seperti QComboBox akan diperlakukan sama seperti tombol. Maka jadi makin praktislah memrogram GUI dengan layout di Qt. Pasti lebih praktis.

Ke Mana Arah Tulisan Ini?

Kita akan latihan saja kali ini. Pokoknya kita akan:

1. memilih dan membuat layout
2. memasang tombol ke dalam layout
3. melihat hasilnya secara normal dan maximized
4. memodifikasi ukuran-ukuran yang tersedia pada layout
5. menggabung 3 jenis layout dalam 1 jendela

Satu :: Menggunakan Layout Horizontal

Ini dilakukan dengan kelas QHBoxLayout. Kita akan membuat program seperti gambar pertama di atas.

mainwindow.cpp

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

Dialog::Dialog()
{
    QHBoxLayout *layoututama       =       new     QHBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setFixedSize(55,55);
    tomboldua->setFixedSize(55,55);
    tomboltiga->setFixedSize(55,55);
    tombolempat->setFixedSize(55,55);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);

}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog();

private:

};

#endif // MAINWINDOW_H

Qt Creator dalam Kode

Hasil Layout Horizontal

Maximized

Perhatikan, tombol-tombol itu jadi renggang dan otomatis centered ketika jendela maximized. Ini sifat QHBoxLayout yang pertama.

Dua :: Menggunakan Layout Vertikal

Ini dilakukan dengan kelas QVBoxLayout. Kita akan membuat program seperti gambar dua.

mainwindow.cpp

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

Dialog::Dialog()
{
    QVBoxLayout *layoututama       =       new     QVBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setFixedSize(55,55);
    tomboldua->setFixedSize(55,55);
    tomboltiga->setFixedSize(55,55);
    tombolempat->setFixedSize(55,55);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);

}

mainwindow.h

Sama dengan yang horizontal.

Qt Creator dalam Kode

Sama saja dengan yang horizontal, bedanya cuma pemakaian QVBoxLayout di sini.

Hasil Layout Vertikal

Maximized

Perhatikan, tombol-tombol itu jadi renggang, centered on Y axis, dan align left ketika jendela maximized. Align left ini ciri dari QVBoxLayout yang default.

Tiga :: Menggunakan Grid Layout

Grid Layout di Qt Framework adalah jalan kebebasan yang sangat praktis untuk membangun GUI yang semau gue. Ini jenis layout paling fleksibel yang dapat Anda pergunakan untuk aplikasi yang kompleks. Ini dilakukan dengan menggunakan kelas QGridLayout. Kita akan buat seperti gambar ini:

mainwindow.cpp

Sama saja dengan di atas, hanya ganti QVBoxLayout dengan QGridLayout.

mainwindow.h

Sama juga dengan header sebelumnya.

Hasil Grid Layout

Sekilas mirip QVBoxLayout karena default sudah vertikal. Ini belum kelihatan manfaat aslinya  QGridLayout.

Maximize

Perhatikan, sekilas memang mirip QVBoxLayout walau sudah maximized. Bedanya, ia di center in Y dan center in X. Sedangkan QVBoxLayout default-nya cuma center in X.

Modifikasi Terhadap QHBoxLayout, QVBoxLayout, dan QGridLayout

Sampai saatnya bagian terpenting yakni modifikasi. Ini tujuannya untuk mengetahui sifat-sifat dari kelas layout yang bersangkutan. Jika tidak dimodifikasi, kita tahunya hanya begitu doang QHBoxLayout, QVBoxLayout, dan QGridLayout. Padahal ada seabreg kemampuan dari layout tersebut yang bisa jadi sangat kita perlukan tapi kita tidak tahu.

QHBoxLayout

Sifatnya memanjang ke samping secara simetris kalau di-maximize, tidak memanjang ke atas

//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    QHBoxLayout *layoututama       =       new     QHBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setMinimumSize(55,55);
    tomboldua->setMinimumSize(55,55);
    tomboltiga->setMinimumSize(55,55);
    tombolempat->setMinimumSize(55,55);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);
}

Sifatnya memanjang ke samping dan ke atas simetris kalau di-maximize, mirip bagian modem di Otodidak

//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    QHBoxLayout *layoututama       =       new     QHBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setMinimumSize(55,55);
    tomboldua->setMinimumSize(55,55);
    tomboltiga->setMinimumSize(55,55);
    tombolempat->setMinimumSize(55,55);

    tombolsatu->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tomboldua->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tomboltiga->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolempat->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);
}

Penjelasan Kode QHBoxLayout

1. Saya ganti fungsi setFixedSize dengan setMinimumSize sehingga ketika jendela di-maximize, si tombol ikut membesar mengikuti ukuran jendela.
2. Saya tambahkan fungsi setSizePolicy pada masing-masing tombol sehingga bisa expanding ke atas juga mengikuti besarnya ukuran jendela.

QVBoxLayout

Memanjang ke samping tetapi tidak ke atas sekaligus ketika di-maximize

 

//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    QVBoxLayout *layoututama       =       new     QVBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setMinimumSize(55,55);
    tomboldua->setMinimumSize(55,55);
    tomboltiga->setMinimumSize(55,55);
    tombolempat->setMinimumSize(55,55);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);
}

//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
    QVBoxLayout *layoututama       =       new     QVBoxLayout;
    QPushButton *tombolsatu        =       new     QPushButton("SATU");
    QPushButton *tomboldua         =       new     QPushButton("DUA");
    QPushButton *tomboltiga        =       new     QPushButton("TIGA");
    QPushButton *tombolempat       =       new     QPushButton("EMPAT");

    tombolsatu->setMinimumSize(55,55);
    tomboldua->setMinimumSize(55,55);
    tomboltiga->setMinimumSize(55,55);
    tombolempat->setMinimumSize(55,55);

    tombolsatu->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tomboldua->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tomboltiga->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolempat->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    layoututama->addWidget(tombolsatu);
    layoututama->addWidget(tomboldua);
    layoututama->addWidget(tomboltiga);
    layoututama->addWidget(tombolempat);

    setLayout(layoututama);
}

Penjelasan QVBoxLayout

1. Saya ganti fungsi setFixedSize dengan setMinimumSize sehingga ketika jendela di-maximize, si tombol ikut membesar mengikuti ukuran jendela.
2. Saya tambahkan fungsi setSizePolicy pada masing-masing tombol sehingga bisa expanding ke atas juga mengikuti besarnya ukuran jendela.

QGridLayout

Maximize

Perhatikan, inilah sisi kekuatan QGridLayout. Kita bisa mengatur tombol-tombol sehingga membentuk kolom dan baris. Perhatikan juga sifatnya kalau di-maximize.

Kode QGridLayout

</pre>
#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
 QGridLayout *layoututama = new QGridLayout;
 QPushButton *tombolsatu = new QPushButton("SATU");
 QPushButton *tomboldua = new QPushButton("DUA");
 QPushButton *tomboltiga = new QPushButton("TIGA");
 QPushButton *tombolempat = new QPushButton("EMPAT");
 QPushButton *tombollima = new QPushButton("LIMA");
 QPushButton *tombolenam = new QPushButton("ENAM");
 QPushButton *tomboltujuh = new QPushButton("TUJUH");
 QPushButton *tomboldelapan = new QPushButton("DELAPAN");

//ukuran tombol

tombolsatu->setFixedSize(55,55);
 tomboldua->setFixedSize(55,55);
 tomboltiga->setFixedSize(55,55);
 tombolempat->setFixedSize(55,55);

tombollima->setFixedSize(55,55);
 tombolenam->setFixedSize(55,55);
 tomboltujuh->setFixedSize(55,55);
 tomboldelapan->setFixedSize(55,55);

//mengatur peletakan di grid

layoututama->addWidget(tombolsatu);
 layoututama->addWidget(tomboldua);
 layoututama->addWidget(tomboltiga);
 layoututama->addWidget(tombolempat);

layoututama->addWidget(tombollima, 0, 1);
 layoututama->addWidget(tombolenam, 1, 1);
 layoututama->addWidget(tomboltujuh, 2, 1);
 layoututama->addWidget(tomboldelapan, 3, 1);

//pengaturan untuk penataan

layoututama->setAlignment(tombolsatu, Qt::AlignLeft);
 layoututama->setAlignment(tomboldua, Qt::AlignLeft);
 layoututama->setAlignment(tomboltiga, Qt::AlignLeft);
 layoututama->setAlignment(tombolempat, Qt::AlignLeft);

layoututama->setAlignment(tombollima, Qt::AlignLeft);
 layoututama->setAlignment(tombolenam, Qt::AlignLeft);
 layoututama->setAlignment(tomboltujuh, Qt::AlignLeft);
 layoututama->setAlignment(tomboldelapan, Qt::AlignLeft);

setLayout(layoututama);

}

Kode paling pentingnya: 

//mengatur peletakan di grid

layoututama->addWidget(tombolsatu);
 layoututama->addWidget(tomboldua);
 layoututama->addWidget(tomboltiga);
 layoututama->addWidget(tombolempat);

layoututama->addWidget(tombollima, 0, 1);
 layoututama->addWidget(tombolenam, 1, 1);
 layoututama->addWidget(tomboltujuh, 2, 1);
 layoututama->addWidget(tomboldelapan, 3, 1);

Qt Creator dalam Kode

Penjelasan Kode

Yang perlu diperhatikan, QGridLayout itu punya fungsi addWidget yang berbeda bentuk dari addWidget pada kelas-kelas yang lain. Mengapa bisa berbeda? Ya karena sifat QGridLayout itu sendiri yang membuat penataan tombol kita (nantinya tidak cuma tombol) bisa membentuk kolom-kolom dan baris-baris. Seperti ini bentuk khususnya:

Jadi, dengan QGridLayout, kita mengatur objek-objek GUI kita (tombol) berdasarkan kolom dan baris. Bisa dikata, posisi x dan y. Oleh karena itu, kode saya di atas yang berbunyi:

    layoututama->addWidget(tombollima, 0, 1);
    layoututama->addWidget(tombolenam, 1, 1);
    layoututama->addWidget(tomboltujuh, 2, 1);
    layoututama->addWidget(tomboldelapan, 3, 1);

maksudnya:

1. letakkanlah objek tombollima pada baris ke-0 kolom ke-1
2. letakkan objek tombolenam, pada baris ke-1 kolom ke-1, dan seterusnya.

Rangkuman

1. QGridLayout adalah layout paling fleksibel yang bisa kita gunakan untuk membuat antarmuka sebebas mungkin.
2. Untuk membuat tombol bisa membesar mengikuti ukuran jendela, bisa digunakan setSizePolicy dengan parameter QSizePolicy::Expanding pada kedua tempatnya.

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

Bismillahirrahmanirrahim.

Saya sebenarnya lebih suka cara drag and drop akan tetapi karena sudah kesulitan, maka cara terakhir adalah hard coding. Hard coding (begitu orang menyebutnya) adalah membuat aplikasi GUI tidak dengan drag and drop melainkan menulis kodenya semua dari nol. Kedengarannya mengerikan tetapi nyatanya tidak. Saya ingin mendemonstrasikan sedikit contoh hard coding (walaupun sebetulnya ini belum masuk hard level) untuk membuat satu dialog, di atasnya diberi layout, lalu di atas layout itu diberi tombol. Tetap kita lakukan ini dengan Qt Creator, dengan bahasa C++, dan di atas Ubuntu. Semoga ini bermanfaat.

Wujud Program yang Ingin Dibuat

Alur Kode

Saya nggak berani bilang ini algoritma. Namun inilah alur pikir sederhana dari program ini.

1. Membuat sebuah dialog (QDialog).
2. Mengisi dialog itu dengan groupbox (QGroupBox).
3. Mengisi groupbox dengan layout (QHBoxLayout).
4. Membuat tombol (QPushButton).
5. Memasukkan tombol itu ke dalam layout.
6. Otomatis, jika ada widget (entah button entah apa) masuk ke dalam layout, yang layout itu sendiri ada dalam groupbox, dan si groupbox ada di dalam Dialog, maka sempurnalah tampilan Dialog dengan tombol.

Urut-urutan di atas harus dipenuhi dalam hard coding di Qt karena jika tidak, maka hanya muncul jendela saja tanpa ada isinya. Atau malah hanya muncul pesan galat. Memang terlihat mbulet tetapi saja janji insya Allah akan mudah dengan penjelasan.

Kode Pembuatan Widget Qt (QPushButton, QHBoxLayout, QGroupBox)

Sebelum saya beberkan kodenya secara keseluruhan, saya tunjukkan dulu bagaimana hard coding untuk tombol, groupbox, dan layout agar Anda merasa juga bahwa sama sekali ini tidak hard.

Kode untuk Membuat Tombol (PushButton)

QPushButton *tombol = new QPushButton("PULAU BUTON");

Mudah dipahami. Maksudnya adalah membuat objek bernama tombol (dengan sifat pointer karena pakai *), yang diturunkan dari kelas QPushButton, dengan teks PULAU BUTON. Bisa saja tidak memakaikan sifat pointer (tanda *), tetapi nanti objek tombol tidak bisa menunjuk (tanda -> kepada fungsi). Ingat, nama kelas untuk tombol adalah QPushButton bukan QButton. Ingat, C++ adalah bahasa pemrograman yang berbasis objek. Jadi, sedikit-sedikit kita akan bertemu dengan objek. Oh iya, nama objek di sini bebas Anda ubah.

Kode untuk Membuat GroupBox

QGroupBox *groupbox = new QGroupBox(tr("Horizontal Layout"));

Maksudnya adalah membuat objek bernama groupbox dari kelas QGroupBox, dengan teks judul Horizontal Layout. Buat apa sih, groupbox? Ini berguna untuk mengelompokkan layout agar dalam satu dialog/jendela, bisa ada lebih dari satu layout. Latar belakang saya memakai groupbox ini akan dijelaskan di bawah. Sekali lagi, nama objek boleh Anda tentukan sendiri.

Kode untuk Membuat Layout

QHBoxLayout *layout = new QHBoxLayout;

Maksudnya, membuat objek layout berbasis BoxLayout yang bertipe horizontal, yang bernama layout. Buat apa layout itu? Oke, gunanya besar sekali untuk mengatur secara otomatis item-item GUI yang kita buat baik tombol atau lainnya. Sebagai informasi, layout dalam Qt itu sangatlah banyak jenisnya. Hanya saja, saya di sini pilih salah satunya saja yakni BoxLayout yang tipenya horizontal. Sekali lagi, Anda bebas mengganti nama objek. Cukup jelas, bahwa sampai layout pun dianggap objek dengan C++.

Kode Program

Saatnya membeberkan seluruh kode yang saya miliki. Selayang pandang, ada 5 berkas saja yang digunakan dalam program ini yakni:

1. main.cpp
2. mainwindow.cpp
3. mainwindow.h
4. mainwindow.ui
5. DialogPertama.pro

Yang akang Anda utak-atik hanyalah mainwindow.cpp dan sedikit di mainwindow.h. Fokus hanya di dua berkas ini. Ah, jangan bingung dengan nama DialogPertama.pro. Kalau Anda buat proyek Qt baru dengan nama BotolMizone maka namanya jadi BotolMizone.pro. Berkas pro ini adalah konfigurasi proyek Qt kita. Otomatis diciptakan oleh Qt Creator. Kebetulan saja saya menamainya DialogPertama.

main.cpp

#include <QtGui/QApplication>
#include "mainwindow.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog w;
    w.show();

    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QDialog>
#include <QGroupBox>
#include <QPushButton>

class QGroupBox;
class QPushButton;

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog();

private:
    void createHorizontalGroupBox();

    QGroupBox *horizontalGroupBox;
    QPushButton *tombol;
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include <QtGui>
#include "mainwindow.h"
#include "ui_mainwindow.h"

Dialog::Dialog()
{
createHorizontalGroupBox();
QVBoxLayout *mainLayout = new QVBoxLayout;
mainLayout->addWidget(horizontalGroupBox);
setLayout(mainLayout);
}

void Dialog::createHorizontalGroupBox()
{
horizontalGroupBox = new QGroupBox(tr("Ini Horizontal Layout"));
QHBoxLayout *layout = new QHBoxLayout;
QPushButton *tombol = new QPushButton("PULAU BUTON");
QPushButton *timbil = new QPushButton("PULAU SERAM");
QPushButton *tambal = new QPushButton("PULAU ANGKER");
layout->addWidget(tombol);
layout->addWidget(timbil);
layout->addWidget(tambal);
horizontalGroupBox->setLayout(layout);
}

mainwindow.ui

Abaikan isinya karena tidak dipakai.

DialogPertama.pro

Abaikan isinya karena tidak dipakai.

Hasil

Penjelasan Kode

Di dalam main.cpp, kode yang perlu diperhatikan hanya 2 baris yakni

Dialog w;
w.show();

Maksudnya adalah membuat objek bernama w dari kelas Dialog. Kelas Dialog ini dijelaskan di dalam mainwindow.h. Inilah pemrograman C++, beberapa berkas pemrograman saling terkait dan saling memanggil. Maka, Anda akan temukan di bagian atas main.cpp ada #include “mainwindow.h”.

Di dalam mainwindow.h, kode yang perlu diperhatikan adalah

class Dialog : public QDialog

karena kita memakai Dialog menggantikan MainWindow. Kalau Anda baru membuat proyek baru, pasti kode di dalam mainwindow.h isinya adalah deklarasi kelas MainWindow. Di sini kita menggantinya dengan Dialog.

public:
    Dialog();

karena Dialog ini dipakai di main.cpp untuk membuat objek bernama w.

private:
    void createHorizontalGroupBox();

    QGroupBox *horizontalGroupBox;
    QPushButton *tombol;

karena fungsi createHorizontalGroupBox() dipakai di mainwindow.cpp (sedangkan mainwindow.cpp memanggil mainwindow.h ini), horizontalGroupBox adalah objek yang dibuat dari kelas QGroupBox yang objek ini dipakai di mainwindow.cpp, dan objek tombol yang dibuat dari kelas QPushButton yang objek ini juga dipakai di mainwindow.cpp.

#include <QDialog>
#include <QGroupBox>
#include <QPushButton>

karena di dalam mainwindow.h dipakailah tiga kelas ini yakni QDialog, QGroupBox, dan QPushButton. Enaknya mendeklarasikan ini di atas pada mainwindow.h adalah jika mainwindow.cpp memanggil objek QDialog, maka tidak usah dideklarasikan. Cukup deklarasikan #include “mainwindow.h” dalam mainwindow.cpp karena header inilah yang bertugas memanggil ketiga pustaka tersebut.

Di dalam mainwindow.cpp, kode yang perlu diperhatikan hanya dua blok yakni:

//BLOK PERTAMA
Dialog::Dialog()
{
createHorizontalGroupBox();
QVBoxLayout *mainLayout = new QVBoxLayout;
mainLayout->;addWidget(horizontalGroupBox);
setLayout(mainLayout);
}

karena berkas .cpp yang satu ini adalah inti pemrograman kita. Semua kode sebelumnya hanyalah pelengkap, sebetulnya. Blok pertama ini tujuannya memberikan pada dialog, sebuah layout BoxLayout bertipe vertikal. Layout ini, objeknya diberi nama mainLayout. Mengapa? Karena layout kedua nanti akan diletakkan di atas layout pertama ini.

Hal penting lainnya adalah mekanisme pemasukan objek ke dalam layout dan pemasukan layout ke dalam Dialog. Pertama-tama kita harus menciptakan objek layout entah apa tipenya (kalau dalam kode ini QVBoxLayout). Kedua, kita point (->) objek tadi kepada method/fungsi bernama addWidget, dengan memasukkan objek layout kedua ke dalam passing parameter-nya (simpel, passing parameter itu isi dari () setelah kata addWidget). Ingat, method addWidget ini akan sangat sering dipakai dalam hard coding GUI karena memang pembuatan GUI di Qt ini isinya bikin objek lalu tempelkan (addWidget), bikin objek lagi tempelkan (addWidget) lagi, dan begitu terus. Ketiga, kita tempelkan (setLayout) layout yang sudah berisi objek-objek tadi ke dalam parent object (dalam blok ini, Dialog). Jadi, mekanismenya adalah nanti tombol masuk ke groupbox, groupbox masuk ke layout ini, dan layout ini masuk ke Dialog maka muncullah tampilan.

//BLOK KEDUA
void Dialog::createHorizontalGroupBox()
{
horizontalGroupBox = new QGroupBox(tr("Ini Horizontal Layout"));
QHBoxLayout *layout = new QHBoxLayout;
QPushButton *tombol = new QPushButton("PULAU BUTON");
QPushButton *timbil = new QPushButton("PULAU SERAM");
QPushButton *tambal = new QPushButton("PULAU ANGKER");
layout->addWidget(tombol);
layout->addWidget(timbil);
layout->addWidget(tambal);
horizontalGroupBox->setLayout(layout);
}

lihat, mudah sekali. Kode pada blok kedua inilah yang paling penting dalam pemrograman kali ini. Sebetulnya, andai bisa membuat objek tanpa deklarasi header, maka semua kode yang sebelumnya tidak dibutuhkan. Lihat, di sini terjadi pembuatan objek, lalu penempelan objek ke dalam layout, lalu menempelkan layout ke dalam groupbox. Cuma itu yang dilakukan dengan hard coding GUI di Qt kita kali ini.

Bisa dipahami dari kode ini, pembuatan GUI dengan hard coding ini dilakukan dengan cara membuat objek lalu menempelkan (addWidget) objek tersebut ke dalam layout lalu memasukkan layout tadi ke dalam groupbox (kalau pakai groupbox).

Unduh Source Code Proyek Qt Ini

Ukuran: 4 KB
Tautan: http://otodidak.freeserver.me/tarball/DialogPertama.zip