Microsoft Visual Basic 2010: Reloaded Fourth Edition

1. Microsoft Visual Basic 2010: ReloadedFourth Edition Chapter Two Creating a User Interface

2. Planning an Application - TOE Chart Classes and Objects Common Form Controls Properties, Methods and Events Descriptive and Output Labels Suggested Naming Conventions GUI Design Tips and Other Tips Namespaces Encapsulation Access Keys, Tab Order, Splash Screens and Dialog Boxes Overview

3. Planning an Application • Plan the application before creating the user interface • Work jointly with the user to ensure the success of the application • TOE (Task, Object, Event) chart: • Shows application’s tasks, objects, and events • Tasks, objects, and events should be identified in the first three steps of planning • 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 total

4. Planning an Application Figure 2-2: Current order form used by Sunshine Cellular

5. Figure 2-3: Tasks entered in a TOE chart

6. Figure 2-4: Tasks and objects entered in a TOE chart

7. Figure 2-5: Completed TOE chart ordered by task

8. Planning an Application Figure 2-6: Completed TOE chart ordered by object

9. In Object Oriented Programming, a class is analogous to a blueprint for an object. It can be used to create many objects again and again. Each time you add a control to a form (like a button or text box), you create instances of the class represented by those controls. Those controls are considered objects. Classes and Objects

10. Buttons Text Box Labels Radio Buttons Check Box Combo Box List Box Tool Tip Numeric Up Down Common Form Controls (Objects)

11. Each object has specific Properties, Methods and Events Properties: Attributes that describe the object Events: Characterizes how an object can respond Methods: Defines actions an object can take Function – returns a result when called Sub – does not return a result when called Properties, Methods and Events

12. Public Function Add( ByVal var1 as Integer, ByVal var2 as Integer) As Integer Dim result as Integer result=var1 + var2 Return result End Function Methods – Example of a Function

13. Public Sub MySub() MessageBox.Show(“ this is a non value returning method ”) End Sub Methods – Example of a Sub

14. Object Example

15. Properties Balloon.Color = Red Balloon.Diameter = 10 Balloon.Inflated = True Methods Balloon.Inflate Balloon.Deflate Balloon.Rise(5) Object Example

16. Event Sub Balloon_Puncture() Balloon.MakeNoise("Bang") Balloon.Deflate Balloon.Inflated = False End Sub Object Example

17. BackColor Enabled ForeColor Location Name Size (Height, Width) Text Visible Can “manually” set these for now, but we’ll see how to manipulate the properties with code soon. Common Control Properties

18. Button: Click Text Box: TextChanged Radio Button: CheckedChanged Check Box: CheckedChanged Combo Box: SelectedIndexChanged Double click on the control in design view to automatically open the code window with the default event for that control. Default Control Events

19. Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click End Sub Default Event for Button

20. Enter TextChanged KeyDown MouseEnter MouseLeave MouseHover And many more (68 in all) which can be explored in the Object Browser, Properties Window or Code Window Other Command Button Events

21. Labels • As the control’s name indicates, Labels are often used to identify other controls on the Form. • Descriptive Labels help the user understand each control’s purpose. • Output Labels display program output.

22. Descriptive and Output Labels Output Label (recessed appearance) DescriptiveLabel

23. Suggested Naming Conventions • Change the Form name to a unique and meaningful name for easy identification. • Capitalize the first letter of the Form name because Form is a class. • Objects (such as controls) should begin with lowercase letters. • Change the Form’s title to help users identify the Form’s purpose. • Form titles should use book-title capitalization.

24. Suggested Naming Conventions • Use standard suffixes for names of objects (controls and Forms) so that you can easily tell them apart. • Append the suffix Form to Form names. • Append the Label suffix to all Label control names. • Append the Button suffix to Button control names. • When entering values for aLabel’s Text property, you should use sentence-style capitalization.

25. Form Example

26. Choose short, descriptive Form titles. Capitalize words that are not articles, prepositions or conjunctions. Do not use punctuation. Use 9pt Segoe UI font to improve readability for controls that display text. Use colors in your applications, but not to the point of distracting the user. Use Labels to display text that users cannot change Ensure that all Label controls are large enough to display their text. GUI Design Tips

27. GUI Design Tips • Make TextBoxes wide enough for their expected inputs. • Each TextBox should have a descriptive Label indicating the input expected from the user. • Place each descriptive Label either above or to the left of the control that it identifies. • A descriptive Label and control it identifies should be aligned on the left if they vertically arranged. • The TextAlign property of a descriptive Label should be set to MiddleLeft. This ensures that text within groups of Labels align.

28. GUI Design Tips • Align the left or right sides of a group of descriptive Labels if the Labels are arranged vertically. • If several output Labels are arranged vertically to display numbers used in a mathematical calculation (such as in an invoice), set the Text­Align property to MiddleRight. • Output Labels should be distinguishable from descriptive Labels. This can be done by setting the BorderStyle property of an output Label to Fixed3D.

29. GUI Design Example

30. Snap Lines Format Menu Options Lock Controls Align Sizing Spacing Centering Manually Resize Labels Change the Form file name (Form1.vb) to a name that describes the application’s purpose. Other Helpful Features and Tips

31. Clear the an output Label’s value initially or provide a default value. When the application performs the calculation for that value, the Label’s Text property should be updated to the new value. You’ll learn how to do this in the next chapter. To save time, Copy and Paste new controls that are similar to existing controls. They will automatically contain the same properties as the existing controls. Other Helpful Tips

32. The .NET Framework Class library stores pre-developed classes to facilitate program development. The classes are organized into directory-like structures called Namespaces. Namespaces 32 Name of object(Welcome) Namespace (System.Windows.Forms) Class type of object (Form) Welcome application GUI objects Figure 3.43| Component object box expanded to showthe Welcome application’s objects. Figure 3.44|The name and class of an object are displayed in the component object box.

33. System: the root for primitive data types and other namespaces in the .NET base class library System.Data.SQLClient: this namespace contains classes that are optimized for interacting with MS SQL Server System.Windows.Forms: this namespace contains types involved in creating standard Windows applications. Classes that represent forms and controls reside here as well. Namespace Examples 33

34. The “My” namespace stores the most commonclasses from the .NET framework in one collection. This namespace allows a programmer to access the .NET framework classes and parts of a project. Example using the My namespace reference: My.Computer.Audio.Play("c:\windows\media\Windows XP Startup.wav") My Namespace 34

35. Displaying a splash screen Getting the computer name Getting network settings Verifying a web site is up and running Reading a text file into a string Sending something to print on the default printer Getting application settings Common Tasks using My Namespace 35

36. You don’t need to know HOW something works in detail, all you need to know is how to call it in code. The 1 line of code used to create the basic web browser is a great example of Encapsulation. myBrowser.Navigate(txtURL.Text) Every control added to a form is automatically created by Visual Studio without having to instantiate the classes in code. Easy! Encapsulation

37. Assigning Access Keys • Access key allows user to select an object using Alt + access key. • Assign access keys to each control that can accept user input (exceptions: OK and Cancel buttons) • Each access key should be unique • Include & in front of the character to be used as the access key: • &Calculate Order  Calculate Order

38. 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 input • Set TabIndex using the Properties window or the Tab Order option on the View menu

39. Splash Screens • Splash screen: appears when an application is started • Used to introduce the application • Used to hold the user’s attention while the program is being loaded into memory

40. Splash Screens (cont’d.) Figure 2-14: How to add a splash screen to a project

41. 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 form’s name • Can also specify a splash screen • Use the Project Designer window to specify the splash screen name

42. Splash Screens (cont'd.) Figure 2-17: How to specify the splash screen

43. Dialog Boxes • 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 • Component tray stores controls that do not appear in the user interface during run time • 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

44. Dialog Boxes (cont'd.) Figure 2-21: Primary window and Font dialog box in Notepad

45. Dialog Boxes (cont’d.) • Default button: activated when user presses Enter key when the button does not have the focus • Cancelbutton: activated when user presses Esc key when the button does not have the focus • 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)