1 Microsoft Visual Basic 2010 Week Two Designing Applications

  • Published on

  • View

  • Download

Embed Size (px)


  • Microsoft Visual Basic 2010Week TwoDesigning Applications

  • Solving the Problem Using a Procedure-Oriented ApproachEmphasis of a program is on how to accomplish a taskA flowchart uses standardized symbols to show the steps needed to solve a problemPseudocode uses English phrases to describe the required stepsUser has little, if any, control

  • Solving the Problem Using an Object-Oriented/Event-Driven (OOED) ApproachObject-oriented/Event-drivenEmphasis of a program is on the objects included in the interface and the events that occur on those objectsYou will use a TOE (Task, Object, Event) chart to assist you in planning your object-oriented/event-driven programsUser has a lot of controlUsers can enter information in any order, change what they entered at any time, and calculate a subtotal whenever they like

  • Sample TOE Chart




  • GUI Design TipsOrganize 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 screenGroup related controls together using either white space or a frameAlign controls to minimize number of margins

  • A Builders Process vs. A Programmers ProcessMeet with the clientPlan the home (blueprint)Build the frameComplete the homeInspect the home and fix any problemsAssemble the documentationMeet with the clientPlan the application (TOE chart)Build the user interfaceCode the applicationTest and debug the applicationAssemble the documentation

  • Step 1 Meet with clientThe client is the person you are building an application forThe client will provideBusiness rules: How calculations are to be performedStandardsOther requirements

  • Step 2 - Plan the ApplicationIdentify the tasks the application needs to performIdentify the objects to which you will assign those tasksIdentify the events required to trigger an object into performing its assigned taskDraw a sketch of the user interface

  • Identify the Applications TasksWhat 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?

  • Identifying the ObjectsAfter completing the Task column of the TOE chart, you then assign each task to an object in the user interfaceYou 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 userAfter defining the applications 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

  • Identifying the EventsText boxes and Label controls display their contents automatically, so no special event is necessary for them to do their assigned taskThe remaining objects listed in the TOE chart are the three buttons: CalcButton, ClearButton, and ExitButtonYou will have the buttons perform their assigned tasks when they are clicked by the userThen list the tasks you have assigned to each object in the Task column, and list the event in the Event column

  • Drawing a Sketch of the User InterfaceWhile 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 standardsIn 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

  • Drawing a Sketch of the User InterfaceIn a vertical arrangementThe information flows from top to bottomThe essential information is located in the first column of the screenSecondary information is placed in subsequent columns

  • Drawing a Sketch of the User InterfaceIn a horizontal arrangementThe information flows from left to rightThe essential information is placed in the first row of the screenSecondary information placed in subsequent rows

  • Drawing a Sketch of the User InterfaceYou can use white space, a GroupBox control, or a Panel control to group related controls togetherIf 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 cornerLimit to six the number of buttons in the interfacePlace the most commonly used button firsteither on the left when the buttons are along the bottom of the screenOr on the top when the buttons are stacked in either the upper-right or lower-right corner

  • Drawing a Sketch of the User InterfaceNotice that each text box and button control in the interface is labeled so the user knows the controls purposeLabels that identify text boxes should be left-aligned and positioned either above or to the left of the text boxLabels and captions should be meaningfulA buttons caption, on the other hand, should tell the user what action the button will perform when the button is clicked

  • Drawing a Sketch of the User InterfaceThe colon (:) distinguishes an identifying label from other text in the user interfaceThe Windows standard is to use sentence capitalization for identifying labelsSentence 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

  • GUI Design TipsEither center the command buttons along the bottom of the screen or stack them in either the upper-right or lower-right cornerUse no more than six command buttons on a screenPlace the most commonly used command button first

  • GUI Design TipsAssign meaningful captions to command buttonsPlace the caption on one line and use from one to three words onlyUse book title capitalization for command button captions

  • GUI Design TipsLabel each control in the interface. The label should be from one to three words only, and it should be entered on one lineAlign each label on the left, and position either above or to the left of the control it identifiesFollow the label with a colon (:) and use sentence capitalization

  • Building the User InterfaceObjectives

    Build the user interface using your TOE chart and sketchFollow the Windows standards regarding the use of graphics, color, and fontsSet the BorderStyle propertyAdd a text box to a formLock the controls on the formAssign access keys to controlsUse the TabIndex property

  • Step 3 - Build the User InterfaceUse the sketch you drew during the Planning stepFollow the GUI design guidelines

  • Preparing to Create the User InterfaceMaintain a consistent margin of two or three dots from the edge of the windowPosition 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 controlsTry to create an interface that no one notices

  • More GUI Design TipsCommand buttons in the interface should be sized relative to each otherIf the command buttons are centered on the bottom of the screen, then each button should be the same height; their widths, however, may varyIf the command buttons are stacked in a corner, then each should be the same height and the same width

  • Including Graphics in the User InterfaceThe human eye is attracted to pictures before text, so include a graphic only if it is necessary to do soIf you are including the graphic for aesthetics only, use a small graphic and place it in a location that will not distract the user

  • Including Different Fonts in the User InterfaceUse 8, 10, or 12 point fonts for the elements in the user interfaceA serif is a light cross stroke that appears at the top or bottom of a characterUse only one or two font sizesUse a sans serif (Tahoma) font for the textUse only one font type for all of the textAvoid italics and underliningLimit the use of bold text to titles, headings, and key items

  • Including Color in the User InterfaceThe human eye is attracted to color before black and whiteBuild the interface using black, white, and gray first, then add color only if you have a good reason to do soUse either white, off-white, light gray, pale blue, or pale yellow for an applications background, and use black for the text

  • Including Color in the User InterfaceAlways use dark text on a light background because it is the easiest to readNever use a dark color for the background or a light color for the textLimit the number of colors (other than white, black, and gray) to threeNever use color as the only means of identification for an interface element

  • The BorderStyle PropertyBorderStyle property determines the style of a controls border and can be set to None, FixedSingle, or Fixed3DText the visible portion of an objectTextbox can be set to a default valueLabel used for identification, information, or for read-only dataButton used for identificationForm displays in the title bar

  • Setting the BorderStyle Property of a Text Box and LabelSet to Fixed3D (the default) the BorderStyle property of text boxesSet to None (the default) the BorderStyle of labels that identify other controlsSet to FixedSingle the BorderStyle property of labels that display program output, such as the result of a calculation

  • Adding a Text Box Control to the FormA text box c