Title: Advanced Interactive Programming Visual and Event Programming Components and Events
1Advanced Interactive ProgrammingVisual and
Event ProgrammingComponents and Events
2Outline
- Concepts
- Visual programming
- Event and event handling
- Event-driven programming
- Key and mouse events
- VB IDE components
- Characteristics
- Controls
- Menu
- MDI, SDI, multiple forms
3Visual Programming
- Writing programs in a language that manipulates
visual information or support visual interaction - Based on WIMP concept, also referred to as
Graphical User Interface (GUI) - Window to manage events and states in the window
- Icons to represent processing options
- Menus are textual descriptions of options
- Pointers, e.g. mouse, are used for selection
- Supported by independent development environment
- Creating application GUIs by pointing and
clicking graphical components with the mouse - Eliminate the need to write code manually for any
GUI components
4VB IDE Example The Design View
5Event and Event Handling
- Events
- User interactions with GUI components result in
notifications, or stimuli or messages, called
events - A GUI component reacts to an event with a special
procedure called an event handler. - A specific event causes the corresponding event
handler to run. - Any instructions coded within the handler are
then executed.
6Event Queue
- Unprocessed events are stored in an event queue.
- An event queue is a software queue that is used
to process a sequence of inputs, typically from
the user. Each record in the queue contains data
detailing the event, including the time of
occurrence, the type of input device, and the
specific input parameters. - Events in a event queue are arranged by some form
of prioritization (usually time of event or order
of importance). The system then passes each event
from the event queue to the target application
7Event-Driven Programming
- Programming the code that responds to events is
called event-driven programming. It is a computer
programming paradigm supported by most modern
programming languages. - Most IDEs also support automatic generation of
event procedure skeleton like VB IDE. - A programmer is responsible to fill in code in
terms of the business logic
8VB IDE Example The Code View
9Event-Driven Applications
- Typically consist of a number of event handlers.
- They make specific responses to any events that
they may detect. - By and large, the order of a program execution
and its behavior are dictated by users, i.e. when
interactions happen and what interactions happen. - VB IDE is a good example
10GUI Objects, Events and Handlers
- GUI Objects, events and event handlers must be
associated the essence of event-driven
programming - Many ways to do so in different IDEs
- From the Code View select a component from
object box and then an event in procedure box - Write it directly
11Event Handler Structure in VB
- An event handler is a sub procedure
- An event handler may have arguments in terms of
the initiator of the event.
12Programming User Events
- Reactions to the Mouse and Keyboard
13Mouse Events Handling
- Mouse Events
- Click
- DblClick
- MouseMove
- MouseUp
- MouseDown
- DragOver
- DragDrop
Button argument Description Constant Value Left
vbLeftButton 1 Right vbRightButton 2 Middle vbM
iddleButton 4
Shift argument Description Constant Value Shift
vbShiftMask 1 Ctrl vbCtrlM
ask 2 Alt vbAltMask 4
14Mouse Event Handler Arguments
- MouseDown, MouseUp and MouseMove events
- Button - Mouse button pressed
- Shift - Number of mouse clicks
- X - X-coordinate of mouse event, within the
control - Y - Y-coordinate of mouse event, within the
control
Private Sub Form1_MouseUp(Button As Integer,
Shift As Integer, X As Single, Y As Single) If
Button vbRightButton Then Call
PopupMenu(mPopup) End If End Sub
15MouseDown Event
- The MouseDown event is triggered when a mouse
button is pressed. - Using the Move method with a MouseDown() event
2 -0
16MouseMove Event
- The MouseMove event occurs when the mouse pointer
is moved across the screen - Both forms and controls recognize the MouseMove
event while the mouse pointer is within their
borders. - Using the MouseMove() event
2 - 1
17Button Argument
- Returns identification of which button was
pressed (integers or symbolic constants) - Coding a MouseUp() event
2 - 2
18Button Argument
2 - 3
19Drag and Drop Features
- DragOver() Event
- DragDrop() Event
- DragIcon Property
- DragMode Property
20DragOver() Event
- A target event occurs when the source component
enter, leave or is over the target components
space - Code objects over which you intend to drag other
objects - You can detect an object entering, leaving or
being over another objects space - The Drag Mode property of the source component
should be set to Automatic
2 - 4
21Example Code
- Source refers to the source component
- State denotes if the source component enter,
leave or is over the target components space
22DragDrop() Event
- Another target event occurs when dropping one
object onto another object - Coding the DragDrop() event of the target
component - The Drag Mode property of the source component
should be set to Automatic
2 - 5
23Example Code
24Keyboard Event Handling
- Key Events
- Generated when keys are pressed and released
- KeyPress
- Can return a Char for any ASCII character pressed
- KeyUp and KeyDown
- Test for special modifier keys
- Use KeyEventArgs
25KeyPreview Property
- Forms can normally only receive key messages when
they are blank or all their controls are disabled - Set this form property to TRUE to route key
messages to the form first - This is useful for detecting universal key
strokes for saving, exiting or help
26KeyPress Event
- Occurs when the user presses and releases an ANSI
key, which can produce the ASCII value of the
character - The identity of the key can be detected by
examining KeyASCII parameter - KeyASCII values correspond to normal character
codes
27Usage
- Syntax
- Private Sub Form_KeyPress(keyascii As Integer)
- Private Sub object_KeyPress(index As Integer,
keyascii As Integer) - ASCII code
- Chr(KeyAscii)
- KeyAscii Asc(char)
2 - 6
28KeyDown() and KeyUp() Events
- Similar to KeyPress() except that they detect
actions of any key, even those not producing
characters - Using them together you can detect when a key is
held down - Both events use KeyCode and Shift arguments to
test uppercase or lowercase character and to
provide more options
29Usage
Key Code
30Example Return Key Event
2 - 7
31Example Function Key Events
- Using a Function Key as a menu shortcut key
2 - 8
32VB IDE Components
33Graphical Programming Components
- Objects with which user interacts
- Forms and Controls - two of the most important
visible objects in VB programming environment for
creating GUI - Within objects, descriptive code is hidden behind
a user interface
34Object Characteristics Properties
- Properties are attributes of objects
- Appearance
- Position
- Behaviour
- Font, etc.
- Set at run time or design time
35Object Characteristics Methods
- Methods are actions that an object is capable of
performing. Usually the actions will operate on
data held by objects - e.g. List box AddItem, Clear, RemoveItem, etc.
36Object Characteristics Events
- Events are responses to stimuli as discussed
before - Summary
- Each control has the same characteristics
- As the programmer, you are in control. You decide
which properties should be changed, methods
invoked or events responded in order to achieve
the desired appearance and behavior
37Text Controls
- Label
- Text Box
- List Box
- Combo Box
38Label Control
- A label is a simple control that exists only to
contain text - A label is not available for text input by the
user at run time - The Text property can be set at design time or
during execution.
Property Window
39Assign Text during Run Time
- Text can be assigned to a label as the form loads
into memory, but before it becomes visible on
screen, i.e the assignment can be made in a
handler function for the Load event of the form - Although the user can not change the text of a
label directly at run time, handlers for events
raised by other controls or the form itself can
be programmed to change it
40TextBox Control
- TextBox controls can display text like Label
controls - TextBox controls also allow the user to modify
the text at run time - Default text can be set during design time
- Text can be programmed by program code during
execution, used for inputs and outputs
41Modifying Access to a Control
- We can set a TextBox control to be
ReadOnlyeffectively changing it to a Label - We can set the Enabled property of any control to
FALSE the control is dimmed at run time but
still visible - A disabled control can not receive interactions
- We can set the Visible property of any control to
FALSE the control is disabled and completely
invisible at run time
42ListBox Control
- Displays a list of items.
- User can not type in this control.
- More than one item may be selected at a time
- The contents of a one-dimensional array of
strings may be displayed by a ListBox - Simply set the array as the DataSource property
of the ListBox
43ListBox Control
- The ListBox is a scrollable control
- The default event, SelectedIndexChanged, is
raised every time a different member (item) of
the displayed list is selected - Both the SelectedItem (in text format) and the
SelectedIndex (the index of the item in integer
format) are available as properties
44ComboBox Control
- This is actually a composite of two controls the
ListBox and TextBox controls - A primary feature is that the selected item from
the list appears in the TextBox portion of the
control as the Text property - This obviously precludes multiple selection modes
with the ComboBox
45ComboBox Text Entry
- The TextBox portion of the control allows text
entry - This allows entry of an item that is not part of
the list - Entering text in the TextBox portion does not
cause it to appear in the list
46Alternate Style ComboBoxes
- The default style ComboBox features a dropdown
style lista significant space-saver in interface
design - With a DropDownStyle of Simple the list portion
of the control stays open - With a DropDownStyle of DropDownList the TextBox
portion of the control becomes Read Only
47Buttons
- Option Button
- Check Box
- Command Button
48RadioButton
- RadioButton controls are meant to be used in
groups where only one may be checked at a time - Setting the Checked property of a RadioButton to
True automatically sets the Checked properties of
all other RadioButtons in the set to False - Only one set of RadioButtons may be created
directly on a form
49CheckBox Control
- Used to turn an option on or off
- Check boxes function independently of each other
- Non-exclusive Control - The Text property of a CheckBox is displayed
adjacent to the actual check box of the control - The Checked property is a Boolean value that may
be evaluated at run time
50Button Control
- User clicks this button to initiate some sort of
actions - Button handlers contain code which is executed
when the button is clicked
51ScrollBars Controls
- Allow user to select a single value from a range
of values - Small change and large change increments may be
set - Horizontal and vertical versions have the same
functionality
52Graphics Controls
- Image control
- Picture Box
- Line
- Shape
- Image and picture box controls allow you to work
with various image files. - While line and shape controls draw lines and
shapes on your forms (you can then change the
properties of these)
53Image Control
- Contains an image to be displayed on the screen
- Can be clicked like a command button
- A picture can be stretched to fit the control's
size - The Stretch property determines whether the
picture is stretched when the image control is
resized
54PictureBox Control
- Several image controls may be contained within
one picture box - Several image types are compatible
- Images may be displayed in several modes by
changing the SizeMode property - Can also function as a mini form
55Line Control Properties
- Used to draw lines at design time or run time
- Coordinate positions of each end
- Other properties
- Color - BorderColor
- Style - BorderStyle
- Width - BorderWidth
56Shape Control
- A single control can assume any one of six
different shapes - Positioning and sizing is by Top, Left, Height
and Width properties - FillStyle, FillColor, BackStyle and BackColor
properties are available
57Unique Names for Controls
- Assign a meaningful and unique name to each
control as soon as it is created on the form. - The control name should include a standard
prefix. This is not necessary but makes reading
code much easier.
58Some Common Control Prefixes
- Buttonbtn
- TextBoxtxt
- Labellbl
- ListBoxlst
- ComboBoxcbo
- PictureBoxpic
- RadioButtonrad
- CheckBoxchk
- HScrollBarhsb
- VScrollBarvsb
- Menumnu
- TrackBartkb
- Timertmr
- Formfrm
59Menus
- Menu Bars
- Menu Editor
- Menu code
60Menu Design
- Caption property will appear in menu as text
- An prior to a letter in the caption indicates
the hot key
61Menu Design
- Use the prefix mnu to name
- Create subordinate menus by indenting the
captions - Create shortcut keys by selecting options in the
menu editor
62Menu Code
- Write the code for menu controls in the click
event handler for the menu object
2 - 9
63Using Pop-up Menus
- To build follow the same procedures as for
members of a menu bar - Set the Visible property of the top-most menu
name to FALSE - Use the PopupMenu method in an event handler
2 - 10
64Multiple Forms
- Managing more than one form in a project
65Multiple Forms
- You can use as many as youd like
- Only one form is loaded and actively displayed at
startup - Use the project property to specify the startup
form - At startup, the system automatically loads one
designated form
66Load Statement
- Loading more than one form requires the Load
statement and the Show method - Loads an existing form into memory. Once the form
is loaded, its properties and controls can be
altered by the application, whether or not the
form is actually visible - Use the Load statement when you want to load a
form without displaying it
67Show and Hide Statements
- Use to display or conceal a form on the screen
during run time - Working with more than one form
2 - 12
68Starting with a Main() Procedure
- An alternative to using a start up form with
attached code - Sub Main can only appear in a standard module,
not in a form module
2 - 13
69Benefits of Sub Main()
- Error checking before the program is launched
- Check for proper screen resolution
- Check for screen size (enables auto-sizing forms)
- Promotes modularity and flexibility
2 - 14
70SDI and MDI Interfaces
- SDI interfaces feature totally independent
windows - MDI interfaces feature child windows within one
parent window - Child windows menus are displayed by the parent
window when child is not minimized - Examples Notepad vs Word
71Creating an MDI Application
2 - 15
72Code Modules
- Containers for function or subroutine code not
associated with specific controls - Invisible at run time
2 - 16
73Summary
- Visual programming
- Event and event handling
- Event-driven programming
- Keyboard and mouse events
- Components characteristics
- VB components forms, controls, menus, etc.