McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. Chapter 2 User Interface Design.

Slides:



Advertisements
Similar presentations
Prof. Yitzchak Rosenthal
Advertisements

Chapter 3 Creating a Business Letter with a Letterhead and Table
Chapter 2: Designing Applications
Chapter 3.1 Controls Programming In Visual Basic.NET.
Chapter 2 More Controls Programming In Visual Basic.NET.
CHAPTER TWO Creating Simple Visual Basic.NET Windows Applications.
McGraw-Hill/Irwin Programming in Visual Basic 6.0 © 2002 The McGraw-Hill Companies, Inc. All rights reserved. Update Edition Chapter 2 More Controls.
© by Pearson Education, Inc. All Rights Reserved. continued …
1.
Guide to Oracle10G1 Introduction To Forms Builder Chapter 5.
IS 1181 IS 118 Introduction to Development Tools VB Chapter 03.
Introducing More Controls Text boxCheck box Option button Command button frame image.
Chapter 2 More Controls Programming In Visual Basic.NET.
Microsoft Visual Basic 2010: Reloaded Fourth Edition
1 Introduction to the Visual Studio.NET IDE Powerpoint slides modified from Deitel & Deitel.
Chapter 2 User Interface Design Copyright © 2011 by The McGraw-Hill Companies, Inc. All Rights Reserved. McGraw-Hill.
110-C1 Chapter 2 of the text: _ text boxes, group boxes, check boxes, radio buttons, picture boxes _ defining access keys tab sequence setting the focus.
Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter One An Introduction to Visual Basic 2010.
Chapter 3 Introduction to Event Handling and Windows Forms Applications.
Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript Work with instances of movie clip symbols 3.Use code snippets.
Slide 1 Chapter 2 Visual Basic Interface. Slide 2 Chapter 2 Windows GUI  A GUI is a graphical user interface.  The interface is what appears on the.
BIM313 – Advanced Programming Simple Controls 1. Contents Traditional Controls – Labels, Text Boxes, Buttons, Check Boxes, List Boxes, Combo Boxes Advanced.
Chapter 2 User Interface Design Copyright © 2011 by The McGraw-Hill Companies, Inc. All Rights Reserved. McGraw-Hill.
IE 411/511: Visual Programming for Industrial Applications
© 2006 Lawrenceville Press Slide 1 Chapter 3 Visual Basic Interface.
Chapter 2 More Controls Programming in C#. NET © 2003 by The McGraw-Hill Companies, Inc. All rights reserved.
Microsoft Word 2000 Presentation 5. Major Word Topics Columns Tables Lists.
Microsoft Visual Basic 2005: Reloaded Second Edition Chapter 2 Creating a User Interface.
Starting Out with Visual Basic.NET 2 nd Edition Chapter 2 Creating Applications With Visual Basic.NET.
Chapter 2 - More Controls More controls – Text boxes - used for user input – Frames - containers to group items – check boxes - user select an option -
© 2008 The McGraw-Hill Companies, Inc. All rights reserved. WORD 2007 M I C R O S O F T ® THE PROFESSIONAL APPROACH S E R I E S Lesson 14 Tables.
© 2008 The McGraw-Hill Companies, Inc. All rights reserved. ACCESS 2007 M I C R O S O F T ® THE PROFESSIONAL APPROACH S E R I E S Lesson 7 – Adding and.
Chapter One An Introduction to Visual Basic 2010 Programming with Microsoft Visual Basic th Edition.
Program Design and Coding
Microsoft Visual Basic 2012 CHAPTER THREE Program Design and Coding.
Microsoft Visual Basic 2010 CHAPTER THREE Program Design and Coding.
Microsoft Visual Basic 2005 CHAPTER 4 Variables and Arithmetic Operations.
User Interface Design. Text Boxes Use a text box control when you want the user to type some input.
Graphical User Interfaces 2 Tonga Institute of Higher Education.
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 3 Welcome Application Introduction to Visual Programming.
Chapter Two Designing Applications Programming with Microsoft Visual Basic th Edition.
Visual Basic.NET BASICS Lesson 3 Events and Code.
CHAPTER TWO Creating Simple Visual Basic.NET Windows Applications.
2-1 aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf.
© 2008 The McGraw-Hill Companies, Inc. All rights reserved. WORD 2007 M I C R O S O F T ® THE PROFESSIONAL APPROACH S E R I E S Lesson 15 Advanced Tables.
Chapter 2 P. 1 Introducing more controls (on the Toolbox) (Fig. 2.1) - Text box - Frame - Option button - Check box - Image Example P. 44 Figure 2.2 Message.
1 Creating Windows GUIs with Visual Studio. 2 Creating the Project New Project Visual C++ Projects Windows Forms Application Give the Project a Name and.
More Controls and Their Properties Part 4 dbg --- TextBox, CheckBox, RadioButton, GroupBox, ToolTips,
More User Interface Controls User interface controls are located in the toolbox. Click the +/- signs to open/ close the different tabs of the tollbox.
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved. Chapter 2 User Interface Design.
2-1 aslkjdhfalskhjfgalsdkfhalskdhjfglaskdhjflaskdhjfglaksjdhflakshflaksdhjfglaksjhflaksjhf.
McGraw-Hill/Irwin Programming in Visual Basic 6.0 © 2002 The McGraw-Hill Companies, Inc. All rights reserved. Update Edition Chapter 2 More Controls.
Microsoft Visual Basic 2005 BASICS Lesson 3 Events and Code.
Copyright (c) 2003 by Prentice Hall Provided By: Qasim Al- ajmi Chapter 3 Some Visual Basic Controls and Events Visual Basic. NET.
Chapter 2 More Controls Programming in C#. NET Objectives Use text boxes, group boxes, check boxes, radio buttons, and picture boxes effectively.
Addison Wesley is an imprint of © 2011 Pearson Addison-Wesley. All rights reserved. Chapter 2 Creating Applications with Visual Basic.
Microsoft Visual Basic 2012 CHAPTER FOUR Variables and Arithmetic Operations.
IE 411/511: Visual Programming for Industrial Applications Lecture Notes #2 Introduction to the Visual Basic Express 2010 Integrated Development Environment.
MsgBox, Input Box Functions Check boxes, radio button MsgBox, Input Box Functions Lab 3 3 Ismail M. Romi: PPU- IT Dept.
 2002 Prentice Hall. All rights reserved. 1 Introduction to the Visual Studio.NET IDE Outline Introduction Visual Studio.NET Integrated Development Environment.
Chapter 2 More Controls Programming In C Shap. © Controls in the Toolbox.
Microsoft Visual Basic 2005: Reloaded Second Edition
Microsoft Access 2007 – Level 2
Chapter 1: An Introduction to Visual Basic 2015
How to design a Windows Forms application
Variables and Arithmetic Operations
Visual Studio.
Brief description on how to navigate within this presentation (ppt)
Programming In Visual Basic.NET
Chapter 2 User Interface Design
Presentation transcript:

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. Chapter 2 User Interface Design

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved. 2-2 Objectives (1 of 2) Use text boxes, group boxes, check boxes, radio buttons, and picture boxes effectively. Set the BorderStyle property to make controls appear flat or three-dimensional. Select multiple controls and move them, align them, and set common properties. 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.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved. 2-3 Objectives (2 of 2) Clear the contents of text boxes and labels. Change text color during program execution. Code multiple statements for one control using the With and End With statements. Concatenate (join) strings of text. Make a control visible or invisible at run time by setting its Visible property.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved. 2-4 More Controls Click the plus and minus signs on the tabs to open and close each section. Forms can have several different types of controls such as text boxes, group boxes, check boxes, radio buttons, and picture boxes.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved. 2-5 Text Box Allows for user input Text property What is displayed in text box What user entered in text box TextAlign property or HorizontalAlignment.Left Controls alignment of text in the text box

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved. 2-6 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.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved. 2-7 Group Box Used as a container for other controls such as radio buttons and check boxes Improves readability of form by separating the controls into logical groups Example Names for Group Boxes colorGroupBox styleGroupBox

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved. 2-8 Check Box Allows the user to select or deselect one or more items in any group Checked property Checked = True Unchecked = False Use the Text property for the text you want to appear next to the box. Example names for Check Boxes boldCheckBox italicCheckBox

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved. 2-9 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 Selected = True Unselected = False Text property What is displayed next to the radio button Example Names for Radio Buttons redRadioButton blueRadioButton

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Picture Box Displays/contains an image Image property 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. Can set extension to.bmp,.gif,.jpg,.jpeg,.png,.ico,.emf,.wmf PictureBox controls have several useful properties such as the SizeMode property. StretchImage causes picture to be resized to match the size of the control, or the Visible property, which can be set to False to make the picture disappear

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Borders and Styles Most controls can appear to be three-dimensional or flat. Labels, text boxes, and pictures boxes all have a BorderStyle property with different style choices including: None FixedSingle Fixed3D properties that can be changed to the style of choosing

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Drawing a Line A line can be drawn on a form by using the Label control. Lines can be used in logos or to divide the screen. To create the look of a line, set the following properties: Text=blank BorderStyle=None BackColor=desired line color Width and Height, located beneath the Size property as desired A line can also be drawn on a form using the graphics methods that are discussed in Chapter 13.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Selecting Multiple Control s (1of 2) There are several methods of selecting multiple controls, which means controls can be moved as a group. Shift-Click or Ctrl-Click to select/deselect multiple controls. Use the mouse to drag a selection box around multiple controls. When wanting to select most of the controls on the form, use a combination of the two methods. To deselect all selected controls, click elsewhere on the form.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Selecting Multiple Contro l s (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).

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Working with Multiple Controls What are some of the benefits of working with Multiple Controls? Drag a group of selected controls to move the entire group to a new location at one time. Set common properties. Use Format Menu or Layout Toolbar to Align controls to each other. Make controls the same size. Modify the spacing between controls.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Designing the User Interface 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. To the user, the Interface should be Familiar Comfortable Organized—group controls Sans Serif Fonts are best, not boldface or large Gray is a neutral color that works well Keyboard Accessible

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Keyboard Access Keys Many people prefer to use the keyboard, rather than a mouse, for most operations. 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

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Accept & Cancel Buttons Accept Button Identified visually on Form by its darker outline Responds to Enter key Form's AcceptButton property Cancel Button Form's CancelButton property An example of a Cancel button is the Esc key.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Setting the Tab Order for Controls (1 of 2) One control on a Form always has the focus. Not all control types can receive the focus. Text boxes, buttons — focus Picture boxes and labels — no focus TabStop property is 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 TabIndex property determines the order the focus moves as the Tab key is pressed.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Setting the Tab Order for Controls (2 of 2) 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. TabIndex property Number in tab sequence 0 for first control to receive the focus when the form loads Use View Menu, Tab Order to set.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Setting the TabIndex Property With the Design window active, select View / Tab Order or click the Tab Order button on the Layout toolbar. Click on each control in sequence to set TabIndex property of controls automatically.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Setting the Form's Screen Location You can set the form’s screen position by setting the StartPositionproperty of the form. To center a form on the user’s screen, set the StartPosition property to CenterScreen.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Creating ToolTips Small label that is displayed when user pauses mouse pointer over a control Add a ToolTip Control to Form. The new control appears in a new pane, Component Tray, which opens at the bottom of the Form Designer. After you add the component to your form, each of the form’s controls has a new property. Select ToolTip on ToolTip1 property of each control and add Tool Tip comments.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved ToolTip Control Component Tray

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved 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.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Resetting the Focus Places the Insertion Point in a Text Box Use the Focus Method. Statement to set the insertion point in the text box called NameTextBox is as follows: nameTextBox.Focus = ( )

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved 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 In code, assign True to its Checked property. redRadioButton.Checked= True displayCheckBox.checked=False

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Setting Visibility at Run Time Make label invisible. messageLabel.Visible= False

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Changing the Color of Text Change ForeColor and BackColor Properties. Use VB Color Constants from the Color Class. Type the keyword Color and a period in the editor to view a full color list. nameTextBox.ForeColor= Color.Red messageLabel.ForeColor=Color.White Color.AliceBlue Color.AntiqueWhite Color.Blue

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Changing Multiple Properties of a Control There are times when you will want to change several properties of a single control. Previous to version 4, the entire name (Object.Property) for each statement had to be written, such as: titleTextBox.Visible = True titleTextBox.ForeColor = Color.White titleTextBox.Focus() Now, VB provides With and End With statements.

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved With and End With Change several properties at once in Code. Will run more efficiently With title TextBox.Visible=True.ForeColor=Color.White.Focus( ) End With

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved Concatenation Think of concatenation as "tacking" text strings together. Use an ampersand (&) preceded and followed by a space between the two strings. Example: MessageLabel.Text="Your name is: " & NameTextBox.Text NameAndAddressLabel.Text=NameTextBox.Text & " " AddressTextBox.Text

McGraw-Hill© 2009 The McGraw-Hill Companies, Inc. All rights reserved 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). GreetingsLabel.Text="Greetings " & NameTextBox.Text & ":" & _ "You have been selected to win a free prize. " & _ "Just send us &100 for postage and handling. "