Chapter 02

674 views
612 views

Published on

Published in: Education, Sports, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
674
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Brief description on how to navigate within this presentation (ppt) The first time a Key Term from the chapter is used in the ppt it will display in blue Gold colored text boxes display coding examples Slides will be numbered (# of #) when multiple slides on same topic (Slide title) Speaker notes are included where appropriate for slides (*)Denotes either a comment for page reference to textbook or slide reference in ppt
  • Each class of controls has its own set of properties. To see a complete list of the properties for any class of control, you can (1) place a control on a form and examine the properties list or (2) click on a tool or a control and press F1 for context-sensitive Help.
  • 7 Use a text box control when you want the user to type some input and a form may have more than one textbox The user can move from one box to the next, make corrections, cut and paste if desired, and click the Display button when finished You can set the properties of textboxes or you can use code to set values for the property
  • 7
  • 10
  • 9
  • 11
  • 14 Fixed3D – default for text boxes None – default for labels and picture boxes
  • 15
  • One of the goals of good programming is to create programs that are easy to use. Your user interface should be clear and consistent You should design your applications to match other Windows applications.
  • 17 You can set access keys for buttons, radio buttons, and check boxes
  • Once a person’s fingers are on the keyboard, most people prefer to press the Enter key, rather than to click the mouse. If one of the buttons on the form is the accept button, pressing Enter is the same as clicking the button. An example of a good time to set the CancelButton property is on a form with OK and Cancel buttons.
  • You can see the focus change as you tab from control to control. For controls such as buttons, the focus appears as a thick blue border. For text boxes, the insertion point (also called the cursor ) appears inside the box. Two properties determine whether the focus stops on a control and the order in which the focus moves. Controls that are capable of receiving focus have a TabStop property , which you can set to True or False. If you do not want the focus to stop on a control when the user presses the Tab key, set the TabStop property to False. The TabIndex property determines the order the focus moves as the Tab key is pressed. As you create controls on your form, Visual Studio assigns the TabIndex property in sequence. Most of the time that order is correct, but if you want to tab in some other sequence or if you add controls later, you will need to modify the TabIndex properties of your controls.
  • 18 When your program begins running, the focus is on the control with the lowest TabIndex (usually 0). You may be puzzled by the properties of labels, which have a TabIndex property but not a TabStop. A label cannot receive focus, but it has a location in the tab sequence. This fact allows you to create keyboard access keys for text boxes. When the user types an access key that is in a label, such as Alt + N, the focus jumps to the first TabIndex following the label (the text box). To use a keyboard access key for a text box, the TabIndex of the label must precede the TabIndex of the text box.
  • To set the tab order for controls, you can set each control’s TabIndex property in the Properties window. Or you can use Visual Studio’s great feature that helps you set TabIndexes automatically.
  • 19 If you are a Windows user, you probably appreciate and rely on ToolTips, those small labels that pop up when you pause your mouse pointer over a toolbar button or control. To define ToolTips, select the ToolTip tool from the toolbox and click anywhere on the form or double-click the ToolTip tool in the toolbox. You also can add multiline ToolTips. In the ToolTip on ToolTip1 property, click the drop-down arrow. This drops down a white box in which you enter the text of the ToolTip. Type the first line and press Enter to create a second line; press Ctrl + Enter to accept the text (or click somewhere outside the Property window).
  • 20 This empty string is also called a null string or zero-length string.
  • 21 As a program runs, you want the insertion point to appear in the text box where the user is expected to type. The focus should therefore begin in the first text box. The focus should therefore begin in the first text box.
  • 22 The purpose of radio buttons and check boxes is to allow the user to make selections. However, at times you need to select or deselect a control in code. You can select or deselect radio buttons and check boxes at design time (to set initial status) or at run time (to respond to an event). To make a radio button or check box appear selected initially, set its Checked property to True in the Properties window. In code, assign True to its Checked property
  • You can set the visibility of a control at run time. You may want the visibility of a control to depend on the selection a user makes in a check box or radio button.
  • 23 Most controls have a ForeColor and a BackColor property. The ForeColor property changes the color of the text; the BackColor property determines the color around the text. Visual Basic provides an easy way to specify a large number of colors. These color constants are in the Color class. If you type the keyword Color and a period in the editor, you can see a full list of colors.
  • 24 The statements beginning with and ending with End With are called a With block . The statements inside the block are indented for readability. Although indentation is not required by VB, it is required by good programming practices and aids in readability.
  • 25 At times you need to join strings of text. For example, you may want to join a literal and a property.
  • 26 Basic interprets the code on one line as one statement. You can type very long lines in the Editor window; the window scrolls sideways to allow you to keep typing. However, this method is inconvenient; it isn’t easy to see the ends of the long lines. When a Basic statement becomes too long for one line, use a line continuation character . You can type a space and an underscore, press Enter, and continue the statement on the next line. It is OK to indent the continued lines. The only restriction is that the line-continuation character must appear between elements; you cannot place a continuation in the middle of a literal or split the name of an object or property.
  • Chapter 02

    1. 1. aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf
    2. 2. User Interface Design Chapter 2 McGraw-Hill © 2006 The McGraw-Hill Companies, Inc. All rights reserved.
    3. 3. Objectives (1 of 2) <ul><li>Use text boxes , group boxes , check box es, radio button, and picture boxes effectively </li></ul><ul><li>Set the BorderStyle property to make controls appear flat or three-dimensional </li></ul><ul><li>Select multiple controls and move them, align them, and set common properties </li></ul><ul><li>Make your projects easy for the user to understand and operate by defining access keys, setting an accept and a cancel button, controlling the tab sequence, resetting the focus during program execution, and causing ToolTips to appear </li></ul>
    4. 4. Objectives (2 of 2) <ul><li>Clear the contents of text boxes and labels. </li></ul><ul><li>Change text color during program execution. </li></ul><ul><li>Code multiple statements for one control using the With and End With statements. </li></ul><ul><li>Concatenate (join) strings of text. </li></ul><ul><li>Make a control visible or invisible at run time by setting its Visible property . </li></ul>
    5. 5. More Controls <ul><li>Click the plus and minus signs on the tabs to open and close each section </li></ul><ul><li>Forms can have several different types of controls such as text boxes, group boxes, check boxes, radio buttons, picture boxes </li></ul>
    6. 6. Text Box <ul><li>Allows for user input </li></ul><ul><li>Text property </li></ul><ul><ul><li>What is displayed in text box </li></ul></ul><ul><ul><li>What user entered in text box </li></ul></ul><ul><li>TextAlign property or HorizontalAlignment.Left </li></ul><ul><ul><li>Controls alignment of text in the text box </li></ul></ul>
    7. 7. Masked Text Box A specialized form of the Text Box You can specify the format (the Mask property) of the data required of the user For example, you can select a mask for a ZIP code, a date, a phone number, or a social security number At run time the user cannot enter characters that do not conform to the mask
    8. 8. Group Box <ul><li>Used as containers for other controls such as radio buttons and check boxes </li></ul><ul><li>Improves readability of form by separating the controls into logical groups </li></ul><ul><li>Example Names for Group Boxes </li></ul><ul><ul><li>colorGroupBox </li></ul></ul><ul><ul><li>styleGroupBox </li></ul></ul>
    9. 9. Check Box <ul><li>Allows the user to select or deselect one or more items in any group </li></ul><ul><li>Checked property </li></ul><ul><ul><li>Checked = True </li></ul></ul><ul><ul><li>Unchecked = False </li></ul></ul><ul><li>Use the Text property for the text you want to appear next to the box </li></ul><ul><li>Example names for Check Boxes </li></ul><ul><ul><li>boldCheckBox </li></ul></ul><ul><ul><li>italicCheckBox </li></ul></ul>
    10. 10. Radio Button <ul><li>User may select only one in any group </li></ul><ul><li>First create a group box and then create each radio button inside the group box </li></ul><ul><li>Checked property </li></ul><ul><ul><li>Selected = True </li></ul></ul><ul><ul><li>Unselected = False </li></ul></ul><ul><li>Text property </li></ul><ul><ul><li>What is displayed next to the radio button </li></ul></ul><ul><li>Example Names for Radio Buttons </li></ul><ul><ul><li>redRadioButton </li></ul></ul><ul><ul><li>blueRadioButton </li></ul></ul>
    11. 11. Picture Box <ul><li>Displays/contains an image </li></ul><ul><li>Image property </li></ul><ul><ul><li>Complete path and filename of graphic; it’s a good idea to place the graphic into the folder with your project before it is assigned to a picture box </li></ul></ul><ul><ul><li>Can set extension to .bmp, .gif, .jpg, .jpeg, .png, .ico, .emf, .wmf </li></ul></ul><ul><li>PictureBox controls have several useful properties such as the SizeMode property </li></ul><ul><ul><li>StretchImage causes picture to be resized to match the size of the control or the </li></ul></ul><ul><li>Visible property which can be set to False to make the picture disappear </li></ul>
    12. 12. Borders and Styles <ul><li>Most controls can appear to be three-dimensional or flat </li></ul><ul><li>Labels, text boxes, and pictures boxes all have a BorderStyle property with different style choices including: </li></ul><ul><ul><li>None </li></ul></ul><ul><ul><li>FixedSingle </li></ul></ul><ul><ul><li>Fixed3D properties can be changed to the style of choosing </li></ul></ul>
    13. 13. Drawing a Line <ul><li>A line can be drawn on a form by using the Label control </li></ul><ul><li>Lines can be used in logos or dividing the screen </li></ul><ul><li>To create the look of a line set the following properties: </li></ul><ul><ul><li>Text=blank </li></ul></ul><ul><ul><li>BorderStyle=None </li></ul></ul><ul><ul><li>BackColor=desired line color </li></ul></ul><ul><ul><li>Width and Height, located beneath the Size property as desired </li></ul></ul><ul><li>A line can also be drawn on a form using the graphics methods which is discussed in Chapter 13 </li></ul>
    14. 14. Selecting Multiple Controls <ul><li>There are several methods of selecting multiple controls which means controls can be moved as a group </li></ul><ul><li>Shift-Click or Ctrl-Click to select/deselect multiple controls </li></ul><ul><li>Use the mouse to drag a selection box around multiple controls </li></ul><ul><li>When wanting to select most of the controls on the form used a combination of the two methods </li></ul><ul><li>To deselect all selected controls click elsewhere on the form </li></ul>(1of 2)
    15. 15. Selecting Multiple Controls (2 of 2) Use the mouse to drag a selection box around multiple controls When multiple controls are selected, each has resizing handles (if resizable)
    16. 16. Working with Multiple Controls <ul><li>What are some of the benefits of working with Multiple Controls? </li></ul><ul><li>Drag a group of selected controls to move the entire group to a new location at one time </li></ul><ul><li>Set common properties </li></ul><ul><li>Use Format Menu or Layout Toolbar to </li></ul><ul><ul><li>Align controls to each other </li></ul></ul><ul><ul><li>Make controls the same size </li></ul></ul><ul><ul><li>Modify the spacing between controls </li></ul></ul>
    17. 17. Designing the User Interface <ul><li>The design of the screen should be easy to understand and “comfortable” for the user. The best way to accomplish these goals is to follow industry standards for the color, size, and placement of controls. </li></ul><ul><li>To the user the Interface should be </li></ul><ul><ul><li>Familiar </li></ul></ul><ul><ul><li>Comfortable </li></ul></ul><ul><ul><li>Organized – group controls </li></ul></ul><ul><ul><li>Sans Serif Fonts are best, not boldface or large </li></ul></ul><ul><ul><li>Gray is a neutral color that works well </li></ul></ul><ul><ul><li>Keyboard Accessible </li></ul></ul>
    18. 18. Keyboard Access Keys <ul><li>Many people prefer to use the keyboard, rather than a mouse, for most operations </li></ul><ul><li>Also referred to as Hot Keys </li></ul><ul><li>Underlined Letter </li></ul><ul><li>User presses Alt + underlined letter </li></ul><ul><li>Use Windows-Standard Keys </li></ul><ul><li>Defined using Text property </li></ul>Text=&OK Text=E&xit
    19. 19. Accept & Cancel Buttons <ul><li>Accept Button </li></ul><ul><ul><li>Identified visually on Form by its darker outline </li></ul></ul><ul><ul><li>Responds to Enter key </li></ul></ul><ul><ul><li>Form's AcceptButton property </li></ul></ul><ul><li>Cancel Button </li></ul><ul><ul><li>Form's CancelButton property </li></ul></ul><ul><ul><li>An example of a Cancel button is the Esc key </li></ul></ul>
    20. 20. Setting the Tab Order for Controls (1 of 2) <ul><li>One control on a Form always has the focus </li></ul><ul><li>Not all control types can receive the focus </li></ul><ul><ul><li>Text boxes, buttons - focus </li></ul></ul><ul><ul><li>Picture boxes and labels – no focus </li></ul></ul><ul><li>TabStop property is applicable only for controls that are capable of receiving the focus </li></ul><ul><ul><li>Designates whether a control is allowed to receive the focus; set to True or False </li></ul></ul><ul><li>TabIndex property determines the order the focus moves as the Tab key is pressed </li></ul>
    21. 21. Setting the Tab Order for Controls (2 of 2) <ul><li>Users should be able to use the Tab key to move the focus through a form in an organized manner; top to bottom, left to right </li></ul><ul><li>TabIndex property </li></ul><ul><ul><li>Number in tab sequence </li></ul></ul><ul><ul><li>0 for first control to receive the focus when the form loads </li></ul></ul><ul><li>Use View Menu, Tab Order to set </li></ul>
    22. 22. Setting the TabIndex Property <ul><li>With the Design window active, select View / Tab Order or click the Tab Order button on the Layout toolbar </li></ul><ul><li>Click on each control in sequence to set TabIndex property of controls automatically </li></ul>
    23. 23. Setting the Form's Screen Location <ul><li>You can set the form’s screen position by setting the StartPositionproperty of the form </li></ul><ul><li>To center a form on the user’s screen, set the StartPosition property to CenterScreen </li></ul>
    24. 24. Creating ToolTips <ul><li>Small label that is displayed when user pauses mouse pointer over a control </li></ul><ul><ul><li>Add a ToolTip Control to Form </li></ul></ul><ul><ul><li>The new control appears in a new pane, Component Tray that opens at the bottom of the Form Designer </li></ul></ul><ul><ul><li>After you add the component to your form, each of the form’s controls has a new property </li></ul></ul><ul><ul><li>Select ToolTip on ToolTip1 property of each control and add Tool Tip comments </li></ul></ul>
    25. 25. ToolTip Control Component Tray
    26. 26. Clearing Text Boxes & Labels <ul><li>Set Text property equal to an Empty String </li></ul><ul><ul><li>Empty String is 2 quotation marks with no space between them (&quot;&quot;) </li></ul></ul><ul><li>Use the Clear Method of a Text Box or set Text property to String.Empty </li></ul>nameTextBox.Text = &quot;&quot; messageLabel.Text = &quot;&quot; dataTextBox.Clear( ) messageLabel.Text = String.Empty
    27. 27. Resetting the Focus <ul><li>Places the Insertion Point in a Text Box </li></ul><ul><li>Use the Focus Method </li></ul>nameTextBox.Focus( )
    28. 28. Setting the Checked Property of Radio Buttons and Check Boxes <ul><li>Selects/Deselects Check Box or Radio Button at design or run time </li></ul><ul><li>Set Checked property </li></ul><ul><ul><li>True = Checked, selected </li></ul></ul><ul><ul><li>False = Unchecked, deselected </li></ul></ul>redRadioButton.Checked = True displayCheckBox.Checked = False
    29. 29. Setting Visibility at Run Time <ul><li>Make label invisible </li></ul>messageLabel.Visible = False
    30. 30. Changing the Color of Text <ul><li>ForeColor and BackColor Properties </li></ul><ul><li>Use VB Color Constants from the Color Class </li></ul><ul><li>Type the keyword Color and a period in the editor to view a full color list </li></ul>nameTextBox.ForeColor = Color.Red messageLabel.ForeColor = Color.White
    31. 31. Changing Multiple Properties of a Control <ul><li>There are times when you will want to change several properties of a single control </li></ul><ul><li>Previous to version 4 the entire name (Object, Property) for each statement had to be written, such as: </li></ul><ul><ul><li>titleTextBox.Visible = True </li></ul></ul><ul><ul><li>titleTextBox.ForeColor = Color.White </li></ul></ul><ul><ul><li>titleTextBox.Focus() </li></ul></ul><ul><li>Now you VB provides With and End With statements </li></ul>
    32. 32. With and End With <ul><li>Change several properties at once in Code </li></ul><ul><li>Will run more efficiently </li></ul>With titleTextBox .Visible = True .ForeColor = Color.White . Focus( ) End With
    33. 33. Concatenation <ul><li>Think of concatenation as &quot;tacking&quot; text strings together </li></ul><ul><li>Use an ampersand (&) preceded and followed by a space between the two strings </li></ul>messageLabel.Text = &quot; Your name is: &quot; & nameTextBox.Text nameAndAddressLabel.Text = nameTextBox.Text & addressTextBox.Text
    34. 34. Continuing Long Program Lines <ul><li>For long lines of code it is more readable to continue them on the next line </li></ul><ul><li>At the end of the line use a Line Continuation Character (a Space, an Underscore and press Enter) </li></ul>greetingsLabel.Text = &quot; Greetings &quot; & nameTextBox.Text & &quot; : &quot; & _ &quot; You have been selected to win a free prize. &quot; & _ &quot; Just send us $100 for postage and handling. &quot;

    ×