Chapter 2: Designing Applications

1
Chapter 2 Designing Applications
Programming with Microsoft Visual Basic .NET,
Second Edition
2
Planning an Object-Oriented (OO) Application in
Visual Basic .NET Lesson A Objectives

• Plan an OO application in Visual Basic .NET
• Complete a TOE (Task, Object, Event) chart
• Follow the Windows standards regarding the layout
  and labeling of controls

3
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

4
Solving the Problem Using an Object-Oriented
(OO) 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
  programs
• User has a lot of control

5
Solving the Problem Using an Object-Oriented
(OO) Approach (continued)
Sample TOE chart
6
Creating an OO Application
Figure 2-6 Processes used by a builder and a
programmer
7
Planning an OO Application

• Actively involve the user in the planning phase
• Planning an OO application requires the following
  steps
• 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 tasks
• Draw a sketch of the user interface

8
Identifying the Applications Tasks

• What information, if any, will the application
  need to display on the screen and/or print on the
  printer?
• What information, if any, will the user need to
  enter into the user interface to display and/or
  print the desired information?
• What information, if any, will the application
  need to calculate to display and/or print the
  desired information?

9
Identifying the Applications Tasks (continued)

• How will the user end the application?
• Will previous information need to be cleared from
  the screen before new information is entered?

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
• You use a button control to perform an action
  immediately after it is clicked by the user
• You use a text box to give the user an area in
  which to enter data

11
Identifying the Events

• Text boxes and Label controls display their
  contents automatically - no special event is
  needed
• The remaining objects are the three buttons
  uiCalcButton, uiClearButton, and uiExitButton
• Have the buttons perform their assigned tasks
  when they are clicked by the user

12
Drawing a Sketch of the User Interface

• In Western countries, organize the user interface
  so that the information flows either vertically
  or horizontally
• 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

13
Drawing a Sketch of the User Interface
(continued)

• 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
• You can use white space, a GroupBox control, or a
  Panel control to group related controls together

14
Drawing a Sketch of the User Interface (continued)

• 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
• Each text box and button control should be
  labeled so the user knows the controls purpose
• The Windows standard is to use sentence
  capitalization for identifying labels

15
Building the User InterfaceLesson B Objectives

• Build the user interface using 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

16
Building the User InterfaceLesson B Objectives
(continued)

• Lock the controls on the form
• Assign access keys to controls
• Use the TabIndex property

17
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

18
Including Graphics in the User Interface

• The human eye is attracted to pictures before
  text include a graphic only if it is necessary
• If the graphic is for aesthetics only, use a
  small graphic and place it so as not to distract
  the user

19
Including Different Fonts in the User Interface

• Use 8, 10, or 12 point fonts for the elements in
  the user interface
• Use only one or two font sizes
• Use only one font type for all of the text
• Avoid italic and underlining
• Limit the use of bold text to titles, headings,
  and key items

20
Including Color in the User Interface

• Use either white, off-white, light gray, pale
  blue, or pale yellow for an applications
  background, and use black for the text
• Always use dark text on a light background
• 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

21
The BorderStyle Property

• BorderStyle property determines the style of a
  controls border
• Set the BorderStyle property of text boxes to
  Fixed3D
• Set the BorderStyle property of labels that
  identify other controls to None
• Set the BorderStyle property of labels that
  display program output to FixedSingle

22
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

23
Locking the Controls on a Form

• Once you have placed all of the controls in the
  desired locations, lock them so you do not
  inadvertently move them
• Once locked, you cannot move them until you
  unlock them you can, however, delete them

24
Assigning Access Keys

• An access key allows the user to select an object
  by using the Alt key in combination with a letter
  or number
• Each access key must be unique
• You can assign an access key to any control that
  has a Caption property

25
Assigning Access Keys (continued)

• 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
  labels TabIndex value to one less than the text
  boxs TabIndex value

26
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
• To determine the appropriate TabIndex settings
  for an application, make a list of the controls
  that can accept user input

27
Setting the TabIndex Property (continued)

• The list should reflect the order in which the
  user will want to access the controls
• After listing the controls, assign each control
  in the list a TabIndex value, beginning with the
  number 0
• 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

28
Coding, Testing, Debugging, and Documenting the
ApplicationLesson C Objectives

• Use the TOE chart to code the application
• Use pseudocode to plan an objects code
• Write an assignment statement
• Use the Focus method

29
Coding, Testing, Debugging, and Documenting the
ApplicationLesson C Objectives (continued)

• Include internal documentation in the code
• Write arithmetic expressions
• Use the Val and Format functions

30
Coding the Application

• Instructions are called code
• 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

31
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
• A zero-length string (empty string), is a pair of
  quote marks with nothing between them
• Assigning a zero-length string to the Text
  property of a control removes its contents

32
Coding the Clear Screen Button (continued)

• The pseudocode shown in Figure 2-25 represents
  the steps the Clear Screen button needs 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

33
Coding the Clear Screen Button (continued)
Figure 2-25 Steps for the Clear Screen button
34
Assigning a Value to a Property During Run Time

• Use the syntax Me.object.propertyexpression to
  set the value of an objects property while an
  application is running
• In an assignment statement, the equal sign () is
  called the assignment operator
• The value of the expression on the right side of
  an is assigned to the object and property that
  appears on the left side

35
Using the Focus Method

• A method is a predefined procedure
• The Focus method allows you to move the focus to
  a specified control
• The syntax of the Focus method
  Me.object.Focus()

36
Internally Documenting the Program Code

• Visual Basic .NET provides an easy way to
  document a program internally
• 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

37
Writing Arithmetic Expressions

• The precedence numbers indicate the order in
  which Visual Basic .NET performs the operation in
  an expression
• Operations with a lower precedence number are
  performed before operations with a higher
  precedence number

38
Writing Arithmetic Expressions (continued)

• Use parentheses to override the precedence
• Use the integer division operator (\) to divide
  two integers and return the result as an integer
• The modulus operator returns the remainder after
  integer division

39
Writing Arithmetic Expressions (continued)
Figure 2-34 Arithmetic operators and their order
of precedence
40
Coding the Calculate Order Button

• The Calculate Order button is responsible for
• Calculating both the total number of skateboards
  ordered and the total price of the order
• Displaying the calculated amounts in the
  uiTotalBoardsLabel and uiTotalPriceLabel controls
• The instructions to accomplish the Calculate
  Order buttons tasks should be placed in the
  buttons Click event procedure

41
Coding the Calculate Order Button (continued)
Figure 2-35 Pseudocode for the Calculate Order
button
42
The Val Function

• Like a method, a function is a predefined
  procedure that performs a specific task
• The Val function temporarily converts a string to
  a number, and then returns the number
• Syntax of the Val function is Val(string), where
  string is the string you want treated as a number

43
Using the Format Function

• 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 a string containing
  symbols that indicate how you want the expression
  displayed

44
Testing and Debugging the Application

• Test an application by starting it and entering
  some sample data
• Use both valid (expected) and invalid
  (unexpected) test data

45
Testing and Debugging the Application (continued)

• Debugging locating errors in the program
• Errors can be either syntax or logic
• Most syntax errors are simply typing errors
• Logic errors occur when you enter an instruction
  that does not give the expected results

46
Assembling the Documentation

• Assembling the documentation refers to putting in
  a safe place your planning tools and a printout
  of the applications interface and code
• Your planning tools include
• The TOE chart
• Sketch of the interface
• Flowcharts and/or pseudocode

47
Summary

• Steps to create an OO application
• Meet with the client
• Plan the application
• Build the user interface
• Code the application
• Test and debug the application
• Assemble the documentation

48
Summary (continued)

• To control the border around a label control, set
  the label controls BorderStyle property
• To assign an access key to a control, type an
  ampersand () in the Text property of the
  controls caption or identifying label
• To set the tab order, set each controls TabIndex
  property to a number that represents the order in
  which you want the control to receive the focus

49
Summary (continued)

• To assign a value to the property of an object
  while an application is running, use an
  assignment statement that follows the
  syntaxMe.object.property expression
• To document Visual Basic code with comments,
  begin the comment with an apostrophe ()
• To temporarily convert a string to a number, use
  the Val function