Tutorial 2 Designing Applications

1. Tutorial 2Designing Applications

2. Solving the Problem Using a Procedure-Oriented Approach • Emphasis of a program is on how to accomplish a task – planned by programmer not user • A flowchart uses standardized symbols to show the steps needed to solve a problem • Pseudocode uses English phrases to describe the required steps

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 • You can use a TOE (Task, Object, Event) chart for planning • Users have a lot of control. For example, they can enter information in any order, change what they entered, 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. Planning an OOED Application in Visual Basic .NETLesson 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

7. 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 A Builder’s Process vs. A Programmer’s Process

8. Step 1 – Meet with client • The client (the person you are building an application for) will provide: • How calculations are to be performed • Standards • Other requirements

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

10. Identify the Application’s Tasks (in the TOE chart) • 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?

11. Identifying the Objects(in the TOE chart) • After completing the Task column of the TOE chart, you then assign each task to an object in the user interface

12. Identifying the Events(in the TOE chart) • 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 which will perform their assigned tasks when they are clicked • Then list the tasks you have assigned to each object in the Task column, and list the event in the Event column

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

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

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

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

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. Use 1-3 words only. • A button’s caption, on the other hand, should tell the user what action the button will perform when the button is clicked. Use 1-3 words only.

18. Drawing a Sketch of the User Interface • The colon (:) distinguishes an identifying label from other text in the user interface • Sentence capitalization means you capitalize only the first letter in the first word and in any words that are customarily capitalized. This is the Windows standard for labels. • 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

19. Building the User InterfaceLesson 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

20. Step 3 - Build the User Interface • Use the sketch you drew during the Planning step • Follow the GUI design guidelines

21. 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

22. 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

23. 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

24. 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 a sans serif (Tahoma) font for the text. • Use only one or two font sizes and 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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 • Select object and right click to lock controls. Once the controls are locked, you will not be able to move them until you unlock them; you can, however, delete them

31. 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

32. Assigning Access Keys • Each access key must be unique • You can assign an access key to any control that has a Text 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

33. 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

34. 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

35. Coding, Testing, Debugging, and Documenting the ApplicationLesson 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

36. Coding the Application 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 • 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. Visual Basic .NET ignores everything that appears after the apostrophe on that line ‘hide the command buttons <code> ‘print the form <code> ‘display the command buttons <code> ‘set the focus

37. 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 this to the Text property of a control removes the contents of the control

38. 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. Me refers to the current form. 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 • A method is a predefined Visual Basic .NET procedure

39. 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

40. 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 Order of Precedence

41. 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 Example: total = val(txtNumTickets.text) * price

42. Using the Format Function • You can use the Format function to improve the appearance of the numbers displayed in an interface 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 Example: txtTotal.text = format (total, “currency”)

43. 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

44. 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

45. 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

46. 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