Kategorie: wxWidgets

wxWidgets-Tutorial 013: wxGridBagSizer

Thorsten Geppert Schreib einen Kommentar

In diesem Video zeige ich, wie ein wxGridBagSizer funktioniert.

Der wxGridBagSizer basiert auf dem wxFlexGridSizer, bietet aber die Möglichkeit, Widgets und Sizer darin explizit zu positionieren und der Sizer kann Zellen zusammenführen.

Sizer (Layoutmanager): wxGridBagSizer

Hier ein Screenshot von unserem Beispielprogramm:

Screenshot des Beispielprogramms

Der Quelltext:

#include <wx/wx.h>
#include <wx/gbsizer.h>

class MyApp : public wxApp {

	public:
		bool OnInit();

};

class MyFrame : public wxFrame {

	public:
		MyFrame();

};

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit() {
	auto *myFrame = new MyFrame;
	myFrame->Show();

	SetTopWindow(myFrame);

	return true;
}

MyFrame::MyFrame() : wxFrame(nullptr, wxID_ANY, _("wxGridBagSizer")) {
	auto *mainPanel = new wxPanel(this);
	
	auto *gridBagSizer = new wxGridBagSizer(5, 5);

	wxGBSpan twoSpan(1, 2);

	gridBagSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Firstname:")), wxGBPosition(0, 0), wxDefaultSpan, wxALIGN_RIGHT);
	gridBagSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), wxGBPosition(0, 1), twoSpan, wxEXPAND);

	gridBagSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Lastname:")), wxGBPosition(1, 0), wxDefaultSpan, wxALIGN_RIGHT);
	gridBagSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), wxGBPosition(1, 1), twoSpan, wxEXPAND);

	gridBagSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Age:")), wxGBPosition(2, 0), wxDefaultSpan, wxALIGN_RIGHT);
	gridBagSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), wxGBPosition(2, 1));

	gridBagSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Zipcode/City:")), wxGBPosition(3, 0), wxDefaultSpan, wxALIGN_RIGHT);
	gridBagSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), wxGBPosition(3, 1));
	gridBagSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), wxGBPosition(3, 2), wxDefaultSpan, wxEXPAND);

	gridBagSizer->AddGrowableCol(2);

	mainPanel->SetSizer(gridBagSizer);
	gridBagSizer->SetSizeHints(this);
}

Hier geht es zum Video.

wxWidgets-Tutorial 012: wxSizer verschachteln

Thorsten Geppert Schreib einen Kommentar

In diesem Video zeige ich, wie einfach es ist, wxSizer zu verschachteln.

Um komplexe GUIs zu entwickeln, ist es unabdingbar, dass man Sizer ineinander verschachteln kann. Damit lassen sich einfach und übersichtlich Formulare entwickeln, die dem Benutzer einen hohen Mehrwert bringen.

Sizer (Layoutmanager): wxSizer verschachteln

Hier ein Screenshot unseres Programms:

Screenshot von verschachtelten Sizern

Hier der Quelltext:

#include <wx/wx.h>

class MyApp : public wxApp {

	public:
		bool OnInit();

};

class MyFrame : public wxFrame {

	public:
		MyFrame();

};

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit() {
	auto *myFrame = new MyFrame;
	myFrame->Show();

	SetTopWindow(myFrame);

	return true;
}

MyFrame::MyFrame() : wxFrame(nullptr, wxID_ANY, _("Sizer in Sizers")) {
	auto *mainPanel = new wxPanel(this);

	auto *mainBoxSizer = new wxBoxSizer(wxHORIZONTAL);

	auto *flexGridSizer = new wxFlexGridSizer(2, 5, 5);

	flexGridSizer->AddGrowableCol(1);
	flexGridSizer->AddGrowableRow(4);

	flexGridSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Firstname:")), 0, wxALIGN_CENTER_VERTICAL | wxALIGN_RIGHT);
	flexGridSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), 0, wxEXPAND);

	flexGridSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Lastname:")), 0, wxALIGN_CENTER_VERTICAL | wxALIGN_RIGHT);
	flexGridSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), 0, wxEXPAND);

	flexGridSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Zipcode/City:")), 0, wxALIGN_CENTER_VERTICAL | wxALIGN_RIGHT);

	auto *addressSizer = new wxBoxSizer(wxHORIZONTAL);
	addressSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY));
	addressSizer->AddSpacer(5);
	addressSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), 1);

	flexGridSizer->Add(addressSizer, 0, wxEXPAND);

	flexGridSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Age:")), 0, wxALIGN_CENTER_VERTICAL | wxALIGN_RIGHT);
	flexGridSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY));

	flexGridSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Informations:")));
	flexGridSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), 0, wxEXPAND);

	mainBoxSizer->Add(flexGridSizer, 1, wxEXPAND | wxALL, 15);

	mainPanel->SetSizer(mainBoxSizer);
	mainBoxSizer->SetSizeHints(this);
}

Hier geht es zum Video.

wxWidgets-Tutorial 011 – wxFlexGridSizer

Thorsten Geppert Schreib einen Kommentar

In diesem Video zeige ich die Verwendung von wxFlexGridSizer.

Im Gegensatz zum wxBoxSizer, der Elemente nur horizontal oder vertikal ausrichten kann, dient der wxFlexGridSizer wie eine Tabelle, in der bestimmt werden kann, welche Spalten und Zeilen sich ausdehen durfen und in dem man einfach Formulare zusammensetzen kann.

Sizer (Layoutmanager): wxFlexGridSizer

Hier ein Screenshot unseres Programms:

Screenshot vom wxFlexGridSizer

Hier der Quelltext:

#include <wx/wx.h>

class MyApp : public wxApp {

	public:
		bool OnInit();

};

class MyFrame : public wxFrame {

	public:
		MyFrame();

};

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit() {
	auto *myFrame = new MyFrame;
	myFrame->Show();

	SetTopWindow(myFrame);

	return true;
}

MyFrame::MyFrame() : wxFrame(nullptr, wxID_ANY, _("wxFlexGridSizer")) {
	auto *mainPanel = new wxPanel(this);

	auto *flexGridSizer = new wxFlexGridSizer(2, 5, 5);

	flexGridSizer->AddGrowableCol(1);
	flexGridSizer->AddGrowableRow(3);

	flexGridSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Firstname:")), 0, wxALIGN_CENTER_VERTICAL | wxALIGN_RIGHT);
	flexGridSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), 0, wxEXPAND);

	flexGridSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Lastname:")), 0, wxALIGN_CENTER_VERTICAL | wxALIGN_RIGHT);
	flexGridSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), 0, wxEXPAND);

	flexGridSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Age:")), 0, wxALIGN_CENTER_VERTICAL | wxALIGN_RIGHT);
	flexGridSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY));

	flexGridSizer->Add(new wxStaticText(mainPanel, wxID_ANY, _("Informations:")));
	flexGridSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY), 0, wxEXPAND);

	mainPanel->SetSizer(flexGridSizer);
	flexGridSizer->SetSizeHints(this);
}

Hier geht es zum Video.

wxWidgets-Tutorial 010 – wxBoxSizer

Thorsten Geppert Schreib einen Kommentar

In diesem Video beginnen wir mit Sizern, im Speziellen mit wxBoxSizer.

Layoutmanager sind essentiell bei der Programmierung von grafischen Benutzeroberflächen. Gab es zu Beginn der grafischen Benutzeroberflächen teils nur die Möglichkeit, Elemente absolut positioniert zu platzieren, bieten Layoutmanager, bei wxWidgets Sizer genannt, die Möglichkeit, die Ausrichtung und Anordnung dynamisch zu gestalten.

Der wxBoxSizer kann Elemente horizontal oder vertikal anordnen, proportional vergrößern und verkleiner, ausrichten und vieles mehr.

Sizer (Layoutmanager): wxBoxSizer

Hier ein Screenshot unseres Programms:

Screenshot mit einem wxBoxSizer

Hier der Quelltext:

#include <wx/wx.h>

class MyApp : public wxApp {

	public:
		bool OnInit();

};

class MyFrame : public wxFrame {

	public:
		MyFrame();

};

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit() {
	auto *myFrame = new MyFrame;
	myFrame->Show();

	SetTopWindow(myFrame);

	return true;
}

MyFrame::MyFrame() : wxFrame(nullptr, wxID_ANY, _("wxBoxSizer")) {
	auto *mainPanel = new wxPanel(this);
	auto *mainBoxSizer = new wxBoxSizer(wxHORIZONTAL); // wxVERTICAL

	mainBoxSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY, _("Eingabefeld 1")), 1, wxEXPAND | wxLEFT | wxTOP | wxBOTTOM, 5);
	mainBoxSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY, _("Eingabefeld 2")), 2, wxEXPAND | wxALL, 5);
	mainBoxSizer->AddStretchSpacer();
	mainBoxSizer->Add(new wxTextCtrl(mainPanel, wxID_ANY, _("Eingabefeld 3")), 1, wxEXPAND | wxRIGHT | wxTOP | wxBOTTOM, 5);


	auto *tmp = new wxTextCtrl(mainPanel, wxID_ANY, _("Eingabefeld 0"));
	mainBoxSizer->Insert(0, tmp, 1, wxEXPAND | wxRIGHT | wxTOP | wxBOTTOM, 5);
	mainBoxSizer->InsertSpacer(0, 50);

	mainBoxSizer->Detach(1);
	tmp->Destroy();


	mainPanel->SetSizer(mainBoxSizer);
	mainBoxSizer->SetSizeHints(this);

	std::cout << "Element count: " << mainBoxSizer->GetItemCount() << std::endl;
	std::cout << "Position: " << mainBoxSizer->GetPosition().x << "x" << mainBoxSizer->GetPosition().y << std::endl;
	std::cout << "Size: " << mainBoxSizer->GetSize().GetWidth() << "x" << mainBoxSizer->GetSize().GetHeight() << std::endl;
}

Hier geht es zum Video.

Qt-Tutorial 042: QStatusBar

Thorsten Geppert Schreib einen Kommentar

In diesem Video zeige ich, wie man mit der Statusbar (QStatusBar) umgehen kann.

Viele Fenster des benutzten Fenstermanagers haben am unteren Rand eine Leiste, die manchmal einfach nur da ist, manchmal Informationen anzeigt, manchmal aber auch Interaktionen anbietet. Dieses Video zeigt, wie man Informationen dauerhaft oder für eine gewisse Zeit anzeigt oder Widgets hinzufügt.

QStatusBar

Hier ein Bild unseres Programms:

Screenshot von unserem Beispielprogramm mit QStatusBar

Hier geht es zum Video.

Bald neue Videos

Thorsten Geppert Schreib einen Kommentar

Viele haben mir geschrieben, dass ich doch weitere Videos bzw. Tutorials machen soll. Das freut mich sehr.

Zur Zeit nimmt mich die neue Arbeitstelle und meine Familie gut ein, ich habe aber schon die nächsten Videos geplant (Themen: wxWidgets, Qt und auch FreeBSD) und freue mich, sie bald machen und veröffentlichen zu können. Es dauert allerdings noch ein paar Tage. Aber: Es wird mit den Tutorials weiter gehen.

Wenn ihr Vorschläge für bestimmte Themen habt, gerne her damit.

compow als Privatprojekt in Form einer Referenz wieder online

Thorsten Geppert Schreib einen Kommentar

Eines meiner Projekte, dass ich vor wenigen Jahren gemacht hatte, lag noch auf meiner Festplatte und war bereits lange nicht mehr aktiv. Ich dachte mir allerdings, dass ich das noch einmal gerne als Referenz von mir online stellen wollte: compow.

Bei compow handelt es sich um eine Website, auf der sich Firmen vorstellen können und Stellenanzeigen schalten können. Ursprünglich war das mal kostenpflichtig, was ich aber herausgenommen habe, da ich nicht selbständig bin und damit kein Geld verdiene, es ist lediglich eine meiner Referenzen.

Das Interessante an der Website ist der Tech-Stack, denn anstelle einer der üblichen Webprogrammiersprachen wie Ruby, PHP, Python, Go, ASP.NET (keine Sprache, aber ihr wisst, was ich meine), basiert diese Website auf folgenden Technologien:

Wie gesagt, die Seite dient einfach nur als Referenz, womit ich mich in den letzten Jahren beschäftigte. Die Website ist nicht weiterentwickelt und wird es mitunter auch nicht.

wxWidgets auf Windows per Kommandozeile mit Visual Studio kompilieren

Thorsten Geppert Schreib einen Kommentar

Wer schnell und einfach wxWidgets auf Windows auf der Kommandozeile kompilieren will, öffnet ein Visual Studio Terminal, also ein Terminal, in dem die Umgebungsvariablen für VS gesetzt sind, navigiert zu den Sourcen von wxWidgets und dort ins Verzeichnis build\msw und kann via nmake den Kompilationsprozess in Gang setzen:

nmake /f makefile.vc BUILD=release SHARED=0 TARGET_CPU=X64 RUNTIME_LIBS=static

Wir sehen am Beispiel, dass wir eine Release-Version von wxWidgets bauen, also keine Debug-Informationen drin sind (ansonsten release einfach durch debug tauschen). SHARED=0 bedeutet, dass wir keine dynamischen Libraries bauen möchten (wenn doch, einfach weglassen). Die restlichen Parameter sollten ebenso selbsterklärend sein.

wxWidgets-Tutorial 008 – Das erste Programm: Netto-Brutto-Rechner

Thorsten Geppert Schreib einen Kommentar

Um uns zu motivieren, schreiben wir in diesem Video unser erstes eigenes kleines Programm. Ihr könnt mal schauen, ob wxWidgets das Richtige für euch ist und schon, nach dem ersten Erfolgserlebnis, damit ein wenig herumspielen.

Das erste Programm: Netto-Brutto-Rechner
Das erste Programm: Netto-Brutto-Rechner

Und so sieht das Programm aus:

Beispielprogramm
Beispielprogramm

Hier noch der Quelltext:

#include <wx/wx.h>

class BruttoNettoApp : public wxApp {

	public:
		bool OnInit();

};

class BruttoNettoFrame : public wxFrame {

	public:
		BruttoNettoFrame();
	
	private:
		wxPanel *mainPanel;
		wxBoxSizer *mainBoxSizer;
		wxTextCtrl *priceTextCtrl;
		wxStaticText *multiplicatorStaticText;
		wxComboBox *taxComboBox;
		wxButton *calculateButton;
		wxTextCtrl *resultTextCtrl;

};

IMPLEMENT_APP(BruttoNettoApp)

bool BruttoNettoApp::OnInit() {
	BruttoNettoFrame *bruttoNettoFrame = new BruttoNettoFrame;
	bruttoNettoFrame->Show();
	
	SetTopWindow(bruttoNettoFrame);

	return true;
}

BruttoNettoFrame::BruttoNettoFrame() : wxFrame(nullptr, wxID_ANY, "Brutto-Netto-Rechner") {
	mainPanel = new wxPanel(this, wxID_ANY);
	mainBoxSizer = new wxBoxSizer(wxHORIZONTAL);

	priceTextCtrl = new wxTextCtrl(mainPanel, wxID_ANY);
	mainBoxSizer->Add(priceTextCtrl, 1);

	multiplicatorStaticText = new wxStaticText(mainPanel, wxID_ANY, "x");
	mainBoxSizer->Add(multiplicatorStaticText);

	taxComboBox = new wxComboBox(mainPanel, wxID_ANY, "", wxDefaultPosition, wxDefaultSize, 0, NULL, wxCB_READONLY);
	taxComboBox->Append("7%");
	taxComboBox->Append("19%");
	taxComboBox->SetSelection(0);
	mainBoxSizer->Add(taxComboBox);

	calculateButton = new wxButton(mainPanel, wxID_ANY, "=");
	calculateButton->Bind(wxEVT_BUTTON, [this](wxCommandEvent &event) {
		double price = 0.f;
		if(priceTextCtrl->GetValue().ToDouble(&price)) {
			price *= taxComboBox->GetSelection() == 0 ? 1.07 : 1.19;
			resultTextCtrl->SetValue(wxString::Format(_("%lf"), price));
		} else {
			wxMessageBox("Wrong price", "Error");
		}
	});
	mainBoxSizer->Add(calculateButton);
	
	resultTextCtrl = new wxTextCtrl(mainPanel, wxID_ANY, "", wxDefaultPosition, wxDefaultSize, wxTE_READONLY);
	mainBoxSizer->Add(resultTextCtrl, 1);

	mainPanel->SetSizer(mainBoxSizer);
	mainBoxSizer->SetSizeHints(this);

	SetSize(500, -1);

	priceTextCtrl->SetFocus();
	calculateButton->SetDefault();
}

Wer Windows und VisualStudio benutzt, kann auf den Play-Button klicken. Unter anderen Systemen könnte die Kompilierung so aussehen:

c++ NettoBruttoRechner.cpp -o NettoBruttoRechner -std=c++11 `wx-config --libs --cppflags`

Auf die einzelnen Komponenten gehe ich dann Stück für Stück in den nächsten Videos ein. Also keine Angst, falls Ihr hier etwas nicht verstehen solltet, das kommt bald.

Hier geht es zum Video.