Visual Basic Forms and Controls for Windows Applications

1. CIS 115 Lecture 3 Visual Basic: Forms, Controls and Events

2. Topics • Forms • Form properties • Controls • Control properties • Event Driven Programming • Form Events • Control Events • Event Handlers • VB Example Program

3. Forms • A form is a container for controls • A form is used to design a GUI-based window in a Windows application • A form displays information and receives input from the user. • Always orient a form at a task as defined by the user

4. Form Properties • Text – defines the text to display in the caption bar • StartPosition – determines position of form when it first appears (eg. CenterScreen) • Size.Width, Size.Height – the 2D area occupied by the form, in units of pixels • Location.X, Location.Y – the relative position of the form on the screen • Visible – can be seen by the user • Enabled – the user can interact with the form

5. Form Properties (cont.) • FormBorderStyle – determines the appearance and behavior of the borders of the form • Sizable: (Default) Has min, max, and close buttons; can be resized by dragging edges • Fixed3D: Has a 3D look; min, max, and close buttons; cannot be resized • FixedSingle: Has single line border; min, max, and close buttons; cannot be resized • AcceptButton - designates which button on the form is activated by the Enter Key • Cancel Button - designates which button on the form is activated by the ESC Key

6. Controls • Visual objects that are placed on a form to enable customized activities • Familiar Visual Basic controls: • Label - displays text the user cannot change • TextBox - allows the user to enter text • Button – performs an action when clicked • RadioButton - A round button that is selected or deselected with a mouse • CheckBox – A box that is checked or unchecked with a mouse click • Form - A window that contains these controls • Built-in controls defined in Windows Form class library, and are defined • with ToolBox and Form Designer • or strictly with code

7. Types of Controls w/Prefixes • Text edit (TextBox—txt___) • Text display (Label—default name or lbl___) • Selection from a list (ListBox—lst___, ComboBox—cbo___, ListView, TreeView, NumericUpDown…) • Graphic display (PictureBox—pic___) • Graphic storage (ImageList) • Value setting (CheckBox—chk___, CheckListBox, RadioButton,…) • Date setting (DateTimePicker, MonthCalendar) • Dialog boxes (OpenFileDialog, PrintDialog…) • Menu controls (MainMenu, …) • Commands (Button—btn___, LinkLabel…) • Grouping other controls (GroupBox, TabControl, Panel)

8. Control Properties - Common • Common properties shared by many controls • Name, Text • Size.Height & Width, Location.X &Y, Dock • BackColor: Sets the background (fill) color • ForeColor: Sets the foreground (text) color • CanFocus, ContainsFocus, Focused • Visible & Enabled determine availability to user • Font properties affect text display in the control • Font, size, bold, etc. • Tab Index & Tab Stop

9. Setting Properties • Design Time  Set in Properties Window • Run Time  Set / Change in Code

10. Syntax for Referring to theValue of a Control's Property • Specify the control name (btnExit) • Then a dot • Then the PropertyName (Visible) • controlName.propertyName • btnExit.Visible • refers to the Visible property of the btnExit control • The visible property values may only be true or false

11. Assignment Statement – Set/ Change the Value of a Control Property • Item to receive the value (Left Side) • Assignment Indicator = • Value to be assigned(Right Side) • VariableName = Value • NumberVariable = 5 • ControlName.PropertyName = Setting • btnExit.Visible = False • Assigns the value False to the Visible property of the btnExit control • Causes the text of the btnExit control to become hidden to the user • txtFirstName.text = “Paul” • txtLastName.text = “Overstreet”

12. Buttons • Properties • Text • &Cancel -> Cancel • && -> & • Events • Click

13. Labels and LinkLabels • Use labels and link labels for text display • Text property (no more Caption) defines text to display • User cannot change a label • LinkLabel enables hyperlinks • Links.Add inserts a hyperlink into text • Must write event-handler to invoke browser • See example

14. Text Boxes: Text Input, Edit, and Display • Text box allows user to enter or edit data • Properties • MaxLength, MultiLine • AcceptsTab • AcceptsReturn • WordWrap • ScrollBars • Events • TextChanged

15. CheckBox Control • CheckState property • Checked • Unchecked • Indeterminate (checked but grayed) • Text property displays built-in caption If chkMarried.CheckState = CheckState.Checked Then M End If

16. List Selection Controls • ComboBox Properties • Text • DropDownStyle • Simple • Dropdown • DropdownList • Sorted • Methods • Items.Clear • Items.Add • Items.Remove cboChoice.Items.Clear() cboChoice.Items.Add("First") cboChoice.Items.Add("Second") cboChoice.Items.Add("Third") cboChoice.Items.Add(TextBox1.Text) cboChoice.Items.Remove("Third")

17. Timer Control • Executes code after a specified interval • Timer Event • Unique event that executes after the interval specified in the interval property expires • Interval Property • 0 - 65,535 milliseconds • 0 - means disabled • 60,000 milliseconds is one minute • Enabled property must also be true for timer to work. • Timer control is never visible at run time • Stored in Component Tray at design time

18. Event Driven Programming • Applications recognize and respond to events by executing code known as event procedures • Event: An action that is recognized by an object. • User Actions • Mouse Click • Entering Text • Pressing a Key • Program Calculations • Triggered by the system • Timer • Event Handler: Code that is written by the programmer to respond to an event • Executes only when particular event occurs

19. Form Events • Common Form Events • Form1_Load() - Occurs before a form is displayed for the first time. • Form1_Activated() - Occurs when form becomes the active window - through code or by user • Form1_Deactivate() - Occurs when the form loses focus and is not the active form • Form1_Closing() - Occurs when the form closes, either through an event or the windows close button being clicked

20. Control Events • Many controls share a Common set of events to which they can react • Click, DoubleClick • MouseMove, MouseDown, MouseUp, MouseWheel, MouseHover, MouseLeave • KeyPress, KeyDown, KeyUp • Resize • DragDrop • GotFocus • LostFocus

21. Focus and Validation Event Sequence • Focus is when an object becomes the “Active Control” • Focus Event Sequence: • Enter • GotFocus • Leave • Validating • Validated • LostFocus

22. Coding Event Handlers • Create Event Procedure • Double Click on Control • Displays Code Window and Event Procedure Stub for default event Or • Open the Code Editor (F7 or View Menu:Code Command) • Select Control & Event from drop down windows in Code Editor Event Code Goes In Here

23. Event Handler Example Exit Button – Clicked Method (btnExit_Click) Marks the beginning of this event procedure Name of the control that owns the event procedure Name of the event the procedure responds to Line Continuation Mark Private SubbtnExit_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnExit.Click ' End the application End End Sub Event handled by this procedure Ends the program

24. Event Driven Programming Components • Input • Controls • Process • Events • Output • Controls

25. Event Driven Programming Implementation Phase Steps UDIE – Implement the solution in VB: • Create the Interface • Input Controls • Output Controls • Set the Properties • Configure the appearance and behavior of the controls • Write the Code to execute when events occur • Process the inputs to create the outputs

26. VB Example: The Interface • Using Visual Basic.Net create the following form

27. VB Example: Button Click Event Procedure When btnRed is clicked - Change txtFirst text color to red • Double Click on btnRed • Code window should appear (with Event Procedure Stub) • Add code to the event procedure stub: txtFirst.ForeColor = Color.Red

28. VB Example: Textbox Text Changed Event Procedure When the text is edited in txtFirst - Change txtFirst text color to blue • In Code Window • Select the Control for the Event Procedure • txtFirst from the ClassName box • Select the Event from the Method Name Box • TextChanged Method Name Box Class Name Box

29. VB Example: Textbox Text Changed Event Procedure (cont.) • Add code to the event procedure stub: • txtFirst.ForeColor = Color.Blue

30. VB Example: Textbox Leave Event Procedure When txtFirst is deselected - Change txtFirst text color to black • In Code Window • Select the Control for the Event Procedure • txtFirst from the ClassName box • Select the Event from the Method Name Box • Leave • Add code to the event procedure stub: • txtFirst.ForeColor = Color.Black

31. VB Example: Run the Program • Click F5 or the Run Button • Type “Hello” into the 1st textbox • What Happens • Click on the 2nd Textbox • What happened in txtFirst and Why • Click on the Button • What happened in txtFirst • Type “Friends” into the 1st textbox • Stop Program by clicking Red X in corner

32. VB Example: Exit Button Clicked Event Procedure • Add a Button to your Form • Name: btnExit • Text Property: &Quit • Add a Button Click Event for this Button • Code: END

33. VB Example: Code Editor • Finds Syntax Errors (Errors in Programming Language) • Return to btnRed Click Event Procedure • Add this line of Code: • txtSecond.text = Hello Notice Wavy Blue Line – This indicates a Syntax Error that must be fixed.

34. VB Example: Run the Program Again • Test All Events • Click Quit Button

35. Homework • Homework 1 • Visual Basic Controls and Properties • See handout for details and due date • Questions?