Lecture Set 3

Introduction to Visual Basic Concepts Part A – User Interfaces and Windows

Forms – The Toolbox

Slide 2

Objectives Compare command-line interfaces and forms-

based interfaces – basics of forms-based interfaces

Design user interface for a Windows application

Create Windows Application project using the Visual Studio IDE

Use controls to create the user interface for a Windows Application project

Create code for a Windows Application project

Slide 3

Comparing Command-line and Form-based Interfaces

User interfaces can be roughly categorized into two types Command-line interfaces use textual input

and output The end user interacts with an application

by typing commands You just did this

Most Windows user interfaces are form-based visual interfaces

The end user interacts with an application through its visual elements

Slide 4

Comparing a Command-line Interface and a Form-based Interface

Slide 5

Principles of a User Interface Control – The end user should control the

application User-friendliness – The interface should help

the end user accomplish tasks Intuitiveness – The interface should follow a

direct style that proceeds logically (left to right; up and down?)

Consistency – The user interface should have consistent fonts and shapes

Feedback – The interface should provide clear and immediate feedback

Slide 6

Principles of a User Interface (continued)

Graphics – Avoid use of unnecessary graphics

Color – Pleasant but not overdone Input – Minimize transitions between the

keyboard and mouse where possible User protection – prevent bad input data Screen resolution – The user interface

should adapt to different screen resolutions Users may be visually impaired, requiring

larger fonts

Slide 7

Designing a User Interface A user interface should be designed

before it is implemented Design user interface using a tool such as

Visio Pencil and paper works fine too

A simple pencil and paper sketch will often do

Name your controls so that you know that you have at all times

Be consistent with user names – see suggestions used in the text

Slide 8

Designing a User Interface

Slide 9

Principles of Control Design Alignment – Align control instances vertically

or horizontally Balance – Distribute control instances evenly

about the form Color – Use soft colors with adequate contrast

between foreground and background colors Users may be colorblind

Function grouping – Group control instances based on their function

Consistent sizing – Control instances should have the same size

Slide 10

A Poor User Interface

Slide 11

An Improved User Interface

Slide 12

Other “Interesting” Forms Pages Windows versus web forms pages

Amazon Southwest Airlines Your instructor’s web page

Right click on link Open Hyperlink

Slide 13

Creating a Windows Application Project 1

The steps to create a Console Application project and Windows Application project are nearly the same

Use the New Project Dialog box Use the Windows Application template

The templates vary based on the Visual Studio edition

Assign a name to the solution, as necessary

Slide 14

Creating a Windows Application Project 2 There is a lot to learn

Forms design – sort of fun Tools – such as Visio

Software design Tools – UML, Data Tables, Behavior

modelling How to use the Visual Studio IDE

Tools – tons of on-line and text references Get the right one for your level

VB .NET Tools – tons of on-line and text references

Here we go …

Slide 15

Differences Between Console and Windows Application Projects

Console projects are procedural Console projects have a textual

(character-based) user interface Windows Application projects are event

driven Windows Application projects have a

visual user interface consisting of controls - buttons and boxes of varying purposes, shapes, and sizes

Slide 16

Anatomy of a Windows Application Project

The Windows Forms Designer is used to create a form’s visual interface

Controls appearing in the Toolbox are used to create the visual interface of a form

The Properties window provides a visual way to set properties for the form and control instances created on the form

So … what are these things

Slide 17

Selected Windows of the Visual Studio IDE

Slide 18

The Solution Explorer The role of the Solution Explorer is the same

for Console and Windows Application projects It organizes the various parts of a solution

The project and support files are the same The role of project references is the same

However, Windows Application projects reference different assemblies and namespaces

In other words, the FCL elements you get “for free” are not the same

Form files appear instead of module files (although you can develop module files as well).

What’s in a Form File? We shall see soon.

Slide 19

Solution Explorer for a Windows Application Project

Slide 20

Form Methods and Events Methods

The Close method closes the form and unloads it from memory

The Hide method makes a form invisible Events

The Load event fires when a form is loaded into memory for the first time

You will find these in a typical Windows Forms window

Slide 21

The Toolbox and Windows Forms Designer

The Toolbox and Windows Forms Designer are used together to create an application’s visual interface

The Toolbox contains controls Controls created on a form are called control

instances – they are objects or instances of a class

View the Windows Forms Designer by Selecting the form in the Solution Explorer and

clicking View Designer Clicking View, Designer on the menu bar

Slide 22

Toolbox Tabs The Toolbox contains the controls that can be

drawn on any form, and is divided into tabs The All Windows Forms tab lists all controls The Common Controls tab lists the most frequently

used controls The Containers tab lists controls used to group

other controls The Menus & Toolbars tab contains controls are

used to create a menu system and toolbars You should understand what these tools are Hint – they are OBJECTS – instances of a class We will see more about this in Slide Set 3B

Slide 23

Toolbox Tabs (continued) The Data tab contains controls used to work

with a database The Components tab contains controls used to

work with Windows services (Windows components)

The Printing tab contains controls used to work with a printer

The Dialogs tab contains standard dialog boxes The Crystal Reports tab contains controls used

with the Crystal Reports reporting software

Slide 24

The Organization of Controls in the Toolbox

Slide 25

Introduction to Forms A title bar appears along the top of a form An optional control box appears in the title bar

The control box contains Minimize, Maximize, Restore, and Close buttons

The buttons on the control box may be disabled or hidden

An icon appears on the left side of the title bar Below the title bar appears an optional menu The region inside a form's border is called the client area

Slide 26

Characteristics of a Form 2 What you see when you open a Form – Code

Mode Pull down View – see Object Browser, Design

mode, and other elements