1. Tutorial 2 Designing 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
Tutorial 2: Designing Applications

3. Solving the Problem Using an Object-Oriented/Event-Driven (OOED) Approach
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
Tutorial 2: Designing Applications

4. Sample TOE Chart
Tutorial 2: Designing Applications

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
Tutorial 2: Designing Applications

6. Planning an OOED Application in Visual Basic .NET Lesson A Objectives
After completing this lesson, you will be able to:
Plan an OOED application in Visual Basic .NET
Complete a TOE (Task, Object, Event) chart
Follow the Windows standards regarding the layout and labeling of controls
Tutorial 2: Designing Applications

7. 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
Tutorial 2: Designing Applications

8. 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
Tutorial 2: Designing Applications

9. 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
Tutorial 2: Designing Applications

10. 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?
Tutorial 2: Designing Applications

11. Identifying the Objects
After completing the Task column of the TOE chart, you then assign each task to an object in the user interface
As you learned in Tutorial 1, 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
Tutorial 2: Designing Applications

12. 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
Tutorial 2: Designing Applications

13. 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
Tutorial 2: Designing Applications

14. 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
Tutorial 2: Designing Applications

15. 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
Tutorial 2: Designing Applications

16. 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
Tutorial 2: Designing Applications

17. 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
Tutorial 2: Designing Applications

18. 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
Tutorial 2: Designing Applications

19. 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
Tutorial 2: Designing Applications

20. 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
Tutorial 2: Designing Applications

21. 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
Tutorial 2: Designing Applications

22. Building the User Interface Lesson B Objectives
After completing this lesson, you will be able to:
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
Tutorial 2: Designing Applications

23. Step 3 - Build the User Interface
Use the sketch you drew during the Planning step
Follow the GUI design guidelines
Tutorial 2: Designing Applications

24. 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
Tutorial 2: Designing Applications

25. 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
Tutorial 2: Designing Applications

26. 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
Tutorial 2: Designing Applications

27. 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
Tutorial 2: Designing Applications

28. 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
Tutorial 2: Designing Applications

29. 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
Tutorial 2: Designing Applications

30. 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
Tutorial 2: Designing Applications

31. 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
Tutorial 2: Designing Applications

32. Adding a Text Box Control to the Form
A text box control provides an area in the form where the user can enter data
Add the missing text box control to the form and then set its properties using the procedures listed on pages 110 and 111 of the textbook
Tutorial 2: Designing Applications

33. 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
Tutorial 2: Designing Applications

34. 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:
Allows a user to work with the application even if the mouse becomes inoperative
Allows users who are fast typists to keep their hands on the keyboard
Allows people with disabilities, which may prevent them from working with a mouse, to use the application
Tutorial 2: Designing Applications

35. 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
Tutorial 2: Designing Applications

36. 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
Tutorial 2: Designing Applications

37. 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
Tutorial 2: Designing Applications

38. 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
Tutorial 2: Designing Applications

39. 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
Tutorial 2: Designing Applications

40. 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
Tutorial 2: Designing Applications

41. Coding, Testing, Debugging, and Documenting the Application Lesson C Objectives
After completing this lesson, you will be able to:
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
Tutorial 2: Designing Applications

42. 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 button
1. 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
‘display the command buttons
‘set the focus
Tutorial 2: Designing Applications

43. 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
Tutorial 2: Designing Applications

44. 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
Tutorial 2: Designing Applications

45. Steps for the Clear Screen Button
Tutorial 2: Designing Applications

46. 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
Tutorial 2: Designing Applications

47. 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 .NET procedure
Tutorial 2: Designing Applications

48. 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
Tutorial 2: Designing Applications

49. Internally Documenting the Program Code
Visual Basic .NET 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 .NET ignores everything that appears after the apostrophe on that line
Tutorial 2: Designing Applications

50. Writing Arithmetic Expressions
The precedence numbers indicate the order in which Visual Basic .NET 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
Tutorial 2: Designing Applications

51. Operator Order of Precedence
Operation ^
exponentiation -
negation
*, /
multiplication and division \
integer division
Mod
modulus arithmetic
+, -
addition and subtraction
You can use parentheses to override the 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
Tutorial 2: Designing Applications

52. 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
Tutorial 2: Designing Applications

53. 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 .NET 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
Tutorial 2: Designing Applications

54. 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
Tutorial 2: Designing Applications

55. 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
Tutorial 2: Designing Applications

56. 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
Tutorial 2: Designing Applications

57. Summary You have completed the six steps Meet with the client
Plan the application
Build the user interface
Code the application
Test and debug the application
Assemble the documentation
Tutorial 2: Designing Applications