Lecture Set 3 Introduction to Visual Basic Concepts

Lecture Set 3 Introduction to Visual Basic Concepts Part A – User Interfaces and Windows Forms – The Toolbox

Objectives n n n Slide 2 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

Comparing Command-line and Form-based Interfaces n User interfaces can be roughly categorized into two types n Command-line interfaces use textual input and output n n n Most Windows user interfaces are form-based visual interfaces n Slide 3 The end user interacts with an application by typing commands You just did this The end user interacts with an application through its visual elements

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

Principles of a User Interface n n n Slide 5 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

Principles of a User Interface (continued) n n n 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 n Slide 6 Users may be visually impaired, requiring larger fonts

Designing a User Interface n A user interface should be designed before it is implemented n Design user interface using a tool such as Visio n n n A simple pencil and paper sketch will often do Name your controls so that you know that you have at all times n Slide 7 Pencil and paper works fine too Be consistent with user names – see suggestions used in the text

Designing a User Interface Slide 8

Principles of Control Design n 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 n n n Slide 9 Users may be colorblind Function grouping – Group control instances based on their function Consistent sizing – Control instances should have the same size

A Poor User Interface Slide 10

An Improved User Interface Slide 11

Other “Interesting” Forms Pages n Windows versus web forms pages n n Slide 12 Amazon Southwest Airlines Your instructor’s web page Right click on link Open Hyperlink

Creating a Windows Application Project 1 n n The steps to create a Console Application project and Windows Application project are nearly the same Use the New Project Dialog box n Use the Windows Application template n n Slide 13 The templates vary based on the Visual Studio edition Assign a name to the solution, as necessary

Creating a Windows Application Project 2 n There is a lot to learn n Forms design – sort of fun n n Software design n Slide 14 Tools – tons of on-line and text references Get the right one for your level VB. NET n n Tools – UML, Data Tables, Behavior modelling How to use the Visual Studio IDE n n Tools – such as Visio Tools – tons of on-line and text references Here we go …

Differences Between Console and Windows Application Projects n n n Console projects are procedural Console projects have a textual (characterbased) user interface Windows Application projects are event driven n Slide 15 Windows Application projects have a visual user interface consisting of controls - buttons and boxes of varying purposes, shapes, and sizes

Anatomy of a Windows Application Project n n Slide 16 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

Selected Windows of the Visual Studio IDE Slide 17

The Solution Explorer n The role of the Solution Explorer is the same for Console and Windows Application projects n n n The project and support files are the same The role of project references is the same n n n 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). n Slide 18 It organizes the various parts of a solution What’s in a Form File? We shall see soon.

Solution Explorer for a Windows Application Project Slide 19

Form Methods and Events n Methods n n n Events n n Slide 20 The Close method closes the form and unloads it from memory The Hide method makes a form invisible 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

The Toolbox and Windows Forms Designer n n 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 n n Slide 21 Selecting the form in the Solution Explorer and clicking View Designer Clicking View, Designer on the menu bar

Toolbox Tabs n The Toolbox contains the controls that can be drawn on any form, and is divided into tabs n n n n Slide 22 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 3 B

Toolbox Tabs (continued) n n n Slide 23 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

The Organization of Controls in the Toolbox Slide 24

Introduction to Forms n n A title bar appears along the top of a form An optional control box appears in the title bar n n n 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 25

Characteristics of a Form 2 n n Slide 26 What you see when you open a Form – Code Mode Pull down View – see Object Browser, Design mode, and other elements