1 Microsoft Visual Basic 2010 Week Two Designing Applications.
-
Upload
griselda-holland -
Category
Documents
-
view
222 -
download
0
Transcript of 1 Microsoft Visual Basic 2010 Week Two Designing Applications.
1
Microsoft Visual Basic 2010
Week TwoDesigning Applications
2
Solving the Problem Using a Procedure-Oriented Approach
Emphasis of a program is on how to accomplish a task
A flowchart uses standardized symbols to show the steps needed to solve a problem
Pseudocode uses English phrases to describe the required steps
User has little, if any, control
3
Solving the Problem Using an Object-Oriented/Event-Driven
(OOED) Approach Object-oriented/Event-driven
Emphasis of a program is on the objects included in the interface and the events that occur on those objects
You will use a TOE (Task, Object, Event) chart to assist you in planning your object-oriented/event-driven programs
User has a lot of control
Users can enter information in any order, change what they entered at any time, and calculate a subtotal whenever they like
4
Sample TOE Chart
Task Object Event
5
GUI Design Tips
Organize the user interface so that the information flows either vertically or horizontally, with the most important information always located in the upper-left corner of the screen
Group related controls together using either white space or a frame
Align controls to minimize number of margins
6
A Builder’s Process vs. A Programmer’s Process
Meet with the client
Plan the home (blueprint)
Build the frame
Complete the home
Inspect the home and fix any problems
Assemble the documentation
Meet with the client
Plan the application (TOE chart)
Build the user interface
Code the application
Test and debug the application
Assemble the documentation
7
Step 1 – Meet with client
The client is the person you are building an application for
The client will provide
Business rules: How calculations are to be performed
Standards
Other requirements
8
Step 2 - Plan the Application
Identify the tasks the application needs to perform
Identify the objects to which you will assign those tasks
Identify the events required to trigger an object into performing its assigned task
Draw a sketch of the user interface
9
Identify the Application’s Tasks
What will the user need to enter?
What will the application need to calculate?
What will the application need to display (screen) and/or print (printer)?
How will the user end the application?
Will previous information need to be cleared from the screen?
10
Identifying the Objects
After completing the Task column of the TOE chart, you then assign each task to an object in the user interface
You use a label control to display information that you do not want the user to change while your application is running, and you use a button control to perform an action immediately after it is clicked by the user
After defining the application’s tasks and assigning those tasks to objects in the user interface, you then determine which objects need an event (such as clicking or double-clicking) to occur for the object to do its assigned task
11
Identifying the Events
Text boxes and Label controls display their contents automatically, so no special event is necessary for them to do their assigned task
The remaining objects listed in the TOE chart are the three buttons: CalcButton, ClearButton, and ExitButton
You will have the buttons perform their assigned tasks when they are clicked by the user
Then list the tasks you have assigned to each object in the Task column, and list the event in the Event column
12
Drawing a Sketch of the User Interface
While the design of an interface is open to creativity, there are some guidelines to which you should adhere so that your application is consistent with the Windows standards
In Western countries, you should organize the user interface so that the information flows either vertically or horizontally, with the most important information always located in the upper-left corner of the screen
13
Drawing a Sketch of the User Interface In a vertical arrangement
The information flows from top to bottom
The essential information is located in the first column of the screen
Secondary information is placed in subsequent columns
14
Drawing a Sketch of the User Interface
In a horizontal arrangement
The information flows from left to right
The essential information is placed in the first row of the screen
Secondary information placed in subsequent rows
15
Drawing a Sketch of the User Interface
You can use white space, a GroupBox control, or a Panel control to group related controls together
If buttons appear in the interface, they should be positioned either in a row along the bottom of the screen, or stacked in either the upper-right or lower-right corner
Limit to six the number of buttons in the interface
Place the most commonly used button first—either on the left when the buttons are along the bottom of the screen
Or on the top when the buttons are stacked in either the upper-right or lower-right corner
16
Drawing a Sketch of the User Interface
Notice that each text box and button control in the interface is labeled so the user knows the control’s purpose
Labels that identify text boxes should be left-aligned and positioned either above or to the left of the text box
Labels and captions should be meaningful
A button’s caption, on the other hand, should tell the user what action the button will perform when the button is clicked
17
Drawing a Sketch of the User Interface
The colon (:) distinguishes an identifying label from other text in the user interface
The Windows standard is to use sentence capitalization for identifying labels
Sentence capitalization means you capitalize only the first letter in the first word and in any words that are customarily capitalized
When using book title capitalization, you capitalize the first letter in each word, except for articles, conjunctions, and prepositions that do not occur at either the beginning or the end of the caption
18
GUI Design Tips
Either center the command buttons along the
bottom of the screen or stack them in either
the upper-right or lower-right corner
Use no more than six command buttons on a
screen
Place the most commonly used command
button first
19
GUI Design Tips
Assign meaningful captions to command buttons
Place the caption on one line and use from one to three words only
Use book title capitalization for command button captions
20
GUI Design Tips
Label each control in the interface. The label should be from one to three words only, and it should be entered on one line
Align each label on the left, and position either above or to the left of the control it identifies
Follow the label with a colon (:) and use sentence capitalization
21
Building the User InterfaceObjectives
Build the user interface using your TOE chart and sketch
Follow the Windows standards regarding the use of graphics, color, and fonts
Set the BorderStyle property Add a text box to a form Lock the controls on the form Assign access keys to controls Use the TabIndex property
22
Step 3 - Build the User Interface
Use the sketch you drew during the
Planning step
Follow the GUI design guidelines
23
Preparing to Create the User Interface
Maintain a consistent margin of two or three dots from the edge of the window
Position related controls on succeeding dots. Controls that are not part of any logical grouping may be positioned from two to four dots away from other controls
Try to create an interface that no one notices
24
More GUI Design Tips
Command buttons in the interface should be sized relative to each other
If the command buttons are centered on the bottom of the screen, then each button should be the same height; their widths, however, may vary
If the command buttons are stacked in a corner, then each should be the same height and the same width
25
Including Graphics in the User Interface
The human eye is attracted to pictures before
text, so include a graphic only if it is necessary to
do so
If you are including the graphic for aesthetics
only, use a small graphic and place it in a
location that will not distract the user
26
Including Different Fonts in the User Interface
Use 8, 10, or 12 point fonts for the elements in the user interface
A serif is a light cross stroke that appears at the top or bottom of a character
Use only one or two font sizes
Use a sans serif (Tahoma) font for the text
Use only one font type for all of the text
Avoid italics and underlining
Limit the use of bold text to titles, headings, and key items
27
Including Color in the User Interface
The human eye is attracted to color before black and white
Build the interface using black, white, and gray first, then add color only if you have a good reason to do so
Use either white, off-white, light gray, pale blue, or pale yellow for an application’s background, and use black for the text
28
Including Color in the User Interface
Always use dark text on a light background because it is the easiest to read
Never use a dark color for the background or a light color for the text
Limit the number of colors (other than white, black, and gray) to three
Never use color as the only means of identification for an interface element
29
The BorderStyle Property
BorderStyle property determines the style of a control’s border and can be set to None, FixedSingle, or Fixed3D
Text – the visible portion of an object
Textbox – can be set to a default value
Label – used for identification, information, or for read-only data
Button – used for identification
Form – displays in the title bar
30
Setting the BorderStyle Property of a Text Box and Label
Set to Fixed3D (the default) the BorderStyle property of text boxes
Set to None (the default) the BorderStyle of labels that identify other controls
Set to FixedSingle the BorderStyle property of labels that display program output, such as the result of a calculation
31
Adding a Text Box Control to the Form
A text box control provides an area in the
form where the user can enter data
32
Locking the Controls on a Form
Once you have placed all of the controls in the desired locations on the form, it is a good idea to lock the controls in their current positions so you do not inadvertently move them
Once the controls are locked, you will not be able to move them until you unlock them; you can, however, delete them
33
Assigning Access Keys
An access key allows the user to select an object using the Alt key in combination with a letter or number.
It is important to assign access keys to these controls for the following three reasons:
1. Allows a user to work with the application even if the mouse becomes inoperative
2. Allows users who are fast typists to keep their hands on the keyboard
3. Allows people with disabilities, which may prevent them from working with a mouse, to use the application
34
Assigning Access Keys
Each access key must be unique
You can assign an access key to any control that has a Caption property
Place an & to the left of the desired letter in the Text property
To give keyboard access to a text box, assign an access key to its identifying label, then set the label’s TabIndex value to one less than the text box’s TabIndex value
35
Setting the TabIndex Property
The TabIndex property determines the order in which a control receives the focus when the user presses either the Tab key or an access key while the application is running
When a control has the focus, it can accept user input
The TabIndex property for the first control added to a form is 0 (zero), the TabIndex property for the second control is 1, and so on
36
Setting the TabIndex Property
To determine the appropriate TabIndex settings for an application, you first make a list of the controls (in the interface) that can accept user input
The list should reflect the order in which the user will want to access the controls
Notice that each text box in the list is associated with an identifying label control, whose name appears immediately above the text box name in the list
37
Setting the TabIndex Property
Also notice that the TabIndex value assigned to each text box’s identifying label control is one number less than the value assigned to the text box itself
For a text box’s access key (which is defined in the identifying label) to work appropriately, you must be sure to set the identifying label control’s TabIndex property to a value that is one number less than the value stored in the text box’s TabIndex property
You can use the Properties list to set the TabIndex property for each control; or, you can use the Tab Order option on the View menu
38
Rules for Assigning Access Keys and Controlling the Focus
When assigning an access key to a control, use the first letter of the caption or identifying label, unless another letter provides a more meaningful association
Access keys should be unique
Assign a TabIndex value to each control in the interface, except for controls that do not have a TabIndex property
The TabIndex values should reflect the order in which the user will want to access the controls
39
Rules for Assigning Access Keys and Controlling the Focus
To give user’s keyboard access to text boxes, assign an access key to the text box control’s identifying label
Set the TabIndex property of the label control so that its value is one number less than the value in the TabIndex property of the corresponding text box
40
Coding, Testing, Debugging, and Documenting the Application
Objectives
Use the TOE chart to code the application
Use pseudocode to plan an object’s code
Write an assignment statement
Use the Focus method
Include internal documentation in the code
Write arithmetic expressions
Use the Val and Format functions
41
Coding the Application
The instructions are called code, and the process of writing the instructions is called coding
Use pseudocode to help you plan the code
Internally document the code by placing an apostrophe before the comment in the Code window
Print Order button1. Hide the 4 command buttons
2. Print the form
3. Display the 4 command buttons
4. Send the focus to the Clear Screen button
‘hide the command buttons
<code>
‘print the form
<code>
‘display the command buttons
<code>
‘set the focus
42
Coding the Clear Screen Button
According to the TOE chart, the Clear Screen button is assigned the task of clearing the screen for the next order
Following this logic, a zero-length string, also called an empty string, is a set of quotation marks with nothing between them, like this: “”
Assigning a zero-length string to the Text property of a control removes the contents of the control
43
Coding the Clear Screen Button
Notice that the list shown in Figure 2-25 is composed of short statements in English
The statements represent the steps the Clear Screen button needs to follow in order to prepare the screen for the next order
The programmer uses the pseudocode as a guide when coding the application
You use an assignment statement, which is simply a Visual Basic .NET instruction, to set the value of a property while an application is running
44
Steps for the Clear Screen Button
45
Assigning a Value to a Property During Run Time
You use the syntax [Me.]object.property=expression to set the value of an object’s property while an application is running
In the syntax, Me refers to the current form; notice that Me. Is optional, as indicated by the square brackets ([ ]) in the syntax
When it appears in an assignment statement, the equal sign (=) is often referred to as the assignment operator
46
Assigning a Value to a Property During Run Time
When an assignment statement is encountered in a program, the computer assigns the value of the expression appearing on the right side of the assignment operator (=) to the object and property that appears on the left side of the assignment operator
A method is a predefined Visual Basic procedure
47
Using the Focus Method
The Focus method allows you to move the focus to a specified control while the application is running
The syntax of the Focus method is [Me.]object.Focus(), where object is the name of the object to which you want the focus sent
It is a good practice to leave yourself some comments as reminders in the Code editor window
Programmers refer to this as internal documentation
48
Internally Documenting the Program Code
Visual Basic provides an easy way to document a program internally
You simply place an apostrophe (‘) before the statement you want treated as a comment
Visual Basic ignores everything that appears after the apostrophe on that line
49
Writing Arithmetic Expressions
The precedence numbers indicate the order in which Visual Basic performs the operation in an expression
Operations with a precedence number of 1 are performed before operations with a precedence number of 2, which are performed before operations with a precedence number of 3, and so on
However, you can use parentheses to override the order of precedence, because operations within parentheses are always performed before operations outside of parentheses
50
Operator Order of Precedence
You use the integer division operator (\) to divide two integers (whole numbers), and then return the result as an integer
The modulus arithmetic operator is also used to divide two numbers, but the numbers do not have to be integers
After dividing the numbers, the modulus arithmetic operator returns the remainder of the division
Operator Operation
^ exponentiation
- negation
*, / multiplication and division
\ integer division
Mod modulus arithmetic
+, - addition and subtraction
You can use parentheses to override the order of precedence
51
The Val Function
Like a method, a function is a predefined procedure that performs a specific task
The Val function, for instance, temporarily converts a string to a number, and then returns the number
The syntax of the Val function is Val(string), where string is the string you want treated as a number
52
Using the Format Function
You can use the Format function to improve the appearance of the numbers displayed in an interface
Syntax: Format(expression, style)
Expression specifies the number, date, time, or string whose appearance you want to format
Style is either the name of a predefined Visual Basic format style or, if you want more control over the appearance of the expression, a string containing special symbols that indicate how you want the expression displayed
53
Step 5 - Testing and Debugging
You test an application by starting it and entering some sample data
You should use both valid and invalid test data
Valid data is data that the application is expecting
Invalid data is data that the application is not expecting
Debugging refers to the process of locating errors in the program
54
Step 5 - Testing and Debugging
Program errors can be either syntax errors or logic errors
Most syntax errors are simply typing errors that occur when entering instructions
You create a logic error when you enter an instruction that does not give you the expected results
55
Step 6 – Assembling the Documentation
Assembling the documentation refers to putting in a safe place your planning tools and a printout of the application’s interface and code, so you can refer to them if you need to change the application in the future
Your planning tools include:
The TOE chart
Sketch of the interface
Flowcharts and/or pseudocode
56
Summary
You have completed the six steps
1. Meet with the client
2. Plan the application
3. Build the user interface
4. Code the application
5. Test and debug the application
6. Assemble the documentation