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.

Arah Tulisan Ini

Tutorial ini akan menunjukkan pembuatan satu jendela dengan satu layout utama (QVBoxLayout). Dipilih V karena sudah dirancang satu widget di atas (judul) dan satu widget di bawah (isi). Layout tersebut berisi 2 widget utama yang membentuk keseluruhan GUI. Satu widget untuk judul (QLabel), satu widget untuk tombol-tombol (QFrame). Satu layout utama itu berada pada QWidget yang dijadikan central widget oleh QMainWindow. Anda mungkin cukup familiar dengan tampilan aplikasi berikut ini.

ngite-kelimabelas

Isi dari frame adalah 5 tombol yang berjajar horizontal simetrikal. Di sini, yang berperan adalah QHBoxLayout yang dipasangkan pada QFrame. Dipilih H karena tombol-tombol harus berjajar ke samping bukan ke bawah. Setiap tombol memiliki ikon dan teks di bawah ikon.

Spesifikasi Sistem

  • Ubuntu 12.04
  • Qt Creator 2.4.1
  • Qt 4.8

Daftar Kelas

  1. QToolButton
  2. QFont
  3. QIcon
  4. QFrame
  5. QVBoxLayout
  6. QHBoxLayout

Daftar Method

  1. setStyleSheet() -> milik seluruh widget
  2. setFont() -> milik seluruh widget
  3. setToolButtonStyle() -> milik QToolButton
  4. setIconSize() -> milik QToolButton
  5. setText() -> milik QToolButton

Kode

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QtGui>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    QLabel      *labelJudul;

    QToolButton *tombolLinux;
    QToolButton *tombolModem;
    QToolButton *tombolAplikasi;
    QToolButton *tombolMP3;
    QToolButton *tombolSimulatorTerminal;

    QFrame      *frameJudul;
    QFrame      *frameIsi;

    QVBoxLayout *layoutUnderground;
    QHBoxLayout *layoutLabel;

    QGridLayout *layoutLamanUtama;
    QWidget     *widgetInduk;
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

mainwindow.cpp

//Embrio Otodidak versi 2
//Akan dibuat satu bagian demi satu bagian secara terpisah-pisah, dimulai dari WajahDepan
//Program ini mulai dikerjakan pada Tuesday, January 07, 2014
#include "mainwindow.h"
#include "ui_mainwindow.h"

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

    this->setGeometry(QRect(QPoint(333,333), QSize(711, 333)));

    QHBoxLayout *layoutLabel       = new QHBoxLayout;
    QVBoxLayout *layoutUnderground = new QVBoxLayout;
    QToolButton *tombolLinux       = new QToolButton;
    QToolButton *tombolModem       = new QToolButton;
    QToolButton *tombolAplikasi    = new QToolButton;
    QToolButton *tombolMP3         = new QToolButton;
    QToolButton *tombolSimulatorTerminal         = new QToolButton;
    QWidget     *widgetInduk       = new QWidget;
    QFrame      *frameIsi          = new QFrame;

    tombolLinux->setMinimumSize(130,130);
    tombolModem->setMinimumSize(130,130);
    tombolAplikasi->setMinimumSize(130,130);
    tombolMP3->setMinimumSize(130,130);
    tombolSimulatorTerminal->setMinimumSize(130,130);

    tombolLinux->setMaximumSize(130,130);
    tombolModem->setMaximumSize(130,130);
    tombolAplikasi->setMaximumSize(130,130);
    tombolMP3->setMaximumSize(130,130);
    tombolSimulatorTerminal->setMaximumSize(130,130);

    tombolLinux->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolModem->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolAplikasi->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolMP3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    tombolSimulatorTerminal->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    QFont fonte("Ubuntu", 9, QFont::Bold, false);
    QFont fonta("Ubuntu", 10, QFont::Bold, false);

    //ikon tombolLinux
    QIcon ikonTombolLinux(":/gambar/oo");
    tombolLinux->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);  //didapat pada Saturday, January 11, 2014 04:01 PM
    tombolLinux->setIcon(ikonTombolLinux);                         //sumber: http://stackoverflow.com/questions/1418578/qt-qToolbutton-icon-above-text
    tombolLinux->setIconSize(QSize(118,118));

    //ikon tombolModem
    QIcon ikonTombolModem(":/gambar/cb");
    tombolModem->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);  //didapat pada Saturday, January 11, 2014 04:01 PM
    tombolModem->setIcon(ikonTombolModem);                         //sumber: http://stackoverflow.com/questions/1418578/qt-qToolbutton-icon-above-text
    tombolModem->setIconSize(QSize(118,118));

    //ikon tombolAplikasi
    QIcon ikonTombolAplikasi(":/gambar/arch");
    tombolAplikasi->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);  //didapat pada Saturday, January 11, 2014 04:01 PM
    tombolAplikasi->setIcon(ikonTombolAplikasi);                         //sumber: http://stackoverflow.com/questions/1418578/qt-qToolbutton-icon-above-text
    tombolAplikasi->setIconSize(QSize(118,118));

    //ikon tombolMP3
    QIcon ikonTombolMP3(":/gambar/mp3");
    tombolMP3->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);  //didapat pada Saturday, January 11, 2014 04:01 PM
    tombolMP3->setIcon(ikonTombolMP3);                         //sumber: http://stackoverflow.com/questions/1418578/qt-qToolbutton-icon-above-text
    tombolMP3->setIconSize(QSize(118,118));

    //ikon tombolSimulatorTerminal
    QIcon ikonTombolSimulatorTerminal(":/gambar/sim");
    tombolSimulatorTerminal->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);  //didapat pada Saturday, January 11, 2014 04:01 PM
    tombolSimulatorTerminal->setIcon(ikonTombolSimulatorTerminal);                         //sumber: http://stackoverflow.com/questions/1418578/qt-qToolbutton-icon-above-text
    tombolSimulatorTerminal->setIconSize(QSize(118,118));

//    tombolLinux->setStyleSheet("QToolButton {"
//                               "font-size: 9pt;"
//                               "}");  //didapat pada Saturday, January 11, 2014 04:39 PM
//                                      //sumber stylesheet http://stackoverflow.com/questions/2990060/qt-qToolbutton-text-formatting
    tombolLinux->setFont(fonte);
    tombolLinux->setText("Ubuntu");

    tombolModem->setFont(fonte);
    tombolModem->setText("Modem");

    tombolAplikasi->setFont(fonte);
    tombolAplikasi->setText("Aplikasi");

    tombolMP3->setFont(fonte);
    tombolMP3->setText("MP3");

    tombolSimulatorTerminal->setFont(fonte);
    tombolSimulatorTerminal->setText("Simulator Terminal");

    layoutLabel->addWidget(tombolLinux);
    layoutLabel->addWidget(tombolModem);
    layoutLabel->addWidget(tombolAplikasi);
    layoutLabel->addWidget(tombolMP3);
    layoutLabel->addWidget(tombolSimulatorTerminal);

    frameIsi->setFrameStyle(QFrame::StyledPanel);
    frameIsi->setFrameShadow(QFrame::Raised);
    frameIsi->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    frameIsi->setLayout(layoutLabel);

    QLabel *labelJudul = new QLabel;
    labelJudul->setText("<h1>Selamat Datang di Otodidak</h1>");
    labelJudul->setMinimumSize(788,45);
    labelJudul->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
    labelJudul->setAlignment(Qt::AlignCenter);
    labelJudul->setStyleSheet("QLabel { background-color : black; color : white; }");
    judul->setFont(fonta);

    layoutUnderground->addWidget(labelJudul);
    layoutUnderground->addWidget(frameIsi);
//    layoutUnderground->setAlignment(judul, Qt::AlignTop);  //taruh atas
//    layoutUnderground->setAlignment(frameIsi, Qt::Align);
    layoutUnderground->setMargin(0);
    widgetInduk->setLayout(layoutUnderground);  //underground = V
    this->setCentralWidget(widgetInduk);

    QIcon otodidak(":/gambar/oto");
    this->setWindowIcon(otodidak);

    //KESIMPULAN
    //label kemudian frame harus ditentukan MinimumSize-nya masing-masing
    //tidak boleh ada yang tidak diisi
    //Friday, January 10, 2014

}

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

Qt Creator dan Kode

pemrograman qt

Hasil

Hasilnya seperti bagian Pemula di Otodidak versi 1. Perlu diperhatikan, ini hanyalah rancangan GUI semata, belum termasuk fungsi-fungsi tombol bahkan logo tombol pun sengaja dibuat tak sesuai namanya.

pemrograman qt

Pembahasan

Pembahasan program kali ini hanya berputar pada kelas QToolButton dan QFont, kemudian satu method istimewa yang menjadi bintangnya Qt yaitu setStyleSheet(). Bisa bayangkan bagaimana fleksibelnya GUI yang dibuat dengan Qt kalau diizinkan memakai CSS?

1. QToolButton

Kenapa tidak QPushButton? Karena yang diinginkan adalah tombol seperti Otodidak versi 1. Ada ikon dan ada teksnya sekaligus. Sebenarnya bisa dilakukan dengan setStyleSheet() pada QPushButton tetapi butuh lebih banyak usaha dibanding menggantinya dengan QToolButton.

2. QFont

Ternyata, Qt menyediakan dukungan untuk mengganti fonta di semua widget dengan method setFont(). Hal ini dilakukan dengan membuat objek QFont terlebih dahulu yang sudah diatur untuk memakai fonta apa, ukuran berapa, dan bisa memilih bold atau italic. Semula saya mengira QPushButton tidak dapat memakai teks yang italic karena saya hanya mengaturnya dari HTML di dalam passing parameter-nya. Namun kenyataan QFont ini menepis semua itu. Semua widget Qt dapat diatur fontanya dengan QFont!

Dalam program ini, QFont berperan mengganti fonta dari Sans menjadi Ubuntu pada QToolButton.

3. setStyleSheet()

Inilah salah satu fitur unggulan Qt Framework yang sangat istimewa. Dengan satu method ini, Anda bisa mengatur ulang tampila dari suatu widget (apakah tombol atau yang lain) baik dari foreground, background, ikon, teks, gaya teks, shadow, padding, dan semua yang Anda bisa atur dengan style sheet di web designing.

Kesimpulan

  • QLabel dan QToolButton dapat diubah tampilannya dengan style sheet melalui method setStyleSheet().
  • Style sheet yang dapat diatur adalah warna teks, warna background, fonta teks, ukuran teks, bentuk tombol, dan transparansi.
  • QLabel dan QToolButton dapat diubah fontanya dengan QFont melalui method setFont() dan pengaturan pada inisialisasi objeknya.

Unduh Kode Sumber

Program kali ini bernama WajahDepan. Paket kode sumber berikut sudah termasuk ikon-ikon Faenza yang digunakan dalam program di atas. Silakan unduh dan buka di Qt Creator Anda.

Referensi

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