Lecture Set 3

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

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

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

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

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

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

8. Designing a User Interface

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

10. A Poor User Interface

11. An Improved User Interface

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

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 • VB .NET • Tools – tons of on-line and text references • Here we go …

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 clientarea

15. Viewing a Form

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

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.

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.

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

20. The Organization of Controls in the Toolbox

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

22. Characteristics of a Form 2 • Specifically, explore • The Properties Window • The Object Browser • The Error List • The Toolbox • The Solution Explorer Window