CIS 115 Lecture 3 Visual Basic Forms Controls

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

Topics Form properties Control properties Event Driven Programming Form Events Control Events Event Handlers VB Example Program

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

Form Properties Text – defines the text to display in the caption bar Start. Position – determines position of form when it first appears (eg. Center. Screen) Size. Width, Size. Height – the 2 D 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

Form Properties (cont. ) Form. Border. Style – 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 Fixed 3 D: Has a 3 D look; min, max, and close buttons; cannot be resized Fixed. Single: Has single line border; min, max, and close buttons; cannot be resized Accept. Button - 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

Controls Visual objects that are placed on a form to enable customized activities Familiar Visual Basic controls: Label - displays text the user cannot change Text. Box - allows the user to enter text Button – performs an action when clicked Radio. Button - A round button that is selected or deselected with a mouse Check. Box – 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 Tool. Box and Form Designer or strictly with code

Types of Controls w/Prefixes Text edit (Text. Box—txt___) Text display (Label—default name or lbl___) Selection from a list (List. Box—lst___, Combo. Box—cbo___, List. View, Tree. View, Numeric. Up. Down…) Graphic display (Picture. Box—pic___) Graphic storage (Image. List) Value setting (Check. Box—chk___, Check. List. Box, Radio. Button, …) Date setting (Date. Time. Picker, Month. Calendar) Dialog boxes (Open. File. Dialog, Print. Dialog…) Menu controls (Main. Menu, …) Commands (Button—btn___, Link. Label…) Grouping other controls (Group. Box, Tab. Control, Panel)

Control Properties - Common properties shared by many controls Name, Text Size. Height & Width, Location. X &Y, Dock Back. Color: Sets the background (fill) color Fore. Color: Sets the foreground (text) color Can. Focus, Contains. Focus, Focused Visible & Enabled determine availability to user Font properties affect text display in the control ▪ Font, size, bold, etc. Tab Index & Tab Stop

Setting Properties Design Time Set in Properties Window Run Time Set / Change in Code

Syntax for Referring to the Value of a Control's Property Specify the control name (btn. Exit) Then a dot Then the Property. Name (Visible) control. Name. property. Name btn. Exit. Visible ▪ refers to the Visible property of the btn. Exit control ▪ The visible property values may only be true or false Slide 2 - 10

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) Variable. Name = Value Number. Variable = 5 Control. Name. Property. Name = Setting btn. Exit. Visible = False ▪ Assigns the value False to the Visible property of the btn. Exit control ▪ Causes the text of the btn. Exit control to become hidden to the user txt. First. Name. text = “Paul” txt. Last. Name. text = “Overstreet”

Buttons Properties Text ▪ &Cancel -> Cancel ▪ && -> & Events Click

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

Text Boxes: Text Input, Edit, and Display Text box allows user to enter or edit data Properties Max. Length, Multi. Line Accepts. Tab Accepts. Return Word. Wrap Scroll. Bars Events Text. Changed

Check. Box Control Check. State property Checked Unchecked Indeterminate (checked but grayed) Text property displays built-in caption If chk. Married. Check. State = Check. State. Checked Then M End If

List Selection Controls Combo. Box Properties Text Drop. Down. Style ▪ Simple ▪ Dropdown. List Sorted Methods cbo. Choice. Items. Clear() cbo. Choice. Items. Add("First") cbo. Choice. Items. Add("Second") cbo. Choice. Items. Add("Third") cbo. Choice. Items. Add(Text. Box 1. Text) Items. Clear Items. Add Items. Remove cbo. Choice. Items. Remove("Third")

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

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

Form Events Common Form Events Form 1_Load() - Occurs before a form is displayed for the first time. Form 1_Activated() - Occurs when form becomes the active window - through code or by user Form 1_Deactivate() - Occurs when the form loses focus and is not the active form Form 1_Closing() - Occurs when the form closes, either through an event or the windows close button being clicked

Control Events Many controls share a Common set of events to which they can react Click, Double. Click Mouse. Move, Mouse. Down, Mouse. Up, Mouse. Wheel, Mouse. Hover, Mouse. Leave Key. Press, Key. Down, Key. Up Resize Drag. Drop Got. Focus Lost. Focus

Focus and Validation Event Sequence Focus is when an object becomes the “Active Control” Focus Event Sequence: Enter Got. Focus Leave Validating Validated Lost. Focus

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 (F 7 or View Menu: Code Command) Select Control & Event from drop down windows in Code Editor Event Code Goes In Here

Event Handler Example Exit Button – Clicked Method (btn. Exit_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 Sub btn. Exit_Click(By. Val sender As System. Object, _ By. Val e As System. Event. Args) Handles btn. Exit. Click ' End the application End Sub Event handled by this procedure Ends the program

Event Driven Programming Components Input Controls Process Events Output Controls

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

VB Example: The Interface Using Visual Basic. Net create the following form Object Property Setting Form 1 Text Demonstration txt. First Text (blank) txt. Second Text (blank) btn. Red Text Change Color to Red

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

VB Example: Textbox Text Changed Event Procedure When the text is edited in txt. First - Change txt. First text color to blue In Code Window Select the Control for the Event Procedure txt. First from the Class. Name box Select the Event from the Method Name Box Text. Changed Cl as M et ho d s. N am e Na m Bo x e Bo x

VB Example: Textbox Text Changed Event Procedure (cont. ) Add code to the event procedure stub: txt. First. Fore. Color = Color. Blue

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

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

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

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

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

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