Presentation on theme: "Chapter 2 –Visual Basic, Controls, and Events"— Presentation transcript:
1Chapter 2 –Visual Basic, Controls, and Events Main Topics:History of the Visual Basic LanguageAnatomy of a VB ApplicationSteps in a Developing VB Application
2Visual Basic 2010 Language used to create Windows applications. Provides a Graphical User Interface or GUI.The sequence of instructions executed in the program is controlled by events.
3Evolution of Visual Basic Version 1.0 – Version 2.0 – 1992Version 3.0 – Version 4.0 – 1995Version 5.0 – Version 6.0 – 1998Visual Basic.NET – (NOT BACKWARD COMPATIBLE WITH EARLIER VERSIONS)Visual Basic 2005 – November 2005Visual Basic 2008 – November 2007Visual Basic 2010 – April 2010
4Anatomy of a VB Application Graphical User Interface (GUI)Form – a window containing controls. Usually only one per application (but not always)Control – a GUI component that are placed on the formProperty – a data item related to a Control that affects its appearanceEvent – an action (usually by a user) on a form or control that triggers program behavior
5Anatomy of a VB Application Underlying VB CodeEvent Procedure – a subroutine that is triggered by an eventOther procedures – could be Functions or Subroutines (in general these are Methods)Statements – could be assignments, control statements (decisions or loops), or calls to Functions or Subroutines
6Content Area (contains Controls Sample FormMaximize or RestoreMinimizeCloseTitle BarOverall FormContent Area (contains Controls
7Sample Form Label controls Labels are used to display information to the user. User cannot edit these.
8TextBoxes are used to allow users the enter information Sample FormTextBox controlsTextBoxes are used to allow users the enter information
9Buttons are almost always used to trigger program actions Sample FormButtoncontrolsButtons are almost always used to trigger program actions
10Another Sample Form list box radio buttons check boxes These types of controls are used for providing choices to the user and allowing selection of one or more of these choices.radio buttonscheck boxes
11Properties Common control properties include ColorSizeText or image contentFontDifferent controls have their own special properties as wellTwo ways to manipulate a control’s properties:Via the Properties window in Form DesignVia Code in the program
12EventsActions (usually, but not always, from the user) that trigger program behaviorForms and all controls can generate events. There are many events for each type of object.Examples: click a button, type text in a text box, load the form, select an item from a list box, etc.
13How to Develop a Visual Basic Application Create a ProjectDesign the Interface for the user.Via the Form Design EditorDetermine which events the controls on the window should recognize.All events can be seen in the Form Design EditorWrite the event procedures for those events.In the Code Editor
19ToolboxThe Toolbox gives a list of all controls available to place on a form.
20Properties Window selected control properties settings Description pane
21Setting Properties Click on property name in left column. Enter its setting into right column by typing or selecting from options displayed via a button or ellipses.
22Setting the ForeColor Property Click on ForeColor.Click on button at right of settings box.Click on Custom tab to obtain display shown.Click on a color.The 16 white boxes at the bottom of the grid are used to create custom colors. (Explained in Appendix B.)
23Font Property Click on Font in left column. Click on ellipsis at right of settings box to obtain display shown.Make selections.
24Button ControlThe caption on the button should indicate the effect of clicking on the button.Text property
26Label Control Used to identify the contents of a text box. Text property specifies caption.By default, label automatically resizes to accommodate caption on one line.When the AutoSize property is set to False, label can be resized manually. AutoSize is used primarily to obtain a multi-rowed label.
27The Name Property Used by the programmer to refer to a control in code Setting for Name property near top of Properties windowUse appropriate 3-character naming prefixSee next slideUse descriptive names
28Control Name Prefixes Control Prefix Example button btn btnCompute labellbllblAddresstext boxtxttxtAddresslist boxlstlstOutputBy convention, the prefix of a control’s name is set to help identify what type of control it is. This is useful for helping to understand the program code.
29FontsProportional width fonts, such as Microsoft Sans Serif, use less space for "I" than for "W"Fixed-width fonts take up the same amount of space for each character – like Courier NewFixed-width fonts are used for tables.
30Auto Hide Hides Toolbox when not in use Vertical push pin icon indicates auto hide is disabled.Click the push pin to make it horizontal and enable auto hide.push pin
34Tab OrderThe tab indices determine the order in which controls receive the focus during tabbing.The control whose TabIndex property is set to 0 has the focus when the program begins.Tab index determines the order in which the control receives the focus while tabbing.Setting of tab order invoked from Edit window.
35Renaming the Form Initial name is Form1 The Solution Explorer window lists a file named Form1.vb.To rename the form, change the name of this file to newName.vbnewName should begin with prefix frm.
37Event An event is an action, such as the user clicking on a button Usually, nothing happens in a Visual Basic program until the user does something which raises an event.What happens is determined by statements inside the event procedure.
38Display Events for a Control Select the controlClick on the Events button ( ) in the Properties windowevents button
39Create an Outline for an Event Procedure Double-click on a controlorSelect a control, click on the Events button in the Properties window, and double-click on an event
40Structure of an Event Procedure Private Sub objectName_event(...)Handles objectName.eventstatementsEnd Sub(...) is filled automatically with (ByVal sender As System.Object, ByVal e As System.EventArgs)headerThese are parameters of the procedure…we’ll discuss in Ch5
41Header of Event Procedure Private Sub btnRed_Click(…) Handles btnRed.ClickName of the event procedure.Identifies event
42Code EditorThis is the Code Editor for the form before any code has been written.Code Editor tabForm Designer tab
43Sample FormtxtFirsttxtSecondbtnRedDouble-click on a control to create its event-procedure outline in the Code Editor
44Code EditorWhen you double-click on a control, its default event procedure will be created in the Code Editor.
45Code Editor Public Class frmDemo Private Sub txtFirst_TextChanged(...) Handles txtFirst.TextChangedtxtFirst.ForeColor = Color.BlueEnd SubEnd ClassOnce you have an event procedure, you can write the statements for the desired program behavior.In this example, we set the ForeColor property of the txtFirst text box to blue. This makes the letters in the text box blue.
46IntelliSenseAutomatically pops up to help the programmer.txtFirst.
47Code for Sample 2-3-Demo Private Sub txtFirst_Leave(...) Handles txtFirst.LeavetxtFirst.ForeColor = Color.BlackEnd SubPrivate Sub txtFirst_TextChanged(...)Handles txtFirst.TextChangedtxtFirst.ForeColor = Color.BluePrivate Sub btnRed_Click(...) Handles btnRed.ClicktxtFirst.ForeColor = Color.Red
48Code for Sample 2-3-DemoThese events are the defaults for the associated controls. Double-clicking the control automatically creates them:Private Sub txtFirst_TextChanged(...)Handles txtFirst.TextChangedtxtFirst.ForeColor = Color.BlueEnd SubPrivate Sub btnRed_Click(...) Handles btnRed.ClicktxtFirst.ForeColor = Color.Red
49Code for Sample 2-3-DemoThe Leave event is not a default for text boxes. To create it you need to go through the Events portion of the Properties window in the Form Design editor:Private Sub txtFirst_Leave(...)Handles txtFirst.LeavetxtFirst.ForeColor = Color.BlackEnd Sub
50Event Procedure txtFirst.Leave Select txtFirst on the formClick on the Events button in the Properties windowDouble-click on Leave
51Sample Assignment Stmts txtBox.ForeColor = Color.RedtxtBox.Visible = TruetxtBox.Text = "Hello World"General Form:controlName.property = settingThese are ways of manipulating properties of controls dynamically, in your code, based on user actions
52FocusWhen you click on a text box, a cursor appears in the text box, and you can type into the text box.Such a text box is said to have the focus.If you click on another text box, the first text box loses the focus (Leave event) and the second text box receives the focus (Enter event).
53Handling Multiple Events An event procedure can be invoked by two events.Private Sub Happening(...)Handles btnRed.Click,txtSecond.LeavetxtFirst.ForeColor = Color.RedEnd Sub
54Altering Properties of the Form The following won't work:frmDemo.Text = "Demonstration"The form is referred to by the keyword Me.Me.Text = "Demonstration"This is because all this code is taking place WITHIN the form (frmDemo). So, you need to use self-referencing instead of other-referencing.
55Summary: Creating a Visual Basic Program Create the interface; that is, generate, position, and size the controls.Set properties; that is, configure the appearance of the form and its controls.Create the event procedures for the form and its controls.Write the code that executes when events occur.