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

7/30/2013 9:31 PM

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

7/30/2013 9:31 PM

Slide 4

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

7/30/2013 9:31 PM

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

7/30/2013 9:31 PM

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 7/30/2013 9:31 PM

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

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

Be consistent – see suggestions in text Forms design and the underlying code

will be handled separately (to be explained)

But interface design can be very helpful in structuring and implementing your code

7/30/2013 9:31 PM

Slide 8 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

7/30/2013 9:31 PM

Slide 10

A Poor User Interface

7/30/2013 9:31 PM

Slide 11

An Improved User Interface

7/30/2013 9:31 PM

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

7/30/2013 9:31 PM

Slide 13

Creating a Windows Application Project 1 As indicated earlier, 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

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

Here we go …01/02/2016 5:01 PM

Slide 14

Anatomy of a Windows Application Project

See next slide 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

The region inside a form's border is called the client area 7/30/2013 9:31

PM

Slide 15

Viewing a Form

7/30/2013 10:40PM

Slide 16

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

7/30/2013 10:34

Slide 17

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 are part of the FCL class hierarchy

Controls are dragged onto a form Code-behind is generated – the control is

represented as an instance of the class – as an object or control instances

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

clicking View Designer It is instructive to look at this code – it is the other

part of the Partial Class that you are coding.7/30/2013 9:31

PM

Slide 18

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 When you design your first form, pin the

Toolbox to your design window. Makes things easier. 7/30/2013 9:31

PM

Slide 19

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

7/30/2013 9:31 PM

Slide 20

The Organization of Controls in the Toolbox

7/30/2013 9:31 PM

Slide 21

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

Mode Examine each of the icons to the right of the

Debug pull down control

1/2/2016 5:15 PM

Slide 22

Characteristics of a Form 2 Specifically, explore

The Properties Window The Object Browser The Error List The Toolbox The Solution Explorer Window

7/30/2013 10:45 PM