Wie erstelle ich eine GUI?

Question

Ich habe viele verschiedene separate Teile eines GUI-Systems für den Nintendo DS erstellt, wie Schaltflächen, Textfelder und Auswahlfelder, aber ich brauche eine Möglichkeit, diese Klassen in einer GUI-Klasse zusammenzufassen, damit ich alles auf einmal auf den Bildschirm zeichnen kann einmal, und überprüfen Sie alle Tasten gleichzeitig, um zu überprüfen, ob welche gedrückt werden.Meine Frage ist, wie man alle Klassen (z. B. Schaltflächen und Textfelder) am besten in einer GUI-Klasse organisieren kann.

Hier ist eine Möglichkeit, die mir eingefallen ist, aber sie scheint nicht richtig zu sein:

Bearbeiten: Ich verwende C++.

class Gui {
    public:
        void update_all();
        void draw_all() const;
        int add_button(Button *button); // Returns button id
        void remove_button(int button_id);
    private:
        Button *buttons[10];
        int num_buttons;
}

Dieser Code hat ein paar Probleme, aber ich wollte Ihnen nur eine Vorstellung davon geben, was ich will.

Answer 1

Diese Frage ist der Frage, die ich stellen wollte, sehr ähnlich, nur bezieht sich meine Frage auf die Sony PSP-Programmierung.

Ich habe eine Weile mit etwas herumgespielt, ich habe einige Bücher konsultiert und VTMs, und bisher ist dies eine grobe Vorstellung von einem einfachen UI-System.

class uiElement()
{
    ...
    virtual void Update() = 0;
    virtual void Draw() = 0;
    ...
}

class uiButton() public : uiElement
{
    ...
    virtual void Update();
    virtual void Draw();
    ...
}

class uiTextbox() public : uiElement
{
    ...
    virtual void Update();
    virtual void Draw();
    ...
}

... // Other ui Elements

class uiWindow()
{
    ...
    void Update();
    void Draw();

    void AddElement(uiElement *Element);
    void RemoveElement(uiElement *Element);

    std::list <uiElement*> Elements;

    ...
}

void uiWindow::Update()
{
    ...
    for (list <uiElement*>::iterator it = Elements.begin(); it != Elements.end(); it++ )
        it->Update();
    ...
}

void uiWindow::Draw()
{
    ...
    for (list <uiElement*>::iterator it = Elements.begin(); it != Elements.end(); it++ )
        it->Draw();
    ...
}

Das Prinzip besteht darin, ein Fenster zu erstellen, UI-Elemente darauf anzubinden und die Zeichen- und Aktualisierungsmethoden aus den jeweiligen Hauptfunktionen aufzurufen.

Bei mir funktioniert noch nichts, da ich Probleme mit dem Zeichnen von Code habe.Da auf dem PC und der PSP unterschiedliche APIs vorhanden sind, schaue ich mir einen Wrapper-Code für OpenGL und PSP Gu an.

Hoffe das hilft.

thing2k

Answer 2

Für alle Interessierten ist hier mein Open-Source-GUI-Toolkit mit BSD-Lizenz für den DS:

http://www.sourceforge.net/projects/woopsi

Die Antwort von thing2k ist ziemlich gut, aber ich würde ernsthaft empfehlen, Code zu haben, der untergeordnete UI-Elemente in der Basisklasse uiElement enthält.Dies ist das Muster, dem ich in Woopsi gefolgt bin.

Wenn du nicht Wenn Sie dies in der Basisklasse unterstützen, werden Sie auf große Probleme stoßen, wenn Sie versuchen, etwas Komplexeres als ein Textfeld und eine Schaltfläche zu implementieren.Zum Beispiel:

• Tab-Leisten können als mehrere Schaltflächen modelliert werden, die in einem einzigen übergeordneten UI-Element gruppiert sind, das die gegenseitige Ausschließlichkeit der Auswahl erzwingt;
• Optionsfeldgruppen (dito);
• Bildlaufleisten können als Schieberegler/Stegelement und Auf-/Ab-Schaltflächen dargestellt werden;
• Scrolllisten können als Container und UI-Elemente mit mehreren Optionen dargestellt werden.

Denken Sie auch daran, dass der DS über eine 66-MHz-CPU und 4 MB RAM verfügt, die sowohl zum Speichern Ihres Programms als auch zur Ausführung verwendet werden (DS-ROMs werden vor der Ausführung in den RAM geladen).Sie sollten es eigentlich als eingebettetes System behandeln, was bedeutet, dass die STL nicht verfügbar ist.Ich habe die STL von Woopsi entfernt und es geschafft, 0,5 MB zu sparen.Für Desktop-Verhältnisse nicht viel, aber das ist 1/8 des gesamten verfügbaren Speichers des DS, der durch STL-Müll verbraucht wird.

Ich habe den gesamten Prozess des Schreibens der Benutzeroberfläche in meinem Blog detailliert beschrieben:

http://ant.simianzombie.com/blog

Es enthält Beschreibungen der beiden Algorithmen, die ich zum Neuzeichnen des Bildschirms entwickelt habe. Dies ist der schwierigste Teil beim Erstellen einer GUI (man teilt einfach Rechtecke auf und merkt sich sichtbare Bereiche;der andere verwendet BSP-Bäume, was viel effizienter und leichter zu verstehen ist), Tipps zur Optimierung usw.

Answer 3

Eine nützliche Strategie, die Sie im Hinterkopf behalten sollten, könnte die sein zusammengesetztes Muster.Auf einer niedrigen Ebene können Sie damit möglicherweise alle GUI-Objekte (und Objektsammlungen) nach der Erstellung einfacher behandeln.Da ich jedoch keine Ahnung habe, worum es bei der Gestaltung eines GUI-Frameworks geht, kann man sich allgemein im Quellcode eines bestehenden Projekts inspirieren lassen. WxWidgets ist ein plattformübergreifendes GUI-Framework mit verfügbarer Quelle.Viel Glück mit Ihrem Projekt!

Answer 4

Ich denke, ein Blick auf die Art und Weise, wie andere GUI-Toolkits dies getan haben, wäre ein ausgezeichneter Ausgangspunkt.Was C++-Beispiele angeht, habe ich viel Gutes gehört Qt.Ich habe es jedoch nicht persönlich verwendet.Und natürlich WxWidgets, wie Nick erwähnt hat.

Answer 5

Ich habe eine sehr einfache GUI geschrieben, genau wie Sie es vorschlagen.Ich habe es unter Windows, Linux und Macintosh laufen lassen.Es sollte relativ einfach auf jedes System wie die PSP oder den DS portierbar sein.

Es ist Open Source, LGPL und ist hier:

http://code.google.com/p/kgui/