Ghoscher's Blog

___________________________________________________

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

___________________________________________________

In part 2, I demonstrated how to create two types of FuchsGUI controls : Button & TextBox.

Well, most FuchsGUI controls have similar constructors, this lesson should be quite simple, what we will do is a simple calculator that adds\subtracts two numbers, the reason for this is to show you how to get values from TextBoxes & how to use Forms.

So create a new XNA 4.0 game , add a reference to FuchsGUI.dll (you might wanna go back and read step a in Part II)

Add the using directive first

using FuchsGUI;

Add these fields to Game1 class:

Form myForm;

TextBox txtOperand1;
TextBox txtOperand2;
TextBox txtResult;

RadioButton radioAdd;
RadioButton radioSubtract;

Button btnPerform;

Now download the content form here, extract the rar file and add the folder GUI to your solution content.


In the LoadContent method, we first load the textures and font:

Texture2D texButton = Content.Load<Texture2D>(@"GUI\texButton");
Texture2D texTextBox = Content.Load<Texture2D>(@"GUI\texTextBox");
Texture2D texForm = Content.Load<Texture2D>(@"GUI\texForm");
Texture2D texRadioButton = Content.Load<Texture2D>(@"GUI\texRadioButton");

SpriteFont font = Content.Load<SpriteFont>(@"GUI\Arial");

What we will do is

– Creating three TextBoxes, the first two will hold the two operands of the operation, the third will contain the result of the operation.

– Creating two RadioButtons to choose what operation to perform (we could just use two buttons, one for each operation but I thought it’s a good idea to introduce a new control).

– Creating a Button to perform the operation.


Let’s start creating these controls, it’s a little hard to specify the positions of the controls, so please just copy these positions, after the next tutorial you’ll almost write nothing to create your controls & forms…

First we create the form

myForm = new Form("myForm", "Calculator", new Rectangle(10, 10, 250, 150), texForm, font, Color.White);

The constructor of the form is similar to the Button’s, nothing new..


Next we create the three TextBoxes

txtOperand1 = new TextBox("txtOperand1", "0.0", 5,"0123456789-.", new Rectangle(10, 10, 50, 30), texTextBox, font, Color.Black);
txtOperand2 = new TextBox("txtOperand2", "0.0", 5, "0123456789-.", new Rectangle(70, 10, 50, 30), texTextBox, font, Color.Black);
txtResult = new TextBox("txtResult", "0.0", 5, "0123456789-.", new Rectangle(160, 10, 50, 30), texTextBox, font, Color.Black);

txtResult.ReadOnly = true;

We used the constructor of the TextBox that have a parameter of type string called charSet and as you can see we passed “0123456789-.” , which means the user won’t be able to write anything but numbers in the TextBoxes

In the last line we set the property ReadOnly of the result TextBox to true so the user won’t be able to write anything in that TextBox.


We now create the two RadioButtons

radioAdd = new RadioButton("radioAdd", "Add", new Rectangle(10, 70, 60, 20), texRadioButton, font, Color.White);
radioSubtract = new RadioButton("radioSubtract", "Subtract", new Rectangle(90, 70, 60, 20), texRadioButton, font, Color.White);

Again the constructor is similar to the constructor of the button…nothing new :).


We create the button that will perform the operation:

btnPerform = new Button("btnPerform", "Perform", new Rectangle(10, 100, 70, 30), texButton, font, Color.White);

Okay. now we have all the controls we need, but updating & drawing each control individually is a total mess :(, that’s why forms exist :), before exiting the LoadContent method we should add these controls to the form myForm.

A form has a method called AddControl and takes a single parameter of the type FuchsGUI.Control.

Adding a control to the form will make its position relative to the form, for example if you create a control with the position of 10,10 then you add the control to the form which is at position 50,50 , the absolute position of the control will become 50+10,50+10, while the relative position remains intact

myForm.AddControl(txtOperand1);
myForm.AddControl(txtOperand2);
myForm.AddControl(txtResult);

myForm.AddControl(radioAdd);
myForm.AddControl(radioSubtract);

myForm.AddControl(btnPerform);

radioAdd.Toggle();

IsMouseVisible = true;

Just added the controls to the form and showed the mouse cursor.

The Toggle() method of a RadioButton checks this RadioButton & unchecks all other RadioButtons within the same parent form, just a reminder : unlike CheckBoxes,  RadioButtons need a parent form to work.




The whole LoadContent method should look like this

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

    Texture2D texButton = Content.Load<Texture2D>(@"GUI\texButton");
    Texture2D texTextBox = Content.Load<Texture2D>(@"GUI\texTextBox");
    Texture2D texForm = Content.Load<Texture2D>(@"GUI\texForm");
    Texture2D texRadioButton = Content.Load<Texture2D>(@"GUI\texRadioButton");

    SpriteFont font = Content.Load<SpriteFont>(@"GUI\Arial");

    myForm = new Form("myForm", "Calculator", new Rectangle(10, 10, 250, 150), texForm, font, Color.White);

    txtOperand1 = new TextBox("txtOperand1", "0.0", 5,"0123456789-.", new Rectangle(10, 10, 50, 30), texTextBox, font, Color.Black);
    txtOperand2 = new TextBox("txtOperand2", "0.0", 5, "0123456789-.", new Rectangle(70, 10, 50, 30), texTextBox, font, Color.Black);
    txtResult = new TextBox("txtResult", "0.0", 5, "0123456789-.", new Rectangle(160, 10, 50, 30), texTextBox, font, Color.Black);

    txtResult.ReadOnly = true;

    radioAdd = new RadioButton("radioAdd", "Add", new Rectangle(10, 70, 60, 20), texRadioButton, font, Color.White);
    radioSubtract = new RadioButton("radioSubtract", "Subtract", new Rectangle(90, 70, 60, 20), texRadioButton, font, Color.White);

    btnPerform = new Button("btnPerform", "Perform", new Rectangle(10, 100, 70, 30), texButton, font, Color.White);

    myForm.AddControl(txtOperand1);
    myForm.AddControl(txtOperand2);
    myForm.AddControl(txtResult);

    myForm.AddControl(radioAdd);
    myForm.AddControl(radioSubtract);

    myForm.AddControl(btnPerform);

    radioAdd.Toggle();

    IsMouseVisible = true;
}

Now the Update,Draw methods should be simple as the following:

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

    myForm.Update(mouseState, keyboardState);

    base.Update(gameTime);
}

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

    spriteBatch.Begin();
    myForm.Draw(spriteBatch);
    spriteBatch.End();

    base.Draw(gameTime);
}

If you compile & run now you should get something like this 😀

There’s only one event to wire here which is btnPerform.onClick, We’ll wire the event from within the LoadContent method, right after the line where we created the Button named btnPerform we write:

btnPerform.onClick += new EHandler(BtnPerform_Click);

Then write the method BtnPerform_Click some where you find fit :

void BtnPerform_Click(Control sender)
{
    float operand1=0;
    float operand2=0;

    bool b1 = float.TryParse(txtOperand1.Text, out operand1);
    bool b2 = float.TryParse(txtOperand2.Text, out operand2);

    if (b1 & b2)
    {
        if (radioAdd.Checked)
            txtResult.Text = (operand1 + operand2).ToString();
        else if (radioSubtract.Checked)
            txtResult.Text = (operand1 - operand2).ToString();
    }
    else
    {
        txtResult.Text = "Error";
    }
}

We first define two floats and use the static method float.TryParse which takes two parameters : a string to try converting to a float, an out float parameter to save the result, if everything went okay it returns true, otherwise it returns false…

So we try parsing the values for txtOperand1, txtOperand2, if it went okay we perform the operation depending on the checked RadioButton.

If parsing failed, the result will be “Error”, even though we used char sets to constrain the input to the TextBox, a parsing failure could happen if the user enters some thing like “3..4” or “4.9.3”…

Please note that charSet, maxLength work only when typing into the TextBox, if you assign a string to the Text property of the TextBox the string won’t be affected by those two.


If you compile & run you should have a simple calculator that adds\subtracts two operands 😀

Here’s the complete sample for this lesson (VS2010 + XNA4.0)

Note : It’s better  to create a class for our calculator where it inherits from FuchsGUI.Form & then inside that class create & add the controls, this way it will keep the Game1 class from being messy, but for simplicity 🙂 I wrote everything inside Game1.

The next lesson is the one I’ve been waiting for 😀