29 maja 2015

wxFormBuilder szybki start

Budowanie GUI dla wxWidgets może być nużące z palca. Fragmentami wyobraźni widzę plugin do Visual Studio na miarę C++ Buildera – to byłoby coś! Istniejąca alternatywa jest też niezła: wxFormBuilder. Wykorzystałem je przy budowie mojej aplikacji klient-serwer przy okazji ucząc się wxWidgets oraz ichnich socketów.

klient

Pierwsza aplikacja w wxWidgets – klient

serwer

Pierwsza aplikacja w wxWidgets – serwer

 

Tworzenie GUI w wxFormBuilder

Filozofia wxFormBuildera opera się na “sizerach” – po polsku można by to nazwać tabelami (komórkami tabeli, kolumnami, wierszami..). Ogólnie idea przemawiająca za tym jest taka, żeby okno po rozciągnięciu posiadało względnie podobny wygląd.

Przykładowo, chcemy zaprogramować aplikację która ma służyć do otwierania pewnego archiwum z plikami graficznymi, wyświetlać te pliki w drzewku a po kliknięciu na element drzewa wyświetlać obrazek obok. Interfejs mógłby wyglądać następująco:

sample1

“MyButton” to przycisk otwierania okna wyszukiwania, leżące obok niego pole tekstowe będzie ścieżką do pliku, drzewko jest listą plików w archiwum a puste okno po prawej – miejscem na wyświetlenie grafiki.

Pod tym kryją się rzeczone “sizery”, zaznaczone tutaj na czerwono:

sample1

to jest równoważne z:

wxTreeCtrl
wxPanel
wxTextCtrl
wxButton

Elementy w sizerze mogą być ustawiane pionowo albo poziomo (wxHORIZONTAL – “jeden na drugim”, wxVERTICAL – obok siebie) – odpowiada za to opcja “orient” w opcjach sizera:

orient

Całą filozofia dalszego budowania aplikacji polega na odpowiednim dopasowywaniu opcji rozciągania oraz proporcji elementów.

Przyciski rozciągania

Przyciski rozciągania

Proporcja elementu

Proporcja elementu

Proporcje – czyli rozłożenie elementów w jednej komórce. W przykładzie z drzewem i panelem wpisamo proporcję panelu jako 3 a drzewa – 2. Z tego mamy, że panel zajmuje 3 części obszaru (3/5) a drzewko 2 części (2/5).

 

Generowanie kodu źródłowego z wxFormBuildera

Po zaprojektowaniu GUI trzeba je zaimplementować w C++. wxFormBuilder posiada generatory do kilku języków, m. in. C++. Przed generowaniem kodu trzeba zdefiniować nazwę pliku, którą wxFormBuilder będzie generował z projektu – u mnie “mainFrameBase” a także “target” – pliki C++:

filename

Następnie wybieramy “File->Generate code” – wygenerują się pliki “mainFrameBase.cpp” i “mainFrameBase.h” które podpinamy do projektu.

 

Dołączanie GUI do projektu

Mając już gotowy do kompilacji projekt (zdefiniowane ścieżki zgodnie z Microsoft Visual C++ Guide) tworzymy trzy pliki:

  • main.cpp – główny plik (standardowy)
  •  mainFrame.h – deklaracja klas (dziedziczenie z mainFrameBase)
  •  mainFrame.cpp – definicja klas (metody wirtualne), konstruktor i destruktor

W pliku “mainFrame” stworzono klasę dziedziczącą z “mainFrameBase” – “MyFrame1”. Ma ona związek z nazwą okna w wxFormBuilderze:

myframe1

 

Inne dostępne ciekawe opcje których używam to m. in. precompiled header który znacząca przyspiesza budowanie aplikacji.

Na sam koniec pokusiłem się także o spakowanie UPXem (upx -9 –ultra-brute) podstawowych bibliotek DLL co zmniejszyło ich rozmiar do około 2MB.

Źródła

 

TrackBack

TrackBack URL dla tej wiadomości:
https://blog.kkthx.pl/2015/05/wxformbuilder-szybki-start/trackback/

Napisz komentarz