Bismillahirrahmanirrahim.

Bagaimana membuat suatu program yang memiliki banyak jendela? Jika satu tombol diklik, jendela lain terbuka. Pertanyaan ini adalah pertanyaan paling mendasar ketika saya membuat Otodidak versi 1 kemarin. Sekarang saya sudah membuat satu program kecil dengan kemampuan multiple window. Mungkin cara ini bukan yang paling efektif, tetapi setidaknya ini bisa dicoba. Pada dasarnya, teknik multiple window di sini hanyalah menempatkan deklarasi-deklarasi QMainWindow baru di dalam sebuah fungsi lalu memanggil fungsi tersebut dengan SIGNAL & SLOT. Semoga tulisan ini bermanfaat.

Spesifikasi

1. Ubuntu 12.04
2. Qt Creator 2.4.1
3. Qt 4.8

Daftar Kelas

1. QMainWindow

Daftar Method

1. close()
2. show()
3. BukaJendelaBaru() (buatan sendiri)
4. stackSatu() (buatan sendiri)
5. stackDua() (buatan sendiri)
6. BukaJendelaMainWindow() (buatan sendiri)

Arah Tulisan Ini

Kita akan membuat jendela utama Otodidak, mirip seperti versi pertamanya. Tentu saja ini hanya sebatas prototipe, bukan proyek sungguhannya. Hanya tombol MP3 yang diberi fungsi, sedangkan tombol lain cuma hiasan. Fungsi yang diberikan adalah pembuka jendela baru yang sekaligus menutup (close) jendela utama.

Setelah jendela kedua terbuka, seharusnya jendela utama tertutup. Jika tombol LAYER A diklik, maka jendela kedua ditutup dan jendela utama ditayangkan kembali. Demikianlah prinsip multiple window sederhana dari Otodidak versi 1.

Bonusnya adalah layering yakni kemampuan jendela untuk memiliki lebih dari 1 layer layout dengan memanfaatkan QStackedLayout. Jika tombol A ditekan, maka layer pertama yang ditampilkan. Jika tombol B ditekan, maka layer kedua yang ditampilkan sambil menyembunyikan layer A. Prinsip ini serupa dengan pergantian tampilan GUI pada KDE System Settings, installer aplikasi-aplikasi di Windows (yang prinsipnya next-next-next itu), dan tentu saja layering di dalam aplikasi pengolah gambar. Anda tidak difokuskan dalam implementasi prinsip ini saat ini.

Kode

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QtGui>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);       // ini adalah konstruktor dari kelas MainWindow yang dipasangi prefiks explicit
                                                    // sumber http://stackoverflow.com/questions/121162/what-does-the-explicit-keyword-in-c-mean
                                                    // pemahaman untuk konstruktor dasar bisa dibaca di http://www.tutorialspoint.com/cplusplus/cpp_constructor_destructor.htm
                                                    // Thursday, August 21, 2014 10:33 AM

    QWidget         *widgetUtama;
    QVBoxLayout     *vboxUtama;
    QHBoxLayout     *hboxUtama;
    QToolButton     *tombolUbuntu;
    QToolButton     *tombolMP3;
    QToolButton     *tombolAplikasi;
    QToolButton     *tombolSimulatorTerminal;
    QStackedLayout  *slSatu;

    ~MainWindow();

private:
    Ui::MainWindow *ui;
    QMainWindow *jendelaKedua;

public slots:
    void BukaJendelaBaru();
    void BukaJendelaMainWindow();
    void MatikanMainWindow();
    void stackSatu();
    void stackDua();

};

#endif // MAINWINDOW_H

mainwindow.cpp

// Proyek Sebelum Proyek Otodidak
// Dibuat pada malam Id pada Sunday, July 27, 2014 10:21 PM
// Ade Malsasa Akbar <teknoloid@gmail.com> <https://malsasa.wordpress.com> <#ubuntu-indonesia@freenode>

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

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    QWidget     *widgetUtama                   =       new     QWidget;
    QLabel      *labelJudulOtodidak            =       new     QLabel("Otodidak Versi 2");
    QVBoxLayout *vboxUtama                     =       new     QVBoxLayout;
    QHBoxLayout *hboxUtama                     =       new     QHBoxLayout;
    QToolButton *tombolUbuntu                  =       new     QToolButton;
    QToolButton *tombolMP3                     =       new     QToolButton;
    QToolButton *tombolAplikasi                =       new     QToolButton;
    QToolButton *tombolSimulatorTerminal       =       new     QToolButton;
    QFont        ubuntu("Ubuntu", 20, QFont::Bold, false);                       // objek khusus untuk fonta label judul Tuesday, August 19, 2014 10:29 PM

    // objek khusus untuk ikon jendela PraOtodidak Tuesday, August 19, 2014 10:56 PM
    QIcon        logootodidak(":/gambar/logootodidak");         // ternyata memang harus PNG

    // pengaturan kemampuan mekar setiap tombol (Sunday, July 27, 2014 10:57 PM)
    tombolUbuntu->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolMP3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolAplikasi->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolSimulatorTerminal->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    // pengaturan ukuran minimum maksimum tombol
    //      pengaturan ukuran minimal tombol
    tombolUbuntu->setMinimumSize(99,99);
    tombolMP3->setMinimumSize(99,99);
    tombolAplikasi->setMinimumSize(99,99);
    tombolSimulatorTerminal->setMinimumSize(99,99);

    //      pengaturan ukuran maksimum tombol Tuesday, August 19, 2014 09:04 PM
    tombolUbuntu->setMaximumSize(150, 150);
    tombolMP3->setMaximumSize(150, 150);
    tombolAplikasi->setMaximumSize(150, 150);
    tombolSimulatorTerminal->setMaximumSize(150, 150);

    // pengaturan objek ikon untuk setiap tombol (Sunday, July 27, 2014 10:57 PM)
    QIcon       ikonTombolUbuntu(":/gambar/ubuntu-logo.svg");                   // semuanya svg
    QIcon       ikonTombolMP3(":/gambar/rhythmbox.svg");
    QIcon       ikonTombolAplikasi(":/gambar/synaptic.svg");
    QIcon       ikonTombolSimulatorTerminal(":/gambar/terminal.svg");

    // pengaturan gaya tombol yakni teks di bawah gambar (Sunday, July 27, 2014 10:57 PM)
    tombolUbuntu->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    tombolMP3->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    tombolAplikasi->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
    tombolSimulatorTerminal->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

    // pengaturan ukuran ikon tombol dengan bantuan kelas QSize (Sunday, July 27, 2014 11:06 PM)
    QSize ukuranIkonTombol(48, 48);
    tombolUbuntu->setIconSize(ukuranIkonTombol);
    tombolMP3->setIconSize(ukuranIkonTombol);
    tombolAplikasi->setIconSize(ukuranIkonTombol);
    tombolSimulatorTerminal->setIconSize(ukuranIkonTombol);

    // penempelan ikon ke dalam setiap tombol (Sunday, July 27, 2014 10:57 PM)
    tombolUbuntu->setIcon(ikonTombolUbuntu);
    tombolMP3->setIcon(ikonTombolMP3);
    tombolAplikasi->setIcon(ikonTombolAplikasi);
    tombolSimulatorTerminal->setIcon(ikonTombolSimulatorTerminal);

    // penulisan teks ke dalam setiap tombol (Sunday, July 27, 2014 10:57 PM)
    tombolUbuntu->setText("UBUNTU");
    tombolAplikasi->setText("APLIKASI");
    tombolMP3->setText("MP3");
    tombolSimulatorTerminal->setText("SIMULATOR \nTERMINAL");

    // penempelan widget-widget ke dalam layout (Sunday, July 27, 2014 10:57 PM)
    // horizontal
    hboxUtama->addWidget(tombolUbuntu);
    hboxUtama->addWidget(tombolMP3);
    hboxUtama->addWidget(tombolAplikasi);
    hboxUtama->addWidget(tombolSimulatorTerminal);

    // styling QLabel
    labelJudulOtodidak->setAlignment(Qt::AlignCenter);
    labelJudulOtodidak->setStyleSheet("QLabel { background-color : black; color : white; }");
    labelJudulOtodidak->setFont(ubuntu);
    labelJudulOtodidak->setMinimumHeight(30);

    // vboxlayout diisi dengan QLabel dan QHBoxLayout
    vboxUtama->addWidget(labelJudulOtodidak);
    vboxUtama->addLayout(hboxUtama);

    // penempelan layout pada widget utama (Sunday, July 27, 2014 10:57 PM)
    widgetUtama->setLayout(vboxUtama);

    // penempelan widget utama pada jendela utama, ditempel sebagai central widget (Sunday, July 27, 2014 10:57 PM)
    this->setCentralWidget(widgetUtama);

    //tes signal slot untuk membuka jendela baru, dibuat pada Sunday, August 17, 2014 05:21 PM
    connect(tombolMP3, SIGNAL(clicked()), this, SLOT(BukaJendelaBaru()));

    // pemasangan ikon Otodidak untuk jendela Tuesday, August 19, 2014 10:56 PM
    this->setWindowIcon(logootodidak);

}

MainWindow::~MainWindow()
{
    delete ui;
}

// ini fungsi pembunuh jendela utama yang akan dipagnggil di dalam fungsi BukaJendelaBaru di bawah
// dikomentari pada Tuesday, August 19, 2014 10:44 PM
void MainWindow::MatikanMainWindow()
{
    // kalau mau beraksi seperti Otodidak versi 1*), fungsi yang dipakai bukan destroy tetapi close
    // ternyata tidak ada perubahan
    // dikomentari pada Sunday, August 17, 2014 05:30 PM
    // *) https://malsasa.wordpress.com/2013/02/24/otodidak-versi-1-dirilis/
    this->close();
}

// ===================FUNGSI KEDUA================== //
// fungsi khusus pembuat jendela kedua
// dikomentari pada Monday, August 18, 2014 08:21 PM
void MainWindow::BukaJendelaBaru()
{
    // deklarasi pembuatan objek jendela baru
    jendelaKedua = new QMainWindow;

    QPushButton *tombolA      = new QPushButton("INI ADALAH AKU");
    QPushButton *tombolB      = new QPushButton("INI ADALAH DIA");
    QVBoxLayout *layoutLayerA = new QVBoxLayout;
    QVBoxLayout *layoutLayerB = new QVBoxLayout;
    QPushButton *tombolLayerA = new QPushButton("LAYER A");
    QPushButton *tombolLayerB = new QPushButton("LAYER B");
    QWidget     *widgetA      = new QWidget;
    QWidget     *widgetB      = new QWidget;
    QWidget     *widgetC      = new QWidget;

    // pengaturan ukuran tombol untuk jendela kedua
    // Monday, August 18, 2014 08:22 PM
    tombolA->setMinimumSize(66,55);
    tombolB->setMinimumSize(66,55);

    // tombol di dalam layer-layer dibuat lebih besar daripada tombol penggesernya
    // dikomentari pada Monday, August 18, 2014 08:23 PM
    tombolLayerA->setMinimumSize(166,155);
    tombolLayerB->setMinimumSize(166,155);

    // percobaan QStackedLayout
    slSatu    = new QStackedLayout;

    widgetA->setLayout(layoutLayerA);
    widgetB->setLayout(layoutLayerB);

    layoutLayerA->addWidget(tombolLayerA);
    layoutLayerB->addWidget(tombolLayerB);

    // urusi widget Monday, August 18, 2014 12:52 AM
    slSatu->addWidget(widgetA);
    slSatu->addWidget(widgetB);

    // pembuatan layout dasar untuk menampung stacked layout dan widget lainnya
    // dikomentari pada Monday, August 18, 2014 08:04 PM
    QVBoxLayout     *layoutA    =   new     QVBoxLayout;

    // pemasangan stacked layout ke dalam layout normal dilakukan dengan hanya addLayout() bukan dengan membuat QWidget baru
    // dengan cara ini, penghematan widget dan layout bisa dilakukan
    // sehingga bisa dilakukan di dalam suatu QVBoxLayout penambahan layout sekaligus penambahan widget tanpa banyak QWidget baru
    // Monday, August 18, 2014 08:03 PM
    layoutA->addLayout(slSatu);
    layoutA->addWidget(tombolA);
    layoutA->addWidget(tombolB);
    widgetC->setLayout(layoutA);

    jendelaKedua->setCentralWidget(widgetC);
    jendelaKedua->showNormal();

    // fungsi ini bertugas mematikan jendela utama
    MainWindow::MatikanMainWindow();

    // berhasil!
    // pergeseran layer bisa dilakukan dengan memasang slot satu fungsi tunggal
    // fungsi eksternal yang dibuat di luar fungsi pembuat jendela BukaJendelaBaru()
    // bukan dengan cara memanggil slSatu->setCurrentIndex(int nomor) sebagai argumen SLOT
    // Monday, August 18, 2014 08:00 PM
    connect(tombolA, SIGNAL(clicked()), this, SLOT(stackSatu()));
    connect(tombolB, SIGNAL(clicked()), this, SLOT(stackDua()));

    connect(tombolLayerA, SIGNAL(clicked()), this, SLOT(BukaJendelaMainWindow()));

}

// berhasil!
// untuk melakukan pergantian layer, harus dibuat fungsi penggeser layer terpisah dari fungsi pembuat jendela
// tidak dijadikan satu dalam fungsi pembuat jendela
// objek stack layout harus dideklarasikan dalam kelas yang sama dengan MainWindow utama, bukan dengan membuat kelas baru di mainwindow.h
// oleh karena itu, slSatu bisa dipanggil dari sini
// Monday, August 18, 2014 07:58 PM
void MainWindow::stackSatu()
{
    slSatu->setCurrentIndex(0);
}

void MainWindow::stackDua()
{
    slSatu->setCurrentIndex(1);
}

// fungsi pemanggil jendela utama sekaligus pembunuh jendela kedua
// Monday, August 18, 2014 08:15 PM
void MainWindow::BukaJendelaMainWindow()
{
    // fungsi sederhana untuk menayangkan jendela utama kembali setelah matinya
    // tidak usah berpikir susah MainWindow::? atau apalah
    // Monday, August 18, 2014 08:13 PM
    this->show();

    // fungsi pembunuh jendela kedua
    jendelaKedua->close();
}

Qt Creator dan Kode

Hasil

Analisis

Saya akan memberikan analisis untuk bagian yang terpenting saja. Bagian paling penting di sini adalah fungsi BukaJendelaBaru() dan MatikanMainWindow() kemudian fungsi BukaJendelaMainWindow(). Tujuan dari dua fungsi ini adalah membuka dan menutup kedua jendela, secara bergantian. Cara ini dipakai di Otodidak versi 1. Setelah fungsi pergantian jendela, hal yang penting lagi adalah fungsi pergantian layer di dalam jendela kedua, untuk mengganti tampilan satu jendela dari satu tampilan ke tampilan yang berbeda. Ini dilakukan dengan fungsi stackSatu() dan stackDua().

1. Fungsi BukaJendelaBaru() dan MatikanMainWindow()

Bagian terpenting di dalam fungsi BukaJendelaBaru() adalah 2 baris kode

jendelaKedua = new QMainWindow;

jendelaKedua->setCentralWidget(widgetC);

Intinya, fungsi BukaJendelaBaru() ini bertugas membuka jendela baru dan menutup jendela MainWindow. Maksud 2 baris kode di atas adalah membuat satu MainWindow baru bernama jendelaKedua lalu mengisinya dengan widgetC sebagai central widget. Sedangkan penutupan jendela MainWindow dilakukan oleh fungsi MainWindow::MatikanMainWindow();. Fungsi MatikanMainWindow() ini hanya berisi this->close() yang mirip sekali dengan Otodidak versi 1, this->dispose().

2. Fungsi BukaJendelaMainWindow()

Fungsi ini sebagaimana namanya, bertugas menghidupkan kembali jendela MainWindow setelah matinya. Bagian terpentingnya adalah sebaris kode

this->show();

Yang bertujuan menghidupkan kembali MainWindow yang mati. Sangat sederhana.Tentu, setelah MainWindow ditayangkan kembali, jendela kedua harus mati. Dan itu dilakukan dengan sebaris kode

jendelaKedua->close();

3. Fungsi stackSatu() dan stackDua()

Fungsi ini sebetulnya hanya pembawa fungsi setCurrentIndex() untuk objek QStackedLayout. Jika diubah parameter angkanya, maka layer di dalam QStackedLayout akan berubah juga. Persis layer di GIMP. Fungsi ini disambungkan dengan tombol-tombol milik jendelaKedua di dalam fungsi sebelumnya, yakni BukaJendelaBaru().

Pertama-tama, dibuat dulu SIGNAL and SLOT di dalam jendelaKedua.

connect(tombolA, SIGNAL(clicked()), this, SLOT(stackSatu()));

connect(tombolB, SIGNAL(clicked()), this, SLOT(stackDua()));

Kemudian, dibuatlah fungsi-fungsi lain di luar yang bernama stackSatu() dan stackDua().

void MainWindow::stackSatu()

{

slSatu->setCurrentIndex(0);

}

void MainWindow::stackDua()

{

slSatu->setCurrentIndex(1);

}

Kesimpulan

1. Pembuatan sistem ganti jendela bisa dilakukan dengan mendeklarasikan objek MainWindow baru di fungsi baru. Ini akan membuat satu jendela baru yang siap diisi widget.
2. Penutupan jendela dilakukan dengan this->close() bukan this->destroy().
3. Penayangan kembali jendela dilakukan dengan this->show().

Unduh Kode Sumber

• Alamat: http://otodidak.freeserver.me/tarball/PraOtodidak.tar.gz
• Ukuran: 100 KB