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

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

Comparing a Command-line Interface and a Form-based Interface Slide 4 7/30/2013 9: 31 PM

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

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

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 Name your controls so that you know that you have at all times n n n Slide 7 Pencil and paper works fine too 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

Designing a User Interface Slide 8 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 7/30/2013 9: 31 PM

A Poor User Interface Slide 10 7/30/2013 9: 31 PM

An Improved User Interface Slide 11 7/30/2013 9: 31 PM

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

Creating a Windows Application Project 1 n As indicated earlier, there is a lot to learn n Forms design – sort of fun n n Software design n Slide 13 Tools – tons of on-line and text references Get the right one for your level C#. 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 … 01/02/2016 5: 01 PM

Anatomy of a Windows Application Project n n n 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 Slide 14 7/30/2013 9: 31 PM

Viewing a Form Slide 15 7/30/2013 10: 40 PM

Form Methods and Events n Methods n n n Events n n Slide 16 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 7/30/2013 10: 34

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 n n Controls are dragged onto a form n n Controls are part of the FCL class hierarchy 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 n n 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 17

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 18 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 When you design your first form, pin the Toolbox to your design window. Makes things easier. 7/30/2013 9: 31 PM

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

The Organization of Controls in the Toolbox Slide 20 7/30/2013 9: 31 PM

Characteristics of a Form 1 n n Slide 21 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

Characteristics of a Form 2 n Specifically, explore n n n Slide 22 The The The Properties Window Object Browser Error List Toolbox Solution Explorer Window 7/30/2013 10: 45