1. CS130 Project 1 A simple VB application ("project" or program): user enters amount of sales then clicks the "Calculate button", the application displays the correct the "commission"

2. Structure of the "Desktop" and a "Window"

3. The "Commission" application

4. How to launch MS VB6.0 IDE from Desktop: start from the "task bar"

5. The "New Project" window: note the various types of projects

6. Configuring the VB environment: single document Interface (SDI)

7. Configuring the VB environment: single document Interface (SDI) continued Select the "SDI Development Environment"

8. Configuring the VB environment: single document Interface (SDI) continued Deselect the "Default to Full Module View"

10. Close and restart VB, choose "Standard EXE" as before VB displays "Tool Box", "Form", "Project", and "Properties" windows

11. Using "Tool Box" and "Properties" windows, you can easily design the layout (buttons and boxes, etc.) of the desired GUI of your application in the "Form" window. Note that the "Pointer" tool (an arrow) is now being selected

12. Right click anywhere in the gray area of the menu bar displays the "Shortcut" menu

14. Only one window can be active at a time; "Form" window is now the active window

15. Resizing the a window: move the Pointer to the border of a window, the arrow pointer changes to a double-headed arrow

16. Resizing the a window: notice the double-headed arrow continued

18. Moving a window: move the pointer to the blue Title Bar, drag the window to desired place on the window as shown in the next slide

20. The "Form" window is now approximately in the middle of the Desktop

21. The finished GUI for the "Sales Commission" project

22. Identify the tools available in the Tool Box The tool-tips Point to a particular tool icon in the Tool Box, VB automatically displays the tool-tip of the icon.

23. Windows that are needed to design the GUI

24. The "Label" icon in the Tool Box is being pointed to

25. The "Label" icon in the Tool Box has been selected. Notice the pointer change to a cross

26. Use the "Label" pointer (a cross) to draw or create a "Label" box (next slide). Each box in the Form window is formally known as an "object" whose "Properties" (attributes) can be defined through the "Properties " window. Each object or box is also known as a "control"

27. A Label Box has been created. Note that the box can be moved (point to the box, hold down the left mouse button and drag to desired location) and resized (use the resizing handles) as desired

28. The second Label box is created in similar manner

30. The "Textbox" tool selected

31. Holding down the left mouse button displays the left and top positions (relative to upper left corner of the Form window 0x0), size information is displayed in the Properties window

32. First Textbox created

33. Second Textbox created

35. "CommandButton" created

36. CommandButton is about to be moved

37. CommandButton is moved to new location

39. TextBox 1 is being resized (only the height here)

40. TextBox 1 is being resized (only the height here) continued

41. TextBox 1 has been resized (only the height)

42. TextBox 2 is being resized

43. TextBox 2 has been resized

44. Setting properties of various controls (objects or boxed) Each control or object is associated with a set of properties listed in the Properties window. The properties are listed alphabetically or by category (you can use either one by clicking the tab of your choice)

45. The "Caption" property Caption is the text displayed in a control or in the Title bar of a Form. Once set, the caption remains unchanged when the application (the program) runs.

46. Setting the "Caption" property of LabelBox 1. Note the FontColor properties is currently being selected

47. Caption property is selected. The default is "Label1" and is to be changed to "SALES"

48. Replace Label1 with SALES in the Properties box

49. "Label2" and "Command1" have been changed to "COMMISSION" and "CALCULATE", respectively. Also, "Form1" in the title bar is about to be changed to "Calculating Sales Commission"

50. "Form1" in the title bar has been changed to "Calculating Sales Commission"

51. Another way of activating an arbitrary control on a Form so that its properties can be changed

52. The "Text" property TextBox is usually used to display a value (may be numeric or non-numeric), which may be changed when the application is executed (run). In our example, the default values are "Text1" and "Text2" in two text boxes, and both are non- numeric (not numbers). We want to change the default values to "blanks" in our example. In other word, before the application is run, we want to display nothing (blanks) in these two boxes.

53. Change "Text1" and "Text2" to blanks in textbox1 and textbox 2

54. Change "Text1" and "Text2" to blanks in textbox1 and textbox 2 continued

57. Both text boxes have been blanked

58. The "Locked", "TabIndex" and "TabStop" properties The Locked property prevents the content of a text box from being changed (if set from "false" to "ture"). The TabIndex property controls the order or moving from box to box as the Tab key is pressed (0, 1, 2, 3, etc.). The "TabStop" property determines if a box is to be skipped if the Tab key is pressed (false to skip)

59. Setting the TabStop property of a text box; also the Locked property has been set to true

60. TabStop has been set to false for the CALCULATE control

61. Form1has been selected (click any empty area on the form)

62. Change the "Name" property of a control or object (it is critical to know that the name and caption are two different properties!!!)

63. The "name" property of Form1 (default) has been changed to SLSCOMSN

64. Form1 is not changed to SLSCOMSN in the Project window

65. Writing code (instruction): the more interesting and challenging part of application design The boxes you've so far created are just a GUI; nothing useful will happen to them unless appropriate code (program modules) is associated with those boxes. The code (coded in BASIC language) allows actions to be triggered, e.g., if SALSE amount has been properly entered, upon clicking the CALCULATE button (control), computed commission will be displayed.