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.

___________________________________________________

Okay, if you’ve been following the tutorials, you should have noticed how creating controls is somehow uncomfortable :(…
The first place where I used my gui was an artillery simulation project in XNA.
I had to make lots & lots of modifications to the forms of the simulation, If I wrote the code for every form manually I might have lost my mind and started screaming something like “Damn! this button should be 3 pixels lower”, “ops! this textbox should be wider :(“…

But before getting deep inside the gui of the simulation an idea came to my mind :D.
Why troubling myself with writing 1** lines of code for a single form while I can generate the code from Microsoft Visual Studio??

I’ll have to admit it’s a little lame to use the Visual Studio designer but I found it better than wasting time programming a designer :).


The main idea of the code generator is:
-Running a pre-made Visual Studio project (windows forms application) with a reference to the dll  FuchsGUICodeGenerator ( Looooooooong name :D).
-Creating a new Windows.Forms.Form in the project.
-In the file Program.cs choose the form you created (more details later).
-Compile & run the project.
-A pre-made form will show and ask for generation options.
-You click a button and a complete class code is generated & copied to clipboard on demand :D.

We’ll recreate the calculator from Part III.

That ends the headlines :), let’s get to the details.

First download the pre-made solution from here:
FuchsGUIDesigner (XNA4.0 + .Net4)
or
FuchsGUIDesigner (XNA3.1 + .Net3)


Open the solution and you’ll find two projects

1-FuchsGUIClassGenerator : this is the dll project for the generator, don’t modify unless you know what you’re doing :).
2-FuchsGUI Designer : This is the pre-made project that you’ll add your forms to.

Right click on the project FuchsGUI Designer–>Add–>Windows Form…

Let’s give it the default name : “Form1” & then click the button OK…

Set the Text property for the form to “GUICalc-XNACalc”, there’s a good reason for this, will explain later :).

You should know that this form represents the window of your XNA game, FuchsGUI Designer doesn’t support creating controls with out a parent FuchsGUI.Form…

We’ll first need to create a Windows.Forms.GroupBox inside the form Form1, this GroupBox will represent the FuchsGUI.Form in your XNA game, let’s give it the Name “frmCalc” & Text “Calculator”.

Only one main GroupBox must exist inside the created Windows.Forms.Form, if more than one exists, only the first one created is taken into consideration.
Inside that GroupBox (which represents your FuchsGUI.Form in your XNA game) you can add these Windows.Forms controls:

GroupBox (Represents a FuchsGUI.Form)

Button

TextBox

RadioButton

CheckBox

PictureBox

DomainUpDown (Represents FuchsGUI.DomainLeftRight)

Label


You can set some properties for the controls from the designer & they will be kept for you in the generated XNA code 😀

All controls : Enabled, Visible, Position, Size, Name.

All controls except for PictureBox, DomainUpDown : ForeColor, Text.

DomainUpDown : Items ( as strings ).

PictureBox : SizeMode.

TextBox : MaxLength, ReadOnly, FuchsGUI.TextBox.CharSet is generated from the contents of the Windows.Forms.TextBox.Text property, can be changed later..

CheckBox, RadioButton : Checked.

_______________

Note : nested forms are supported in FuchsGUI, this means you can create a form inside a form inside a form :D, which can be done inside the designer by creating a GroupBox inside another one which is inside another one…

Okay let’s now add three TextBoxes to the GroupBox “frmCalc”, Give them the names from left to right : “txtOperand1”, “txtOperand2”, “txtResult”… Set the Text property for them to “0.0”.

(By entering “0.0” as the Text, the code generator will set the charset to accept only floating point chars “0123456789-+.”)

Add two RadioButtons with names : “radioAdd” , “radioSubtract”…Set the Text property to “Add”, “Subtract”, set the property Checked for radioAdd to true.

And finally add a Button with the name “btnPerform” and set its Text property to “Perform”

You should end up with something similar to this :

Now that you have designed the form you want to export it to some FuchsGUI code.

In the same project “FuchsGUI Designer” open the file Program.cs

The code should be:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Forms;

using FuchsGUIClassGenerator;

namespace FuchsGUI_Designer
{
    static class Program
    {
        ///
        /// The main entry point for the application.
        ///
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new GenerateDialog(new YourFormClassName()));
        }
    }
}

in the line 20 replace YourFormClassName with the name of the form class you added to the project, by default it should be “Form1”.

The code should become like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Forms;

using FuchsGUIClassGenerator;

namespace FuchsGUI_Designer
{
    static class Program
    {
        ///
        /// The main entry point for the application.
        ///
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new GenerateDialog(new Form1()));
        }
    }
}

(FuchsGUICodeGenerator takes a Windows.Forms.Form Object at run time and scans it for controls then generates the appropriate code)


Compile the project, If you’ve been following the tutorial right, the project should compile without any problems.

Run the project and a form like this should appear asking you for some code generation options

Enter the namespace you’ll be using in your XNA game that will use the form you designed (by default it should be WindowsGameX where X is a number that depends on the games you created before), let’s enter “XNACalc”.

Enter the class name for your generated form, let’s put “GUICalc” for now…

Note : If you have set the Text of Form1 to “GUICalc-XNACalc” you’ll find that both namespace & class name are already filled for you :), so just set Text of a form to classname-namespace & the values will be automatically entered in the generation options.

We won’t be using a viewport for now so let’s keep the viewport checkbox unchecked…

Click the button Generate and the code in the preview textbox should look something like this

/*
 *Generated by FuchsGUICodeGenerator
 *Ghoshehsoft@live.com
 *www.ghoshehsoft.wordpress.com
 *Time of generation: 15/2/2011 3:12:59 AM
*/

using System;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Content;

using FuchsGUI;

namespace XNACalc
{
    public sealed class GUICalc : Form
    {
        ContentManager contentManager;

        #region Fields

        public Button btnPerform;
        public RadioButton radioSubtract;
        public RadioButton radioAdd;
        public TextBox txtResult;
        public TextBox txtOperand2;
        public TextBox txtOperand1;

        #endregion

        public GUICalc(Texture2D texture, SpriteFont font, Color foreColor, ContentManager contentManager)
        : base("frmCalc", "Calculator", new Rectangle(12, 12, 277, 139), texture, font, foreColor)
        {
            this.contentManager = contentManager;
            this.AddControls();
        }

        void AddControls()
        {
            Texture2D texButton = contentManager.Load<Texture2D>(@"GUI\texButton");
            Texture2D texRadioButton = contentManager.Load<Texture2D>(@"GUI\texRadioButton");
            Texture2D texTextBox = contentManager.Load<Texture2D>(@"GUI\texTextBox");

            btnPerform = new Button("btnPerform", @"Perform", new Rectangle(8, 96, 75, 23), texButton, font, new Color(0, 0, 0));
            this.AddControl(btnPerform);

            radioSubtract = new RadioButton("radioSubtract", @"Subtract", new Rectangle(89, 55, 71, 17), texRadioButton, font, new Color(0, 0, 0));
            this.AddControl(radioSubtract);

            radioAdd = new RadioButton("radioAdd", @"Add", new Rectangle(6, 55, 71, 17), texRadioButton, font, new Color(0, 0, 0));
            radioAdd.Checked = true;
            this.AddControl(radioAdd);

            txtResult = new TextBox("txtResult", @"0.0", 32767, "0123456789-+.", new Rectangle(194, 19, 77, 20), texTextBox, font, new Color(0, 0, 0));
            this.AddControl(txtResult);

            txtOperand2 = new TextBox("txtOperand2", @"0.0", 32767, "0123456789-+.", new Rectangle(89, 19, 77, 20), texTextBox, font, new Color(0, 0, 0));
            this.AddControl(txtOperand2);

            txtOperand1 = new TextBox("txtOperand1", @"0.0", 32767, "0123456789-+.", new Rectangle(6, 19, 77, 20), texTextBox, font, new Color(0, 0, 0));
            this.AddControl(txtOperand1);

        }
     }
}

Now copy the code by clicking the button Copy All, open another instance of Visual Studio 2010, Create a new XNA 4.0 game named XNACalc, Add a reference to FuchsGUI.dll, Add a new class to the project & call it GUICalc.cs, clear it’s contents & paste the code into the empty file.

You might have to change the namespace of the generated class to match the namespace of your game.

If you took a brief look inside the generated code you’ll notice that the class GUICalc inherits from the class FuchsGUI.Form and inside its initialization code it creates the controls and adds them to itself.

The content required for the generated form is loaded when initializing the form, it expects you to have a folder named “GUI” directly in your content folder.

Here is the folder you’ll need, it contains the textures needed for each control ( I guess the next version of my gui will contain one spritesheet for all the controls).

Add the using directive in the file Game1.cs

using FuchsGUI;

Now add this field to your Game1 class

GUICalc frmCalc;

inside the Game1.LoadContent method load this one texture & font for the generated form and create the form:

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

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

    frmCalc = new GUICalc(texForm, font, Color.White, this.Content);
    frmCalc.btnPerform.onClick += new EHandler(BtnPerform_Click);

    IsMouseVisible = true;
}

The generated form parameters are : the texture of the form, the foreColor of the form, the ContentManager of the game which can be accessed by this.Content from any game class, the layout of the form is the same layout of the GroupBox we created in the designer.

Note that the generated form contains public references to all of its controls, so you can access any control inside the form since they’re public :).

As for the BtnPerform_Click method nothing has changed except that we reach the controls using form1.controlName:

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

    // Try parsing operands
    bool b1 = float.TryParse(frmCalc.txtOperand1.Text, out operand1);
    bool b2 = float.TryParse(frmCalc.txtOperand2.Text, out operand2);

    // If parsing successful
    if (b1 & b2)
    {
        // Perform the right operation depending on the RadioButtons
        if (frmCalc.radioAdd.Checked)
            frmCalc.txtResult.Text = (operand1 + operand2).ToString();
        else if (frmCalc.radioSubtract.Checked)
            frmCalc.txtResult.Text = (operand1 - operand2).ToString();
    }
    else
    {
        // Pasring failed
        frmCalc.txtResult.Text = "Error";
    }
}

The Update & Draw should be straight forward:

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

    frmCalc.Update(mouseState, keyboardState);

    base.Update(gameTime);
}

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

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

    base.Draw(gameTime);
}

Compile & run and you should have a working simple calculator

You might find creating FuchsGUI forms using the Visual Studio designer a little bit confusing, but believe me after creating like two forms you’ll never ever create controls manually :D.

Here’s the Solution of the designer that contains the form we created & another form which is more complex if you wanna try more 🙂

FuchsGUI Designer (VS 2010)

FuchsGUI Designer (VS 2008)

Here’s the XNA game that uses our generated form

XNACalc ( VS2010 + XNA4.0)

Will that’s the end of the tutorials ;), I hope you enjoyed it! :D.

The tutorials didn’t cover all of the controls, but when you get the idea you won’t need any tutorial to use any of these controls…

The next and final part contains some important notes + the source code for FuchsGUI :D.