2. Introduction to the Visual 2. Introduction to the Visual Studio .NET IDEStudio .NET IDE

Ch2 – Deitel’s Book

Chapter OutlineChapter Outline• IntroductionIntroduction

• Overview of the Visual Studio .NET IDE Overview of the Visual Studio .NET IDE

• Menu Bar and Toolbar Menu Bar and Toolbar

• Visual Studio .NET IDE WindowsVisual Studio .NET IDE Windows

• Solution Explorer Solution Explorer

– ToolboxToolbox

– Properties WindowProperties Window

– Using HelpUsing Help

• Simple Program: Displaying Text and an Image Simple Program: Displaying Text and an Image

IntroductionIntroduction

• Visual Studio .NETVisual Studio .NET–Microsoft’s Integrated Development Microsoft’s Integrated Development

Environment (IDE)Environment (IDE)– used by VB .NET and other languages to used by VB .NET and other languages to

create, run & debug programscreate, run & debug programs..• Visual programmingVisual programming–Dragging and dropping predefined building Dragging and dropping predefined building

blocks into place to create a simple Visual blocks into place to create a simple Visual Basic programBasic program

Overview of the Visual Overview of the Visual Studio .NET IDEStudio .NET IDE

When Visual Studio .NET begins execution, the Start Page displays

• Get StartedGet Started loads a page that contains a table listing loads a page that contains a table listing the names of recent the names of recent projectsprojects..

• What’s NewWhat’s New displays a page that lists new features displays a page that lists new features and updates for Visual Studio .NET. and updates for Visual Studio .NET.

•Online CommunityOnline Community links to online resources for links to online resources for contacting other software developers through contacting other software developers through newsgroups newsgroups and Web sites.and Web sites.

Overview of the Visual Overview of the Visual Studio .NET IDEStudio .NET IDE

• HeadlinesHeadlines provides a page for browsing news, provides a page for browsing news, articles and how-to guides.articles and how-to guides.

• Search Online Search Online to access more extensive information, to access more extensive information, users can select and begin browsing through the users can select and begin browsing through the MSDN MSDN ((Microsoft Developer NetworkMicrosoft Developer Network) online library, ) online library, which contains numerous articles, downloads and which contains numerous articles, downloads and tutorials on various technologies of interest to tutorials on various technologies of interest to Visual Studio .NET developers.Visual Studio .NET developers.

Overview of the Visual Overview of the Visual Studio .NET IDEStudio .NET IDE

• DownloadsDownloads displays a page that provides displays a page that provides programmers access to product updates, programmers access to product updates, code samples and reference materials. code samples and reference materials.

• The My ProfileThe My Profile link loads a page where users link loads a page where users can adjust and customize various Visual can adjust and customize various Visual Studio .NET settings, such as keyboard Studio .NET settings, such as keyboard schemes and window layout preferences.schemes and window layout preferences.

Overview of the Visual Overview of the Visual Studio .NET IDEStudio .NET IDE

Programmers can browse the Web from the Programmers can browse the Web from the IDE using Internet Explorer (also called the IDE using Internet Explorer (also called the internal Web browserinternal Web browser in Visual Studio .NET). in Visual Studio .NET). To request a Web page, type its address into To request a Web page, type its address into the location bar and press the the location bar and press the Enter Enter key.key.

Overview of the Visual Overview of the Visual Studio .NET IDEStudio .NET IDE

• To create a new Visual Basic program, click To create a new Visual Basic program, click the the New ProjectNew Project button , which displays the button , which displays the New Project dialog. New Project dialog.

• The Visual Studio .NET IDE organizes The Visual Studio .NET IDE organizes programs into projects and programs into projects and solutionssolutions, which , which contain one or more projects.contain one or more projects.

Overview of the Visual Overview of the Visual Studio .NET IDEStudio .NET IDE

• By default, the Visual Studio .NET IDE assigns the name WindowsApplication1 to the new project and solution.

• The Visual Studio Projects folder in the My Documents folder is the default folder referenced when Visual Studio .NET is executed for the first time.

• Programmers can change both the name of the project and the location where it is created.

Overview of the Visual Overview of the Visual Studio .NET IDEStudio .NET IDE

Menu Bar and Toolbar

The programmer can access menu commands from The programmer can access menu commands from the the toolbartoolbar, which contains pictures, called , which contains pictures, called iconsicons, , that graphically represent commands.that graphically represent commands.

Positioning the mousePositioning the mouse pointer over an icon pointer over an icon displays a descriptiondisplays a description called a called a tool tiptool tip

Menu Bar and Toolbar

Visual Studio .NET IDE Windows

• The IDE provides windows for accessing project files The IDE provides windows for accessing project files and customizing controls.and customizing controls.

•These windows can be accessed via the toolbar icons or These windows can be accessed via the toolbar icons or by selecting the name of the desired window in the by selecting the name of the desired window in the View View menu.menu.

Demonstrating the auto-hide feature

Solution Explorer

The The Solution Explorer Solution Explorer window provides access towindow provides access to all the files in the solution.all the files in the solution.

ToolboxThe Toolbox window contains controls used to customize forms. Programmers can “drag and drop” controls onto the form.

Properties WindowThe Properties window displays the properties for a form or control. Properties specify information such as size, color and position.

Using Help

The Help menu contains a variety of commands, which are summarized in the following table.

Using Help – Dynamic Help

Simple Program: Displaying Text and an Image

Create a program that displays the text “Create a program that displays the text “Welcome to Welcome to Visual Basic!Visual Basic!” and an image.” and an image.

The program consists of a The program consists of a single formsingle form that uses a that uses a label label controlcontrol (i.e., a control that displays text which the user (i.e., a control that displays text which the user cannot modify) and a cannot modify) and a picture boxpicture box to display the image. to display the image.

• select select File > New > Project... File > New > Project... to display the to display the New New Project Project dialog.dialog.• The IDE then loads the new single-project solution, The IDE then loads the new single-project solution, which contains a form named which contains a form named Form1Form1..

1. Create the new project.

2. Set the text in the form’s title bar.2. Set the text in the form’s title bar.

The text in the form’s title bar is determined by The text in the form’s title bar is determined by the form’s the form’s Text Text property.property.

3. Resize the form.3. Resize the form.

4. Change the form’s background color.4. Change the form’s background color.

The The BackColor BackColor property specifies a form’s or property specifies a form’s or control’s background color.control’s background color.

5. Add a label control to the form.5. Add a label control to the form.•Windows Forms button in the Toolbox.• Double-click the Label control in the Toolbox. • you also can “drag” controls from the Toolbox to the form.

6. Customize the label’s appearance6. Customize the label’s appearance

.

•Set the label’s Text property to Welcome to Visual Basic!.•Resize the label if the text does not fit.•Move the label to the top center of the form

7. Set the label’s font size and align its text.7. Set the label’s font size and align its text.

7. Set the label’s font size and align its text.7. Set the label’s font size and align its text.

8. Add a picture box to the form.8. Add a picture box to the form.

Locate the picture box in the Locate the picture box in the Toolbox Toolbox and then and then double click it to add it to the form.double click it to add it to the form.

9. Insert an image.9. Insert an image.

Click the picture box to display its properties in the Click the picture box to display its properties in the Properties Properties window. Locate the window. Locate the Image Image propertyproperty

No picture has been assigned, so the value of the No picture has been assigned, so the value of the Image Image property displays property displays (none)(none). Click the ellipsis . Click the ellipsis button to display the button to display the Open Open dialog.dialog.

9. Insert an image.9. Insert an image.

To size the image to the picture box, change the To size the image to the picture box, change the SizeMode SizeMode property property to to StretchImageStretchImage, which scales, which scales the image to the size of the picture box. the image to the size of the picture box.

9. Insert an image.9. Insert an image.

10. Save the project.10. Save the project.

Select File > Save All to save the entire solution.

11. Run the project.11. Run the project.•Up to this point, we have been working in the IDE Up to this point, we have been working in the IDE design modedesign mode (i.e., the program being created is not (i.e., the program being created is not executing).executing).

• In In run moderun mode, the program is executing, and , the program is executing, and programmers can interact with only a few IDE programmers can interact with only a few IDE features.features.

• Selecting Debug > Start Without Debugging executes the program.

Figure below shows the IDE in run mode. Figure below shows the IDE in run mode. Note that many toolbar icons and menus are Note that many toolbar icons and menus are

disabled.disabled.

11. Run the project.11. Run the project.

12. Terminate execution.12. Terminate execution.

• To terminate the program, click the running To terminate the program, click the running application’s application’s close close button (the button (the x x in the top-in the top-right corner). right corner).

• This action stops program execution and This action stops program execution and returns the IDE to design mode.returns the IDE to design mode.

In VS.NET the code you create is organized In VS.NET the code you create is organized using different layers of grouping :using different layers of grouping :– Solutions : Solutions : contain one or more projects.contain one or more projects.– Projects : Projects : contain more than one file.contain more than one file.– Files.Files.

ConclusionConclusion

• Solution Explorer : Solution Explorer : provides access to all the provides access to all the files in a solution.files in a solution.

• ToolBox : ToolBox : contains controls used to customize contains controls used to customize forms.forms.

• Properties Window : Properties Window : displays the properties displays the properties for a form or a control.for a form or a control.

ConclusionConclusion