Membangun GUI wxWidgets dengan wxFormBuilder

Hermanto – Melanjutkan tutorial saya sebelumnya tentang wxWidgets, pada kesempatan ini saya akan menjelaskan bagaimana cara membuat proyek sederhana dengan Codelite yang nantinya kamu dapat dengan mudah menambah control yang dibutuhkan dengan bantuan GUI Builder for wxWidgets yang sudah sangat populer yaitu wxFormBuilder.

wxFormBuilder merupakan salah satu wxWidgets GUI Builder yang memudahkan kita membangun aplikasi yang rumit. Layaknya IDE seperti Visual Basic, Visual C++, Delphi dan Netbeans, wxFormBuilder ini juga menyediakan control-control yang kita butuhkan untuk membangun software profesional. Mulai dari control sederhana semisal wxButton sampai wxTreeCtrl dan wxGrid, semuanya dapat dengan mudah kamu atur dengan GUI builder ini. Selain itu kamu juga bisa menambahkan Custom Control jika menurut kamu dibutuhkan.

Dengan kombinasi Codelite dan wxFormBuilder kamu akan sangat mudah membangun aplikasi yang cross platform, kedua tool tersebut bisa kamu dapatkan secara gratis di Windows, Linux dan Mac. Ingat semboyan wxWidgets; write once compile everywhere.

Perlu kamu ketahui bahwa wxFormBuilder merupakan proyek open source yang juga dibangun dengan library wxWidgets dan tersedia di Windows, Linux dan Mac.

Sebelum menjalankan tutorial ini kamu harus download dulu wxFormBuilder di www.wxformbuilder.org. Setelah berhasil download instal software tersebut sampai selesai. Untuk tutorial ini saya menggunakan wxFormBuilder v3.1.

Membuat project wxWidgets yang wxFormBuilder enabled dengan Codelite 5.3

  1. Jalankan Codelite 5.3. Buka workspace yang kamu buat pada tutorial sebelumnya. Lihat tutorial dengan judul memulai wxWidgets dengan Codelite.
  2. Buka menu Workspace -> New Project. Isi project name dengan SimpleWidgetFB atau semisalnya. Sebaiknya letakkan project ini pada folder yang sama dengan project sebelumnya. Pastikan template kamu pilih Executable (wxWidget + wxFB dialog) dan compiler kamu pilih gnu g++.
  3. Jika kamu benar menjalankan langkah 1 dan 2 maka akan didapatkan file gui.h, main.h, gui.cpp, main.cpp dan gui.fbp. File terakhir inilah merupakan file yang nanti dapat kamu buka dengan menggunakan wxFormbuilder yang sudah kamu instal.
  4. Untuk menguji hasil proyek yang baru kamu buat, buka menu Build -> Build and Run Project atau tekan tombol Ctrl+F9. Sebelumnya kamu harus menjadikan proyek SimpleWidgetFB sebagai aktif project dengan cara klik kanan pada folder SimpleWidgetFB kemudian pilih Set As Active atau double click pada folder itu. Folder yang semula coklat akan menjadi hijau sebagai folder aktif.


Menambah control wxStaticText, wxTextCtrl dan wxButton dengan wxFormBuilder

  1. Kembali lagi ke project SimpleWidgetFB, double click pada file gui.fbp, maka akan terbuka wxFormBuilder, jika muncul kotak pesan Old Version klik Yes.
  2. Lihat jendela Object Tree, klik pada spacer untuk mengaktifkannya. Pindah ke jendela Component Palette pilih toolbar Common dan klik wxStaticText maka secara otomatis akan ditambahkan m_staticText1 pada MainDialogBase di dalam mainSizer dan di bawah spacer. Pindahkan m_staticText1 ke atas spacer dengan cara klik kanan kemudian klik Move Up.
  3. Kembali ke toolbar Common klik wxTextCtrl dan wxButton, maka akan otomatis ditambahkan m_textCrtl1 dan m_button1 di bawah m_staticText1.
  4. Klik m_staticText1 untuk merubah propertisnya. Kemudian pada jendela Object Properties ganti properties label menjadi Nama:
  5. Klik m_textCrtl1 untuk merubah propertisnya. Kemudian pada jendela Object Properties ganti properties name menjadi m_textNama.
  6. Klik m_button1 untuk merubah propertisnya. Kemudian pada jendela Object Properties ganti properties label menjadi Tampilkan.
  7. Klik m_button1 untuk membuat eventnya. Kemudian pada jendela Object Properties buat event OnButtonClick dengan OnBtnTampilClick.
  8. Simpan hasil perubahan pilih menu File -> Save, kemudian File -> Generate Code. Keluar dari wxFormBuilder File -> Exit.

Menulis kode wxWidgets di editor Codelite 5.3

  1. Buka kembali project SimpleWidgetFB. Buka file main.h, tambahkan kode deklarasi fungsi pada class MainDialog dengan jenis private
    virtual void OnBtnTampilClick( wxCommandEvent& event );
  2. Buka file main.cpp, tambahkan implementasi dari fungsi OnBtnTampilClick sesuai kode di bawah
    void MainDialog::OnBtnTampilClick(wxCommandEvent& event)
    {
    wxMessageBox("Hello " + m_textNama->GetValue());
    }
    

  3. Jalankan aplikasi dengan membuka menu Build -> Build and Run Project atau tekan tombol Ctrl+F9.

Selamat kamu sudah dapat membuat aplikasi sederhana dengan menggunakan wxWidgets GUI Builder wxFormBuilder dan menambah kode sederhana di editor Codelite. Semoga ini bisa membantu kamu untuk membuat aplikasi yang lebih kompleks.

File project lengkap dapat di lihat di GitHub atau download zip di sini.

Selamat mencoba, sampai ketemu dengan tutorial wxWidgets selanjutnya.

Tags : wxWidgets, Codelite, GUI, GitHub, wxFormBuilder, library

0 Response to "Membangun GUI wxWidgets dengan wxFormBuilder"

Posting Komentar