Slide 1 ___________________________________

IT 236 User Interface Development ___________________________________

Lecture 2

Eric J. Schwabe
___________________________________
School of CTI, DePaul University
Spring 2008 ___________________________________
___________________________________
___________________________________
___________________________________

Slide 2 ___________________________________
Tonight:
___________________________________
 Review of last week’s material
 Setting control properties in event procedures
___________________________________
 More controls
 Keyboard shortcuts
___________________________________
 Lab Session 1 (Room 819, 7:30pm-9:00pm)
___________________________________
___________________________________
___________________________________

Slide 3 ___________________________________
Review from Last Week
___________________________________
 Interfaces are made up of forms and controls
 Appearance is determined by their properties
___________________________________
 Event procedures respond to user’s actions
 First construct interface, then set properties,
___________________________________
then write event procedures
___________________________________
___________________________________
___________________________________
Slide 4 ___________________________________
Setting Control Properties
___________________________________
 Properties can be assigned various types of
values:
___________________________________
 String: nameOfControl.Text = “Hello!”



Number: nameOfControl.Height = 50
Color: nameOfControl.BackColor = Color.Red
___________________________________
 Boolean: nameOfControl.ReadOnly = True
 Property value: nameOfControl.Font = otherControl.Font ___________________________________
 In some cases, you are given a list to select from

___________________________________
___________________________________

Slide 5 ___________________________________
Keyword Me
___________________________________
 The optional keyword Me refers to the form
itself
___________________________________
 Me.nameControl.property is the same as
nameControl.property ___________________________________
 If you start with Me, you’ll get a list of
controls and other objects to choose from
(like the list of properties after a control
___________________________________
name…)
___________________________________
___________________________________

Slide 6 ___________________________________
With Statement
___________________________________
 Lets you set several of the properties of a
control at the same time
___________________________________
With nameOfControl
.property1 = value1 ___________________________________
.property2 = value2
.property3 = value3
...
End With
___________________________________
___________________________________
___________________________________
Slide 7 ___________________________________
Remarks
___________________________________
 An apostrophe at the beginning of a line
indicates a remark, which is ignored when
___________________________________
the event procedure is run
 Put one before each event procedure ___________________________________
 Put three at the top of each code window
with your name, the course number and
section, and the assignment number
___________________________________
___________________________________
___________________________________

Slide 8 ___________________________________
Masked Text Box
___________________________________
 Mask property restricts what a user can type
into the text box, e.g.:
___________________________________
 Zip code
 Phone number ___________________________________
 Social security number
 You can also set up your own custom masks
(a bit complicated…)
___________________________________
___________________________________
___________________________________

Slide 9 ___________________________________
Picture Box
___________________________________
 Used to display an image
 Set Image property to import image into
___________________________________
project (from course CD or other source)
 Visible property determines if it appears ___________________________________
 Customizing image
 center or otherwise align ___________________________________
 stretch to fit box
 set border style
___________________________________
___________________________________
Slide 10 ___________________________________
Check Box
___________________________________
 A check box control is either switched on
(check appears) or off (empty box)
___________________________________
 Whether box is checked or not is indicated
by the property nameOfCheckBox.Checked ___________________________________
 Checking or unchecking the box invokes the
event procedure
nameOfCheckBox_CheckedChanged
___________________________________
___________________________________
___________________________________

Slide 11 ___________________________________
RadioButton/Group Box
___________________________________
 Put radio buttons inside the outline of a
group box to allow only one to be checked at
___________________________________
a time
 Radio buttons not within ant group box will ___________________________________
work as a single group
 Radio buttons also have Checked property,
and CheckedChanged event (though it may ___________________________________
happen for two RadioButtons at once!)
___________________________________
___________________________________

Slide 12 ___________________________________
Tab Order
___________________________________
 Pressing tab key moves the focus from one
control to another, in a cyclic order
___________________________________
 TabStop property indicates if a control is
included in tab order (not all can be included) ___________________________________
 TabIndex property indicates the position of
control in the (ascending) tab order ___________________________________
 Set in Properties Window or with View -->
Tab Order
___________________________________
___________________________________
Slide 13 ___________________________________
Keyboard Shortcuts
___________________________________
 Add & in front of a character in the Text
property of a button or label ___________________________________
 That character will be underlined, and…
 for a button, pressing Alt + that character will
click the button
___________________________________
 for a label, pressing it will move the focus to the
next control (usually a text box) in the tab order
 Don’t give two controls the same shortcut!
___________________________________
 (May need Alt to make them visible…)
___________________________________
___________________________________

Slide 14 ___________________________________
Keyboard Shortcuts
___________________________________
 The AcceptButton property of the form
indicates a button that will be clicked when ___________________________________
you press Enter
 The CancelButton property of the form
indicates a button that will be clicked when
___________________________________
you press Esc
___________________________________
___________________________________
___________________________________

Slide 15 ___________________________________
Summarizing Example
___________________________________
 Display a large image in a picture box with a
caption below ___________________________________
 “Exit” button ends program
 Grouped radio buttons “small” and “large” ___________________________________
change size of image
 Check box hides and displays caption
___________________________________
___________________________________
___________________________________
Slide 16 ___________________________________
Lab Exercise 1
___________________________________
 Text box asking “How’s it going?”
 Buttons to
___________________________________
change text color to red/black
___________________________________


 change background color to gray/white

 change text to “So far, so good…”/ “It’s working”
 end the program ___________________________________
 Set Tab Order to visit all buttons
 Add keyboard shortcuts for color buttons
___________________________________
___________________________________

Slide 17 ___________________________________
Next Time:
___________________________________
 Variables
 Working with strings and numbers
___________________________________
 Computations
___________________________________
___________________________________
(Assignment 2 has been posted, due next week…)

___________________________________
___________________________________