Arsip Bulanan: Juli 2013

Qt Creator – Tip dan Trik Efisien Memrogram C++ dalam IDE


Bismillahirrahmanirrahim.

ngite-kedua15

Qt Creator di kampung halamannya, KDE

Tulisan ini hanyalah catatan penggunaan Qt Creator, sebuah IDE untuk C++. Isinya hanya tip dan trik cepat memrogram berikut bagaimana menggunakan fitur Qt Creator untuk menunjang efisiensi pemrograman kita. Tulisan ini hanya dikhususkan kepada para pemula bukan untuk ahli pemrograman. Oh iya, tulisan ini pun lepas dari tutorial saya sebelumnya soal memrogram Qt baik secara drag and drop maupun hard coding. Ini hanya catatan kecil.

SATU :: Tooltip Pembantu Passing Parameter

Ini sangat-sangat berguna untuk saya mempelajari bagaimana memasukkan suatu passing parameter yang benar untuk suatu kelas. Mengapa? Karena tiap kelas memiliki passing parameter yang beda, dan tiap kelas bisa punya lebih dari satu bentuk umum passing parameter. Nah, Qt Creator di sini otomatis memberikan panduan lengkap bentuk umum dalam suatu kelas Qt yang dinomori. Saya sangat diuntungkan dengan adanya fitur ini karena dengannya saya bisa belajar pemrograman Qt (baca: mengisikan passing parameter dengan benar) dengan cepat sekali tanpa pengajar. Cukup ikuti saja pola saran yang tertulis di tooltip warna hitam ini dan semua beres. Kalau misalnya error, cukup buka dokumentasinya.

ngite-kedua17

ngite-kedua19

Dua skrinsot di atas menunjukkan tooltip untuk method setMinimumSize. Ada dua jenis passing parameter, satunya bentuk angka x angka, satunya bentuk objek. Anda bisa gunakan tombol panah atas/bawah untuk melihat bentuk umum lainnya dari tooltip ini, atau klik saja tombol panah yang ada. Di mana kursor Anda berada, di situ juga parameter akan ditebalkan warna putih kalau seandainya dalam satu passing parameter ada sekian parameter yang bisa dimasukkan seperti gambar pertama. Sangat berguna.

DUA :: Error Messages

Error messages bagaimanapun, membingungkan. Namun jika kita tahu kunci-kunci error messages, maka itu justru jadi senjata kita untuk membenahi program. Kita jadi tahu di mana letak kesalahan program. Qt Creator memberikan error messages yang mudah dipahami setiap ada kesalahan.

TIGA :: Class Highlighting

Jika Anda memblok suatu nama kelas, maka seluruh nama kelas dalam satu berkas akan ikut disorot. Ini berguna sekali untuk melihat di mana saja saya memakai kelas QPushButton, di mana saja saya memakai kelas QFrame, dan seterusnya. Ini memangkas waktu kita untuk mencari. Bagusnya, tidak hanya untuk kelas. Objek dan method pun juga diperlakukan demikian. Jadi semakin mudah membaca kode kita.

ngite-kedua20

EMPAT :: Kursor dan Dokumentasi Otomatis

Letakkan kursor pada satu nama kelas Qt dalam kode Anda, tunggu 1 detik, lalu tekan F1. Langsung terbuka di samping kode, subjendela dokumentasi Qt langsung pada halaman kelas yang kita tunjuk. Ajaib, bukan? Ini sangat membantu saya dalam mengerjakan program kemarin dalam keadaan saya tidak tahu sama sekali bagaimana cara memakai sebuah kelas (baca: saya tidak tahu passing parameter-nya apa saja). Dan ini sangat menghemat bandwidth saya karena tidak usah googling lagi. Klik saja tombol Go to Help Mode untuk membuka dokumentasi selayar penuh.

ngite-kedua21

LIMA :: Tanda Baca Otomatis

Ketik nama sebuah method yang disandarkan pada sebuah objek, otomatis Qt Creator akan membentuk () (tanda kurung) untuk kita. Ini berguna sekali karena tombol kurung tutup saya rusak sehingga saya tidak perlu membeli kibor baru. Juga, kalau Anda sudah menulis satu fungsi besar, dengan satu kurung kurawal, lalu enter, maka otomatis Qt Creator akan membuatkan kurung kurawal tutupnya dan memberi indentasi kursor kita ke dalam secara otomatis. Memang fitur ini ada di semua IDE modern tetapi kalau Qt Creator juga memilikinya, saya pun diuntungkan.

ENAM :: Nama Kelas dan Nama Method Otomatis

Mungkin inilah fitur yang paling banyak saya pakai di QtCreator. Cukup ketik beberapa huruf dari nama kelas yang ingin dipakai, Qt Creator sudah memberikan saran pas di bawah kursor yang bisa kita pilih dengan tombol panah. Juga berlaku untuk method. Nah, yang method ini sangat membantu saya karena (kata orang: buset) banyak sekali method di Qt walau untuk satu kelas saja. Sehingga waktu saya jadi hemat kala saya cukup ketik add lalu muncul pilihan dan cukup Enter untuk mendapatkan addWidget dari ratusan pilihan method yang ada. Saya jadi tidak perlu menghafal satu per satu method dalam Qt. Sudah hemat waktu, hemat daya otak pula. Dan ini sangat memudahkan belajar saya. Sebelumnya saya belajar C dan Java, tidak sampai semudah ini.

ngite-kedua22

Penutup

Sedikit dari yang paling sedikit. Mungkin kalau ada trik-trik baru, saya akan perbarui posting ini. Semoga ini bermanfaat buat kaum muslimin semuanya. Selamat menempuh Ramadhan penuh berkah.

Iklan

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


Bismillahirrahmanirrahim.

Kalau kemarin kita ngite dengan QGroupBox dan QHBoxLayout, sekarang kita akan mencoba QFrame sebagai ganti QGroupBox baik sebagai kontainer maupun pembuat spasi. Ide dasar program ketiga ini adalah spasi kosong untuk setiap grup widget yang kita buat di dalam QDialog. Oh iya, sampai hari ini kita hanya akan berkutat dengan QDialog tanpa menyentuh QMainWindow. Tentulah, semua hard coding ini tujuannya membuat aplikasi GUI di Linux. Semoga bermanfaat untuk kaum muslimin semuanya.

Wujud Program yang Diinginkan

ngite-kedua9

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. QGridLayout = dipakai untuk membuat kontainer paling besar yang menampung semua objek QVBoxLayout nantinya
  4. QPushButton = dipakai untuk membuat tombol
  5. QIcon = dipakai untuk memasukkan gambar sebagi ikon tombol, QIcon dipakai sebagai passing parameter
  6. QSize = dipakai untuk membuat objek yang menyimpan ukuran, yang di program ini objek berisi ukuran tersebut diterapkan pada logo dalam tombol
  7. QFrame = dipakai untuk menggantikan QGroupBox dalam hal menampung tombol-tombol jadi satu blok/grup.

Daftar Method Qt yang Dipakai

  1. addWidget -> dipakai oleh QVBoxLayout, QGridLayout
  2. setMinimumSize -> dipakai oleh QPushButton
  3. setIconSize -> dipakai oleh QPushButton
  4. setIcon -> dipakai oleh QPushButton
  5. setLayout -> dipakai oleh QFrame dan QDialog
  6. setFixedWidth -> dipakai oleh QFrame
  7. setFrameShadow -> dipakai oleh QFrame untuk membentuk bayangan; opsi-opsinya adalah QFrame::Raised, QFrame::Sunken, dan QFrame::Plain
  8. 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
  9. setColumnMinimumWidth -> dipakai oleh QGridLayout untuk menentukan ukuran setiap blok/grup dan menentukan jumlah blok/grup yang bisa dipakai
  10. setRowMinimumHeight -> dipakai oleh QGridLayout, idem
  11. setLayout -> dipakai oleh QDialog selaku kelas tertinggi untuk memasang QGridLayout ke dalam dirinya.

Peta GUI

Saya jelaskan dulu peta QFrame dalam program ini yang saya susun.

ngite-kedua9B

A = QFrame (frameKiri) dengan QVBoxLayout (layoutKontainerKiri)
B = QFrame (frameTengah)
C = QFrame (frameKanan)
D = QFrame (frameSangga)
E = QFrame (frameBawah)
F = QFrame (framePojok)

Kode Program

Sama dengan kegiatan ngite kita kemarin, hanya berkas mainwindow.cpp yang penting.

mainwindow.cpp


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

Dialog::Dialog()
{
    QVBoxLayout *layoutKontainerKanan  = new QVBoxLayout;
    QVBoxLayout *layoutKontainerKiri   = new QVBoxLayout;
    QVBoxLayout *layoutKontainerTengah = new QVBoxLayout;
    QVBoxLayout *layoutKontainerBawah  = new QVBoxLayout;
    QVBoxLayout *layoutKontainerPojok  = new QVBoxLayout;
    QGridLayout *layoutUtama           = new QGridLayout;

    QPushButton *tombolSatu          = new QPushButton("SATU");
    QPushButton *tombolDua           = new QPushButton("DUA");
    QPushButton *tombolTiga          = new QPushButton("TIGA");
    QPushButton *tombolEmpat         = new QPushButton("");

        layoutKontainerKanan->addWidget(tombolSatu);
        layoutKontainerKanan->addWidget(tombolDua);
        layoutKontainerKanan->addWidget(tombolTiga);
        layoutKontainerKanan->addWidget(tombolEmpat);

        QSize size(88,88);                                  //menentukan ukuran, bisa dipakai di mana-mana nanti

        tombolEmpat->setMinimumSize(100,100);               //objek size lalu dimasukkan ke dalam method setIconSize dalam tombolEmpat
        tombolEmpat->setIconSize(size);                     //nggak sangka, dasar OOP; sampai ukuran ikon pun disimpan sebagai objek
        tombolEmpat->setIcon(QIcon(":/gambar/ubuntu.png")); //logo ubuntu.png ini jadi seukuran 88x88 betulan dalam tombol [sebelumnya gagal]

    QPushButton *tombolLima          = new QPushButton("LIMA");
    QPushButton *tombolEnam          = new QPushButton("ENAM");
    QPushButton *tombolTujuh         = new QPushButton("TUJUH");
    QPushButton *tombolDelapan       = new QPushButton("DELAPAN");

        layoutKontainerKiri->addWidget(tombolLima);
        layoutKontainerKiri->addWidget(tombolEnam);
        layoutKontainerKiri->addWidget(tombolTujuh);
        layoutKontainerKiri->addWidget(tombolDelapan);

    //TOMBOL-TOMBOL DI BARISAN BAWAH
    QPushButton *tombolSembilan      = new QPushButton("SEMBILAN");

        layoutKontainerBawah->addWidget(tombolSembilan);

    QPushButton *tombolSepuluh       = new QPushButton("SEPULUH");

        layoutKontainerPojok->addWidget(tombolSepuluh);

    //FRAME-FRAME PEMUAT TOMBOL
    QFrame *frameKanan = new QFrame;
    frameKanan->setLayout(layoutKontainerKanan);

    QFrame *frameKiri  = new QFrame;
    frameKiri->setLayout(layoutKontainerKiri);

    QFrame *frameTengah = new QFrame;
    frameTengah->setFixedWidth(66);                     //berhasil mengatur ukuran lebar frame secara galak
//    frameTengah->setFrameShadow(QFrame::Raised);      //setFrameShadow dan setFrameStyle
//    frameTengah->setFrameShape(QFrame::StyledPanel);  //kalau dimatikan, maka semua shadow hilang dan hanya tampak spasi kosong
    frameTengah->setLayout(layoutKontainerTengah);      //jangan lupa masukkan layout ke dalam frame

    QFrame *frameBawah = new QFrame;
    frameBawah->setLayout(layoutKontainerBawah);

    QFrame *frameSangga = new QFrame;
    frameSangga->setFixedHeight(88);

    QFrame *framePojok  = new QFrame;
    framePojok->setFixedHeight(50);
    framePojok->setLayout(layoutKontainerPojok);

    layoutUtama->addWidget(frameKanan, 1, 3);
    layoutUtama->addWidget(frameTengah, 1, 2);
    layoutUtama->addWidget(frameKiri, 1, 1);
    layoutUtama->addWidget(frameBawah, 3, 1);
    layoutUtama->addWidget(frameSangga, 2, 1);
    layoutUtama->addWidget(framePojok, 3, 3);
    layoutUtama->setColumnMinimumWidth(3, 100);     //menentukan jumlah kolom dan lebar masing-masingnya
    layoutUtama->setRowMinimumHeight(3, 10);       //menentukan jumlah baris dan tinggi masing-masingnya
    setLayout(layoutUtama);
}

Analisis Kode Program

Sebenarnya sama saja dengan program sebelumnya. Maka akan saya jelaskan beberapa saja yang terpenting.

SATU

QFrame *frameKanan = new QFrame;
 frameKanan->setLayout(layoutKontainerKanan);

Masih seperti kemarin, itulah bentuk umum pembuatan objek dari kelas. Di sini yang disebut kelas ialah QFrame sedangkan objeknya frameKanan. Sesudah dibuat, objek dipasangi layout dengan memakai method setLayout.

DUA

frameTengah->setFixedWidth(66);

Inilah ide dasar program ketiga ini. Method setFixedWidth, sesuai namanya, berguna untuk menentukan ukuran lebar dari frameTengah. Frame yang ini posisinya ada pada baris pertama kolom kedua. Kalau bingung, lihat lagi Peta GUI di atas.

TIGA

layoutUtama->addWidget(frameKanan, 1, 3);
layoutUtama->addWidget(frameTengah, 1, 2);
layoutUtama->addWidget(frameKiri, 1, 1);
layoutUtama->addWidget(frameBawah, 3, 1);
layoutUtama->addWidget(frameSangga, 2, 1);
layoutUtama->addWidget(framePojok, 3, 3);

Perhatikan, layoutUtama sudah dibentuk dari QGridLayout, bukan layout model lainnya. Kalau dibentuk dari kelas ini, maka dia memiliki bentuk umum passing parameter ala QGridLayout juga. Dan ini spesial karena Grid Layout milik Qt itu fleksibel bisa ke samping dan ke bawah sekaligus. Misalnya saja, kode layoutUtama->addWidget(frameKanan, 1, 3); berarti maksudnya masukkan ke dalam Grid Layout bernama layoutUtama sebuah objek bernama frameKanan, pada baris 1 kolom 3. Mudah sekali, bukan? Begini bentuk umumnya:

void QGridLayout::addWidget ( QWidget * widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = 0 )

Bentuk umum ini saya dapat dari dokumentasi internal Qt Creator (tekan F1). Bentuk umum yang njelimet ini, ternyata bisa diterjemahkan jadi kode saya tadi. Bagaimana memahaminya? Begini caranya:

  1. void ini berarti bentuk kode QGridLayout::addWidget dst. adalah fungsi, bukan kelas bukan yang lain. Jadi, tidak perlu dilihat nama QGridLayout-nya kalau mau menggunakan ini. Cukup lihat addWidget dst. saja. Ini artinya fungsi addWidget() di dalam kelas QGridLayout itu cara pakainya demikian. Dan memang berbeda addWidget untuk QGridLayout dengan yang untuk layout lainnya.
  2. QWidget * widget diganti dengan frameKanan
  3. int fromRow diganti dengan 1
  4. int fromColumn diganti dengan 3
  5. sisanya tidak diisi tidak apa-apa.

EMPAT

layoutUtama->setColumnMinimumWidth(3, 100);
layoutUtama->setRowMinimumHeight(3, 10);

Penjelasannya persis seperti nama method-nya. Bentuk umumnya adalah

void QGridLayout::setColumnMinimumWidth ( int column, int minSize )

yang artinya fungsi setColumnMinimumWidth ini gunanya untuk mengatur ukuran lebar minimum untuk kolom yang ditentukan. Maka, kode saya tadi maksudnya aturlah pada kolom ketiga, ukuran lebar 100 piksel.

LIMA

QSize size(88,88);
tombolEmpat->setMinimumSize(100,100);
tombolEmpat->setIconSize(size);
tombolEmpat->setIcon(QIcon(":/gambar/ubuntu.png"));

Nah, untuk kode ini, sengaja saya akhirkan penjelasannya. Pertama, dibuat sebuah objek yang menampung suatu dimensi piksel x piksel. Objek itu bernama size yang diturunkan dari kelas QSize. Ini unik, khas OOP. Segalanyaaa… objek. Bahkan sampai yang namanya dimensi pun dibuat sebagai objek. Sesudah itu, tombolEmpat diatur ukuran minimumnya lalu nah. Inilah gunanya. Dengan method milik PushButton yang bernama setIconSize, objek size tadi dimasukkan ke sini. Jadi kita tidak menuliskan setIconSize(88,88) melainkan setIconSize(size). Gunanya untuk baris berikutnya. Method setIcon gunanya untuk mengatur ikon dari tombol. Bisa ditebak, saya memang ingin membuat aplikasi yang berbasis gambar lagi. Begitu gambar dimasukkan, karena tadi sudah diatur dengan setIconSize, maka otomatis nanti kalau dijalankan programnya, ikon yang ditentukan di sini pasti berukuran 88 x 88. Mudah dipahami, bukan? Yang unik dari method terakhir ini adalah setIcon(QIcon(“”));. Perhatikan, ada method di dalam method. Dan di sini dipakailah kelas QIcon. Saya sendiri tidak seberapa paham mengapa harus begini (tetapi saya mengerti juga buat apa?) yang penting bisa masuk gambarnya. Perhatikan lagi, :/gambar/ubuntu.png itu adalah aturan Qt Creator dalam mengimpor gambar. Lihat tulisan pertama saya soal Qt bila belum mengerti soal impor gambar.

ENAM

frameTengah->setFrameShadow(QFrame::Raised);
frameTengah->setFrameShape(QFrame::StyledPanel);

ngite-kedua12

Khusus untuk baris ke-58 kode, saya jadikan komentar. Seandainya diaktifkan, maka nanti frameTengah akan kelihatan border-nya. Bentuk border yang seperti ini keren, tetapi saya tidak inginkan dalam program kali ini. Mungkin nanti pas perlu baru dipakai. Yang penting, perhatikan passing parameter-nya. QFrame::Raised untuk setFrameShadow dan QFrame::StyledPanel untuk setFrameShape. Begitu cara menulis passing parameter-nya. Anda bisa mencarinya dalam dokumentasi internal Qt Creator untuk jenis shadow dan jenis framestyle lainnya.

Hasil Akhir

Ini hasil yang saya inginkan, yakni ada spasi kosong antargrup. Sebagai bonus, kita berhasil membuat tombol dengan gambar sekaligus mengatur sekehendak kita ukurannya.

ngite-kedua9

Bandingkan dengan program kemarin yang masih kelihatan spasi antargrupnya:

ngite-kedua11

Rangkuman

  1. Grid Layout adalah yang paling bebas yang bisa dipakai untuk meletakkan objek-objek GUI ke samping dan ke bawah.
  2. Untuk mengatur ukuran gambar dalam tombol, kita bisa gunakan QSize untuk menampung ukuran dan memasukkannya ke dalam passing parameter dalam method setIconSize.

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


Bismillahirrahmanirrahim.

Setelah kegiatan ngite kemarin, ternyata saya melanjutkan lagi dengan memodifikasi program yang sudah ada. Modifikasi yang saya lakukan adalah mengatur tampilan item-item agar terbagi jadi 2 kolom (atau lebih) dalam satu dialog. Saya juga mengusahakan tampilan agar ada spasi antara dua kolom. Modifikasi ini dilandasi rasa ingin tahu saya akan bisa atau tidaknya Qt membuat program GUI yang benar-benar sesuai keinginan saya. Ternyata bisa dan itu mudah. Saya pun ingin mencatat apa yang telah saya temukan dengan Qt ini di posting-posting mendatang. Semoga ini bermanfaat untuk kaum muslimin sekalian.

TIPS LATIHAN MEMROGRAM

  1. Jangan ragu untuk Ctrl+N alias membuat proyek baru.
  2. Gunakan F1 di dalam Qt Creator untuk mencari kode-kode yang berhubungan dengan salah satu kelas. Misalnya, ketika tidak tahu bisa atau tidaknya QFrame melakukan method addWidget dan bagaimana penulisan kodenya, cari saja laman dokumentasi QFrame. Lalu cukup Ctrl+F > addwidget di dalam laman tersebut.
  3. Cara membaca dokumentasi internal Qt Creator adalah fokuskan penglihatan pada kode-kode yang paling penting saja. Misalnya, saya mencari bisa atau tidaknya suatu layout diatur ukuran margin-nya. Gampang, cari saja QLayout lalu Ctrl+F > margin. Di situ pasti kita temukan salah satu method penting milik QLayout: void setContentsMargins ( int left, int top, int right, int bottom ). Fokus pada kode ini, pada isi argumennya (itu lho, isi dari ()). Qt itu terdokumentasi dengan jelas, sampai nama fungsinya saja sudah jadi dokumentasi sendiri. Artinya setContentsMargins jelas adalah mengatur margin untuk konten dari QLayout. Nah, int left dan int top ini jelas-jelas untuk mengatur ukuran secara piksel sisi kiri dan sisi atas, begitu pula untuk right dan bottom. Nanti penulisan kodenya adalah objekQLayout.setContentsMargins(10, 10, 10 10); kalau kita ingin berikan setiap sisi 10 piksel ruang kosong. Seperti inilah cara membaca dokumentasi pemrograman di Qt (dan insya Allah sama untuk dokumentasi API lainnya).
  4. Googling sedikit atau seperlunya saja, karena dokumentasi internal Qt Creator sudah sangat lengkap. Hematlah bandwidth Anda.
  5. Tip dari semua ahli pemrograman: ambil kode orang lalu modifikasi dan lihat hasilnya. Ulangi.

Wujud Program 1

ngite-kedua

Kode Program

mainwindow.cpp

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

Dialog::Dialog()
{
//DEKLARASI LAYOUT
QVBoxLayout *tinyLayout = new QVBoxLayout;
QVBoxLayout *tonoLayout = new QVBoxLayout;
QHBoxLayout *mainLayout = new QHBoxLayout;
QGroupBox *gbkiri  = new QGroupBox("KIRI");
QGroupBox *gbkanan = new QGroupBox("KANAN");

//DEKLARASI BUTTON
QPushButton *tombol = new QPushButton("TOMBOL");
QPushButton *timbil = new QPushButton("TIMBIL");
QPushButton *tumbul = new QPushButton("TUMBUL");
QPushButton *tembel = new QPushButton("TEMBEL");

//MEMASUKKAN TOMBOL KE DALAM LAYOUT TINY
tinyLayout->addWidget(tombol);
tinyLayout->addWidget(timbil);

//MENGATUR UKURAN MARGIN KIRI KANAN ATAS BAWAH UNTUK LAYOUT
//tinyLayout->setContentsMargins(1,1,55,1);

//MEMASUKKAN LAYOUT TINY KE DALAM GROUPBOX KIRI
gbkiri->setLayout(tinyLayout);

//MEMASUKKAN TOMBOL KE DALAM LAYOUT TONO
tonoLayout->addWidget(tumbul);
tonoLayout->addWidget(tembel);

//MEMASUKKAN LAYOUT TONO KE DALAM GROUPBOX KANAN
gbkanan->setLayout(tonoLayout);

//MEMASUKKAN KEDUA GROUPBOX KE DALAM LAYOUT HORIZONTAL
mainLayout->addWidget(gbkiri);
mainLayout->addWidget(gbkanan);

//MEMASUKKAN LAYOUT INDUK KE DALAM DIALOG TERTINGGI
setLayout(mainLayout);

setWindowTitle("Demo Kolom yang Dibentuk dengan Groupbox dan HBoxLayout");
this->setSizeGripEnabled(1);

}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include

class QDialog;

class Dialog : public QDialog
{
Q_OBJECT

public:
Dialog();

private:

};

#endif // MAINWINDOW_H

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

Analisis Kode Program 1

Sebelum kode, sebaiknya saya jelaskan logikanya dulu. Sangatlah mudah dipahami urut-urutannya.

  1. Ada tombol.
  2. Ada Vertical Box Layout.
  3. Ada GroupBox. Namanya KANAN.
  4. Tombol masuk ke Vertical Box Layout.
  5. Layout masuk ke Groupbox.
  6. Ulangi langkah 1 – 5. Bedanya, beri nama KIRI.
  7. Ada Horizontal Box Layout.
  8. Groupbox KANAN masuk ke Horizontal Box Layout.
  9. GroupBox KIRI masuk ke Horizontal Box Layout juga.
  10. Ada dialog.
  11. Layout masuk dialog.
  12. Jadilah program 1.

Nah, kode-kode di atas hanyalah menerjemahkan bentuk urut-urutan ini ke dalam perintah yang dipahami komputer. Jadilah program 1. Ingat, yang paling penting dalam pemrograman program 1 ini hanyalah mainwindow.cpp. Yang lainnya hampir-hampir tidak berbeda dengan pertama di-generate oleh Qt Creator. Yang paling sederhana justru mainwindow.h, karena bukannya ditambah isinya melainkan dihapusi sehingga jadi lowong. Oke, saya mulai catatkan kode-kode yang penting dari mainwindow.cpp.

Dialog::Dialog()

Apa ini? Ini adalah fungsi dasar mainwindow.cpp. Bedakan dengan fungsi utama di main.cpp. Fungsi ini adalah fungsi yang dipanggil kala Dialog dibuka. Jadi, apa pun perintah kita di dalamnya, akan ikut dijalankan ketika Dialog dipanggil. Sebagai pelengkap, nanti di dalam mainwindow.cpp bisa ada fungsi-fungsi lain selain Dialog ini. Misalnya, fungsi yang disandarkan kepada tombol, agar jika tombol diklik maka sesuatu yang ditulis dalam fungsi tersebut berjalan.

QVBoxLayout *tinyLayout = new QVBoxLayout;
QVBoxLayout *tonoLayout = new QVBoxLayout;
QHBoxLayout *mainLayout = new QHBoxLayout;
QGroupBox *gbkiri  = new QGroupBox("KIRI");
QGroupBox *gbkanan = new QGroupBox("KANAN");

Kode di atas ini tujuannya untuk membuat objek layout dan groupbox. Karena saya ingin membuat satu program dengan dua blok tombol, satu kanan satu kiri, maka saya harus punya satu layout horizontal. Maka dari itu objek dari QHBoxLayout saya buat sebagai mainLayout. QVBoxLayout saya turunkan jadi objek karena masing-masing blok harus memiliki layout-nya sendiri. Dan setiap blok, diangkut oleh QGroupBox. Perhatikan, kita bisa langsung menyematkan judul KANAN dan KIRI pada GroupBox dengan memasukkannya sebagai string dalam passing parameter.

tinyLayout->addWidget(tombol);
tinyLayout->addWidget(timbil);

Kode di atas ini adalah perwujudan dari logika nomor 4. Harus seperti ini karena nanti tombol yang empat dipecah 2 untuk KANAN dan 2 untuk KIRI. Ini langkah pertama.

gbkiri->setLayout(tinyLayout);

Kode di atas ini perwujudan dari logika nomor 5. Beginilah caranya memasukkan tombol/objek GUI lain ke dalam GroupBox. Yang dimasukkan adalah layout yang memuat mereka. Otomatis objek yang dimuat ikut masuk ke dalam GroupBox.

mainLayout->addWidget(gbkiri);
mainLayout->addWidget(gbkanan);

Kode di atas ini perwujudan dari logika nomor 8 dan 9. Ingat, tadi mainLayout berformat Horizontal. Dan format horizontal inilah yang penting untuk membentuk kolom KIRI dan KANAN. Enaknya layout horizontal ini, kita cukup addWidget ke dalamnya berapa kali pun, dengan widget apa saja (dalam program saya ini, GroupBox), maka pasti otomatis terbentuk kolom ke arah kanan. Karena itulah dia dinamakan Horizontal (Horizontal Box layout). Ingat, otomatis hanya dengan layout.

setLayout(mainLayout);

Kode di atas ini adalah method. Kita tahu, semestinya suatu method di dalam pemrograman OOP harus disandarkan pada objek. Misalnya tadi, objeknya mainLayout methodnya addWidget maka bentuk kodenya mainLayout->addWidget(). Bagaimana dengan ini? Apakah beda? Tidak, ini sama. Hanya saja, kelasnya tidak perlu dituliskan. Mengapa? Karena kalau ditulis mutlak seperti ini, berarti method ini disandarkan pada kelas tertinggi dalam program ini. Apakah itu? Itulah Dialog. Berarti, method ini berlaku kepada dialog. Apa yang diberlakukan? Ya, memasukkan mainLayout ke dalam Dialog. Inilah perwujudan logika nomor 11. Dengan ini, sudah sempurnalah kode kita dan jadilah dialog kita dengan dua kolom, masing-masingnya ada 2 tombol.

Wujud Program 2

ngite-kedua1

Kode Program

Kalau yang kedua ini, sama dengan yang pertama tetapi hanya sedikit perbedaan. Jadi cukup satu berkas saja.

mainwindow.cpp


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

Dialog::Dialog()
{
    QVBoxLayout *layoutKontainerKanan = new QVBoxLayout;
    QVBoxLayout *layoutKontainerKiri  = new QVBoxLayout;
    QVBoxLayout *layoutKontainerTengah = new QVBoxLayout;
    QHBoxLayout *mainLayout = new QHBoxLayout;

    QGroupBox *gbkiri = new QGroupBox(tr("KIRI"));
    QGroupBox *gbkanan = new QGroupBox(tr("KANAN"));
    QGroupBox *gbtengah = new QGroupBox;

    //EALAH, TERNYATA CUKUP DITULIS QSizePolicy::Fixed [BISA GANTI Fixed DENGAN METHOD LAIN]
    //TIWAS DIGOLEKI LAN DIJAJAL SAMPEK MUMET
    //KATA KUNCI GOOGLE: QSpacerItem *spasi = new QSpacerItem(55,55,Fixed,Fixed);
    //TIDAK PERLU DEKLARASI enum DI HEADER SAMA SEKALI
    QSpacerItem *spacer = new QSpacerItem(155,1,QSizePolicy::Fixed,QSizePolicy::Fixed);

    QPushButton *butonsatu  = new QPushButton("TOMBOL SATU");
    QPushButton *butondua   = new QPushButton("TOMBOL DUA");
    QPushButton *butontiga  = new QPushButton("TOMBOL TIGA");
    QPushButton *butonempat = new QPushButton("TOMBOL EMPAT");

    //MENGISI OBJEK KE DALAM KONTAINER DAN GROUPBOX KANAN
    layoutKontainerKanan->addWidget(butonsatu);
    layoutKontainerKanan->addWidget(butondua);

    gbkiri->setLayout(layoutKontainerKanan);

    //TENGAAAAAAH
    layoutKontainerTengah->addSpacerItem(spacer);
    gbtengah->setLayout(layoutKontainerTengah);

    //MENGISI OBJEK KE DALAM KONTAINER DAN GROUPBOX KIRI
    layoutKontainerKiri->addWidget(butontiga);
    layoutKontainerKiri->addWidget(butonempat);

    gbkanan->setLayout(layoutKontainerKiri);

    mainLayout->addWidget(gbkiri);
    mainLayout->addWidget(gbtengah);
    mainLayout->addWidget(gbkanan);

    //FINISHING ALL LAYOUT
    setLayout(mainLayout);
    setWindowTitle("Eksperimen Dialog Dua Kolom");

}

Analisis Kode Program 2

Cukup perhatikan saja kode di atas pada baris-baris yang saya hightlight. Cuma itu perbedaannya dengan program sebelumnya. Hasil kode di atas adalah satu kolom baru di tengah-tengah blok KANAN dan KIRI. Apa yang spesial di program kedua ini?

QSpacerItem *spacer = new QSpacerItem(155,1,QSizePolicy::Fixed,QSizePolicy::Fixed);

Jika kita belum mengenal yang namanya kelas, sebaiknya memulai di sini. Cukup tahu dulu saja kalau QSpacerItem ini dinamakan kelas. Nah, spacer di sini dinamakan objek (anak kelas). Di dalam pemrograman OOP mana pun, sebuah kelas yang sedang membentuk objek, bisa menerima parameter-parameter tertentu dengan melalui passing parameter. Di mana letak passing parameter itu? Sebelumnya, pahami dulu yang namanya pembuatan objek itu:

NamaKelas *namaobjek = new Namakelas(passingparameter);

Kode di atas adalah bentuk umum deklarasi pembuatan objek (penurunan kelas). Anda mau lari ke mana pun dari kode Qt framework (atau misal bahasa pemrograman OOP mana saja), tidak akan bebas dari deklarasi macam ini. Jika sudah mengerti keberadaan deklarasi objek ini, maka sekarang waktunya membahas bentuk umum deklarasi objek khusus untuk QSpacerItem saja. Ingat, khusus QSpacerItem saja karena setiap kelas dalam Qt memiliki model deklarasinya sendiri-sendiri.

QSpacerItem *objectName = new QSpacerItem( int w, int h, QSizePolicy::Policy hPolicy = QSizePolicy::Minimum, QSizePolicy::Policy vPolicy = QSizePolicy::Minimum );

Perhatikan selalu passing parameter, yakni isi dari tanda kurung. Itulah bentuk umum dari deklarasi objek khusus QSpacerItem. Apa gunanya? Banyak sekali. Di antaranya, dengan mengganti tulisan int w dengan angka 155, maka objek saya bernama spacer pasti memiliki jarak lebar horizontal 155 piksel. Sangat berguna, bukan? Yang penting lagi, perhatikan kode QSizePolicy::Policy hPolicy = QSizePolicy::Minimum. Kode ini bisa kita ganti dengan QSizepolicy::Fixed begitu saja. Mengapa? Karena di dalam dokumentasi asli Qt, disebutkan kode-kode yang bisa dipakai untuk dipasang bersama QSizePolicy di antaranya Fized, Minimum, Maximum, dan lain-lain. Jadi, bisa pula diganti dengan QSizePolicy::Minimum atau QSizePolicy::Maximum dan yang lainnya. Baca dokumentasi internal Qt Creator pada bab QSizePolicy Class Reference. Seperti demikianlah cara mempergunakan kode di dalam dokumentasi tersebut. Yap, saya sendiri sudah merasakan bingungnya tetapi akhirnya bisa memakainya dan di sini saya catatkan. Oya, kita belum terlalu perlu untuk tahu detail apa maksudnya Fixed, Maximum, Minimum, dan lain-lain. Cukup bisa memakainya dahulu saja. Oleh karena itulah, kode deklarasi saya menjadi:

QSpacerItem *spacer = new QSpacerItem(155,1,QSizePolicy::Fixed,QSizePolicy::Fixed);

persis seperti di atas. Nah, kemudian, sama seperti sebelumnya. Masukkan spacer ini (sebagai objek, sebagai widget yang bisa mengisi layout) ke dalam layout. Kodenya:

layoutKontainerTengah->addSpacerItem(spacer);

Kita perlakukan objek spacer ini sama seperti objek-objek lainnya (seperti PushButton juga) yakni dimasukkan ke dalam layout. Lalu, layout dimasukkan ke dalam GroupBox. Kodenya:

gbtengah->setLayout(layoutKontainerTengah);

Akhirnya selesai kodenya dan jadilah program kedua.

Rangkuman

  1. Kelas-kelas Qt yang kita pergunakan dalam kedua program awal ini adalah:
      1. QDialog
      2. QVBoxLayout
      3. QHBoxLayout
      4. QGroupBox
      5. QPushButton
      6. QSpacerItem
  2. Deklarasi pembuatan objek dari kelas di dalam Qt secara umum adalah:
                              • NamaKelas *namaObjek = new NamaKelas(passing parameter);
  3. Contoh deklarasi pembuatan objek dari QSpacerItem adalah:
    • QSpacerItem *spacer = new QSpacerItem(155, 1, QSizePolicy::Fixed, QSizePolicy::Fixed);
  4. Belajar pemrograman C++ dalam Qt framework bisa dilakukan cukup dengan membaca dokumentasi Qt dalam Qt Creator saja. Tentu dengan sedikit googlingngite-hardcoding1
  5. Pembuatan kode program GUI di dalam Qt dilakukan secara berurutan menurut aturan yang berlaku. Widget dimasukkan ke dalam layout, lalu layout dimasukkan ke dalam kontainer tertinggi (bisa Dialog bisa Window). Atau, widget dimasukkan ke dalam layout, layout dimasukkan ke dalam groupbox, lalu groupbox dimasukkan dalam layout tertinggi, lalu layout tertinggi itu dimasukkan ke dalam kontainer tertinggi (Dialog atau Window).

 

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

ngite-hardcoding

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

ngite-hardcoding

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

Baca lebih lanjut

Menginstal Android ADT di Eclipse Indigo Secara Semi-Offline di Ubuntu 12.04


Bismillahirrahmanirrahim.

Sebenarnya lama sudah saya ingin menulis soal memrogram aplikasi Android. Hanya saja, saya selalu gagal dalam mengintegrasikan ADT (Android Development Tools) ke dalam Eclipse. Saya bingung bagaimana caranya walaupun mirip dengan sistem kerja apt di Ubuntu. Baik, berhubung sudah berhasil mengintegrasikan Eclipse dengan ADT sehingga saya bisa membuat aplikasi Android dan menggunakan GUI builder Android di dalam Eclipse, maka sekarang saatnya saya menulisnya.

Kaidah Dasar

  1. Dependensi: ada 2 hal yang mesti ada terlebih dahulu yakni Android SDK dan Android Delevepment Tools (ADT). Dua hal ini berbeda tetapi tanpa salah satunya kita tidak bisa memrogram Android di Eclipse.
  2. Model instalasi: sebenarnya ada 2 cara. Pertama dengan cara menginstalkan ADT ke dalam Eclipse yang telah kita instal di Ubuntu kita dari repositori, atau kedua dengan cara mengunduh secara utuh satu paket ADT SDK Bundle yang sudah berisi Eclipse. Tulisan ini menjelaskan yang pertama. Cara kedua ini ukuran paketnya sekitar 400 MB.
  3. Gambaran instalasi: memasukkan alamat ADT dan memasukkan alamat repositori resmi Indigo (semacam PPA), lalu memilih paket-paket yang diperlukan untuk pemrograman Android. Dengan cara offline ini, Anda tidak memerlukan lagi URL https://dl-ssl.google.com/android/eclipse/.
  4. Gambaran pemrograman Android: Anda menulis kode di Eclipse pada bagian khusus pemrograman Android lalu Anda menjalankan aplikasinya pada AVD (Android Virtual Device, sebut saja hape Android di dalam Ubuntu) sebagaimana menjalankan programnya di hape betulan. Anda harus tahu gambaran ini dulu sebelum memrogram.

Spesifikasi Saya

  • Eclipse Indigo (diinstal dari repositori resmi)
  • Ubuntu 12.04 32 bit
  • ADT versi 21.1.0

Cara Instalasi

  1. Unduh dulu ADT: http://dl.google.com/android/ADT-21.1.0.zip (12 MB)
  2. Unduh juga SDK: http://dl-ssl.google.com/android/repository/android-17_r02.zip (45 MB) lalu ekstrak di /home/anda/Publik/.
  3. Buka Eclipse > Help > Install Software > klik Available Software Sites > masukkan alamat http://download.eclipse.org/releases/indigo. OK. Ini gunanya untuk mengunduh aplikasi tambahan. Ingat, saya pakai Eclipse Indigo jadi saya pasang URL indigo. Kalau Anda pakai Eclipse Juno, ganti URL indigo dengan juno.
  4. Masih di jendela Install Software, klik Add lalu masukkan path ke ADT yang tadi diunduh pertama. Ini enaknya punya ADT, sehingga tidak perlu alamat http://dl-ssl.google.com/android/eclipse/.
  5. Nanti akan muncul 2 pilihan yakni Developer Tools dan NDK Plugins. Cawang yang Developer Tools lalu Next. OK saja pada perjanjian lisensi yang muncul.
  6. Setelahnya, Anda akan diminta untuk restart. Turuti saja.
  7. Setelah restart, Anda akan diminta mengonfigurasi SDK. Ya, selain ADT, harus ada SDK. OK saja lalu berikan path menuju Android SDK yang sudah Anda unduh sebelumnya pada tahap kedua tadi.
  8. Selesai.

Kalau sudah selesai, maka Anda bisa File > New > Android Application Project dengan lancar. Jika gagal, maka opsi Android Application Project tidak akan muncul.

Masalah

  1. Jika Anda tidak punya Android SDK tetapi punya ADT Bundle (yang 400 MB itu) seperti kasus saya, maka mudah saja. Gantilah alamat path ke Android SDK di atas menjadi path ke folder sdk/ di dalam folder adt_bundle. Sama saja isinya. Masalah akan muncul jika ternyata SDK yang ada dalam ADT Bundle ternyata lebih baru, sehingga Anda harus update sendiri ADT Anda. Ini terjadi pada saya dan alhamdulillah beres karena ada internet langsung.
  2. Jika terjadi galat yang berisi pesan ADT requires ‘org.eclipse.wst.sse.core 0.0.0’ but it could not be found, maka perhatikan lagi URL pada poin 3 di atas. Ketiadaan URL repositori inilah penyebabnya. Tenang, berkas yang akan diunduh hanya sedikit.
  3. Jika terjadi galat besar yang mengakibatkan semua opsi di menu File > New menjadi hilang (termasuk Java, Project, Android, dan lain-lain yang biasanya ada), entah karena kesalahan konfigurasi repositori atau lainnya, maka jangan instal ulang Eclipse Anda. Cukup rename saja folder ~/.eclipse Anda.

Rujukan

  1. http://qdevarena.blogspot.com/2010/05/download-android-sdk-standalone-for.html
  2. http://stackoverflow.com/questions/4249695/adt-requires-org-eclipse-wst-sse-core-0-0-0-but-it-could-not-be-found
  3. http://stackoverflow.com/questions/6482268/eclipse-indigo-cannot-install-android-adt-plugin