Come faccio a creare una GUI?

Question

Ho realizzato molte parti separate e diverse di un sistema GUI per Nintendo DS, come pulsanti, caselle di testo e caselle di selezione, ma ho bisogno di un modo per contenere queste classi in un'unica classe Gui, in modo da poter disegnare tutto sullo schermo in un colpo solo. una volta e controllare tutti i pulsanti contemporaneamente per verificare se qualcuno è premuto.La mia domanda è: qual è il modo migliore per organizzare tutte le classi (come pulsanti e caselle di testo) in un'unica classe GUI?

Ecco un modo a cui ho pensato ma non mi sembra giusto:

Modificare: Sto usando 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;
}

Questo codice presenta alcuni problemi, ma volevo solo darti un'idea di ciò che voglio.

Answer 1

Questa domanda è molto simile a quella che stavo per pubblicare, solo che la mia riguarda la programmazione di Sony PSP.

È da un po' che sto giocando con qualcosa, ho consultato alcuni libri e VTM, e finora questa è un'idea approssimativa di un semplice sistema di interfaccia utente.

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();
    ...
}

Il principio è creare una finestra e associarvi gli elementi dell'interfaccia utente, quindi chiamare i metodi draw e update dalle rispettive funzioni principali.

Non ho ancora nulla che funzioni, poiché ho problemi con il codice di disegno.Con diverse API su PC e PSP, sto cercando del codice wrapper per OpenGL e psp gu.

Spero che questo ti aiuti.

cosa2k

Answer 2

Per chiunque sia interessato, ecco il mio toolkit GUI open source con licenza BSD per DS:

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

La risposta di thing2k è piuttosto buona, ma consiglierei seriamente di avere un codice che contenga elementi dell'interfaccia utente secondari nella classe base uiElement.Questo è lo schema che ho seguito in Woopsi.

Se tu non supportarlo nella classe base, incontrerai grossi problemi quando proverai a implementare qualcosa di più complesso di una casella di testo e un pulsante.Per esempio:

• Le barre delle schede possono essere modellate come più pulsanti raggruppati insieme in un unico elemento principale dell'interfaccia utente che impone la mutua esclusività della selezione;
• Gruppi di pulsanti di opzione (idem);
• Le barre di scorrimento possono essere rappresentate come elementi di scorrimento/rilegatura e pulsanti su/giù;
• Gli elenchi a scorrimento possono essere rappresentati come un contenitore e più elementi dell'interfaccia utente con opzioni.

Inoltre, vale la pena ricordare che il DS ha una CPU da 66 MHz e 4 MB di RAM, che viene utilizzata sia per memorizzare il programma che per eseguirlo (le ROM DS vengono caricate nella RAM prima di essere eseguite).Dovresti davvero trattarlo come un sistema integrato, il che significa che STL è fuori uso.Ho rimosso l'STL da Woopsi e sono riuscito a salvare 0,5 MB.Non molto per gli standard desktop, ma è 1/8 della memoria totale disponibile del DS consumata dalla spazzatura STL.

Ho dettagliato l'intero processo di scrittura dell'interfaccia utente sul mio blog:

http://ant.simianzombie.com/blog

Include le descrizioni dei due algoritmi che ho ideato per ridisegnare lo schermo, che è la parte più complicata della creazione di una GUI (uno divide semplicemente i rettangoli e ricorda le regioni visibili;l'altro utilizza alberi BSP, che sono molto più efficienti e facili da comprendere), suggerimenti per l'ottimizzazione, ecc.

Answer 3

Una strategia utile da tenere a mente potrebbe essere la modello composito.A un livello basso, potrebbe consentire di trattare tutti gli oggetti della GUI (e le raccolte di oggetti) più facilmente una volta creati.Ma non ho idea di cosa sia coinvolto nella progettazione della struttura della GUI, quindi un posto dove trovare ispirazione generale è nel codice sorgente di un progetto esistente. WxWidgets è un framework GUI multipiattaforma con sorgente disponibile.Buona fortuna con il vostro progetto!

Answer 4

Penso che guardando il modo in cui hanno fatto altri toolkit GUI sarebbe un ottimo punto di partenza.Per gli esempi C++, ho sentito molte cose positive Qt.Non l'ho usato personalmente però.E ovviamente WxWidgets, come ha detto Nick.

Answer 5

Ho scritto una GUI molto semplice proprio come proponi.Ce l'ho in esecuzione su Windows, Linux e Macintosh.Dovrebbe essere portato relativamente facilmente su qualsiasi sistema come PSP o DS.

È open source, LGPL ed è qui:

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