Розробка графічного інтерфейсу за допомогою wxWidgets

На початку нульових, коли я ще був студентом Київської політехніки, стали дуже популярними так звані RAD(Rapid application development ) системи швидкої розробки програм з графічним інтерфейсом, такі як Borland Delphi та Borland C++ Builder.
Для розробки GUI було достатньо натягати на форму різних компонентів методом Drag&Drop та клікнувши двічі на компонент написати обробник натиснення на кнопку чи іншу дію користувача

Через роки, коли мені знову знадобилося розробляти графічний інтерфейс, я шукав аналогічний по простоті та зручності інструмент, до того ж безкоштовний.
Тоді мене зацікавила крос-платформна бібліотека wxWidgets, якою я користуюся дотепер.

Щоб підкреслити якість цієї бібліотеки, хочу зауважити, що на основі wxWidgets побудовані такі відомі програмні продукти як KiCad EDA, FileZilla, BitTorrent, Code::Blocks, CodeLite та інші. Python версія wxWidgets під назвою wxPython використовується в Google Drive та DropBox.

За допомогою wxWidgets можна писати програми під Windows, Mac OS, Unix, Linux на різних мовах програмування, таких як C++, Python, Ruby, Smalltalk, Perl, Erlang, Haskell, Lua.

Підтримується чимала кількість компіляторів, серед яких GCC(MinGw, CygWin) та Microsoft Visual C++. Для збирання програм можна використовувати багато різноманітних систем збирання, в тому числі cmake.

Бібліотека wxWidgets добре документована, документація доступна на сайті проекту.
Офіційним інтегрованим середовищем розробки для wxWidgets є Code::Blocks IDE, функціональність якого може розширюватися шляхом встановлення додаткових плагінів. Одним із таких плагінів є wxSmith.

Використання Code::Blocks з встановленим wxSmith дозволяє мені швидко створювати графічний інтерфейс так-само легко, як раніше я це робив за допомогою Borland C++ Builder 5.

При цьому не обовʼязково використовувати Code::Blocks як редактор коду, він потрібен лише для перетягування графічних компонентів на форму та редагування властивостей компонентів. Таким чином буде автоматично згенеровано необхідний програмний код. Одночасно ви можете використовувати будь-який редактор або IDE разом із системою збирання cmake.

Бібліотеку wxWidgets можна зібрати із вихідних файлів на С++ або зразу встановити бінарну версію.
Для цього необхідно відвідати офіційний сайт проекту wxWidgets або завантажити вихідні файли бібліотеки з github репозиторію.

$ git clone --recurse-submodules https://github.com/wxWidgets/wxWidgets.git

Про те як зібрати wxWidgets ви можете прочитати у відповідній документації. Оскільки я буду збирати wxWidgets під Linux, то мені доведеться прочитати інформацію із файла wxWidgets/docs/gtk/install.md

$ cat wxWidgets/docs/gtk/install.md

Якщо ваша операційна система Windows або OSX, то вам необхідно відкрити та прочитати відповідно файл wxWidgets/docs/msw/install.md або wxWidgets/docs/osx/install.md

Запустити процес компіляції wxWidgets досить просто, а от тривалість цього процесу не така коротка як очікувалося навіть на сучасних компʼютерах.

$ cd wxWidgets $ mkdir buildgtk && cd buildgtk $ ../configure --with-gtk=3 $ make && sudo make install $ sudo ldconfig

Після цього можна перевірити встановлену бібліотеку wxWidgets , спробувавши зібрати один із прикладів

$ cd wxWidgets/samples/minimal $ make -f makefile.unx $ ./minimal

Якщо програма з графічним інтерфейсом запустилася, то ви все зробили правильно і тепер можете компілювати власні програми з графічним інтерфейсом wxWidgets.

Тепер ми спробуємо написати власний CMakeLists.txt файл для використання системи збирання cmake.
Створимо новий каталог для наших експериментів.

$ mkdir myGUIproject && cd myGUIproject

$ vim CmakeLists.txt

cmake_minimum_required(VERSION 3.5)

project(myApp)

find_package(wxWidgets 3.1 COMPONENTS core base REQUIRED)

include(${wxWidgets_USE_FILE})

set(SRC_LIST myApp.cpp myFrame.cpp)

add_executable(${PROJECT_NAME} ${SRC_LIST})

target_link_libraries(${PROJECT_NAME} ${wxWidgets_LIBRARIES})

cmake_minimum_required(VERSION 3.5)

project(myApp)

find_package(wxWidgets 3.1 COMPONENTS core base REQUIRED)

include(${wxWidgets_USE_FILE})

set(SRC_LIST myApp.cpp myFrame.cpp)

add_executable(${PROJECT_NAME} ${SRC_LIST})

target_link_libraries(${PROJECT_NAME} ${wxWidgets_LIBRARIES})

Далі спробуємо створити власну просту програму з графічним інтерфейсом, щоб зрозуміти як повинна бути влаштована така програма.

Вам необхідно видалити теги < xmp > < / xmp > із вихідних файлів. Їх було добавлено для коректного відображення символів, які інтерпретуються HTML по-своєму (гострі кавички, амперсанд і т.д)

$ vim myApp.h


<xmp>
#ifndef MY_APP_H
#define MY_APP_H
#include <wx/wx.h>
#include "myFrame.h"

class myApp : public wxApp
{
	public:
		myApp();
		~myApp();
		virtual bool OnInit();
	private:
		myFrame * m_frame;
};

#endif
</xmp>

<xmp>

#ifndef MY_APP_H

#define MY_APP_H

#include <wx/wx.h>

#include "myFrame.h"

class myApp : public wxApp

{

public:

myApp();

~myApp();

virtual bool OnInit();

private:

myFrame * m_frame;

};

#endif

</xmp>

$ vim myApp.cpp

<xmp>
#include "myApp.h"
#include "myFrame.h"

wxIMPLEMENT_APP(myApp);

myApp::myApp()
{
}

myApp::~myApp()
{
}

bool myApp::OnInit()
{
	m_frame = new myFrame("GUI");
	if (m_frame)
	{
		m_frame->Show();
		return true;
	}
	return false;
}
</xmp>

<xmp>

#include "myApp.h"

#include "myFrame.h"

wxIMPLEMENT_APP(myApp);

myApp::myApp()

{

}

myApp::~myApp()

{

}

bool myApp::OnInit()

{

m_frame = new myFrame("GUI");

if (m_frame)

{

m_frame->Show();

return true;

}

return false;

}

</xmp>

$ vim myFrame.h

<xmp>
#ifndef MY_FRAME_H
#define MY_FRAME_H
#include <wx/wx.h>
#include <wx/button.h>
#include <wx/sizer.h>

class myFrame : public wxFrame
{
	public:
		myFrame(const wxString &title);
		~myFrame();
		void OnButtonClick(wxCommandEvent &event);
	private:
		wxSizer *m_sizer;
		wxButton *m_button;
		wxDECLARE_EVENT_TABLE();
};	

#endif
</xmp>

<xmp>

#ifndef MY_FRAME_H

#define MY_FRAME_H

#include <wx/wx.h>

#include <wx/button.h>

#include <wx/sizer.h>

class myFrame : public wxFrame

{

public:

myFrame(const wxString &title);

~myFrame();

void OnButtonClick(wxCommandEvent &event);

private:

wxSizer *m_sizer;

wxButton *m_button;

wxDECLARE_EVENT_TABLE();

};

#endif

</xmp>

$ vim myFrame.cpp

<xmp>
#include "myFrame.h"

enum
{
	BUTTON_ID = 10001
};

wxBEGIN_EVENT_TABLE(myFrame, wxFrame)
	EVT_BUTTON(BUTTON_ID, myFrame::OnButtonClick)
wxEND_EVENT_TABLE()

myFrame::myFrame(const wxString &title)
	: wxFrame(nullptr, wxID_ANY, title, wxPoint(10, 10), wxSize(200, 100)),
             m_sizer(nullptr), m_button(nullptr)
{
	m_sizer = new wxBoxSizer(wxHORIZONTAL);
	m_button = new wxButton(this, BUTTON_ID, _T("Click me!"));
	m_sizer->AddSpacer(50);
	m_sizer->Add(m_button, wxSizerFlags().Center());
	SetSizer(m_sizer);
}

myFrame::~myFrame()
{
}

void myFrame::OnButtonClick(wxCommandEvent &event)
{
	Close();
}
</xmp>

<xmp>

#include "myFrame.h"

enum

{

BUTTON_ID = 10001

};

wxBEGIN_EVENT_TABLE(myFrame, wxFrame)

EVT_BUTTON(BUTTON_ID, myFrame::OnButtonClick)

wxEND_EVENT_TABLE()

myFrame::myFrame(const wxString &title)

: wxFrame(nullptr, wxID_ANY, title, wxPoint(10, 10), wxSize(200, 100)),

m_sizer(nullptr), m_button(nullptr)

{

m_sizer = new wxBoxSizer(wxHORIZONTAL);

m_button = new wxButton(this, BUTTON_ID, _T("Click me!"));

m_sizer->AddSpacer(50);

m_sizer->Add(m_button, wxSizerFlags().Center());

SetSizer(m_sizer);

}

myFrame::~myFrame()

{

}

void myFrame::OnButtonClick(wxCommandEvent &event)

{

Close();

}

</xmp>

Для того, щоб зібрати дану просту програму , необхідно виконати декілька простих кроків:

$ cd myGUIproject $ mkdir build && cd build $ cmake .. $ make

Якщо cmake досі не встановлено у вашій системі, то настав час його встановити. В Ubuntu Linux це робиться дуже просто:

$ sudo apt install cmake

Після компіляції проекту запускаємо його на виконання:

$ ./myApp

Наша програма складається лише з двох програмних модулів myApp та myFrame.
myApp містить в собі клас додатку, який наслідується від wxApp . Основний метод цього класу називається OnInit . Всередині цього методу створюється основний фрейм (вікно) програми, метод повинен повернути true, інакше програму буде закрито.
Всередині даного методу ви можете додати аналіз аргументів командного рядка argc та argv та, наприклад, у випадку “./myApp –help” вивести на екран повідомлення про використання програми та не створювати основного фрейму, а повернути false. Програма спочатку виведе на екран ваше повідомлення, а потім завершить свою роботу.

Макрос wxIMPLEMENT_APP(appClass) дозволяє wxWidgets динамічно створити обʼєкт класу додатку appClass у відповідній точці ініціалізації wxWidgets. Вам потрібно лише памʼятати, що без цього макросу ваша программа не буде компілюватися.
Другий модуль myFrame реалізує основний фрейм програми, що наслідується від wxFrame. На основному фреймі розміщуються всі інші графічні компоненти, фактично їх створення відбувається в конструкторі фрейма. Далі програма запускається і реагує на певні події (events), які ви можете додати в таблицю подій програми між рядками макроса

wxBEGIN_EVENT_TABLE(myFrame, wxFrame)
	EVT_BUTTON(BUTTON_ID, myFrame::OnButtonClick)
wxEND_EVENT_TABLE()

wxBEGIN_EVENT_TABLE(myFrame, wxFrame)

EVT_BUTTON(BUTTON_ID, myFrame::OnButtonClick)

wxEND_EVENT_TABLE()

Як бачите, в нашій простій програмі обробляється тільки одна подія натискання на кнопку, при цьому викликається метод Close і програма завершується.

Додати нові обробники подій можна також без використання таблиці подій. Для цього існує інтерфейсна функція Bind.
Функцію-обробник натиснення кнопки можна додати в програму наступним способом за допомогою Bind:

$ vim myFrame.cpp

<xmp>
#include "myFrame.h"

enum
{
	BUTTON_ID = 10001
};

myFrame::myFrame(const wxString &title)
	: wxFrame(nullptr, wxID_ANY, title, wxPoint(10, 10), wxSize(200, 100)),
             m_sizer(nullptr), m_button(nullptr)
{
	m_sizer = new wxBoxSizer(wxHORIZONTAL);
	m_button = new wxButton(this, BUTTON_ID, _T("Click me!"));
        m_button->Bind(wxEVT_BUTTON, &myFrame::OnButtonClick, this);
	m_sizer->AddSpacer(50);
	m_sizer->Add(m_button, wxSizerFlags().Center());
	SetSizer(m_sizer);
}

myFrame::~myFrame()
{
}

void myFrame::OnButtonClick(wxCommandEvent &event)
{
	Close();
}

</xmp>

<xmp>

#include "myFrame.h"

enum

{

BUTTON_ID = 10001

};

myFrame::myFrame(const wxString &title)

: wxFrame(nullptr, wxID_ANY, title, wxPoint(10, 10), wxSize(200, 100)),

m_sizer(nullptr), m_button(nullptr)

{

m_sizer = new wxBoxSizer(wxHORIZONTAL);

m_button = new wxButton(this, BUTTON_ID, _T("Click me!"));

m_button->Bind(wxEVT_BUTTON, &myFrame::OnButtonClick, this);

m_sizer->AddSpacer(50);

m_sizer->Add(m_button, wxSizerFlags().Center());

SetSizer(m_sizer);

}

myFrame::~myFrame()

{

}

void myFrame::OnButtonClick(wxCommandEvent &event)

{

Close();

}

</xmp>

Якщо код на С++ вам здається незрозумілим, то спочатку необхідно більш детально ознайомитися з цією мовою програмування, почитати про класи, конструктори, деструктори, наслідування, списки ініціалізації , оператор new. Для цього в продажу є чимала кількість книжок по С++.

Тепер повернемося до автоматичної генерації графічного інтерфейсу за допомогою Code::Blocks IDE з встановленим плагіном wxSmith. Якщо ви створюєте складний графічний інтерфейс, то набагато простіше і швидше згенерувати його в візуальному режимі. Автоматично згенерований код буде огорнутий спеціальними тегами, які в жодному разі не потрібно редагувати самостійно. Згодом ви можете захотіти змінити розташування компонентів на формі , а автоматична генерація дозволить не вносити ніяких додаткових змін вручну. Як ви, мабуть, здогадалися, основна частина автоматично згенерованого коду буде розташована всередині конструктора фрейма.

Необхідно спочатку встановити Code::Blocks IDE.

$ sudo add-apt-repository ppa:codeblocks-devs/release $ sudo apt update $ sudo apt install codeblocks codeblocks-contrib

Якщо після запуску Code::Blocks ви не побачите у верхньому меню програми пункту wxSmith , то необхідно встановити цей плагін , вибравши в верхньому меню програми Plugins-> Manage plugins…

Для того, щоб створити новий проект на основі wxSmith , виберіть в основному меню програми File->New – > Project… wxWidgets Project, натисніть Go та виберіть все так, як зображено на наступних картинках.

Так виглядає головне вікно візуального редактора Code::Blocks з плагіном wxSmith. Керівництво по використанню wxSmith знаходиться за наступним посиланням wxSmith Tutorials.

Тут я спробую зосередити вашу увагу на головних моментах при створенні графічного інтерфейсу без ручного написання коду.

Спочатку треба зʼясувати назви основних частин візуального редактора.

В лівій нижній частині екрану знаходиться вікно Properties/Events , в C++Builder аналогічне по функціональності вікно називалося інспектором обʼєктів (Object Inspector).
В цьому вікні ви можете встановити різноманітні властивості компонентів, а також вибрати обробники подій в другій закладці Events.

Зразу над вікном Properties/Events знаходиться вікно Management з декількома вкладками. Нас цікавить вкладка з ресурсами (Resources), в якій можна побачити ієрархічну структуру розташованих на формі компонентів. В ній також можна вибрати потрібний компонент , після цього він буде виділений в основному вікні.

Основне вікно знаходиться в центральній області, в ньому ви можете подивитися як візуально виглядає ваша програма з накиданими на форму компонентами.

Зразу під основним вікном знаходиться вікно з багатьма закладками , на яких ви можете вибрати необхідний вам компонент , щоб розмістити його на основному фреймі програми . В C++Builder аналогічне по функціональності вікно називалося палітрою компонентів.

Найбільш ходовими закладками на цій панелі є Standard та Layout. На закладці Layout розміщені спеціальні компоненти, що є контейнерами для інших компонентів при їх розміщенні на основному фреймі програми. Вони забезпечують масштабування зовнішнього вигляду компоненту при розтягуванні вікна або при переміщенні інших компонентів, що можуть накладатися на компонент і закривати його.

І нарешті в правій частині вікна редактора розміщена вертикальна панель, що дозволяє вибирати порядок розміщення компонентів на фреймі.

Оскільки ми можемо використовувати cmake для збирання проекту, то нам зовсім не обовʼязково зберігати всі автоматично згенеровані файли Code::Blocks. Тому необхідно окремо зазначити файли, які повинні бути збережені в вашому проекті.

Насамперед потрібно зберегти файл проекту *.cbp та всі автоматично згенеровані *.cpp та *.h файли, а також каталог wxsmith , всередині якого розміщений xml файл.

Всередині вихідних cpp та h файлів зверніть увагу на спеціальні теги.

<xmp>
//(*InternalHeaders(myGUIproject2Frame)
#include <wx/string.h>
#include <wx/intl.h>
//*)
</xmp>

<xmp>

//(*InternalHeaders(myGUIproject2Frame)

#include <wx/string.h>

#include <wx/intl.h>

//*)

</xmp>

Код між спеціальними коментарями може бути повторно згенерований при внесенні змін у візуальному редакторі, тому не потрібно редагувати цей код вручну або видаляти його із програми.

Для компіляції проекту можна створити відповідний CMakeLists.txt файл та додати в нього вихідні файли.

cmake_minimum_required(VERSION 3.5)

project(myGUIproject2)

find_package(wxWidgets 3.1 COMPONENTS core base REQUIRED)

include(${wxWidgets_USE_FILE})

set(SRC_LIST myGUIproject2App.cpp myGUIproject2Main.cpp)

add_executable(${PROJECT_NAME} ${SRC_LIST})

target_link_libraries(${PROJECT_NAME} ${wxWidgets_LIBRARIES})

cmake_minimum_required(VERSION 3.5)

project(myGUIproject2)

find_package(wxWidgets 3.1 COMPONENTS core base REQUIRED)

include(${wxWidgets_USE_FILE})

set(SRC_LIST myGUIproject2App.cpp myGUIproject2Main.cpp)

add_executable(${PROJECT_NAME} ${SRC_LIST})

target_link_libraries(${PROJECT_NAME} ${wxWidgets_LIBRARIES})

Процес компіляції виглядає наступним чином:

petro@penguin:~/myGUIproject2$ mkdir build && cd build petro@penguin:~/myGUIproject2/build$ cmake .. -- The C compiler identification is GNU 8.3.0 -- The CXX compiler identification is GNU 8.3.0 -- Check for working C compiler: /usr/bin/cc -- Check for working C compiler: /usr/bin/cc -- works -- Detecting C compiler ABI info -- Detecting C compiler ABI info - done -- Detecting C compile features -- Detecting C compile features - done -- Check for working CXX compiler: /usr/bin/c++ -- Check for working CXX compiler: /usr/bin/c++ -- works -- Detecting CXX compiler ABI info -- Detecting CXX compiler ABI info - done -- Detecting CXX compile features -- Detecting CXX compile features - done -- Found wxWidgets: -L/usr/local/lib;-pthread;;;-lwx_gtk3u_core-3.1;-lwx_baseu-3.1 (found suitable version "3.1.5", minimum required is "3.1") -- Configuring done -- Generating done -- Build files have been written to: /home/petro/myGUIproject2/build
petro@penguin:~/myGUIproject2/build$ make Scanning dependencies of target myGUIproject2 [ 33%] Building CXX object CMakeFiles/myGUIproject2.dir/myGUIproject2App.cpp.o In file included from /home/petro/myGUIproject2/myGUIproject2App.cpp:13: /home/petro/myGUIproject2/myGUIproject2Main.h:47:1: warning: null character(s) ignored /home/petro/myGUIproject2/myGUIproject2App.cpp:34:1: warning: null character(s) ignored [ 66%] Building CXX object CMakeFiles/myGUIproject2.dir/myGUIproject2Main.cpp.o In file included from /home/petro/myGUIproject2/myGUIproject2Main.cpp:10: /home/petro/myGUIproject2/myGUIproject2Main.h:47:1: warning: null character(s) ignored /home/petro/myGUIproject2/myGUIproject2Main.cpp:103:1: warning: null character(s) ignored [100%] Linking CXX executable myGUIproject2 [100%] Built target myGUIproject2 petro@penguin:~/myGUIproject2/build$

Розробка графічного інтерфейсу за допомогою wxWidgets

Author

Comments

Write a Reply or Comment Cancel reply