Pemrograman Qt 22 – QSplitter


Bismillahirrahmanirrahim.

Setelah lama (6 bulan lebih) tidak menulis Qt, saya mulai kembali serial pemrograman ini dengan QSplitter. Tulisan ini sangat pendek dengan hanya membahas bagaimana fungsi split di dalam jendela. Split yang dimaksud adalah pembelahan horizontal atau vertikal suatu jendela, dengan kemampuan menggeser konten jendela sehingga salah satunya lebih luas dari yang lain. Anda menemukan ini di hampir semua aplikasi GUI. Contoh paling mudah adalah ketika Anda memakai Dolphin (ia dibuat dari Qt juga) dan bisa menggeser panel kiri ke arah kanan dengan drag pada bagian titik tiga vertikal di perbatasan panel kiri dengan panel tengah. Kursor Anda otomatis berubah menjadi <|> setiap hover di titik tiga itu. Anda juga melihatnya di Dolphin untuk Konsole bagian bawah dengan titik tiga horizontal yang bisa digeser (diperluas) secara vertikal. Itulah QSplitter. Anda akan membuatnya kali ini.

Spesifikasi

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

Daftar Kelas

  • 5 QSplitter
  • 4 QWidget
  • 3 QVBoxLayout
  • 1 QHBoxLayout
  • 4 QPushButton

Daftar Method

  1. SetOrientation
  2. addWidget

Arah Tulisan Ini

Anda belajar membuat splitter horizontal dan vertikal dalam GUI macam ini.

ngite-qsplitter

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);

    QSplitter *qsuper, *qatas, *qbawah, *qkiri, *qkanan;
    QWidget   *wkanan, *wkiri, *wbawah; // masalah konten
    QVBoxLayout *lkanan, *lkiri;        // konten
    QHBoxLayout *lhorizontal;           // konten
    QPushButton *takiri, *takanan, *bakiri, *bakanan; // konten

    QWidget   *wterbesar;       // kontainer
    QVBoxLayout *lterbesar;     // kontainer

    ~MainWindow();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

mainwindow.cpp

// program demonstrasi qsplitter untuk membagi area jendela
// Thursday, July 02, 2015 10:59 AM
// lisensi gnu gpl v2
#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{

    // 1. bagian konstruksi bahan-bahan dasar

    QSplitter *qsuper = new QSplitter;
    QSplitter *qatas = new QSplitter;
    QSplitter *qbawah = new QSplitter;
    QSplitter *qkiri = new QSplitter;
    QSplitter *qkanan = new QSplitter;

    QWidget *wkanan = new QWidget;
    QWidget *wkiri = new QWidget;
    QWidget *wbawah = new QWidget;

    QVBoxLayout *lkanan = new QVBoxLayout;
    QVBoxLayout *lkiri = new QVBoxLayout;
    QHBoxLayout *lhorizontal = new QHBoxLayout;

    QPushButton *takiri = new QPushButton("TOMBOL ATAS KIRI");
    QPushButton *takanan = new QPushButton("TOMBOL ATAS KANAN");
    QPushButton *bakiri = new QPushButton("TOMBOL BAWAH KIRI");
    QPushButton *bakanan = new QPushButton("TOMBOL BAWAH KANAN");

    QWidget *wterbesar = new QWidget;
    QVBoxLayout *lterbesar = new QVBoxLayout;

    // 1.1 bagian konstruksi qpushbutton

    takiri->setMinimumSize(30,30);
    takiri->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    takanan->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    bakiri->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    bakanan->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    // 2. bagian konstruksi layer paling atas

    lkiri->addWidget(takiri);               // pemasangan widget atas kiri
    wkiri->setLayout(lkiri);                // pemasangan ke qsplitter ada di qkiri->addWidget(wkiri);

    lkanan->addWidget(takanan);             // pemasangan widget atas kanan
    wkanan->setLayout(lkanan);              // pemasangan ke qsplitter ada di qkanan->addWidget(wkanan);

    lhorizontal->addWidget(bakiri);         // pemasangan widget bawah
    lhorizontal->addWidget(bakanan);
    wbawah->setLayout(lhorizontal);         // pemasangan ke qsplitter ada di qbawah->addWidget(wbawah);

    /* ALGORITMA PEMASANGAN QSPLITTER

      1. qsplitter_super -> setOrientation
      2. qsplitter_super -> addWidget ( qsplitter_anak1 )
      3. qsplitter_super -> addWidget ( qsplitter_anak2 )
      4. qsplitter_anak1 -> addWidget ( widget_anak1 )
      5. qsplitter_anak2 -> addWidget ( widget_anak2 )
      6. qlayout         -> addWidget ( qsplitter_super )

      ditemukan pada Monday, February 02, 2015 08:39 PM
      intinya ada pada nomor 4 dan 5

    */

    // 3. bagian konstruksi layer paling dalam

    qsuper->setOrientation(Qt::Vertical);   // terluar
    qsuper->addWidget(qatas);
    qsuper->addWidget(qbawah);

    qatas->addWidget(qkiri);        // qatas menjadi super
    qatas->addWidget(qkanan);       // ini bagian dalam

    qkiri->addWidget(wkiri);        // 3 splitter utama diisi widget
    qkanan->addWidget(wkanan);
    qbawah->addWidget(wbawah);

    lterbesar->addWidget(qsuper);           // pemasangan fondasi ke tanah
    wterbesar->setLayout(lterbesar);
    this->setCentralWidget(wterbesar);      // bagian paling akhir

}

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

Qt Creator dan Kode

ngite-keduapuluhdua

Hasil

Analisis

Yang terpenting dalam pembuatan GUI dengan QSplitter adalah urutan langkahnya.

1. qsplitter_super -> setOrientation
2. qsplitter_super -> addWidget ( qsplitter_anak1 )
3. qsplitter_super -> addWidget ( qsplitter_anak2 )
4. qsplitter_anak1 -> addWidget ( widget_anak1 )
5. qsplitter_anak2 -> addWidget ( widget_anak2 )
6. qlayout -> addWidget ( qsplitter_super )

Di atas itu urutan langkah kode QSplitter untuk membelah jendela jadi dua bagian. Itu yang paling dasarnya. Inti QSplitter adalah mengelompokkan komponen GUI. Ada dua objek QSplitter yang dibuat yakni induknya (super) dan anaknya (anak1 dan anak2). Anak QSplitter ini yang menampung komponen yang dikelompokkan. Komponen dalam anak1 sendiri dan anak2 sendiri memiliki area masing-masing. Sehingga, pergeseran dengan klik nantinya akan diproses oleh anak-anak ini sebagai pergeseran ukuran area. Untuk pembelahan yang lebih kompleks, silakan kembangkan urutan langkah di atas.

Unduh Kode Sumber

Program kali ini bernama Kuarsa. Silakan unduh dan jalankan di Qt Creator Anda.

2 thoughts on “Pemrograman Qt 22 – QSplitter

Dilarang menggunakan emotikon

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s