_ Unit 2: Visual Basic.NET, pages 1 of 13 Departme ent of Computer and Mathematical Sciences CS 1408 Intro to Computer Science with Visual Basic.NET 4 Lab 4: Getting Started with Visual Basic.NET Programming Objectives: The main objective of this lab is to understand how create Windows applications and learn how to use Microsoft Visual Studio.NET to create VB.NET applications. Terminology What is a computer program? A computer program is a set of instructions for a problem to be solved or a task or an event to be performed by a computer. What is a programming language? A programming language is a special language used to write computer programs such as C, C++, Java, C#, Visual Basic. A programming g language consists of: Keywords (Reserved Words) -- Words with special meaning that make up a high-level but must be programmingg language, cannot be used for any other purpose Operators -- Special symbols that perform various operationss on data Variables -- Used to store data in memory, namedd by the programmer Syntax Set of rules Similar to the syntax (rules) of a spoken language, such as English, strictly followed If even a single syntax error appears in a program, it will not compile or execute Statements -- Instructionss made up of keywords, variables, and operators. Procedures --- Set of programming statements that perform a specific task Comments (Remarks) Ignored when the program runs, help human reader understandd the purpose of programming statements In Visual Basic, any statement that begins with an apostrophe (') Methods of Programming Procedural Constructed as a set of procedures (operational, functional units) Each procedure is a set of instructions Object-Orient ted Uses real-world objects such as students, transcripts, and courses Objects have data elements called attributes Objects also perform actions
Unit 2: Visual Basic.NET, pages 2 of 13 Example of an Object This is a Visual Basic GUI object called a form Contains dataa and actions Data, such as Hourly Pay Rate, is a text property that determines the appearance of form objects Actions, such as Calculate Gross Pay, is a methodd that determines how the form reacts A form is an object that contains other objects such as buttons, text boxes, and labels Form elements are objects called controls This form has: Two TextBox controls Four Label controls Two Button controls The value displayed by a control is held in the text property of the control Left button text property is Calculate Gross Payy Buttons have methods attached to click events Event Driven Programming: Events The GUI environment is event-drivenn An event is an action thatt takes place within a program Clicking a button (a Click event) Keying in a TextBox (a TextChanged event) ) Visual Basic controls are capable of detecting many, many events A program can respond to an event if the programmer writes an event procedure The Programming Process of Developing an Application Step 1: Clearly definee what the program is to do For example, the Wage Calculator program: Purpose: To calculate the user s gross pay Input: Number of hours worked, hourly pay rate Process: Multiply number of hours worked by hourly pay rate (result is the user s gross pay) Output: Display a message indicating the user s gross pay Step 2: Visualize the application running on the computer and design its user interface Step 3: Determine the controls needed Control Name Description Form1 Default A form to hold these controls Textbox1 NumberBox1 Allows the user to enter the number of hours worked. Textbox2 NumberBox2 Allows the user to enter the hourly pay rate Label1 Defualt Description for Number of Hours Worked TextBox Label2 Defualt Description for Hourly Pay Ratee TextBox Label2 Defualt Description for Gross Pay Earned Label Label3 DisplayLabel Displays the gross pay, after thee btncalcgrosspayy button has been clicked Button1 GrossButton When clicked, multiplies the number of hours worked by the hourly pay rate Button2 ExitButton When clicked, terminates the application
Lab 4: Getting Started in Visual Basic.NET, page 3 of 13 Step 4: Define the values of each control s relevant properties Control Name Text ForeColor Font Size Others Form1 Default Wage Calculator Default None Size: 310, 315 Textbox1 HoursTextBox None (blank) Default 10 Size: Width: 100 Textbox2 RateBox None (blank) Default 10 Size: Width: 100 Label1 (Default) Number of Hours Worked Blue 10 (Default) Label2 (Default) Hourly Pay Rate Blue 10 (Default) Label3 (Default) Gross Pay Earned Blue 10 (Default) Label4 DisplayLabel $0.00 Red 10 MinimumSize: 100, 23 BackColor: Pale Yellow Button1 GrossButton Calculate Gross Pay Blue 10 Size: 100, 50 Button2 ExitButton Exit Red 10 Size: 100, 50 Step 5: Determine the event handlers and other code needed for each control Method Description GrossButton_Click Multiplies hours worked by hourly pay rate These values are entered into the HoursTextBox and RateTextBox Result is stored in DisplayLabel Text ExitButton_Click property Terminates the application Step 6: Create a chart or pseudocode version of the code Wage Calculator Application Gross Button Click Event: Retrieve text from HoursTexBox and assign (store) to Hours variable. Retrieve text from RateTexBox and assign (store) to Rate variable. Multiply Hours and Rate and store the result in Gross variable. Display result (Gross) in DisplayLabel Exit Button Click Event: Close the application. Step 7: Check the code for errors Read the chart and/or pseudocode Step through each operation as though you are the computer Use a piece of paper to track the values of variables and properties as they change Verify that the expected results are achieved Step 8: Use Visual Basic to create GUI (the forms and other controls identified) in Step 4 This is the first use of Visual Basic, all of the previous steps have just been on paper In this step you develop the portion of the application the user will see Step 9: Use the chart or pseudocode from step 6 to write the actual code This is the second step on the computer In this step you develop the methods behind the click event for each button Unlike the form developed on step 8, this portion is invisible to the user Step 10: Attempt to run the application - find syntax errors Correct any syntax errors found Syntax errors are the incorrect use of an element of the programming language Repeat this step as many times as needed All syntax errors must be removed before Visual Basic will create a program that actually runs
Unit 2: Visual Basic.NET, pages 4 of 13 Step 11: Run the application using test dataa as input Run the program with a variety of test data Check the results to be sure that they are correct Incorrect results are referred to as a runtime error Correct any runtime errors found Repeat this step as many times as necessary Task 1: Running a VB Application In this task, you will learn how a VB application looks like and how it works. Activity 1.1: Download Wage Calculator application from my webpage. Note that the file that you will download is a zip file. So, follow these steps: 1. Click on the link Wage Calculator 2008 or Wage Calculator 2010. 2. File Download window will appear. Then click on Open button. 3. Windows Explorer will appear. Click on Extract files under the menu bar. 4. Extract Compressed (Zipped) Folder windoww will appear. Click on Browse button to locate the location to save the application. In this case, the location is your USB drive. 5. Select a destination window will appear. Then click on OK button. 6. It will bring you back to Extract Compressed (Zipped)) Folder window. Click on Extract button. You should have the application saved on your USB drive.
Lab 4: Gettingg Started in Visual Basic.NET, page 5 of 13 There are two ways to start Visual Studio.NET 2008 1) From the Visual Studio.NET icon, highlight the icon then press Enter key or double click on the icon. 2) From the All Programs command, click on Start button and then select All Programs command from the Start menu as shown in Figure 1. Then choose Microsoft Visual Studio.NET command in the Microsoft Visual Studio.NET command menu as shown in Figure 2. Figure 1: Menu from Start button Figure 2: All Programs After you started Visual Studio.NET, a Visual Studio.NET Start Page with a title Start Page Microsoft Visual Studio like in Figure 3a will appear on the screen. Under the Recent Projects section, as shown in Figure 3b, it will show a list of existing projectss and the date that the project was last modified. Usually the first time you start Visual Studio.NET, the Recent Projects section should be empty. To start a new VB project, click on Project in the Create: line in the Recent Projects section in MS Visual Studio Start Page. But if you want to open an existing project, click on Project on the Open: line. Figure 3a: Visual Studio.NET Start Page Figure 3b: Recent Projects Section Activity 1.2: Start VB.NET. On the Start page, click on Project on the Open: line. Open Project windoww will appear. Locate the folder Wage Calculator on your USB drive. Double on the folder. You should see a Microsoft Visual Studio Solution file. Then select the file and click on Open button. This will open Wage Calculation application. The Visual Studio Integrated Development environment (IDE) will appear. It will look as follows
Unit 2: Visual Basic.NET, pages 6 of 13 form view code view Activity 1.3: Run application Wage Calculator by pressing F5 orr clicking on. Try several combination of values for the hours worked and the rate as well as check on both buttons. Task 2: Create the First Application In this task, you will learn how to create a VB.NET application. Activity 2.1: In this activity, you will learn how to use the VB.NET Integrated Development environment (IDE) to create and save a VB.NET Windows application. You will call your VB.NET application project as Lab4. Click on Project link under Create: in Recent Projects window as in Figure 3b in MS Visual Studio.NET Start Page, a New Project window will appear as shown in Figure 4. Then follow these steps: Figure 3: New Project dialog window 1. Make sure that under Project types: section Visual Basic language is selected. Under Templates: section select Windows Forms Application. This is to indicate that the project to be created is a Windows application in VB.NET. 2. Name the your project in the Name text box You should see the default name appears in the Name textboxx as WisdowsAppliction1 or something similar. Rename it as Lab4 by typing over the default name. 3. Click on Browse button to change destination to your USB drive. 4. To complete creating Lab4 project, just click OK button.
Lab 4: Gettingg Started in Visual Basic.NET, page 7 of 13 After the OK button in Step 4 is clicked, Visual Basicc.NET IDE window with titled: Lab4 Microsoft Visual Basic.NET [design] Form1.vb [Design] as shown in Figure 5 will appear and you are ready to crate a Windows application. Figure 4: Visual Basic.NET environment windoww Note thatt after you save your application, there are 3 folders and 5 files created at the location that you saved as follows: Lab4 folder binn folder objj folder Myy Project folder Form1.Designer.vb (Visual Basic Source file) Form1.vb (Visual Basic Source file) Lab4 (Visual Basic Project) Lab4.vbproj (Visual Studio Project User Options) Figure 5: List of folders and files created by VB.NET Before you go on to create a VB application, you should get familiar with VB.NET IDE components. Title Bar The Title Bar is the colored bar at thee top edge of the VB.NET IDE window shows the name of the current project (in your case the title should be Lab4) as shown in the following figure. Menu Bar The Menu Bar as shown in the figure below shows the menu of commands used to perform any activities related to project or appearancee of the window.
Unit 2: Visual Basic.NET, pages 8 of 13 File Menu The File menu as shown in Figure 7 can be opened by clicking on the File command in the file menu. It contains the commands for opening a new project or file, opening an existing project or file, add new or existing item, open and close solution, save forms, Figuree 6: The File Menu View Menu The View menu as shown in Figure 8 can be opened by clicking on the View command in the file menu. It contains the commands for opening any window of VB.NET IDE components such as toolbox, properties window. Debug Menu The Debug menu as shown in Figure 9 can be opened by clicking on the Debug command in the file menu. It contains the commands for compiling, debugging, your applications. executing of Figure 7: The View menu Figure 8: The Debug Menu Tool Bar The tool bar as shown in the figuree below shows the icons that provides a quick access to often used commands in the Menu bar. Solution Explorer Window The Solution Explorer window as shown in Figure 10 displays a hierarchical list of projects and all items contained in a project. It also referred as Solution Resource Window. Tool bar of Solution Explorer window contains icons such as View Code -- quick access to the Code windoww and View Designer -- quick access to the Form window. Figure 9: Solution Explorer Window
Lab 4: Getting Started in Visual Basic.NET, page 9 of 13 Toolbox Window The Toolbox window as shown in Figure 11 contains a set of controls that can be placed on a Form window to produce a graphical user interface (GUI goo-ey ). The toolbox can be opened by choosing the command Toolbox in the View menu. Properties Window The Properties Window as shown in Figure 12 contains the list of property settings for the selected Form or control. Its properties can be modified from the Properties Window. Figure 10: The Toolbox Window Figure 11: The Properties Window Form Window The Form Window as shown Figure 13 in the From1.vb [Design] window as shown in Figure 14 is used as a window to hold desired control items during the design process to produce a graphical user interface. By default the Form Window appears first in the VB.Net IDE with a title as Form1. The title and the size of the window can be modified through the Properties window. Figure 12: Form Window Figure 13: Form1.vb [Design] Window You should get familiar with these components, so you can use them in the next activity. Task 3: Adding Controls in the Form In this task, you will learn how to add Label and Button controls into the VB.NET Form. Activity 3.1: Change the title from Form1 to Hello by following these steps: 1) Click on Form1 window to make the window active or chosen. 2) Look for Text property in the Properties window and click on it. 3) Change the text from Form1 to Hello by typing the word Hello and press enter.
Unit 2: Visual Basic.NET, pages 10 of 13 You should see the title changed from Form1 to Hello on the title bar, Note that the title of the form is the name of title bar of the window that appears when you run or executee this application. Activity 3.2: Resizee the width and height of Hello window or Form1 windoww to 400 and 250 pixels by following these steps: 1) Click on Size property in the Properties window. Make sure the Hello window is active. 2) Change its width (the first number) to 400 and height to 250. Activity 3.3: Add a Label control from Toolbox window in Hello window by following these steps: 1) Click on Label in the Toolbox window. 2) Click inside the Hello window. A label with a text named Label1 will appear. Activity 3.4: Modify the Label control in Activity 2.3, Label1, to display the text as Hello! (Hint: look for text in Properties window.) Activity 3.5: Change the name of Label1 control to HelloLabel. Click on Name property in the Properties windoww and change the name from Label1 to HelloLabel. Note thatt the name of a control is used as a variable that will be discussed later on. Activity 3.6: Change the MimimumSize property of HelloLabel to 150, 40. Activity 3.7: Change the text alignment (TextAlign property) from TopLeft to MiddleCenter. 1) Select TextAlign from the Properties window. 2) Click on the button a guidedd template with boxes will appear as shown in the figure below. TopLeft TopCenter TopRightt MiddleLeft MiddleCenter MiddleRight BottomLeft BottomCenter BottomRight 3) Click at the top center box for MiddleCenter alignment. The value MiddleCenter will replace TopLeft in the TextAlign box. The word Hello will be at the center of the HelloLabel. Activity 3.8: Change the size and the face of the font for HelloLabel control from 7.8 to 22 and regular to bold, respectively. There are two ways to do this. 1) Click on Font property in the Properties window. 2) Click on the + icon in front of the Font property, a list of Font properties will expand as shown in the right figure. 3) Change the Size to 22. 4) Change the face Bold to True. Or 2) After the Font property in the Properties window is selected from 1), an ellipses button will appear.
Lab 4: Getting Started in Visual Basic.NET, page 11 of 13 3) Click the ellipses button. The Font dialog window as shown at the right figure will appear. 4) Replace Regular with Bold in the Font style textbox or select Bold in the Font style list box. 5) Replace 8 with 22 in the Size textbox or select 22 in the list box. Activity 3.9: Add a Button control from Toolbox window in the Hello Form window. This is similar to adding the Label in Activity 2.3. Activity 3.10: Change the text of the button in Activity 2.8 from Button1 to English. Activity 3.11: Change the name of the Button1 to EnglishButton. Activity 3.12: Change the font size of now the EnglishButton to 12. Activity 3.13: Change the font style of the EnglishButto on to Bold. Activity 3.14: Change the ForeColor (foreground color or text color) of EnglishButton from default black to blue. 1) Click on ForeColor property in the Properties window. 2) Click on the button a color box with three tabs: Custom, Web, and System will appear as shown in Figure 15. Figure 14 a: Custom Color Pallet Figure 15 b: Web Color List Figure 15 c: System Color List 3) Select blue color from the Custom tab. The word English in the EnglishButton now is in blue. Activity 3.15: Resizee EnglishButton to 120, 40. Activity 3.16: Run the Hello VB.NET application by choosing Start command from the Debug menu or press F5 key from the keyboard. The window with title Hello will appear as shown in Figure 16. Note thatt if you click on English button inn Hello window, nothing will happen. The reason is you have not coded or program the English button what to do. Figure 15: Hello Application Task 4: Adding an Event Procedure or Code to Makee a Control Perform a task In this task, you willl learn how to add an event procedure or a code so when the English button in Task 2 is clicked, the word Hello in the label will be displayed in blue. Activity 4.1: Adding a code to English button. 1) Double-click on English button, the Code window will open with the event procedure named EnglishButton Click as shown in Figure 17.
Unit 2: Visual Basic.NET, pages 12 of 13 Figure 17: Code Window of Form1 with the event procedure named EnglishButton_Click 2) Insert the following code in the event procedure EnglishButton_Click HelloLabel.F orecolor = Color.Blue HelloLabel.Text = "Hello!" by typing the above code inside the procedure EnglishButton_Click before End Sub as shown below. Private Sub EnglishButton Click(ByVal sender As System.Object, ByVal e As System.EventA Args) Handless EnglishButton.Click HelloLabel.ForeColorr = Color.Blue HelloLabel.Text = "Hello!" End Sub Activity 4.2: Run the Hello VB.NET application by choosing Start command from the Debug menu or press F5 key from the keyboard. The window with title Helloo will appear as shown in Figure 17. Figure 17: Hello Application Activity 4.3: What will happen if you click on English button in Hello window? Task 5: Adding More Buttons In this task, you will modify the Hello VB.NET application that created in Task 3 by adding two more Button controls. Activity 5.1: Modify the Hello VB.NET application that created in Task 3 according to the following description. 1) Add two Button controls and Name the two Button controls as FrenchButtonn and SpanishButton with the text shown as Frenchh in red and the other Spanish in green, respectively. 2) Arrange all the controls Buttons and Label as shown in Figure 18. Figure 18: Hello VB.NET Application Design Form
Lab 4: Getting Started in Visual Basic.NET, page 13 of 13 Add the appropriate event procedures or codes to the FrenchButtonn and SpanishButton so that 1. When the French button is clicked, the label will display Bonjour! in red as shown in Figure 19. 2. When the Spanish button is clicked, the label will display Hola! in green as shown in Figure 19. 3. When the English button is clicked, the label will display Hello! in blue as shown in Figure 19. Figure 19: Hello VB.NET Application at Run Time Activity 5.2: Test you Hello VB.NET application by running it.