wxWidgets mit C++ – Teil 3

Im letzten wxWidgets mit C++ Teil wurde die IDE eingerichtet, ein Projekt erstellt und das erste Fenster implementiert. Nun kann jeder Entwickler die Dokumentation nehmen und sich überlegen welche Steuerelemente er braucht und damit herumspielen….ein GUI bauen geht aber viel schneller!

wxWidgets mit C++ – Teil 3

Entwickler sind faule Menschen. Sie wiederholen keine Tätigkeiten, sie entwickeln lieber Programme die diese für sie tun. Genau so würde kein Entwickler beginnen ein Dialogfenster mit Steuerelemente aus dem Code blind zu bauen. Viel besser und schneller ist dafür ein Editor bei dem man alle verfügbaren Steuerelemente sieht, diese per Drag and Drop ins Fenster zieht und optisch ausrichtet. Kurz eine RAD-Umgebung (Rapid Application Development Umgebung) auch Visuelle Programmierumgebung genannt. Visual Studio bietet das für die C++ Entwicklung beispielsweise für MFC an. Für wxWidgets gibt es so etwas nicht. Man könnte jedoch die Fenster und Dialoge in MFC bauen und die Werte in wxWidgets übernehmen. Eine schönere Lösung ist jedoch ein echter wxWidgets Editor.

CodeLite

Einer der besten C++ IDEs ist CodeLite. Diese Umgebung beinhaltet standardmäßig den wxCrafter Editor. Damit kann man schnell und unkompliziert eigene Dialoge und Fenster bauen. CodeLite ist für die Cross-Plattform Entwicklung eine gute Idee, ich verwende sie auf meinen Linux Systemen. Ziel meines Projekts ist, dass es auch auf Linux läuft, d.h. ich werde das Visual Studio Projekt früher oder später in CodeLite mit dem gleichen Source Code erstellen und dort das Linux Programm bauen.

Ich erstelle ein neues Projekt und wähle als Typ wxWidgets GUI Applikation:

Ein Doppelklick auf wxcrafter.wxcp öffnet den Editor.

Der Screenshot zeigt einen Blick auf den Editor im ersten Projekt. Das Standardfenster MyFrame bildet die Grundlage an der ich mein erstes wxWidgets Projekt erarbeite. Der Editor ist fast selbsterklärend. Man kann die bekannten Steuerelemente in die hierarchische Ansicht links ziehen und rechts die Eigenschaften wie Titel, Ausrichtung usw. ändern. Die Steuerelemente sind gruppiert nach:

• Forms
• Sizers
• Containers
• Controls
• Menu/Toolbar
• wxRibbonBar
• Advanced

Das Fenster in der Mitte zeigt das Ergebnis, man kann dort auch interaktiv Menüs öffnen und ansehen. Außerdem gibt es einen Preview Modus, der das Fenster öffnet.

Ich verwende das Tool um schnell die Elemente zu platzieren, zu benennen und dessen Eigenschaften zu setzen. Alles weitere werde ich dann „händisch“ im Code verfeinern. Nachdem also das GUI erstellt ist kopiere ich den Inhalt der Header (wxcrafter.h) und der Quelldatei (wxcrafter.cpp) in mein Visual Studio Projekt. Dort habe ich im letzten Artikel bereits ein Fenster angelegt. Bei einem kurzen Vergleich zeigt sich, auch die Klasse in wxcrafter ist von wxFrame abgeleitet. Das heißt wir können dessen Inhalt in die eigene Klasse übernehmen.

Nach ungefähr einer Stunde in Einarbeitung und Steuerelemente platzieren, den Code in Visual Studio übernehmen und das Projekt neu compilieren sieht das Ergebnis so aus:

Für relativ wenig Arbeit sieht das Ergebnis sehr gut aus. Da ich mich aktuell an einem Remake versuche ist der Vergleich noch interessanter. Mit dem schnellen Prototyping baut man sehr einfach bestehende User Interfaces nach.

Alternativen

Meine erste Wahl für diese Artikelserie war eigentlich der wxFormBuilder. Ich habe einige Stunden investiert und wollte den Editor auf zwei Systemen zum Laufen bringen:

• Raspberry Pi
  Auf meinem Raspberry Pi Entwicklungssystem war es mir nicht möglich den Editor aus dem Code zu bauen. Das Script hat den headless laufenden Raspberry Pi immer für zig Minuten aus dem Netzwerk entfernt. Man konnte ihn nur noch pingen. Nach langer Wartezeit zeigte ein neuerlicher Login aber keinen erfolgreichen Build an.
• virtuelles  Linux
  Auf meinem PC habe ich dann ein aktuelles virtuelles Debian Linux aufgesetzt. Dort konnte ich den wxFormBuilder aus dem Code bauen. Trotz aller Versuche startete zwar die Oberfläche, aber zahlreiche Fehler beim Laden endeten in einem leeren Toolset. Ohne Steuerelemente macht der beste Editor keinen Sinn.

Weiter als so bin ich auf meinem virtuellen Dev System nicht gekommen…

Fazit

Die GUI Entwicklung ist bei Entwicklern immer so ein Thema. Ich beschäftige mich nicht gerne mit dem Platzierung und Ausrichten von Steuerelementen. Insbesondere dann, wenn diese noch responsiv sein müssen wie bei der Webentwicklung. wxWidgets macht die Arbeit sehr angenehm und ich bin nach dem Prototyping des Editors motiviert den dahinterliegenden Code zu schreiben. Bin gespannt ob die einzelnen Dialoge auch so einfach zu integrieren sind.

Teil 1 | Teil 2 | Teil 3| Teil 4