Fundamentals of GUI Programming

Objectives: At the end of the session, you should be able to: describe the guidelines that are used for creating user-friendly graphical user interfaces; ascertain steps in creating applications; define variables and data types; and construct and execute applications by correctly following syntax and semantics.

Guidelines for GUI Design Give priority to the user Design for clarity Design for consistency Provide visual and audio feedback Provide keyboard support Use of appropriate controls

KEYBOARD Support

Steps in Creating Simple Applications Create the User Interface (GUI) Set the Properties of the Objects Enter the appropriate Source Code Run the Program

Create the User Interface

Set the Properties of the Objects

Enter the Source Code

Run the Program

GUI Controls Used to interact with the application. A control is defined by: – Property – Event – Method

Property It refers to the characteristic or parameter of a control –Control’s properties determine its name, color, size, location and appearance on the screen

Types of Properties Properties of a control can be classified into the following categories: –Design time property - This type of property can be changed only during the design phase of the program. –Runtime property - This type of property will only take effect when the program is running. –Design time/Runtime property - This type of property can be changed during the design time as well as during the runtime.

PROPERTIES TEXT of a LabelBox TEXT of a TextBox BackColor of a Form

Event It refers to an action that happens during the program’s execution – clicking of a button, pressing a key, changing the text of a textbox Method It refers to the function of a control It commands the control on what it should perform once an event occurs. –open, close, move, refresh

Naming a Visual Basic Control SYNTAX: Control Prefix Label BoxlbllblHelloWorld Command ButtonbtnbtnExit Text BoxtxttxtRemarks FormfrmfrmProgram

Naming a Visual Basic Control

Variables Variable – a named memory location capable of storing values based on its definition –Numeric: used to store a value which is numeric in nature –String: used for storing strings

RULES IN NAMING VARIABLES 1.It must start with an alphabetic character. 2.It can contain letters, numbers and an underscore (_). 3.It should not exceed 255 characters. 4.It should not contain any special character and a space.

Data Types Data Type – an element of a variable that verifies the kind of data it can store. –Boolean- Short (9) –Integer- Long (17) –Single- Double –String ** the value of string must be enclosed within “ ”

Variable Declarations SYNTAX: Dim as OR: Dim Suffixes: Integer( % )Double( # ) Single( ! )Long ( & ) String( $ )

Sample Variable Declarations Ex 1. X and Y are of integer data type. DimX as integer Dim Y% Ex 2. Name is of string data type. Dim Name$

The Assignment Statement SYNTAX: ObjectName.PropertyName = Value WHERE: ObjectName – name of the control PropertyName – property of the control Value - a constant or a variable Ex: lblDisplay.text = “Hello!”

Assignment Statement Example1: Assign the value “Sophomores” in the textbox named as Remarks. ANS: Remarks.Text = “Sophomores” Example2: Assign the value Num1 in the textbox named txtNum1. ANS: TxtNum1.Text = Num1

Example3: Delete the text in the textbox named as Remarks. ANS: Remarks.Text = “ ”

(Save As: Info)

Source Code:

HANDS-ON Activity #1 Save As: StudInfo Create a program that will accept the name, school, and address of a student using textboxes. Once the display button is clicked the student information supplied in the textboxes will be displayed in a single message box.

Sample output: