Chapter 3 : Introduction To Visual Basic 6

3.1 Definition 3.2 Concept 3.3 GUI Development 3.4 Introduction to Menu, Toolbar, Toolbox and Code Window 3.5 Visual Development and EventDriven Programming 3.6 Working with Control 3.7 Controlling Control properties

graphicalmethod used to create the VISUAL user interface (GUI).

3.1 Definition

Purpose refers to the BASIC (Beginners AllBASIC Symbolic Instruction Code)

language, a language used by more programmers than any other language in the history of computing

No need to write numerous lines of code to describe the appearance and location of interface elements but simply drag and drop rebuilt objects into place on screen

BASIC language and now contains several VISUAL BASIC - evolved from the original
hundred statements, functions, and keywords, many of which relate directly to the Windows GUI.

3.2 Concept
o Visual Basic - is a Windows development language. Some familiarity with the Windows environment and knowing some fundamental differences between programming for Windows versus other environments is necessary o The concept covers:- windows, events, messages, objects, user interface, controls and application

3.2 Concept
o Events
o Events can occur through user actions such as a mouse click or a key press, through programmatic control, or even as a result of another window's actions o Example:
OBJECT - Control Button mouseover - TextBox - RadioButton EVENTS click, doubleclick, setfocus, lostfocus change

o Messages

o Each time an event occurs, it causes a message to be sent to the operating system. The system processes the message and broadcasts it to the other windows. Each window can then take the appropriate action based on its own instructions for dealing with that particular message (for example, repainting itself when it has been uncovered by another window)

3.2 Concept
o Objects
o A combination of code and data that can be treated as a unit o A piece of an application, like a control such as Command button, label, textbox or a form itself o An entire application can also be an object

3.2 Concept
o User Interface
o the junction between a user and a computer program o is a set of commands or menus through which a user communicates with a program o The user interface is one of the most important parts of any program because it determines how easily you can make the program do what you want o Graphical user interfaces (GUIs) that use windows, icons, and pop-up menus have become standard on personal computers o To users, the interface is the application but the real interface is actually the code that is executing behind the scenes

3.2 Concept (Example of User Interface)

3.2 Concept
o Controls
o Controls are instances of objects that have been created. These controls provide functionality to the forms and enable the user to create events for the program to respond to

o Application
o An application is a completed program

3.3 GUI Development

o 3 main steps :
o Define the user interface
o Create forms and control that you design in the planning stage o Defining the objects you will use in a project

o Set the properties

o Give each object name and define its attributes o Describing each object

o Write the basic code

o Use programming statements to carry out actions needed by your program o Defining the action of the program

3.3 GUI Development

o The common elements of a Visual Basic user interface consist of the following
o Forms (also known as windows) o Buttons (such as command buttons and radio button) o Boxes (such as text boxes and check boxes) o Labels o Pictures (such as icons and graphics)

3.4 Introduction to Menu, Toolbar, Toolbox and Code o Menu BarWindow

o Displays the commands to work with Visual Basic such as the standard File, Edit, View, Window, Help menus and, menus to access functions specific to programming such as Project, Format, or Debug

3.4 Introduction to Menu, Toolbar, Toolbox and Code Window

o Toolbars
o Provide quick access to commonly used commands in the programming environment o By default, the Standard toolbar is displayed when Visual Basic is started

3.4 Introduction to Menu, Toolbar, Toolbox and Code o ContextWindow Menu

o Contain shortcuts to frequently performed actions o To open a context menu, click the right mouse button on the object you're using. The specific list of shortcuts available from context menus depends on the part of the environment where you click the right mouse button

3.4 Introduction to Menu, Toolbar, Toolbox and Code Window

Context Menu

3.4 Introduction to Menu, Toolbar, Toolbox and Code o Toolbox Window

o Provides a set of tools used at design time to place controls on a form o In addition to the default toolbox layout, you can create your own custom layouts by selecting Add Tab from the context menu and adding controls to the resulting tab

3.4 Introduction to Menu, Toolbar, Toolbox and Code o Toolbox Window

OptionButton PictureBox Frame Pointer TextBox CheckBox ComboBox Timer FileListBox Image HscrollBar Data OLE ListBox VScroll Bar Line Shape

Label CommandButton

3.4 Introduction to Menu, Toolbar, Toolbox and Code Window o Project Explorer Window
o Lists the forms and modules in your current project o A project is the collection of files you use to build an application

View code Toggle Folders

Project Name
View object Form module Form folder

3.4 Introduction to Menu, Toolbar, Toolbox and Code Window o Properties Window
o Lists the property settings for the selected form or control o A property is a characteristic of an object, such as size, caption, or color

3.4 Introduction to Menu, Toolbar, Toolbox and Code Window o Form Designer
o Serves as a window to customize to design the interface of an application o Add controls, graphics, and pictures to a form to create the look you want o Each form in an application has its own form designer window

3.4 Introduction to Menu, Toolbar, Toolbox and Code Window o Form Layout Window
o The Form Layout window allows to position the forms in an application using a small graphical representation of the screen

3.4 Introduction to Menu, Toolbar, Toolbox and Code Window o Code Window
o Allows to write the programming statement to execute certain action or events o Double click at any object to view the code window

3.4 Introduction to Menu, Toolbar, Toolbox and Code Window

o Summary :
Name all the VB environment shown on this figure

A
B

C
D E F

H I

3.5 Visual Development and Event-Driven Programming

o One of Visual Basics most important and compelling features is a design approach known as the event-driven programming model o VB program focus on the events that user expect to take place while the program is running. For example, the user clicks a button, selects an option, chooses a menu command, highlights an item in a list, or types an entry into a text box; all of these are events that are formally defined and recognized in Visual Basic applications o Accordingly, a program contains blocks of code known as event procedures that will respond to the specific events

3.5 Visual Development and Event-Driven Programming

o Click

o Mouse event : A number of events can result from the users interaction with the mouse
o it occurs when a user presses the left mouse button while the mouse cursor is position over a control

o DoubleClick
o it occurs when a user presses the left mouse button twice in rapid succession, without moving the mouse, while the mouse cursor is position over a control

o DragDrop
o it occurs when a user presses and holds down the mouse button, drags one control over another, and then releases the mouse button

3.5 Visual Development and Event-Driven Programming

Click DoubleClick

DragDrop

3.5 Visual Development and Event-Driven Programming

o Mouse Event (Continue)
o DragOver
o it occurs when a user is in the process of dragging one control over another o it occurs when a user presses a mouse button o it occurs when a user releases a mouse button o it occurs when a user moves the mouse

o MouseDown

o MouseUp

o MouseMove

3.5 Visual Development and Event-Driven Programming

o Keyboard Events : Keyboard events enable the application to monitor the keyboard input that is being passed to a program, and to modify that input if necessary. The main purpose of these events is input validation
o KeyPress
o it occurs when a key is pressed and released on the object that currently has the focus. If no object has the focus, the event is directed to the form o it occurs when a key is pressed o it occurs when a key is released

o KeyDown o KeyUp

3.5 Visual Development and Event-Driven Programming

o Keyboar d Events

3.5 Visual Development and Event-Driven Programming

o State-Change Events : State-Change Events perform certain actions when something starts or changes
o Activate
o it occurs when a form becomes the active window (usually by clicking on it)

o Deactivate
o it occurs when the user moves from one form to another

o GotFocus
o it occurs when an object becomes the one in focus, usually through a user action like clicking or tabbing

3.5 Visual Development and Event-Driven Programming

o LostFocus

o State-Change Events (Continue)

oIt occurs when an object loses the focus, which normally happens with another control get the focus

o Load
oIt occurs when a form is loaded

o Unload
oIt occurs when a form is being unloaded from the program by a user action like closing a Control menu or by using an Unload statement in code

3.5 Visual Development and Event-Driven Programming

o StateChange Events

3.5 Visual Development and Event-Driven Programming

o Miscellaneous Events : Another group of events exists to service very specific requirements
o Timer
o It occurs when a preset timer event elapses

o Scroll
o It occurs when a user drags the little box inside a scroll bar

o PathChange
o It occurs whenever the default path for file lookup changes. It applies to only the File list box

3.5 Visual Development and Event-Driven Programming (Summary)

Mouse Events Keyboard Events State-Change Events Miscellaneous Events

3.6 Working with Control

o To develop an application, a project is created to manage all the different files that make up the application o A project can consists of :

o One project file that keeps track of all the components (.vbp) o One file for each form (.frm) o Optionally, one file for each standard module (.bas) o One binary data file for each form containing data for properties of controls on the form (.frx). These files are not editable and are automatically generated for any .frm file that contains binary properties, such as Picture or Icon o Optionally, one file for each class module (.cls) o Optionally, one or more files containing ActiveX controls (.ocx) o Optionally, a single resource file (.res)

3.6 Working with Control

o Four commands on the File menu allow you to create, open, and save projects
o New Project - Closes the current project, prompting to save any files that have changed. Select a type of project from the New Project dialog. Visual Basic then creates a new project with a single new file o Open Project - Closes the current project, prompting to save any changes. Visual Basic then opens an existing project, including the forms, modules, and ActiveX controls listed in its project (.vbp) file o Save Project - Updates the project file of the current project and all of its form, standard, and class modules o Save Project As - Updates the project file of the current project, saving the project file under a file name that you specify. Visual Basic also prompts to save any forms or modules that have changed

3.6 Working with Control

3.6 Working with Control

o Form
o is a basic element to develop Visual Basic application. It consist of a window for a user to interact with the current application o It has its own properties, events and methods (action associates with object)
o Designing form :
oSet all the necessary properties in properties window using either design mod or run-time mode (writing a program code)

3.6 Working with Control

Form Properties

Events

3.6 Working with Control

o Label
o Use to display text or information o Must be a string o Can define the content of the text at design mode or at run time mode by inserting a string into the property called Caption o Create a label which display your full name on the form o Run the current project o Try to click at the label on run time mode and examine the effect to the application

o Exercise :

3.6 Working with Control

o Text Boxes
o Can be used to display or accept the input o Provides an easy way for user to enter and edit text and for your program to retrieve the information that was entered o Can also be set to specify whether it is only for input or only for output by setting the enable property o Create an empty text box on your form o Run the current project o Try to type any string on the textbox and compare it with the label created before

o Exercise :

3.6 Working with Control

o Command Button
o Acts as a control for the user to click on it o Eg : To enable printing a word on the screen, a user might click on the PRINT button on the form o Create a command button on the form and change its caption property to PRINT and its name to cmdprint o Double click on the command button and insert the following code in the code window o Run the current project o Examine the output of the project
o Print saya suka belajar visual basic

o Exercise

3.6 Working with Control

o Checkbox
o Used to get an answer from the user o When the check box is on the check mark is displayed in the box o It gives the respond to the check box when the answer is yes o When the check box is off the box is empty

o Exercise
o Create a frame on the form and create 3 check box on the frame o Change the appropriate properties with suitable values o Run the current project o Try to click inside the check box and examine the effect

3.6 Working with Control

o Option Button
o Used to get an answer from the user o Only one button can be selected from all options given o Always work as part of a group. Selecting one button will automatically clear the other buttons in the group

o Exercise
o Create a frame on the form and create 3 option button on the frame o Change the appropriate properties with suitable values o Run the current project o Try to click inside the option button and examine the effect o Compare it with the check box created before

3.6 Working with Control

o Listbox
o Use to present a list of choice available o Items are added to the list in the design mode or run time mode (using AddItem method) o Key parts :
oItem list : collection of item which users can select oSelected item : item chosen by the user oScrollbar : indicates more items are available on the list than will fit in the

3.6 Working with Control

o Exercise (Listbox)
o Create a listbox on the form o Change the appropriate properties o Change the list property and insert some values o Run the current project o Try to click in the list and examine the effect

3.6 Working with Control

o Combo Box
o Another control that enables list of choice to be presented to users o Has much in common with ListBox o Both use the AddItem, RemoveItem and Clear to modify the contents of the list o One exception is combo box property has a Style property which determine whether or not the list box also has a text box for user entry and whether or not the list will drop down o Style :
o 0 : dropdown combo box (user can enter other value than listed) o 1 : simple combo (user can enter other value than listed) o 2 : dropdown list (user can only use the listed value)

3.6 Working with Control

o Exercise (Combo Box)
o Create 3 combo box on the form o Change the appropriate properties and insert some values to the list property o Set combo box 1s style as style 1, combo box 2 as style 2 and combo box 3 as style 3 o Run the current project o Examine the differences of all the combo box and the listbox created before

3.7 Controlling Control Properties

o Once you have created a control on a form, the properties of the control will be set into their default values o These values will remain until you change it whether using design mode or run-time mode

3.7 Controlling Control Properties

o Common control properties in Visual Basic
o Name : unique name of the control which will be use to refer it in programming o BackColor : Background Colour o ForeColor : Text Colour o BackStyle : Opaque or Transparent o Font : determine typeface, attribute and font size of a text

3.7 Controlling Control Properties

o Common control properties in Visual Basic (continue)
o Caption : display text to the control which cant accept user input such as Label, Command Button and Check Box o Text : display text to the control which can accept user input such as Text Box and Rich Text Box o Width, Height : determine the dimension of a control. Default unit is twip which consists of 1440 twip in 1 inch

3.7 Controlling Control Properties

o
o

Common control properties in Visual Basic (continue)

Left, Top : determine the coordinate of a control. By default, the placing of a control is set based in upper-left corner of a screen. Using this property, user can place the control wherever on the screen using programming code Enabled : by default, the value of this property is True which enables the control to accept user input. If the value is set to False, the control will be in gray colour and it cannot accept any user input Visible : show (True) and hide (False) control on the from

General Object Controls

Control name Picturebox Label Textbox Frame Commandbutton Checkbox Optionbutton Combobox Listbox Scrollbar Timer Listbox Shape Image Displays graphic Displays text that the users cannot edit Displays text Serves as container for other controls Allows the users to initiate actions by clicking the button Lets the users make a true/false choice Lets the users choose one option from a group of items Lets the users choose from a list of items Lets the users choose from a list of items Lets the users choose a scrollbar value based on the position Lets the program perform functions on a timed base Lets the user select the file Displays a shape on the form Display the image on the form Function

Important Notes
o Every control created on the form must has a unique name so that programmers can identify which control will be used in programming code o Each control should be named after what it is use to represent (information that the control hold). Eg. txtsalary : a text box that will hold user salary o Every control on the form has its own properties