ALMAJMA'AH UNIVERSITY College of Science and Humanitarians Studies in Alghat Information Technology Section (211Tal course) 1

جامعة المجمعة كلية العلوم والدراسات الإنسانية بالغاط قسم تقنية المعلومات مقرر 211 تال البرمجة المرئية 2

Chapter 2 Visual Studio 2010  Visual Studio is an Integrated Development Environment (IDE)  An IDE is a software application that provides comprehensive facilities to computer programmers for software development.  Visual Studio = IDE for developing Visual Basic Programs  Visual Basic = Programming Language  Visual Basic is designed to easily make user-friendly Graphical User Interfaces (GUIs). 3

Overview on.NET .NET is not a single programming language.  It includes:  Visual Basic  Visual J#  Visual C++  Visual C#  All these languages has the same source code 4

5  A GUI allows the user to interact with programs in more ways than typing. They use graphical representations of objects instead of simply text.  GUIs include:  Icons  Buttons  Drop-down boxes  Etc.

Developing a User-Interface  After you have successfully developed an algorithm for your program you can develop a user-interface.  This is often NOT the first step in development in the real world, but for this class it often will be.  Visual Studio allows you to literally draw the interface, and it writes the code for you.  These interface objects will automatically have basic functionality, and can accept events.  This is not how it works with most other programming languages and IDEs.  You have to write the code for what happens on these events.  Important Note: Event-Driven Programming is fundamentally different than traditional Procedural Programming 6

Developing a Visual Basic Program  So, how to we add functionality to our interface?  Answer: We write Event Procedures.  An Event Procedure is a set of instructions to be executed when a certain event happens.  For example, we can write an Event Procedure for when we push an “OK” button.  Almost everything in Visual Basic is either an Event Procedure or used by an Event Procedure.  Here’s the basic steps when developing a Visual Basic Program: 1. Design the appearance that the user sees. 2. Determine the events that the controls on the window should respond to. 3. Write the event procedures for those events. 7

How a Visual Basic Program is Run  When you run your Visual Basic program the following things happen: 1. Your program monitors the controls in the window to detect any event that a control can recognize (mouse movements, clicks, keystrokes, etc.) 2. When your program detects an event, it examines the code to see if you’ve written an even procedure for it. 3. If you have written an event procedure, the instructions in the procedure are executed and it goes back to step If you have not written an event procedure, it ignores the event and goes back to step 1. 8

Visual Studio Tutorial  New Project  On the opening screen click on “New Project”  Enter a name, a location for your project, and a solution name.  Click on “Windows Forms Application”.  Click the “OK” button.  Open an Existing Project  Click on “Open Project”  Navigate to you “.sln” file and double click on it.  Parts of the IDE:  Menu Bar – Has menus such as: File, Edit, View, Window, Project, Data, and Debug.  Toolbar – Holds buttons that perform common controls.  Document Window – Currently holding the Form Window.  Form Window – What your VB program will look like when you open it.  Properties Window – Used to change how objects look and react.  Solution Explorer – Shows files associated with the program.  Toolbox – Contains controls to put on your form. 9

10 Terminology tip  A computer program may also be called:  Project  Application  Solution

11 Visual Basic Start Page

12 Initial Visual Basic Screen 12

13 Toolbox

14 Four Controls at Design Time Text box To select a control, click on it. Sizing handles will appear when a control is selected.

15 Text Box Control  Used for input and output  When used for output, ReadOnly property is set to True Sizing handles Tasks button

16 Properties Window Categorized view Alphabetical view Press F4 to display the Properties window for the selected control.

17 Properties Window PropertiesSettings Selected control

18 Some Often Used Properties  Text  Autosize  Font.Name  Font.Size  ForeColor  BackColor  ReadOnly

19 Setting Properties  Click on property name in left column.  Enter its setting into right column by typing or selecting from options displayed via a button or ellipses.

20 Setting the Text Property 1.Click on Text property. 2.Type your first name

21 Setting the ForeColor Property 1.Click on ForeColor. 2.Click on button at right of settings box. 3.Click on Custom tab to obtain display shown. 4.Click on a color.

22 Font Property 1.Click on Font in left column. 2.Click on ellipsis at right of settings box to obtain display shown, 3.Make selections.

Visual Studio Tutorial  Textbox  Creating  Click on the text box tool  Click on the form to create default sized text box  Click and drag on the form to create custom size text box  Click on the text box to select it.  Push the delete key while it is selected to delete it  Properties Window (F4, clicking on it, toolbar button)  Name  Changes what the text box is called  Text  Changes what text is in the text box when the text box first appears. 23

Visual Studio Tutorial  Button  Properties  Text  Access Key – Putting an “&” in front of the text will give it an access key.  If you press “Alt + the first character in front of the &” it will do the same as clicking the button.  Label  Properties  AutoSize – If true, the text property will decide how big the label is. If false, you can resize it.  Tab Order – Sets the order in which the controls are focused on when the user hits tab.  To set the tab order, number the TabIndex property of the controls starting at 0. 24

Visual Studio Tutorial  Debugging/Stop Debugging  When you hit the “Debug Button” (The green play button), your program will compile and display what it will do.  You can then test and debug your running program.  To stop debugging either close your program normally or press the “Stop Debugging” button (The blue stop button).  Save All – Saves all files associated with the project  Click on the “Save All” button (The one with three disks) on the toolbar.  Or click on “File” in the menu bar and then “Save All” in the menu. 25

Naming  The naming (value of the name property) of controls should indicate what it is and what it does.  The name should include both what the object is in the form of a prefix, and what is does or if it doesn’t do anything specific, what it is. ObjectPrefixExample FormfrmfrmPayroll ButtonbtnbtnComputeTotal LabellbllblAddress Text BoxtxttxtCity List BoxlstlstOutput 26

27 Button Control  The caption on the button should indicate the effect of clicking on the button.  Text property determines caption.

28 Add an "access key"

29 Label Control  Used to identify the contents of a text box.  Text property specifies caption.  By default, label automatically resizes to accommodate caption on one line.  When the AutoSize property is set to False, label can be resized manually. Used primarily to obtain a multi- rowed label.

30 List Box Control  Initially used to display several pieces of output.  In Chapter 9 used to select from a list.  Does not have a Text property  Items property

31 The Name Property  Used by the programmer to refer to a control in code  Setting for Name property near top of Properties window.  Name must begin with a letter, be less than 215 characters long, and may include numbers and letters.  Use appropriate 3- or 4-character naming prefix

32 Control Name Prefixes ControlPrefixExample buttonbtnbtnCompute labellbllblAddress text boxtxttxtAddress list boxlstlstOutput

33 Renaming the Form  Initial name is Form1  The Solution Explorer window lists a file named Form1.vb.  To rename the form, change the name of this file to newName.vb  newName should begin with prefix frm.

34 Auto Hide  Hides Toolbox when not in use  Vertical push pin icon indicates auto hide is disabled.  Click the push pin to make it horizontal and enable auto hide. Push pin

35 Positioning Controls Proximity line

36 Aligning Controls Snap line

37 Aligning Controls Snap line

38 Tab Order Tab index The tab indices determine the order in which controls receive the focus during tabbing.

Visual Basic Events  An Event Procedure Walkthrough  Properties and Event Procedures of the Form  The Header of an Event Procedure

Alignment of Controls  Often you want your controls to be a comfortable distance away from each other and the edge of the form. Visual Studio makes it easy to do this.  When you drag a control toward the edge of the form or another control, a Proximity Line appears to ensure a comfortable distance is between the control and the other object.  When you drag a control in an area that is close to being either vertically or horizontally aligned with another control, a Snap Line appears to help align the controls. 40

Visual Basic Events  An Event Procedure Walkthrough  Properties and Event Procedures of the Form  The Header of an Event Procedure

42 Event  An event is an action, such as the user clicking on a button  Usually, nothing happens in a Visual Basic program until the user does something and generates an event.  What happens is determined by statements.

43 Sample Statements  txtBox.ForeColor = Color.Red  txtBox.Visible = True  txtBox.Text = "Hello World" General Form: controlName.property = setting

44 Sample Form txtFirst txtSecond btnRed

45 Focus  When you click on a text box, a cursor appears in the text box, and you can type into the text box.  Such a text box is said to have the focus.  If you click on another text box, the first text box loses the focus and the second text box receives the focus.

46 Examples of Events  btnShow.Click  txtBox.TextChanged General Form: controlName.event

47 Code Editor Method Name box Class Name box Code Editor tab Form Designer tab

48 Structure of an Event Procedure Private Sub objectName_event(...) Handles objectName.event statements End Sub (...) is filled automatically with (ByVal sender As System.Object, ByVal e As System.EventArgs) Header

49 Create an Outline for an Event Procedure; i.e. header and End Sub  Double-click on a control or  Use the Class Name and Method Name boxes. (We nearly always use the first method.)

50 Sample Form txtFirst txtSecond btnRed Double Click on txtFirst

51 Code for Walkthrough Public Class frmDemo Private Sub txtFirst_TextChanged(...) Handles txtFirst.TextChanged End Sub End Class

52 Code Public Class frmDemo Private Sub txtFirst_TextChanged(...) Handles txtFirst.TextChanged txtFirst.ForeColor = Color.Blue End Sub End Class

53 IntelliSense Automatically pops up to give the programmer help. txtFirst.

54 Code Editor Click tab to return to Form Designer

55 Sample Form txtFirst txtSecond btnRed Double-click on btnRed

56 Code Public Class frmDemo Private Sub txtFirst_TextChanged(...) Handles txtFirst.TextChanged txtFirst.ForeColor = Color.Blue End Sub Private Sub btnRed_Click(...) Handles btnRed.Click txtFirst.ForeColor = Color.Red End Sub End Class