Chapter 2 User Interface Design Programming In Visual

  • Slides: 29
Download presentation
Chapter 2 User Interface Design Programming In Visual Basic. NET © 2004 by The

Chapter 2 User Interface Design Programming In Visual Basic. NET © 2004 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Controls in the Toolbox 2 © 2005 by The Mc. Graw-Hill Companies, Inc. All

Controls in the Toolbox 2 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Text Box • Allows for user input • Text Property – What is displayed

Text Box • Allows for user input • Text Property – What is displayed in text box – What user entered in text box • Text. Align Property – Controls alignment of text in the text box 3 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Group Box • Used as containers for other controls such as radio buttons and

Group Box • Used as containers for other controls such as radio buttons and check boxes • Improves readability of form • Text Property – What is displayed on the top edge of the group box 4 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Check Box • Allows the user to select or deselect one or more items

Check Box • Allows the user to select or deselect one or more items in any group • Checked Property – Checked = True – Unchecked = False • Checked. Changed Event • Text Property – What is displayed next to the check box 5 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Radio Button • User may select only one in any group • First create

Radio Button • User may select only one in any group • First create a group box and then create each radio button inside the group box • Checked Property – Checked = True – Unchecked = False • Checked. Changed Event • Text Property – What is displayed next to the radio button 6 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Picture Box • Displays/contains an image • Image Property – Complete path and filename

Picture Box • Displays/contains an image • Image Property – Complete path and filename of graphic –. bmp, . gif, . jpg, . jpeg, . png, . ico, . emf, . wmf • Size. Mode Property – Stretch. Image causes picture to be resized to match the size of the control • Visible Property 7 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Borders and Styles • Border. Style Property – None – Fixed. Single – Fixed

Borders and Styles • Border. Style Property – None – Fixed. Single – Fixed 3 D 8 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Drawing a Line • Use Label Control – Text=blank – Border. Style=None – Back.

Drawing a Line • Use Label Control – Text=blank – Border. Style=None – Back. Color=desired line color – Width and Height as desired • Use the Graphics Methods covered in Chapter 12 9 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Selecting Multiple Controls • Shift-Click or Ctrl-Click to select/deselect multiple controls • Use the

Selecting Multiple Controls • Shift-Click or Ctrl-Click to select/deselect multiple controls • Use the mouse to drag a selection box around multiple controls • To deselect all selected controls click elsewhere on the form 10 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Selecting Multiple Controls (continued) Start here Drag to here Use the mouse to drag

Selecting Multiple Controls (continued) Start here Drag to here Use the mouse to drag a selection box around multiple controls 11 Multiple selected controls, observe selection handles. © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

What Can be Done with Multiple Selected Controls? • Move them as a group

What Can be Done with Multiple Selected Controls? • Move them as a group • Set their common properties • Use Format Menu or Layout Toolbar to – Align them to each other – Make same size – Modify the spacing between them 12 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Designing the User Interface • To the user the Interface should be – Easy

Designing the User Interface • To the user the Interface should be – Easy to understand – Familiar – Comfortable – Organized – Sans Serif Fonts are best, not boldface or large – Color Neutral Overall – Keyboard Accessible 13 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Keyboard Access Keys • • • Also referred to as Hot Keys Underlined Letter

Keyboard Access Keys • • • Also referred to as Hot Keys Underlined Letter User presses Alt + underlined letter Use Windows-Standard Keys Defined using Text Property Text=&OK Text=E&xit 14 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Accept & Cancel Buttons • Accept Button – Identified visually on Form by its

Accept & Cancel Buttons • Accept Button – Identified visually on Form by its darker outline – Responds to Enter key – Form's Accept. Button Property • Cancel Button – Responds to Esc key – Form's Cancel. Button Property 15 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Focus • One control on a Form always has the focus • Not all

Focus • One control on a Form always has the focus • Not all control types can receive the focus • Tab. Stop Property (applicable only for controls that are capable of receiving the focus) – Designates whether a control is allowed to receive the focus; set to True or False 16 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Tab Order • User should be able to use Tab key to move the

Tab Order • User should be able to use Tab key to move the focus through a form in an organized manner; top to bottom, left to right • Tab. Index Property – Number in tab sequence – 0 for first control to receive the focus when the form loads • Use View Menu, Tab Order to set 17 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Setting Tab. Index Property • View menu, Tab. Order • Click on each control

Setting Tab. Index Property • View menu, Tab. Order • Click on each control in sequence to set Tab. Index property of controls automatically 18 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Form's Screen Location • Start. Position Property – Manual – Center. Screen – Windows.

Form's Screen Location • Start. Position Property – Manual – Center. Screen – Windows. Default. Location – Windows. Default. Bounds – Center. Parent 19 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Tool. Tips • Small label that is displayed when user pauses mouse pointer over

Tool. Tips • Small label that is displayed when user pauses mouse pointer over a control • Steps for creating Tool. Tips – Add a Tool. Tip Control to Form • Appears in the Component Tray, pane at bottom of Form Designer where nondisplay controls are shown – Select Tool. Tip on Tool. Tip 1 Property of each control and add Tool Tip comments 20 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Tool. Tip Control Component Tray 21 © 2005 by The Mc. Graw-Hill Companies, Inc.

Tool. Tip Control Component Tray 21 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Clearing Text Boxes & Labels • Set Text Property equal to an Empty String

Clearing Text Boxes & Labels • Set Text Property equal to an Empty String – Empty String is 2 quotation marks with no space between them ("") • Use the Clear Method of a Text Box or set Text property to String. Empty name. Text. Box. Text = "" message. Label. Text = "" data. Text. Box. Clear( ) message. Label. Text = String. Empty 22 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Resetting the Focus • Places the Insertion Point in a Text Box • Use

Resetting the Focus • Places the Insertion Point in a Text Box • Use the Focus Method name. Text. Box. Focus( ) 23 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Setting the Checked Property of Radio Buttons and Check Boxes • Selects/Deselects Check Box

Setting the Checked Property of Radio Buttons and Check Boxes • Selects/Deselects Check Box or Radio Button at design or run time • Set Checked Property – True = Checked, selected – False = Unchecked, deselected red. Radio. Button. Checked = True display. Check. Box. Checked = False 24 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Setting Visibility at Run Time • Make label invisible message. Label. Visible = False

Setting Visibility at Run Time • Make label invisible message. Label. Visible = False 25 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Color Constants • Fore. Color and Back. Color Properties • Use VB Color Constants

Color Constants • Fore. Color and Back. Color Properties • Use VB Color Constants from the Color Class • View complete list in Help name. Text. Box. Fore. Color = Color. Red message. Label. Fore. Color = Color. White 26 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

With and End With • Change several properties at once in Code • Will

With and End With • Change several properties at once in Code • Will run more efficiently With title. Text. Box. Visible = True. Fore. Color = Color. White. Focus( ) End With 27 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Concatenation • Think of it as "tacking" text strings together • Use an ampersand

Concatenation • Think of it as "tacking" text strings together • Use an ampersand (&) preceded and followed by a space between the two strings message. Label. Text = "Your name is: " & name. Text. Box. Text name. And. Address. Label. Text = name. Text. Box. Text & address. Text. Box. Text 28 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.

Continuing Long Program Lines • For long lines of code it is more readable

Continuing Long Program Lines • For long lines of code it is more readable to continue them on the next line • At the end of the line use a Line Continuation Character (a Space, an Underscore and press Enter) greetings. Label. Text = "Greetings " & name. Text. Box. Text & ": " & _ "You have been selected to win a free prize. " & _ "Just send us $100 for postage and handling. " 29 © 2005 by The Mc. Graw-Hill Companies, Inc. All rights reserved.