Ghoscher's Blog

___________________________________________________

1-Introduction to the GUI.
2-Hello control 😀.
3-Hello form.
4-Exporting forms easily from Microsoft Visual Studio Designer to FuchsGUI :D.
5-The future of FuchsGUI & some notes.

___________________________________________________

Okay! let’s get our hands dirty :D.
In part I, I talked about my GUI in theory, what we will do now is:
a-Creating a new XNA4.0 game and preparing it to use FuchsGUI.
b-Adding two Buttons and one TextBox.
c-We want to achieve the following : when a button is clicked, the text in the TextBox will change to the name of the clicked button.

Three simple steps, but first you’ll need the dll of the library :D, here it is! very small file right :D?
FuchsGUI XNA3.1

or

FuchsGUI XNA4.0

Update : Download the dll from here, blurry text fixed :), you’ll find the dll here: “FuchsGUI\bin\x86\Release”, XNA4 Only.

Let’s first have a look at the class diagram of the library (really necessary):

Please click on the image to view the full size version

“Control” is the base class for all the controls, it’s an abstract class which means you can’t create instances from this class.
I really want to go through implementation details but that would make the post very lengthy :(, maybe another time….

Anyway, Let’s start with our simple 3 steps…


a-Creating a new XNA4.0 game and perparing it to use FuchsGUI
Like you don’t know how to do it your self ;).
Open Visual Studio 2010, File->New, under Visual C#->XNA Game Studio 4.0 -> Windows Game(4.0).
First of all you’ll need to link FuchsGUI.DLL to your project ( I prefer that you copy the dll to the folder of the solution first ).
In the “Solution Explorer”, right click on the “References” folder ( or what ever it is 😀 ),

Choose “Add Reference…”, you might have to wait for some time until the window becomes available, click on the tab “Browse”, and browse to the location were you copied the dll named “FuchsGUI.dll”

Select it and click “OK” and your done :D.
Just remember that whenever you need to use classes (Controls) from FuchsGUI you’ll have to type the using directive

using FuchsGUI;

or just write the namespace  “FuchsGUI.Button” for example…

b-Adding two buttons and one textbox
Okay! this where you need to focus ;).
We want to create two buttons and one textbox, so add these two fields to your Game1 class (assuming you didn’t change the name)

Button btn1;
Button btn2;
TextBox txt1;

now download and add these two textures and font to you solution content, since it’s a simple game let’s just put them directly in the content folder
Download Textures & Font

In your LoadContent method load the two textures & font, something like this:

Texture2D texButton = Content.Load("texButton");
Texture2D texTextBox = Content.Load("texTextBox");
SpriteFont font = Content.Load("Arial");

Two things you should know before moving on:

-A Button must have a texture divided as the following : the upper third of the texture is displayed when the button is idle, the second third is displayed when the mouse is over the button, the last third is displayed when you click the button…

-A TextBox must have a texture divided as the following : the upper half of the texture is displayed when the TextBox is idle ( no focus, cannot type inside it ), the second half is displayed on the TextBox when it has focus and you can type chars inside it…


Lets create the two buttons first, The constructor of the button looks like this

public Button(String name, String text, Rectangle PositionWidthHeight, Texture2D texture, SpriteFont font, Color foreColor, Viewport? viewport = null)

Let’s explain what each parameter is:

name : Name of the control, not the same as the text displayed on it.

text : The text that will be displayed on the control.

PositionWidthHeight : A rectangle that defines the layout of the control, first two components x,y are the position of the upper left of the control relative to its parent which is the main game window here, the third & forth components are the width & height of the control, please note that these all are measured in pixels.

texture : Texture to be displayed on the control.

font : Font used to render the text on the control.

foreColor : Color of the text.

Viewport : Optional parameter, pass null or nothing at all if your game contains no viewports, otherwise pass the viewport you will be rendering the control in, it’s really necessary to pass the correct viewport otherwise the user input will not work properly with the control, so we write:

btn1 = new Button("btnYes", "Yes", new Rectangle(50, 10, 70, 20), texButton, font, Color.White);
btn2 = new Button("btnNo", "No", new Rectangle(50, 35, 70, 20), texButton, font, Color.White);

The only difference between the two buttons is that the second one is slightly lower than the first, let’s now create the TextBox we will use this constructor:

public TextBox(String name, String text, int maxLength, Rectangle PositionWidthHeight, Texture2D texture, SpriteFont font, Color foreColor, Viewport? viewport = null)

maxLength : Max number of chars this TextBox can hold, we write:

txt1 = new TextBox("txt1", "", 5, new Rectangle(50, 60, 70, 20), texTextBox, font, Color.Black);

and lastly we wanna make the mouse visible

this.IsMouseVisible = true;

You should now have a LoadContent method similar to this one

protected override void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);

    Texture2D texButton = Content.Load("texButton");
    Texture2D texTextBox = Content.Load("texTextBox");
    SpriteFont font = Content.Load("Arial");

    btn1 = new Button("btnYes", "Yes", new Rectangle(50, 10, 70, 20), texButton, font, Color.White);
    btn2 = new Button("btnNo", "No", new Rectangle(50, 35, 70, 20), texButton, font, Color.White);

    txt1 = new TextBox("txt1", "", 5, new Rectangle(50, 60, 70, 20), texTextBox, font, Color.Black);

    this.IsMouseVisible = true;
}

Please please please, forgive me if creating controls is uncomfortable, but believe me this just for tutorial puposes, when you understand the idea of this GUI library you’ll never need to write anything your self, you just design and a full running code is generated for you, just wait for the fourth part of this series & you’ll see what I’m talking about :D.

Okay what now? compile & run? nope 🙂 we need to update our controls and draw them. Each control needs two thing to update correctly, KeyboardState, MouseState. In the update method of your game, lets get those input states & update our controls:

protected override void Update(GameTime gameTime)
{
    KeyboardState keyboardState = Keyboard.GetState();
    MouseState mouseState = Mouse.GetState();

    btn1.Update(mouseState, keyboardState);
    btn2.Update(mouseState, keyboardState);
    txt1.Update(mouseState, keyboardState);

    base.Update(gameTime);
}

again this is all about to change in part 3, all will be updated in one update call, the same goes for Draw. Now to draw the controls, each control needs a spritebatch to draw itself, note that drawing controls should be done inside spriteBatch.Begin() ,spriteBatch.End() block, it’s simple, I’m gonna put the whole Draw method where we pass the same SpriteBatch used in the game class:

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);

    spriteBatch.Begin();
    btn1.Draw(spriteBatch);
    btn2.Draw(spriteBatch);
    txt1.Draw(spriteBatch);
    spriteBatch.End();

    base.Draw(gameTime);
}

Now if you followed the tutorial so far you should be able to comiple and run your first game that containt controls from FuchsGUI :D, Run and you should get somthing similar to this:

Try hovering the mouse over the buttons, click some controls, nothing happens right :(? of course nothing will happen!, what you just did in steps a,b is similar to adding controls to a form in a windows forms application without writing any code for the controls…Here’s where step c comes to save the day :).


c-We want to achieve the following : when a button is clicked, the text in the textbox will change to the name of the clicked button.

You must first know that I used delegates to trigger the “events” for the controls,

By Googling “delegates in c#” you find this article where I first learned delegates:

http://www.akadia.com/services/dotnet_delegates_and_events.html

“A delegate in C# is similar to a function pointer in C or C++. Using a delegate allows the programmer to encapsulate a reference to a method inside a delegate object. The delegate object can then be passed to code which can call the referenced method, without having to know at compile time which method will be invoked.”

If you would like to fully understand delegates you can take your time and read that article, if not then continue with me.

All events raised by controls of FuchsGUI are from a type I defined called MHandler

public delegate void EHandler(Control sender);

By examining this line you should know that a function needs to be something like this to handle a triggered event

void MyFunctionName(Control someName)
{
    // Some code
}

All controls have some delegates in common such as onClick for example…

Lets first define the function that will handle the event onClick for the two buttons, in game1 class define this function some where you find fit:

void ButtonClicked(Control sender)
{
    txt1.Text = sender.Name;
}

This function take a parameter of type FuchsGUI.Control which is the base class of all the controls in FuchsGUI, This parameter is the control that its event was triggered,

for example if we wire btn1.onClick to this function, then if we click btn1, sender will be btn1…

I’m not sure how to explain such stuff without making the post longer & longer…anyway if you feel that something isn’t clear please use the comments below & I’ll be happy to help :).

Note : “Text” is a property (set,get) in most controls..

Back to our LoadContent method add the following two lines after creating btn1 & btn2

btn1.onClick += new EHandler(ButtonClicked);
btn2.onClick += new EHandler(ButtonClicked);

by that we told the two buttons : “whenever you get clicked please call the method ButtonClicked”, and if you check the code of the FuchsGUI library (will be available shortly) you’ll see that when a control calls a method wired to some event, the control passes itself as the “sender” parameter.

Now run the game, click on a button and see what happens to the TextBox txt1 😀
If every thing is okay the textbox should display “btnYes” or “btnNo” depending on the button you click.

Here’s the complete code for this lesson 🙂

Download full code for the lesson (VS2010 + XNA4.0).

Phew :D! that was a lot of work only to achieve something this simple! 😀
In the next part I’ll show you the advantages of using FuchsGUI.Form which will make the process a lot easier!
Since your hands are dirty now, please wash them before eating :D.