Lecture set 3
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

Lecture Set 3 PowerPoint PPT Presentation


  • 94 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Lecture Set 3

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


Objectives

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


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


Viewing a form

Viewing a Form


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


  • Login