1. IE 411/511: Visual Programming for Industrial Applications Lecture Notes #2 Introduction to the Visual Basic Express 2010 Integrated Development Environment

2. 2 OBJECTIVES In this chapter you will learn:  The basics of the Visual Studio Integrated Development Environment (IDE) that assists you in writing, running and debugging your Visual Basic programs  Visual Studio’s help features  Key commands contained in the IDE’s menus and toolbars  The purpose of the various kinds of windows in the Visual Studio 2010 IDE

3. 3 OBJECTIVES  What visual programming is and how it simplifies and speeds program development  To create, compile and execute a simple Visual Basic program that displays text and an image using the Visual Studio IDE and the technique of visual programming

4. 4 Introduction  Visual Studio 2010 is Microsoft’s Integrated Development Environment (IDE) for creating, running and debugging programs  A simple Visual Basic program can be created by dragging and dropping predefined blocks into place through visual programming

5. 5 Visual Studio 2010 IDE Overview  Start Microsoft Visual Basic 2010 Express Edition New Project button Start Page tab Collapsed Toolbox window Start Page links Empty Solution Explorer (no projects open)

6. 6 Visual Studio 2010 IDE Overview (cont.)  The Recent Projects section shows solutions you have been working on  Get Started focuses on using the IDE for creating programs, learning Visual Basic, connecting to the developer community and providing development tools Welcome tab Learn tab Upgrade tab

7. 7 Visual Studio 2010 IDE Overview (cont.)  The IDE also has an internal web browser Press Ctrl+Alt+R to access it

8. 8 Visual Studio 2010 IDE Overview (cont.)  Select File > New Project... to create a new project  Project templates are the project types users can create in Visual Basic A Windows Forms application has a graphical user interface (GUI)

9. 9 Visual Studio 2010 IDE Overview (cont.) Windows Forms Application (selected) Default project name (provided by Visual Studio) Description of selected project (provided by Visual Studio)

10. 10 Visual Studio 2010 IDE Overview (cont.)  Click OK to display the IDE in Design view Active tabTabsMenuMenu barSolution Explorer window Form (Windows Forms application) Properties window

11. 11 Visual Studio 2010 IDE Overview (cont.)  As you place controls on the Form, you will be able to modify their properties  The figure below shows where the Form ’s title text can be modified Text box (displaying the text Form1) which can be modified

12. 12 Visual Studio 2010 IDE Overview (cont.)  The figure below shows a dialog in which a control’s font properties can be modified OK button Cancel button

13. 13 Menu Bar and Toolbar  Many commands are contained in menus  The set of menus displayed depends on what you are currently doing in the IDE Example 1 - Visual Studio Form menu bar

14. 14 Menu Bar and Toolbar (cont.)  Summary of Visual Studio 2010 IDE menus

15. 15 Menu Bar and Toolbar (cont.) Comment out the selected lines Start Debugging Step Over Solution Explorer Extension Manager Error List Immediate Toolbox Properties Window Step Out Step Into  You can access common commands from the toolbar icons Open File Save All Copy Find Uncomment the selected lines Redo New Project Add New Item Save Cut Paste Undo Stop Debugging

16. 16 Menu Bar and Toolbar (cont.)  Select View > Toolbars  Each toolbar you select is displayed at the top of the Visual Studio window Additional Toolbars appear here

17. 17 Menu Bar and Toolbar (cont.)  Some icons contain a down arrow that you can click to display related commands Toolbar Down arrow indicates additional commands

18. 18 Menu Bar and Toolbar (cont.)  Positioning the mouse pointer over an icon highlights it and, after a brief pause, displays a description called a tool tip Tool tip displayed when the mouse pointer rests on an icon for a few seconds

19. 19 Navigating the Visual Studio IDE  The IDE provides windows for accessing project files and customizing controls Solution Explorer Window Properties Window Toolbox Window Start Debugging Step Over Solution Explorer Extension Manager Error List Immediate Toolbox Properties Window Step Out Step Into Stop Debugging

20. 20 Navigating the Visual Studio IDE (cont.)  Visual Studio provides a space-saving feature called auto-hide When auto-hide is enabled, a tab appears along the edge of the IDE window Icon for hidden window (auto-hide enabled)

21. 21 Navigating the Visual Studio IDE (cont.) Toolbox title bar Horizontal orientation for pin icon when auto-hide is enabled  Placing the mouse pointer over one of these icons displays that window

22. 22 Navigating the Visual Studio IDE (cont.) Vertical orientation for pin icon when window is pinned down  To “pin down” a window, click its pin icon  When auto-hide is enabled, the pin icon is horizontal  When a window is “pinned down,” the pin is vertical

23. Navigating the Visual Studio IDE (cont.)  Solution Explorer Window The Solution Explorer provides access to all of the solution’s files The solution’s startup project is the one that runs when you select Debug > Start Debugging 23 Show All Files icon Toolbar Startup project

24. 24  Clicking the Solution Explorer’s Show All Files icon displays all the files in the solution Navigating the Visual Studio IDE (cont.)

25. 25  The arrows can be clicked to expand and collapse the project tree Navigating the Visual Studio IDE (cont.) Black arrow indicates that the file or folder is expanded (changed from clear arrow)

26. Navigating the Visual Studio IDE (cont.)  Toolbox Window 26 Controls Group names

27. Navigating the Visual Studio IDE (cont.)  Properties Window Select View > Properties Window  The Properties window allows you to modify a control’s properties visually, without writing code At the top of the Properties window is the component selection drop-down list 27

28. Navigating the Visual Studio IDE (cont.) 28 Alphabetic icon Categorized icon Component selection Toolbar Properties Property values Description

29. 29 Using Help  There are a couple of options when accessing help while you program  However, you must specify which option you would like VB Express 2010 to use

30. 30 Using Help (cont.)  Defining which Help option to use  Select Help> Manage Help Settings  The following screen will appear

31. 31 Using Help (cont.)  Select the Help option to use and press OK

32. 32 Using Help (cont.)  To access Help, simply highlight a keyword and then press F1

33. 33 In Class Activity – Simple VB App  The figure below shows the result of a simple VB program as it executes Label control PictureBox control

34. 34 In Class Activity – Simple VB App (cont.)  Select File > New Project  From the template options, select Windows Forms Application Name the project ASimpleProgram and click OK Template types Type the project name

35. 35 In Class Activity – Simple VB App (cont.)  Select File > Save All to display the Save Project dialog box  To set the project location, click the Browse… button

36. 36 In Class Activity – Simple VB App (cont.) Name and type of object Property value Selected property Property description  When you first begin working in the IDE, it is in Design Mode The text in the Form ’s title bar is determined by the Form ’s Text property Change the value of the property Text as shown above and then press Enter

37. 37 In Class Activity – Simple VB App (cont.)  Click and drag one of the Form’s enabled sizing handles to make the Form larger Title bar Enabled sizing handles

38. 38 In Class Activity – Simple VB App (cont.)  Clicking BackColor in the Properties window causes a down-arrow button to appear  The arrow displays tabs for Custom, Web and System Click the Custom tab to display the palette

39. 39 In Class Activity – Simple VB App (cont.) Current color Down-arrow button Light blue Custom palette  Clicking BackColor in the Properties window causes a down-arrow button to appear  The arrow displays tabs for Custom, Web and System  Click the Custom tab to display the palette

40. 40 In Class Activity – Simple VB App (cont.) New background color  Once you select a color, the palette closes and the Form ’s background color changes

41. 41 In Class Activity – Simple VB App (cont.) Label control  Click on the tab labeled Toolbox to display the set of controls  Double click the Label control in the Toolbox

42. 42 In Class Activity – Simple VB App (cont.) AutoSize property  Set the Label’s Text property to Welcome to Visual Basic!  Set the AutoSize property to False so that you can resize the Label on your own

43. 43  Resize the Label so that the text fits  Center the Label control horizontally by selecting Format > Center In Form > Horizontally In Class Activity – Simple VB App (cont.) Sizing handles Label centered with updated Text property

44. 44 Ellipsis button In Class Activity – Simple VB App (cont.)  Select the Font property, which causes an ellipsis button to appear next to the value

45. 45 In Class Activity – Simple VB App (cont.)  When the ellipsis button is clicked, the Font dialog is displayed Under Font, select Segoe UI Under Size, select 24 points and click OK

46. 46 Text alignment options Middle-center alignment option In Class Activity – Simple VB App (cont.)  Select the TextAlign property  Set the TextAlign property to MiddleCenter to have the text to appear centered in the Label

47. 47 PictureBox Updated Label In Class Activity – Simple VB App (cont.)  The PictureBox control displays images  Locate the PictureBox in the Toolbox and double click it to add it to the Form

48. 48 Image property value (no image selected) In Class Activity – Simple VB App (cont.)  Locate the Image property  No picture has been assigned, so the value of the Image property displays ( none )

49. 49  Click the ellipsis button to display the Select Resource dialog In Class Activity – Simple VB App (cont.)

50. 50 Image file name In Class Activity – Simple VB App (cont.)  Click the Import… button  Locate Diffusion_energy.png, select it and click OK  The resource named Diffusion_energy represents Diffusion_energy.png

51. 51 SizeMode property set to StretchImage SizeMode property In Class Activity – Simple VB App (cont.)  Click OK to place the image in your program  Supported image formats include PNG, GIF, JPEG and BMP  To size the image to the PictureBox, change the SizeMode property to StretchImage

52. 52 In Class Activity – Simple VB App (cont.)  Resize the PictureBox, making it larger  Select File > Save All to save the entire solution (or Ctrl+Shift+S)

53. 53 Debug menu In Class Activity – Simple VB App (cont.)  Select Debug > Start Debugging to execute the program

54. 54 Form Running program IDE displays text (Running) which signifies that the program is executing In Class Activity – Simple VB App (cont.)  In run mode, the program is executing, and you can interact with only a few of the IDE features