Microsoft Visual Basic 2010: Reloaded Fourth Edition - PowerPoint PPT Presentation


PPT – Microsoft Visual Basic 2010: Reloaded Fourth Edition PowerPoint presentation | free to download - id: 9e4c4-NTgyZ


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Microsoft Visual Basic 2010: Reloaded Fourth Edition


Set ControlBox property to false to remove Close, Minimize, ... Setting the TabIndex Property (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition ... – PowerPoint PPT presentation

Number of Views:526
Avg rating:3.0/5.0
Slides: 67
Provided by: peopleMor


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Microsoft Visual Basic 2010: Reloaded Fourth Edition

Microsoft Visual Basic 2010 Reloaded Fourth
  • Chapter Two
  • Creating a User Interface

  • After studying this chapter, you should be able
  • Plan an application using a TOE chart
  • Use a text box and table layout panel
  • Follow the Windows standards regarding the layout
    and labeling of controls
  • Follow the Windows standards regarding the use of
    graphics, fonts, and color
  • Assign access keys to controls

Objectives (cont'd.)
  • Set the tab order
  • Add a splash screen to a project
  • Use the Font and Color dialog boxes
  • Designate a default button
  • Print the interface during run time
  • Play an audio file

Planning an Application
  • Plan the application before creating the user
  • Work jointly with the user to ensure the success
    of the application
  • TOE (Task, Object, Event) chart
  • Shows applications tasks, objects, and events
  • Tasks, objects, and events should be identified
    in the first three steps of planning

Planning an Application (cont'd.)
Figure 2-1 How to plan an application
Sunshine Cellular Company
  • Sunshine Cellular Company
  • Takes orders by phone for cell phones priced at
    100 each
  • Two colors blue and silver
  • Currently the salespeople calculate the order
  • Develop an order-taking application for this
  • First, identify the applications tasks

Identifying the Applications Tasks
Figure 2-2 Current order form used by Sunshine
Identifying the Applications Tasks (cont'd.)
  • First, review current user procedures and forms
  • Ask these questions
  • What information must be displayed on screen
    and/or printed on a printer?
  • What information will the user need to enter into
    the UI to produce the desired display or
  • What information will the program need to
    calculate to produce the desired display or
  • How will the user end the application?
  • Will previous information need to be cleared from
    the screen before new information is entered?

Figure 2-3 Tasks entered in a TOE chart
Identifying the Objects
  • Assign each task to an object in the user
  • Text box a control that allows the user to enter
  • Use a button to initiate the calculations
  • Use labels to guide the user
  • Use buttons to clear the screen and to end the

Figure 2-4 Tasks and objects entered in a TOE
Identifying the Events
  • Next, determine which objects need an event to
    occur to allow the object to perform its task
  • Text boxes no special events needed for user to
    enter the text
  • Labels no special events needed to display the
  • Buttons action must occur when each button is

Figure 2-5 Completed TOE chart ordered by task
Identifying the Events (cont'd.)
Figure 2-6 Completed TOE chart ordered by object
Designing the User Interface
  • Next step is to design the user interface
  • Follow Windows GUI guidelines for
  • Consistency with Windows standards
  • Ease of use
  • Familiar look and feel makes the application
    easier to learn

Arranging the Controls on a Form
  • Design guidelines
  • Information should flow either vertically or
  • Most important information should be in
    upper-left corner of the screen
  • Group related controls together using white space
    or container controls
  • Container controls include
  • Group box control
  • Panel control
  • Table layout panel control

Arranging the Controls (cont'd.)
Figure 2-7 Vertical arrangement of the Sunshine
Cellular interface
Arranging the Controls (cont'd.)
Figure 2-8 Horizontal arrangement of the
Sunshine Cellular interface
Arranging the Controls (cont'd.)
  • Label guidelines
  • Use a label to identify each text box
  • Left-align the labels text
  • Position label to left of or above the text box
    it identifies
  • Labels and button captions should be one to three
    words only and appear on one line
  • Labels and captions should be meaningful
  • An identifying label should include a colon ()
  • Use sentence capitalization for identifying

Arranging the Controls (cont'd.)
  • Sentence capitalization capitalize first letter
    in first word and any other words customarily
  • Book title capitalization capitalize first
    letter in each word (except articles,
    conjunctions, and prepositions that do not occur
    at the beginning or end of the caption)
  • Button guidelines
  • Size buttons relative to each other same height
  • If stacked horizontally, same width also
  • Most commonly used button should be first
  • Use book title capitalization for buttons

Arranging the Controls (cont'd.)
  • Positioning guidelines
  • Maintain a consistent margin from all edges of
    the form
  • Related controls should be placed close to each
  • Minimize the number of different margins by
    aligning control borders where possible using
    snap lines or Format menu
  • Interface should not distract the user from doing
    the work

Including Graphics in the User Interface
  • Human eye is drawn to pictures before text
  • Include graphics only if necessary
  • Use for aesthetic purposes
  • Keep them small
  • Use to clarify a portion of the screen
  • Graphics can add a personal touch to a form

Including Different Fonts in the User Interface
  • Font property used to change the type, style,
    and size of the font
  • Font guidelines
  • Use only one font type for all text in the
  • Use Segoe UI font for Windows 7 or Windows Vista
  • Avoid italics and underlining
  • Limit bold text to titles, headings, and key
  • Change the forms Font property before adding
  • Controls will default to the font that is set for
    the form

Including Color in the User Interface
  • Human eye is drawn to color before BW
  • Color guidelines
  • Use color sparingly
  • Some people have trouble distinguishing colors
  • What is acceptable in colors is subjective
  • Color may have specific meaning in certain
  • Use black or dark text on a white or light
  • Use maximum of three different colors that
    complement each other
  • Do not use color as the only means of

Borders and Sizing of Controls
  • BorderStyle property determines the style of a
    controls border
  • Settings None, FixedSingle, Fixed3D
  • Identifying labels should be set to None
  • Labels that display output should be set to
  • AutoSize property determines if a label control
    automatically sizes to fit its current contents

Assigning Access Keys
  • Access key
  • Allows user to select an object using Alt
    access key
  • May or may not appear underlined on the controls
  • Can display temporarily or hide by pressing the
    Alt key
  • Is not case sensitive
  • Access key guidelines
  • Assign access keys to each control that can
    accept user input (exceptions OK and Cancel
  • Each access key should be unique
  • Follow Windows standards for choice of access

Assigning Access Keys (cont'd.)
  • Advantages of using access keys
  • User does not need mouse to navigate and activate
  • Allows fast typists to keep hands on keyboard
  • Facilitates use of the application by people with
  • Include in front of the character to be used as
    the access key
  • Calculate Order ? Calculate Order

Controlling the Tab Order
  • TabIndex property
  • Determines the order in which a control receives
    the focus when the Tab key is pressed
  • Starts at 0
  • Assigned by default as the order in which
    controls are added to the form at design time
  • Should be set to the order in which the user will
    want to access the controls
  • Focus the state of being able to accept user
  • Set TabIndex using the Properties window or the
    Tab Order option on the View menu

Setting the TabIndex Property (cont'd.)
Figure 2-11 How to set the TabIndex property
using the Tab Order option
Setting the TabIndex Property (cont'd.)
Figure 2-12 Correct TabIndex values
Splash Screens
  • Splash screen appears when an application is
  • Used to introduce the application
  • Used to hold the users attention while the
    program is being loaded into memory

Splash Screens (contd.)
Figure 2-13 Visual Studio 2010 splash screen
Splash Screens (contd.)
Figure 2-14 How to add a splash screen to a
Splash Screens (cont'd.)
Figure 2-15 Completed Add New Item dialog box
Splash Screens (cont'd.)
Figure 2-16 Splash screen created by the Splash
Screen template
Splash Screens (cont'd.)
  • Must specify the startup form to be shown first
    when the application starts
  • Use the Project Designer window to specify the
    startup forms name
  • Can also specify a splash screen
  • Use the Project Designer window to specify the
    splash screen name

Splash Screens (cont'd.)
Figure 2-17 How to specify the splash screen
Splash Screens (cont'd.)
Figure 2-18 Project Designer window
Splash Screens (cont'd.)
Figure 2-19 SplashScreenForm during run time
Splash Screens (cont'd.)
Figure 2-20 Assembly Information dialog box
Dialog Boxes
  • Primary window a main window that can be
    resized, minimized, maximized, and closed by the
  • Primary windows title bar includes
  • Minimize, Maximize, and Close buttons on the
  • Control menu on the left
  • Dialog boxes can be closed only
  • Dialog boxs title bar includes
  • Close button and optionally a Help button
  • No control menu

Dialog Boxes (cont'd.)
Figure 2-21 Primary window and Font dialog box
in Notepad
Dialog Boxes (cont'd.)
  • Use the Dialog template, or use a form to create
    dialog boxes
  • FormBorderStyle property
  • Sets border style
  • Use FixedDialog setting for dialog boxes
  • MinimizeBox property and MaximizeBox property
    control the existence of Minimize and Maximize
  • Remove Minimize and Maximize buttons for dialog

Dialog Boxes (contd.)
  • Use tools in the Dialogs section of the toolbox
    for commonly used dialog boxes
  • Color
  • Font
  • Save As
  • These controls do not appear on the form
  • They are placed in the component tray in the IDE
  • Component tray stores controls that do not appear
    in the user interface during run time

Dialog Boxes (contd.)
Figure 2-22 Font and Color dialog box controls
in the component tray
Dialog Boxes (contd.)
  • Dialog boxes are modal
  • They remain on the screen until the user closes
    the dialog box
  • No input from keyboard or mouse can occur in the
    primary window until the dialog boxes is closed
  • Write code to display the dialog box and to use
    values selected in the dialog box by the user

Dialog Boxes (contd.)
Figure 2-23 Code entered in the Font buttons
Click event procedure
Dialog Boxes (contd.)
Figure 2-24 Font dialog box created by the
FontDialog tool
Dialog Boxes (contd.)
Figure 2-25 Code entered in the Color buttons
Click event procedure
Dialog Boxes (contd.)
Figure 2-26 Color dialog box created by the
ColorDialog tool
Dialog Boxes (contd.)
  • Default button activated when user presses Enter
    key when the button does not have the focus
  • Cancel button activated when user presses Esc
    key when the button does not have the focus
  • Most dialog boxes have a default button and a
    cancel button specified

Designating the Default Button on a Form
  • AcceptButton property
  • A form property that designates the name of the
    default button
  • Only one per form
  • Should be the button that is most often selected
    by the user (unless the tasks performed by this
    button are both destructive and irreversible)
  • Default button has a darkened border during
    design time and run time

Designating the Default Button on a Form
Figure 2-27 Default button during design time
Printing an Interface During Run Time
  • PrintForm tool prints an interface during run
  • Contained in the Visual Basic PowerPacks section
    of the toolbox
  • Control appears in the Component tray
  • Print Preview button sends output to the Print
    Preview window
  • Print button sends output directly to the printer

Printing an Interface During Run Time (contd.)
Figure 2-28 PrintForm Examples interface
Printing an Interface During Run Time (contd.)
Figure 2-29 Code entered in the Click event
Playing Audio Files
  • My feature exposes a set of commonly used
    objects to the programmer
  • Use the My keyword in code
  • Computer object represents your computer
  • Provides access to other objects, such as the
    Audio object
  • Use the Play method of the Audio object to play
    an audio file
  • Arguments information supplied to a method when
    it is called

Playing Audio Files (contd.)
Figure 2-30 How to play an audio file
Programming Tutorial 1
Figure 2-40 Result of clicking each color buttons
Programming Tutorial 2
Figure 2-47 MainForm for the Music Sampler
Programming Example
Figure 2-57 User interface
  • Plan the application jointly with the user
  • Identify tasks, objects, and events and then
    build the interface
  • Use a TOE chart to record an applications tasks,
    objects, and events
  • Textbox control allows user to enter data
  • Align controls to flow horizontally or vertically
  • Group related controls visually with white space
    or container controls, and maintain consistent

Summary (cont'd.)
  • Identifying labels should be left-aligned,
    positioned above or to the left of the text box,
    and contain a colon ()
  • Use meaningful labels with captions of one to
    three words in sentence capitalization
  • Button captions should use book title
  • Buttons should be same height if stacked
    vertically, should be same width
  • Align borders of controls horizontally and
    vertically wherever possible
  • Use graphics and colors sparingly

Summary (cont'd.)
  • Avoid italics and underlining, and limit bold
    text to titles, headings, and key items
  • Use Segoe UI font type for applications running
    on Windows Vista or Windows 7
  • Identifying labels should have BorderStyle None
    and AutoSize True
  • Output labels should have BorderStyle
    FixedSingle and AutoSize False
  • Assign access keys to controls that accept input
  • Use TabIndex property to control where the focus
    goes when Tab key or an access key is used

Summary (cont'd.)
  • Use Add New Item dialog box to add a splash
    screen to an application
  • Specify the splash screen as the startup form in
    the Project Designer window
  • Primary window where the primary viewing and
    editing of the applications data takes place
  • Dialog window supports the primary window
  • FormBorderStyle property specifies border style
    of a primary window or dialog box

Summary (cont'd.)
  • Use MinimizeBox and MaximizeBox properties to
    control whether Minimize and Maximize buttons
    appear dimmed on a form
  • AcceptButton property designates which button on
    a form is activated with the Enter key
  • Visual Basic PowerPacks section of the toolbox
    provides the PrintForm tool for printing the
    interface during run time
  • Use the Play method of the My.Computer.Audio
    object to play an audio file during run time