Slide 1 ___________________________________

IT 236 User Interface Development ___________________________________

Lecture 1

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

Slide 2 ___________________________________
Course Administration
___________________________________
 Office hours: Mondays and Tuesdays,
3:30pm-5:00pm
___________________________________
 Email: eschwabe@cti.depaul.edu
(Please begin subject line with “IT 236”) ___________________________________
(Expect reply in one business day)
 Web site: http://col.cti.depaul.edu/ ___________________________________
 Text: Programming in Visual Basic .NET
(w/Student CD), by Bradley and Millspaugh
___________________________________
___________________________________

Slide 3 ___________________________________
Course Administration
___________________________________
 Grading: 40% HW, 20% midterm (5/5), 30%
final (6/9), 10% participation/labs
___________________________________
 Lab sessions 4/7, 4/21, 5/19 (required)
 Late policy: Up to 2 days -20%, up to one ___________________________________
week -40%, nothing beyond one week
 Shut off all electronic devices during class ___________________________________
 Read DePaul’s Academic Integrity Policy
___________________________________
___________________________________
Slide 4 ___________________________________
This Quarter:
___________________________________
 Building graphical user interfaces (GUIs) and
programs with Visual Basic .NET (VB)
___________________________________
 We’ll be doing object-oriented programming
 Programs created from objects of different classes ___________________________________
 Objects have properties and methods



Forms (windows) contain controls (components)
Events are responded to by event procedures
___________________________________
___________________________________
___________________________________

Slide 5 ___________________________________
Tonight:
___________________________________
 Introduction to Visual Basic
 Working with Visual Studio 2005
___________________________________
 Creating interfaces with forms and controls
 Writing event procedures
___________________________________
___________________________________
___________________________________
___________________________________

Slide 6 ___________________________________
Building a Visual Basic Program
___________________________________
1. Construct the interface
(create visible part of program) ___________________________________
2. Set properties of form and controls
(customize appearance of interface) ___________________________________
3. Write event procedures
(define program’s responses to events)
 You should plan all three steps on paper first ___________________________________
(and obtain feedback if needed) before you
implement them…
___________________________________
___________________________________
Slide 7 ___________________________________
Visual Studio 2005
___________________________________
 Start  All Programs  Microsoft
Development  Visual Studio 2005
___________________________________
 Visual Studio Start Page
 File  Open to open an existing project ___________________________________
 Microsoft Visual Studio Solution files (.sln)



[File  New to create a new project]
[File  Save All to save a modified project]
___________________________________
___________________________________
___________________________________

Slide 8 ___________________________________
Visual Studio 2005
___________________________________
 Document Window (center)
 Can show various things (choose using tabs)
___________________________________
 Form Designer is where you build interface
 Solution Explorer (upper right) ___________________________________
 Shows files that make up solution/project
 Form file has a .vb extension; double-click on it
to open Form Designer
___________________________________
 Properties Window (lower right)…
___________________________________
___________________________________

Slide 9 ___________________________________
Running a Visual Basic Program
___________________________________
 Debug  Start without Debugging or Ctrl-F5
 When an event-driven program runs:
___________________________________
1. Program waits for an event to occur
2. When an event occurs, the program looks for a ___________________________________
matching event procedure
3. If there is one, it is executed; this may modify
some properties of the interface
___________________________________
4. Program waits for another event…
___________________________________
___________________________________
Slide 10 ___________________________________
Terminology
___________________________________
 The program window is a form
 The form contains controls (e.g, labels, text
___________________________________
boxes, buttons)
 Forms and controls are both objects that have ___________________________________
properties (e.g., size, location, color, text)
 User actions (e.g., button clicks) generate
events ___________________________________
 Program has event procedures to respond
___________________________________
___________________________________

Slide 11 ___________________________________
Setting Objects’ Properties
___________________________________
 Properties window (lower right) gives us
access to properties of form and controls ___________________________________
 Select a form or control to see its properties and


their values (or use pull-down list in window)
Can list properties alphabetically or in categories
___________________________________
 Modify a property’s value by changing it in
Properties Window (enter new value, or click on
arrow to get list of possible values) ___________________________________
 Changes to size and location will be updated
automatically
___________________________________
___________________________________

Slide 12 ___________________________________
Naming Conventions
___________________________________
 Descriptive part, followed by type of control
 Form: formNameForm
___________________________________
 Label: labelNameLabel
 TextBox: textBoxNameTextBox ___________________________________
 Button: buttonNameButton
 Note use of upper and lower cases
 “lower camel case”
___________________________________
___________________________________
___________________________________
Slide 13 ___________________________________
Creating a New Project
___________________________________
 File New  Project (or New Project icon)
 Choose “Visual Basic” on left and “Windows ___________________________________
Application” on right
 Choose project name, and folder where project
will be stored ___________________________________
 Keep “Create New Solution”, check “Create


directory for solution”
Click “OK”
___________________________________
 (Plan interface, properties, and event
procedures first, of course…) ___________________________________
___________________________________

Slide 14 ___________________________________
Creating a New Project
___________________________________
 Solution Explorer shows form as Form1.vb
 Form Designer will open automatically
___________________________________
 Toolbox (left side) contains controls that can
be added to form (View  Toolbox) ___________________________________
 Under “Common Controls” heading, will
find labels, text boxes, buttons (and many ___________________________________
others…)

___________________________________
___________________________________

Slide 15 ___________________________________
Adding Controls to Form
___________________________________
 Click on control, then click on form to add it
 Move and resize control first
___________________________________
Use mouse, arrow keys, toolbar
___________________________________


 Size and location properties will be updated

 Use Properties Window to set other properties
 e.g., Name, Text, BackColor, ForeColor, Font
 Right-click  Lock Controls when done
___________________________________
___________________________________
___________________________________
Slide 16 ___________________________________
Adding Event Procedures
___________________________________
 Right-click  View Code (or View  Code)
to display Code Window (initially empty)
___________________________________
 Double-click on control to add event procedure
 (…or select control and event from lists) ___________________________________
 Statements between Private Sub and End Sub
will be executed when event is generated ___________________________________
 The “Handles” expression indicates which control
and event will invoke this procedure
___________________________________
___________________________________

Slide 17 ___________________________________
Working with Control Properties
___________________________________
 To look up the value of the property prop of
control nameControl, use the expression:
___________________________________
nameControl.prop
___________________________________
 If firstTextBox contains the string “What?”, then
firstTextBox.Text is “What?”
 If clearButton has a red background, then ___________________________________
clearButton.BackColor is Red

___________________________________
___________________________________

Slide 18 ___________________________________
Working with Control Properties
___________________________________
 To set the value of the property prop of
control nameControl to newVal, use the
___________________________________
assignment:
nameControl.prop = newVal ___________________________________
 To set the contents of secondTextBox to
“Hello!”, use secondTextBox.Text = “Hello” ___________________________________
 To set the color of the text in captionLabel to
blue, use captionLabel.ForeColor = Blue
___________________________________
___________________________________
Slide 19 ___________________________________
Summary
___________________________________
 Visual Basic interfaces are made up of two
kinds of objects: forms and controls
___________________________________
 The appearance of the interface is determined
by the properties of these objects ___________________________________
 Event procedures can modify objects’
properties in response to a user’s actions ___________________________________
 To write program: construct interface, set
properties, write event procedures
___________________________________
___________________________________

Slide 20 ___________________________________
Assignment 1
___________________________________
 http://col.cti.depaul.edu/
 Download and unzip a zipped Visual Basic
___________________________________
project
 Make a set of modifications to the properties ___________________________________
of the interface
 Save modified project and add files to zip file
LastnameAssign1.zip ___________________________________
 Submit zip file of modified project
___________________________________
___________________________________

Slide 21 ___________________________________
Next Time:
___________________________________
 Additional controls
 Additional control properties
___________________________________
 Event procedures
 Lab Session 1 (Room 819, 7:30pm-9:00pm)
___________________________________
___________________________________
___________________________________
___________________________________