Lecture set 3
1 / 22

Lecture Set 3 - PowerPoint PPT Presentation

  • Uploaded on

Lecture Set 3. Introduction to Visual Basic Concepts Part A – User Interfaces and Windows Forms – The Toolbox. Objectives. Compare command-line interfaces and forms-based interfaces – basics of forms-based interfaces Design user interface for a Windows application

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Lecture Set 3' - mareo

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Lecture set 3

Lecture Set 3

Introduction to Visual Basic Concepts

Part A – User Interfaces and Windows Forms – The Toolbox


  • 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
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

Comparing a command line interface and a form based interface
Comparing a Command-line Interface and a Form-based Interface

Principles of a user interface
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

Principles of a user interface continued
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

Designing a user interface
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

Designing a user interface1
Designing a User Interface

Principles of control design
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

A poor user interface
A Poor User Interface

An improved user interface
An Improved User Interface

Other interesting forms pages
Other “Interesting” Forms Pages

  • Windows versus web forms pages

    • Amazon

    • Southwest Airlines

    • Your instructor’s web page

  • Right click on link  Open Hyperlink

Creating a windows application project 1
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

    • VB .NET

      • Tools – tons of on-line and text references

  • Here we go …

Anatomy of a windows application project
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 clientarea

Form methods and events
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

The toolbox and windows forms designer
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.

Toolbox tabs
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.

Toolbox tabs continued
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

The organization of controls in the toolbox
The Organization of Controls in the Toolbox

Characteristics of a form 1
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

Characteristics of a form 2
Characteristics of a Form 2

  • Specifically, explore

    • The Properties Window

    • The Object Browser

    • The Error List

    • The Toolbox

    • The Solution Explorer Window