Zumbs' Blog

The truth may be out there, but lies are inside your head

FOMM and FOMODs for Dummies 5: Working with Forms I

Posted by Zumbs on November 12, 2009

FOMM and FOMODs for Dummies

  1. Installing Mods
  2. Making FOMODS
  3. Basic FOMOD Scripting I
  4. Basic FOMOD Scripting II
  5. Working with Forms I
  6. Working with Forms II
  7. Load Order Magicks

install-formIn a previous tutorial, messageboxes were used to make a simple interface with the user. In some cases, however, you may want to present the user with a lot of choices which makes messageboxes clunky to work with. One alternative it to use forms. An example of an installation form is shown to the right.

This tutorial will try to give an overview of how to make a form yourself. A good way to learn how to script is to look at examples, such as Breeze’s male body replacer, MMM or my own Security Overhaul.

If you have no experience with C#, I recommend that you take a look at a few tutorials to get a grasp of the syntax. I also recommend that you use a development environment like Visual Studio or the free Visual Studio Express Edition instead of FOMMs text editor. An upcomming tutorial will show how to set it up. As shown in this tutorial, Visual Studio also has a GUI interface to make forms. For the classes used, a link to Microsofts documentation at http://msdn.microsoft.com/en-us/library/default.aspx is supplied. Be sure to use the left-hand menu!

Making your first form

Microsofts documentation on Forms can be found here. A form is created by declaring it, and setting it with

public static Form InstallForm;
InstallForm = CreateCustomForm();

Note that you have to use CreateCustomForm() and not new Form() when working with FOMM! The form is shown when you call

InstallForm.ShowDialog();

I favor making a separate function, CreateInstallForm, to make the form. In this case, you would have to make the form a static variable, declared as below

using System;
using System.Windows.Forms;
using fomm.Scripting;

class Script : BaseScript
{
    public static bool install;
    public static Form InstallForm;
    public static void CreateInstallForm()
    {
        InstallForm = CreateCustomForm();
    }
    public static bool OnActivate()
    {
        CreateInstallForm();
        InstallForm.ShowDialog();
        if(install)
        {
            PerformBasicInstall();
        }
        return install;
    }
}

The form doesn’t do anything yet. If you try to activate a mod with such a script, you will get an empty popup. Let us start by customizing the popup. Adding the following to CreateCustomForm() will make a form of size 500 x 600, and it will pop up in the center of the screen.

InstallForm.FormBorderStyle = FormBorderStyle.Fixed3D;
InstallForm.StartPosition = FormStartPosition.CenterScreen;
InstallForm.Size = new Size(500, 600);

The size can be changed, but I recommend not making it larger than 800 x 600. You may want to change the borderstyle once you get buttons added, but for now, use the above settings.

Adding a background image

We can also add a background image. This function by Breeze can be used

public static Image GetImageFromFomod(string filename)
{
    byte[] data = GetFileFromFomod(filename);
    MemoryStream s = new MemoryStream(data);
    Image img = Image.FromStream(s);
    s.Close();
    return img;
}

The function requires that you add two more namespaces:

using System.IO;
using System.Drawing;

We will also need to declare a picture. The declaration below should be placed just below the declaration of the InstallForm.

public static PictureBox BackgroundPicture;

The PictureBox documentation can be found here. The function GetImageFromFomod() can be called from CreateCustomForm()

// place background picture box
BackgroundPicture = new PictureBox();
BackgroundPicture.Location = new Point(0, 0);
BackgroundPicture.Size = new Size(500, 600);

The above script creates a picture box of the same size as the InstallForm and place it at the point (0,0). Most of the stuff you add to the InstallForm will need to be placed at some position. The position is set as a point. The control you add will have its upper left corner at the point. The first number is the x-position of the control, and the second position is the y-position. Unlike most coordinate systems you may know from math, the origin is placed in the upper left corner, and the y-axis points down, as shown below:

position

A picture can be loaded using the function above

// load picture file from .fomod and stream into picture box
BackgroundPicture.Image = GetImageFromFomod("fomod/screenshot.png");

You can use any path, but I recommend placing the picture in the fomod folder for convenience. Now, we need to tell the InstallForm that it should include our picture. This is done by adding the BackgroundPicture to its list of controls:

InstallForm.Controls.Add(BackgroundPicture);

So, the total script is now:

using System;
using System.Drawing;
using System.IO;
using System.Windows.Forms;
using fomm.Scripting;

class Script : BaseScript
{
    public static bool install;
    public static Form InstallForm;
    public static PictureBox BackgroundPicture;

    public static Image GetImageFromFomod(string filename)
    {
        byte[] data = GetFileFromFomod(filename);
        MemoryStream s = new MemoryStream(data);
        Image img = Image.FromStream(s);
        s.Close();
        return img;
    }

    public static void CreateInstallForm()
    {
        InstallForm = CreateCustomForm();

        // customize install form
        InstallForm.FormBorderStyle = FormBorderStyle.Fixed3D;
        InstallForm.StartPosition = FormStartPosition.CenterScreen;
        InstallForm.Size = new Size(500, 600);
        // place background picture box
        BackgroundPicture = new PictureBox();
        BackgroundPicture.Location = new Point(0, 0);
        BackgroundPicture.Size = new Size(500, 600);
        // load picture file from .fomod and stream into picture box
        BackgroundPicture.Image = GetImageFromFomod("fomod/screenshot.png");
        // add BackgroundPicture to list of controls
        InstallForm.Controls.Add(BackgroundPicture);
    }
    public static bool OnActivate()
    {
        CreateInstallForm();
        InstallForm.ShowDialog();
        if(install)
        {
            PerformBasicInstall();
        }
        return install;
    }
}

If you try the script out (and make sure to have a screenshot.png in your fomod folder), a window should pop up, showing the screenshot. Note that the image is not streched to fit the form.

Install and cancel buttons

We need to add some buttons to allow the user to start or cancel the installation of the mod. Before we add them, they must be declared:

public static Button InstallButton;
public static Button CancelInstallButton;

We initialize them in CreateInstallForm()

// install button
InstallButton = new Button();
InstallButton.Text = "Install";
InstallButton.BackColor = Color.Silver;
InstallButton.Location = new Point(5, 540);
InstallButton.Size = new Size(100, 23);
// cancel button
CancelInstallButton = new Button();
CancelInstallButton.Text = "Cancel";
CancelInstallButton.BackColor = Color.Silver;
CancelInstallButton.Location = new Point(105, 540);
CancelInstallButton.Size = new Size(100, 23);

To get them to show, we have to add them to the part of the control that they are to be in front of. In this case, it is the BackgroundPicture:

BackgroundPicture.Controls.Add(InstallButton);
BackgroundPicture.Controls.Add(CancelInstallButton);

If you run the code, the buttons will be added to the lower left corner. Pressing them doesn’t do anything. This is because we haven’t told the form what to do when the buttons are pressed. This is handled by something called EventHandlers. And we need to attach one to each of the buttons. This can be handled by the function AttachHandlers below:

public static void AttachHandlers()
{
    //Attach a handler that will fire when the apply button is clicked 
    InstallButton.Click += delegate(object sender, EventArgs args)
    {
        install = true;
        InstallForm.Close();
    };
    CancelInstallButton.Click += delegate(object sender, EventArgs args)
    {
        install = false;
        InstallForm.Close();
    };
}

This function tells the form what to do when the two buttons are clicked. It is called from CreateInstallForm(). With the buttons, the total script is now:

using System;
using System.Drawing;
using System.IO;
using System.Windows.Forms;
using fomm.Scripting;

class Script : BaseScript
{
    public static bool install;
    public static Form InstallForm;
    public static PictureBox BackgroundPicture;
    public static Panel InstallPanel;
    public static Button InstallButton;
    public static Button CancelInstallButton;
    public static Image GetImageFromFomod(string filename)
    {
        byte[] data = GetFileFromFomod(filename);
        MemoryStream s = new MemoryStream(data);
        Image img = Image.FromStream(s);
        s.Close();
        return img;
    }
    public static void CreateInstallForm()
    {
        InstallForm = CreateCustomForm();

        // customize install form
        InstallForm.FormBorderStyle = FormBorderStyle.Fixed3D;
        InstallForm.StartPosition = FormStartPosition.CenterScreen;
        InstallForm.Size = new Size(500, 600);
        // place background picture box
        BackgroundPicture = new PictureBox();
        BackgroundPicture.Location = new Point(0, 0);
        BackgroundPicture.Size = new Size(500, 600);
        // load picture file from .fomod and stream into picture box
        BackgroundPicture.Image = GetImageFromFomod("fomod/screenshot.png");
        // add BackgroundPicture to list of controls
        InstallForm.Controls.Add(BackgroundPicture);
        // install button
        InstallButton = new Button();
        InstallButton.Text = "Install";
        InstallButton.BackColor = Color.Silver;
        InstallButton.Location = new Point(5, 540);
        InstallButton.Size = new Size(100, 23);
        // cancel button
        CancelInstallButton = new Button();
        CancelInstallButton.Text = "Cancel";
        CancelInstallButton.BackColor = Color.Silver;
        CancelInstallButton.Location = new Point(105, 540);
        CancelInstallButton.Size = new Size(100, 23);
        BackgroundPicture.Controls.Add(InstallButton);
        BackgroundPicture.Controls.Add(CancelInstallButton);
        AttachHandlers();
    }
    public static void AttachHandlers()
    {
        //Attach a handler that will fire when the apply button is clicked 
        InstallButton.Click += delegate(object sender, EventArgs args)
        {
            install = true;
            InstallForm.Close();
        };
        CancelInstallButton.Click += delegate(object sender, EventArgs args)
        {
            install = false;
            InstallForm.Close();
        };
    }
    public static bool OnActivate()
    {
        CreateInstallForm();
        InstallForm.ShowDialog();
        if(install)
        {
            PerformBasicInstall();
        }
        return install;
    }
}

If this script is applied to your mod, a window will open with the background image and two buttons. Pressing either button will close the form. The cancel button will also exit the installation, whereas pressing the install button will run PerformBasicInstall().

The next part of the tutorial will investigate how to create and handle options.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: