1. CIS16 Application Programming with Visual Basic
Chapter Two
Designing Applications

2. Planning & Analysis
Programming with Microsoft Visual Basic 2015

3. Program Development Life Cycle
Set of phases and steps that developers follow to design, create, and maintain a computer program
Plan it - Gather and Analyze the Program Requirements
Design the User Interface and the Program Processing Objects
Develop the program(s) - Code It and Test It
Implement the program –Document the Program/System and Distribute it
Maintain the Program/System

4. Creating an Object-Oriented Application
Developing an application is like building a home
The role of the programmer is analogous to that of a builder

5. PLANNING STEPS Planning steps Identify the application’s purpose.
Identify the items that the user must provide.
Identify the items that the application must provide.
Determine how the user and the application will provide their respective items.
Draw a sketch of the user interface.

6. PLAN Planning Chart for a Restaurant Tip application
Purpose: Calculate and display a server’s tip
What does User provide?
What does the application program do?
How will the user an program interact?
How?
User-provided
bill amount
User will enter in txtBill
tip percentage
User will enter in txtPercentage
Application-provided
tip
btnCalc_Click will calculate and display in lbl Tip
button for ending the application
btnExit_Click will end the application

7. Design
Programming with Microsoft Visual Basic 2015

8. Design the User Interface
Principles of User Interface Design
The GUI should be easy to use and follow
Users will not be satisfied with the application if the user interface is not easy to use
Four primary means of interacting in a user interface
the keyboard, a pointing device, a touch interface, and voice input
Use of the interface should feel natural and normal
Provide the most appropriate object for each requirement

9. Design the User Interface
Drawing a Sketch of the User Interface
Follow Windows standards for designing the interface
Control Placement
The user interface should be organized so that the information flows either vertically or horizontally, with the most important information always located in the upper-left corner of the interface
In a vertical arrangement, the information flows from top to bottom: essential information is located in the first column, while secondary information is placed in subsequent columns
In a horizontal arrangement, the information flows from left to right: essential information is placed in the first row, with secondary information placed in subsequent rows
Related controls should be grouped together

10. Design: Sketches Determine the controls
The first GUI guideline pertains to the organization of the controls in the interface.

11. Design the User Interface
White space or containers may be used to group related controls
Containers
Objects used to group related controls
Examples: GroupBox, Panel, TableLayoutPanel
Label controls that display output should have meaningful names
Example: “Total Sales” identifies the lblTotalSales label
Identifying label should consist of one to three words.
End with a colon (:).

12. Design: Sketches Guidelines for Identifying Labels and Buttons
Sentence capitalization means you capitalize only the first letter in the first word.
Book title capitalization
Capitalize the first letter of each word except articles, conjunctions, and prepositions
Use for button text
Buttons should be aligned
Also same height and width
Most commonly used button should be first
Use book title capitalization for buttons
Group related controls close to each other

13. Design the User Interface
Guidelines for Including Graphics
The human eye is attracted to pictures before text, so use graphics to either emphasize or clarify a portion of the screen
Interfaces that contain a lot of different colors, fonts, and graphics become tiresome after a while
Keep the following three points in mind when deciding whether to include color in an interface:
People who have some form of either color blindness or color confusion will have trouble distinguishing colors
Color is very subjective: A color that looks pretty to you may be hideous to someone else.
A color may have a different meaning in a different culture

14. Design: Sketches Guidelines for Selecting Fonts
An object’s Font property determines the type, style, and size of the font used to display the object’s text.
Avoid using italics and underlining in an interface.
The use of bold text should be limited to titles, headings, and key items.

15. Design the User Interface
Once a control is used for a particular purpose, then that control should be used for the same purpose throughout the program interface
Controls should be arranged in the sequence in which they are used
The interface should be kept as simple as possible, while containing all required functionality
The user interface should be intuitive

16. Design: Access Keys The underlined letter is called an access key.
It allows the user to select an object using the Alt key in combination with a letter or number.
In an interface, assign access keys to each control that can accept user input.
Assign an access key by including an ampersand (&) in the control’s caption or identifying label.
The first choice for an access key is the first letter of the caption or identifying label.

17. Design: Tab Order
The values for the property TabIndex determine the tab order.
Each control receives the focus when the user either presses the Tab key or employs an access key.

18. Design: Tab Order
To observe how the application’s access keys and TabIndex values work:
Use Windows to locate and then open the folder. Double-click Tip.exe in the list of filenames. The interface appears on the screen. The blinking insertion indicates that the control has the focus.
Verify the tab order. Press Tab to move the focus to the txtPercentage control, and then press Shift+Tab to move the focus back to the txtBill control.

19. Design: Tab Order
Press Tab, slowly, three times. The focus moves to the txtPercentage control, then to the btnCalc control, and then to the btnExit control. Notice that when a button has the focus, a dotted rectangle appears inside its darkened border.
Next, you will verify that the access keys work correctly. Press Alt+b to move the focus to the txtBill control. Type 100, press Alt+t, and then type 20. Now press Alt+c (the Calculate tip button’s access key) to calculate the tip. $20.00 appears in the lblTip control. Press Alt+x to end the application.

20. Design the User Interface
Horizontal arrangement of the interface
Vertical arrangement of the interface

21. Summary