Don't Freak Out About Visual Studio
Summary: This is the first installment of the Visual Basic Newbie series written by MSDN staffer Betsy Aoki to help first-time programmers and "Visual Basic Newbies" get accustomed to the concepts and the environment provided by Visual Studio. The series is no substitute for formal study, a book, a good developer-friend, or perusing the MSDN Library, but is meant in a kindly way. (15 printed pages)
Think of this article as a personal therapist. Together, we will explore Visual Studio, pointing out its quirks and ignoring everything that would give us phobias about the programming to come. Visual Studio is actually a great tool that makes learning Visual Basic .NET easier, and as good as the Express versions are, there's nothing like playing with all the bells and whistles.
Admittedly, the title of the application is deceptively friendly. "I have eyes so I must understand the visual part, right? And then, well, every starving poet or bohemian artist has heard of a studio...this should be a piece of cake! I can see the goblets of champagne fizzing already as I code to thunderous artistic acclaim!" And then, sadly, instead of that edgy garret with French windows with filmy curtains and big shutters, or some trendy Soho brick loft space where everyone is wearing black, the newbie user sees...the Start Screen. And even though there are less tabs and gizmos here than anywhere else in Visual Studio, they start to wonder what they have let themselves in for. When they sign back into Visual Studio again after the first time, the information can seem even more overwhelming. I promise, this article will be cheaper than seeing a real therapist and more fun, too.
Figure 1 below shows what a typical Visual Basic developer's start page looks like after opening Visual Studio once and having the chance to set up the left panes while doing their projects. The links on the left are the most recent projects, and clicking on them takes you straight back to those projects.
Figure 1. Visual Studio .NET 2003 Start Page
Figure 2 provides an example of what the Visual Studio interface looks like after you've started coding. (Maybe you want to reference another project in the middle of what you are doing now).
Figure 2. Start Page after changes
This is included because you need to recognize the start page no matter which pane displays it. You really can't miss it—blue tabs, looks like a Web page—in the first startup it will cover the whole screen, be largely empty, and what labels you do see won't be confusing. What will be confusing is when it shows up elsewhere, as above. So we've broken you in early.
What can help save your sanity is the My Profile tab, accessible from the Start Page. If you ever get stuck during a project and think you've made your Visual Studio panes completely messed up, go to the Start Page, click on the My Profile tab, and set things up to the defaults for Visual Basic developers, which look like Figure 3.
Figure 3. Resetting your profile
Okay. You want to bite the bullet and actually start a new project. Go to the File menu and select New, and then select Project.
Once in the New Project interface, select Visual Basic Projects, and then Windows Application as shown in Figure 4. I know, you might be doing a Web application, but in this example, just humor me.
Figure 4. New Project
At this point you may be asking some questions. Why do you have to tell Visual Studio that you are doing a Visual Basic project? For image processing software, you just launch the application and then figure out what you are going to make, and eventually what format the project becomes. Why do you tell Visual Studio you are coding in Visual Basic?
It boils down to this, mostly so that the application can allow you to cheat and be lazy—I mean, support you in any way it can—while you are coding your project.
Telling Visual Studio that you will be coding in Visual Basic means Visual Studio will have readied the syntax checking and the already-created objects, properties, and methods relevant to that language available to you when you code. (We will get to objects, properties, and methods in other articles.).
So, hit the OK button and you are now in your new project. To save you some time, we've encapsulated the overload reaction in Figure 5 below.
Figure 5. Reaction to the newly created project
Without asking you, Visual Studio has gone ahead and made you a form in the design mode (the left pane). It's probably stacked a lot of stuff on the right side, or perhaps more ominously the right side is curiously empty and bare. To make matters worse, if you click the wrong way or mouse too quickly, you can DETACH THE WINDOW PANE FROM WHERE IT USED TO BE AND HAVE IT FLOAT AROUND! AAAAAAAAAUUUGH! And you don't even know what any of the darn things do yet!
(By now some of you are blowing on your knuckles, rubbing them on your shirt, as if to say: I wasn't afraid. Betsy, you are the only neurotic one. Applications don't scare me. That's why I want to become a programmer.
To you I say: What are you doing reading an article called Don't freak out about Visual Studio? This is for the people of sanity and wisdom who would prefer that life be a sensuous garden full of promise and hope, who want more out of cuisine than pizza and beer (at least in the morning), and who aren't absolutely fascinated by tiny little icons with cryptic labels. All we want to do is get the job done, and instead we are inundated with screens with tiny little letters and pictures. Ahem. End of freak out.)
Everyone take heart. Once you know what the icons and labels are for, I can promise you that the birds will sing, the trees will wave their branches and knock the birds off, and you will then see Visual Studio as a luscious garden of programming delight, but you need to get through the awkward stages of overload first.
The first thing to do is check out the big square thing on the left, already labeled Form1 (Figure 6). This is your happy-graphed playground. This is the joyous visual part. You will be able to drag-and-drop items onto this form, fool around with them, and tell your mom that you've coded something just by dragging and dropping. Life is good. Note that you can stretch and size the form. This comes in handy later.
Figure 6. Parts of the IDE
To the immediate top right, under the menu bar is another section. It starts with Solution Explorer as a default and it gives you something that looks like Figure 7 (my project is very simple and doesn't have much in it).
Figure 7. Solution Explorer
The Solution Explorer can take you between files in your solution. This is an abstract representation, which is not actually the same as what you will see on your hard drive.
Visual Studio creates a number of different files while you are creating your computer program and groups them together on your hard drive into something called a Project. Most often when you look inside the directory for Visual Studio projects, you will see a directory with your solution's name. Inside that will be ANOTHER directory with your solutions name, a file with a .sln extension, and a .suo extension. Double-clicking on the .sln file gets you into your project with all the settings intact, windowpanes where you left them. Project files (.proj) store data relevant to the projects that you are working on and are classified in Visual Studio for what you are trying to make (a Windows form, an XML file, and so on).
You can get into your design mode/code view by clicking on either a project or a solution file, but it's usually best to click on the solution file so that all the settings Visual Studio needs are preserved.
You can learn more about solution files at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vsintro7/html/vxgrfFileTypesFileExtensionsInVisualStudioNET.asp. And more information on project files at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon/html/vbconProjectItemsInVisualBasic.asp.
The solution is conceptually all the moving parts (could be multiple projects) that have to be tied together when you finally complete your Visual Basic computer program into something someone else can use (usually in .exe format).
When you click Build Solution (top menu), Visual Studio takes the things that you've written in Visual Basic, plus some other items it generates automatically, and compiles the program into something that will run whenever it is clicked. A Visual Studio project can have more things in it than the jigsaw puzzle files of your solution—there are things that it needs to keep itself going as part of the IDE, or Integrated Development Environment.
Why am I telling you all this? Because you need to know what to ignore, for now, as a beginner. Later on as you become more proficient in Visual Studio, you will care more about the disparate files and parts, but the "oh no" emotion needs to be removed from the interfaces you are using most often. For later, though, you are going to need to know how to find your Visual Studio files on your hard drive and understand what makes up the solution that you eventually build into an exe.
Okay, so what other things might be in the top right or lower right pane?
One thing I insist on having on the right is the Toolbox. You get it by going to the View menu and selecting Toolbox or using the key combination shown in Figure 8.
Figure 8. Viewing the Toolbox
Selecting toolbox should give you something like Figure 9.
Figure 9. The Toolbox
But sometimes the Toolbox shows up in a different spot than you plan. No matter, like I said, these things are movable and detachable, and you can put it under the solution explorer on the right (my preference). Dragging and dropping is your key to survival.
Another quite useful item is the Properties Window (you can get this to show up selecting the F4 key, or you can select it under the View menu). The cheater way is to actually be in the middle of designing your form, and then summon the properties window when you need it. For example, say I've dragged a button over from the toolbox to my form so it looks like Figure 10.
Figure 10. Adding a button
Instead of double clicking on the button, right-click on it. The right pane will switch to show you the Properties Window. Figure 11 is a sassy screenshot showing what would happen with the Properties Window fully exposed.
Figure 11. Properties Window
As you scroll down, you see that what looks like a very empty Form1 on the left in design mode but you have a lot of things to decide about on the right. We aren't going to delve into them here, but pause for a moment and think about how hard this would be if you faced a blank, white page (ala Notepad or Microsoft Word). You'd have to look up the code to make the form show up. You'd have to look up each of the properties that a form has associated with it, in order to make it show up the way you want.
Instead, Visual Studio coughs up the complete list of what is possible and leaves you to decide what you want to do. Instead of an abstract conception, you get a visual representation (through the design mode and the properties list) of things that are very hard to memorize and visualize.
Back to Form1 on the left. Double-click on the button, and this should send you to the code view shown in Figure 12. Aren't the pretty colors nice? Remember, Van Gogh used these colors...but he couldn't write applications!
Figure 12. Code Window
See all that stuff at the top that has a lot about Me.Button1? That's generated by Visual Studio automatically and happens every time you add another button. It's a subtle distinction on the screenshot, but now look where the cursor insertion point is.
That's the point where Visual Studio expects you to put in your own code—the code that will tell the button what to do when someone clicks on it.
If you want to get out of the code view, and back to the friendly visual form, click on the tab above the code work area that says Form1.vb [design]. That will get you back into designer mode rather than raw code mode. You can always get back to the code by double-clicking on the form itself, or on an element of the form with which you are working.
MSDN has some other Visual Studio walkthroughs using Visual Basic projects:
The blessed day has come. You finally finished a Visual Basic program. You've debugged it, commented it, put your programmer credits on it modestly in 72-point type on the opening screen, and now you want to give it to the world. Please let it not be a Hello World program; we have too many of those.
As we mentioned before, you would go to the Build menu and select Build Solution. Ideally, before you do this, make sure you have the Output Window showing (under View Menu, select other windows) and you will find it.
The Output menu shows you if your code's build was successful and what kind of errors, if any, occurred while it tried to build something. Figure 13 is what a successful window look like. Traditionally it shows up on the lower left side of your work area, but you can make it show up where you like.
Figure 13. What you want to see
The anticlimactic moment is when you realize that now you have to go hunt for that exe on your hard drive. Luckily it will always be found in the same place.
The default setting is to create an exe in the Debug folder under your Visual Studio project.
C:\Documents and Settings\user\My Documents\Visual Studio Projects\Myproject\myproject\obj\ Debug
Sometimes you may want to do one build in debug, and when that is done, create a final version in Release. You do this by going to the Configuration Manager under the Build menu and selecting Release, as shown in Figure 14. It creates the release folder and your program with a file extension of .exe.
Figure 14. Configuration Manager
This .exe file extension means that Visual Studio has compiled your code and now it is executable. You can send this exe to a friend and freak them out that you are sending them a virus! (Just kidding, how about put your code on a floppy and hand deliver it). In the .exe format, the friend will be able to run it. Figure 15 us a screenshotof a program named bankaccount.
Figure 15. Created Executable
Remember, in the default settings you will find this under the Debug folder.
Sometimes when you are running your project, it won't work and you try in frustration to edit the code and Visual Studio won't let you. This means your program never quit. To quit debugging your program, click on the button shown in Figure 16.
Figure 16. Ending your program
You can also try CTRL + break key.
And on that note, with luck you are feeling better about Visual Studio and Visual Basic. Sip your coffee, contemplate art and the meaning of life, and then go on and write the best darn Visual Basic you can. Cheers!
Betsy Aoki is a community PM for MSDN and TechNet. Her gentle neuroses are avidly expressed in her e-mails, blog posts, and Visual Basic .NET.