Graphical User Interfaces Tonga Institute of Higher Education

Introduction Programs need to adapt to input from a user. User Interface (UI) – A set of commands or menus through which a user communicates with a program Graphical User Interface (GUI) – A program that displays a user interface in a graphical format Visual Basic.NET makes it very easy to create a professional UI or GUI

Forms Form - A window that makes up an application's user interface.

Controls - 1 Control - An object in a form  Provide a user interface TextBox ComboBox CheckBox OpenFileDialog Etc.  Provide extra functionality ImageList Timer Etc.

Controls - 2 Label  Adds text to the window TextBox  Allows user to enter text TextBox Label Form

Controls - 3 ComboBox  Allows user to select one option from a list of options  The user may see the options when they click on the control RadioButton  Allows user to select an option from a group of options  Only one option may be selected at a time  Lets users see options CheckBox  Allows user to turn one option on or off (True or False) ComboBox RadioButton CheckBox

Controls - 4 Group Box  Contains related controls Button  Initiates code when clicked Group Box Button

Demonstration Adding Controls to your form

Properties Property - Characteristic of an object Use properties to customize how a form or control behaves Forms have many properties  Form.Name  Form.BackColor  Form.Text  Form.FormBorderStyle  And much more Controls have many properties  TextBox.Name  TextBox.Font  TextBox.BorderStyle  TextBox.TextAlign  And much more

Demonstration Adding a Button and changing form and control properties for WindowsApplication1

Class Activity 1. Create a Windows application named “HelloWorld” 2. Change the size of the form to have a width of 200 and a height of Add a button to the form 4. Make the button have a width of 100 and a height of Center the button on the screen 6. Change the color of the form to Lavender using the Form1.BackColor property 7. Change the title of the form to “Hello World!” using the Form1.Text property 8. Change the style of the button to be flat using the Button1.FlatStyle property 9. Run your program

Where is the code? There is code behind the form.  To see the code: Right-click on the form and select View Code. Every change you make through Visual Studio.NET’s graphical user interface is recorded by adding, changing or deleting code behind the scenes. Most of this code is hidden in the " Windows Form Designer generated code “ region Beginners should not modify this code Experts can modify this code

Demonstration Changing a property and seeing the code behind the form automatically change