In the last tutorial we dealt with buttons. For the Graphical User Interfaces that we create these buttons are used to execute certain functions. In this tutorial, we will see certain other elements of forms which are useful in our GUIs such as text-boxes, check-boxes and drop down lists.
To begin with it, create a new project and switch over to the design window. Now, let us add a text-box, a check-box and a combo-box. All of these elements are present within the Common Controls pane of the Toolbox (In case the toolbox is not visible, press Ctrl+W followed by X). After adding these elements it is imperative to name them with a proper convention so that it is easier for the coder to access these objects.
Let us name them as my_textbox, my_checkbox and my_combobox.
Let me highlight a very important feature of Visual Studio at this moment. All properties of the objects added to our form design can be accessed in two simple ways.
- Using the properties window (if not visible, press Ctrl + W followed by P).This is easier to use for all purposes.
- Using the object oriented programming structure. One can access and modify all properties and functions via code as well.
For now, let us access all properties from the properties window.
Now let us add a button and a label to help us in working with the objects. Name them as well.The form should look something like this.
Now, double click my_button and you will be redirected to the coding area, inside the function my_button_Click();
Here “Click” basically represents the event of clicking the button and the code within it will be executed on doing so.
Let us type in the following
my_label.Text = my_textbox.Text;
While typing all these out you will be greatly assisted by Visual Studio’s Auto List feature. The statement that we have written basically copies the text inside the text box to our label. As simple as a value assignment operation.
The use of text boxes in the context of Robo-Soccer is basically to take inputs from the user and store them in variables for further processing, like the target value of speed for a motor. This value is generally a byte and to use it as one we use a conversion which is simply another line of code. For example, given the input is a byte value and to store it in a byte variable we write
value = Convert.ToByte(my_textbox.Text);
This seems logical enough. In this way we can also use our check-box to take inputs on logical decision making statements. For example let us change the text’s color if the check-box is checked.
For this we write
my_label.ForeColor = Color.Cyan;
my_label.ForeColor = Color.Magenta;
This is how we use a check-box. It is useful in our GUIs as we will see later.
The next very useful tool to take inputs from the user is our combo-box. A combo-box has a drop down list of items from which the user can select an option along-with the option of typing into the combo-box. It is useful when we want the user to enter a value from a given set and not any random value.
To create the list we need to go to the design pane, select the combo-box and in the properties tab double click on “Collections” belonging to the Items category.
Now that we have created our list, let us access these. For example, we wish to display the selected text on our label. for this we write
my_label.Text = my_combobox.Text;
In some cases the text may be required to be converted into an integer for which we will use Convert.ToInt16() or similar functions.
At times we may not even be interested in the text but rather the index value of the selected item. In those cases we access the SelectedIndex Property of the combo-box. Like
index = my_combobox.SelectedIndex;
This is useful in our context when we are selecting Bot-IDs or Team-IDs.
So this was our introduction to the commonly used “input” elements (as I would like to call it). So let us write down a simple code and play with it.
We can give input via text-box or via the combo-box. We will use the check-box to toggle between inputs and font colors. A sample definition for the button_click function would be :