1 Microsoft Visual Basic 2010 Week Two 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

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

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 Interface Objectives  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 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 ‘print the form ‘display the command buttons ‘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 OperatorOperation ^exponentiation -negation *, /multiplication and division \integer division Modmodulus 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