如何制作GUI？

I've made many different seperate parts of a GUI system for the Nintendo DS, like buttons and textboxes and select boxes, but I need a way of containing these classes in one Gui class, so that I can draw everything to the screen all at once, and check all the buttons at once to check if any are being pressed. My question is what is the best way organize all the classes (such as buttons and textboxes) into one GUI class?

我已经为Nintendo DS制作了许多不同的GUI系统部分,比如按钮和文本框以及选择框,但是我需要一种在一个Gui类中包含这些类的方法,这样我就可以将所有内容绘制到屏幕上一次,并立即检查所有按钮以检查是否有任何按钮被按下。我的问题是,将所有类(如按钮和文本框)组织到一个GUI类中的最佳方法是什么?

Here's one way I thought of but it doesn't seem right:

这是我想到的一种方式,但似乎并不正确:

Edit: I'm using C++.

编辑:我正在使用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;
}

This code has a few problems, but I just wanted to give you an idea of what I want.

这段代码有一些问题,但我只是想让你知道我想要什么。

5 个解决方案

#1

This question is very similar to one I was going to post, only mine is for Sony PSP programming.

这个问题与我要发布的问题非常类似,只有我的索尼PSP编程。

I've been toying with something for a while, I've consulted some books and VTMs, and so far this is a rough idea of a simple ui systems.

我已经玩了一段时间的东西,我已经咨询了一些书籍和VTM,到目前为止,这是一个简单的ui系统的粗略概念。

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

The princple is to create a window and attact ui Elements to it, and call the draw and update methods from the respective main functions.

原理是创建一个窗口并获取ui Elements,并从相应的主函数中调用draw和update方法。

I don't have anything working yet, as I have issues with drawing code. With different APIs on the PC and PSP, I'm looking at some wrapper code for OpenGL and psp gu.

我还没有任何工作,因为我有绘图代码的问题。在PC和PSP上使用不同的API,我正在寻找一些OpenGL和psp gu的包装代码。

Hope this helps.

希望这可以帮助。

thing2k

#2

For anyone who's interested, here's my open source, BSD-licenced GUI toolkit for the DS:

对于任何有兴趣的人,这是我的开源,BSD授权的DS工具包:

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

thing2k's answer is pretty good, but I'd seriously recommend having code to contain child UI elements in the base uiElement class. This is the pattern I've followed in Woopsi.

thing2k的答案非常好,但我认真地建议让代码在基础uiElement类中包含子UI元素。这是我在Woopsi中遵循的模式。

If you don't support this in the base class, you'll run into major problems when you try to implement anything more complex than a textbox and a button. For example:

如果你不支持基类,当你尝试实现比文本框和按钮更复杂的东西时,你会遇到重大问题。例如:

Tab bars can be modelled as multiple buttons grouped together into a single parent UI element that enforces mutual exclusiveness of selection;

标签栏可以被建模为多个按钮组合在一起形成单个父UI元素,该元素强制选择的相互排斥;

Radio button groups (ditto);

单选按钮组(同上);

Scroll bars can be represented as a slider/gutter element and up/down buttons;

滚动条可以表示为滑块/装订线元素和上/下按钮;

Scrolling lists can be represented as a container and multiple option UI elements.

滚动列表可以表示为容器和多个选项UI元素。

Also, it's worth remembering that the DS has a 66MHz CPU and 4MB of RAM, which is used both to store your program and execute it (DS ROMs are loaded into RAM before they are run). You should really be treating it as an embedded system, which means the STL is out. I removed the STL from Woopsi and managed to save 0.5MB. Not a lot by desktop standards, but that's 1/8th of the DS' total available memory consumed by STL junk.

此外,值得记住的是DS具有66MHz CPU和4MB RAM,用于存储程序并执行它(DS ROM在运行之前加载到RAM中)。您应该将其视为嵌入式系统,这意味着STL已经淘汰。我从Woopsi中删除了STL并节省了0.5MB。桌面标准并不是很多,但这是STL垃圾消耗的DS总可用内存的1/8。

I've detailed the entire process of writing the UI on my blog:

我详细介绍了在我的博客上编写UI的整个过程:

http://ant.simianzombie.com/blog

It includes descriptions of the two algorithms I came up with for redrawing the screen, which is the trickiest part of creating a GUI (one just splits rectangles up and remembers visible regions; the other uses BSP trees, which is much more efficient and easier to understand), tips for optimisation, etc.

它包括我为重绘屏幕提出的两种算法的描述,这是创建GUI的最棘手的部分(一个只是将矩形分开并记住可见区域;另一个使用BSP树,这样更有效,更容易理解),优化技巧等

#3

One useful strategy to keep in mind might be the composite pattern. At a low level, it might allow you to treat all GUI objects (and collections of objects) more easily once built. But I have no idea what's involved in GUI framework design, so one place to find general inspiration is in the source code of an existing project. WxWidgets is a cross-platform GUI framework with source available. Good luck with your project!

要记住的一个有用的策略可能是复合模式。在较低级别,它可能允许您在构建后更轻松地处理所有GUI对象(和对象集合)。但是我不知道GUI框架设计涉及什么,所以找到一般灵感的地方就是现有项目的源代码。 WxWidgets是一个跨平台的GUI框架,可以使用源代码。祝你的项目好运!

#4

I think looking at the way other GUI toolkits have done it would be an excellent place to start. For C++ examples, I hear lots of good things about Qt. I haven't used it personally though. And of course WxWidgets as Nick mentioned.

我认为看看其他GUI工具包的工作方式将是一个很好的起点。对于C ++示例,我听到很多关于Qt的好东西。我个人没有用它。当然,像尼克提到的WxWidgets。

#5

I've written a very simple GUI just like you propose. I have it running on Windows, Linux and Macintosh. It should port relatively easily to any system like the PSP or DS too.

我就像你提议的那样编写了一个非常简单的GUI。我让它在Windows,Linux和Macintosh上运行。它应该相对容易地移植到任何系统,如PSP或DS。

It's open-source, LGPL and is here:

它是开源的,LGPL,在这里:

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

#1