Creating a basic GUI

[Hippogriff]

I figured I might as well do something new and try and create some basic GUI functions(I am not trying to get an entire library or anything here). I quickly came up with a layout like this and would like to hear from some more experienced users if this is an effective way to set up a GUI or if there is a better way to make things easier? (Obviously this example would be expanded).

Any other comments about creating GUIs in general would be appreciated too.

class guiObject
{
	public:
		virtual void Handle()=0;
		int ifMouseOver();
		int ifClicked();

	protected:
		bool Selected;
		float Width, Height;
		float x, y;
		float Color[3];
};

class Button : public guiObject
{
	public:
		Button(float X, float Y, float W, float H)
		{
			x = X;
			y = Y;
			Width = W;
			Height = H;
		}

		void Handle() 
		{
			// do stuff with Buttons
		}

	protected:
	
};

class List : public guiObject
{
	public:
		List(float X, float Y, float W, float H)
		{
			x = X;
			y = Y;
			Width = W;
			Height = H;
		}

		void Handle() 
		{
			// do stuff with Lists
		}

	protected:
	
};

int main()
{
	vector<guiObject *> Objects;
	Objects.push_back(new Button(100,100,50,50));
	Objects.push_back(new List(200,200,50,50));

	for(int i = 0; i < Objects.size(); i++)
	{
		Objects[i]->Handle();
	}
}

[coder777]

First you need to answer two questions:

1. Where does the user input come form
2. Where does your output goes to

Otherwise your gui wouldn't do anything.


Furthermore you need to improve the handling of the events (like button click). You do not want to handle that event in the button class. Usually you do that in the encompassing window (because there you know what to do with the click). So you need a mechanism that connects the event from the button (or any other control) with a function passed from elsewhere

[Hippogriff]

Yeah I realize my GUI will need input handling, the code above was just an example to see if that is a recommended way to handle it or not (I didn't want to post a huge code sample for people to try and read).

In the way I have started using it so far, if the GUI is a button or a menu tab etc I pass in a function pointer (using the boost library right now) and it will call that function when activated. For text-boxes/lists it uses a pointer to a variable when created and then sends data to that.

As for the input handling, I have a separate input class that handles mouseclicks/keyboard input etc. I then pass in certain variables to the GUI Handle functions based on that. I am not sure if that is the nicest way to do that though (it doesn't look great).

[coder777]

using the boost library right now

Yes, the signal/slot system is pretty good.

For your event handler you do not need paramters since within such a event handler you know exactly what you're doing and what objects are involved (getting the required information from there). Do not confuse the events coming from the system to your guiObject and those events that your guiObject emits

For text-boxes/lists it uses a pointer to a variable when created and then sends data to that.

hmm, i don't know what you mean. All objects hold there own data that can be accessed from outside. Use dynamic_cast<>() to safely access the right type.

for mouse handling it's relatively easy. You need to find the guiObject that's associated with the x/y coordinate. Fill a struct with the required data and pass it to the mouse handler function of that guiObject. It will know what to do.

for your keyboard event you need a guiObject that holds the buttons and all kind of guiObject (in a list). In wxWidget it's called Panel. When the mouse handler function of such a panel is called and the associated guiObject is an edit object put it to a focus variable. Whenever the keyboard event handler of the panel is called the the focus variable is involved (if it's not null).

[Hippogriff]

Do you mind showing me a quick pseudo-code example on handling the mouse/keyboard input as you explained?

I understand how to track the mouse movements and then set focus equal to true if a mouse click is registered. But I don't see how to do any of this without passing some sort of event structure first. (But you mentioned I don't need to use any parameters). I should probably also look at some more GUI examples to understand how they do it.

[coder777]

What you're trying to do is the following

In                        Out
Mouse ->               -> Button click
Keyboard -> guiObject  -> List select
Paint ->
etc. ->                -> etc.

For 'In' you have to fullfill the interface of the system message and yes you need to pass the appropriate struct.

For the 'Out' section you don't need to pass parameter because all the required information are stored in your guiObject.