CIS16 Application Programming with Visual Basic Chapter Two Designing Applications

Planning & Analysis Programming with Microsoft Visual Basic 2015

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

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

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.

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

Design Programming with Microsoft Visual Basic 2015

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

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

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

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 (:).

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

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

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.

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

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.

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.

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.

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.

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

Summary