This section is aimed at complete novices, people with previous programming experience are welcome to follow this tutorial but I doubt it will teach them anything they don't already know. In my opinion, the hardest part of learning a programming language is getting your head round the structure of it. I'm afraid that no book or tutorial can teach you this - as you program more and more you will develop your own programming style and soon the structure of the language will become second nature to you.

First things first, find your nearest Chinese takeaway and note down its phone number. I am going to use Visual Basic 3.0 for the tutorial because I believe it is a lot better to learn with than Visual Basic 4.0.

Ok, you must have seen the following lines before:

                        10: print "Hello World!"
                        20: goto 10

• Without using any controls:

  
                  For i = 0 To 10
                          Print "Hello World!"
                  Next i
  

  Here, "i" represents the number of times to loop. The original BASIC code will loop forever. Doing this in VisualBasic simply causes an "Overflow" error. Put the above code into the Form_Click event of a form and press F5. When you click on the form, "Hello World!" will be displayed 10 times. Experiment by chaning "i"'s value.

• The second way uses standard Windows controls. In this case, a command button and a label. This code is different to that of the above two examples. It prints "Hello World!" once and inside a label rather than on the main form:

  

  1. Drag a label onto your empty form.
  2. Drag a command button onto your form.
  3. Double click on the command button and type:

     
                     Label1.Caption = "Hello World!"
     

  4. Press F5 to run the application.

  You will notice that when you press the command button, label1 will display "Hello World!". This resembles more of a Windows application and is the method used by VisualBasic programmers. Forget the previous two examples, from now on we will be programming with controls. I had to show you all three examples so that you can see the differences VisualBasic has from your standard BASIC (Beginners All-purpose Symbollic Instruction Code).

Now would be a good time to order your Chinese takeaway. I learnt to program by example, unfortunately I didn't have anyone to help me like you have me!. By the end of this tutorial you should have a working VB application that you can call your own. "What type of program?" I've decided we'll write an image viewer, yup - nothing too complicated to start off with. Don't worry, I'll explain each section of the code as we go along.

Ok, lets start up VisualBasic 3.0 so we get a clean, blank form to work with. Drag a Directory List box onto your blank form, drag a Drive List box onto the form and place it underneath the Directory List box. Drag a File List box and put it to the right of the Directory List Box. Drag a command button onto the form and place it underneath the File List Box, change its caption to "View" by highlighting it and pressing F4 and altering the "Caption" property. Finally drag a Picture Box onto the form and place it to the right of the File List box. Ok, we have our main screen all ready, it should look something like this:

Notice that my layout resembles a Windows Open/Save dialog. Where possible in our applications we should try and maintain a standard; the result is the user of our program can learn it quicker and operate it faster. Righto then, onward to the next part.

This is going to be hardest part of this tutorial. I beg you to try and understand what the code does rather than just slapping it into the controls and pressing F5. If you do the latter then you're wasting your time. Don't look at me like that! Its easy honest...lets move on.

Well at the moment our little utility is pretty useless, it does nothing at all. We need to make the Directory, Drive and File listboxes interact with each other just like a proper Windows File dialog. Here's how we do it and its incredibly simple:

• Double click on the Directory Listbox. Notice you are in the Dir1_Change event. In here, you write code to handle the listbox when it is changed by the user.
• Type the following:

  
                          File1.Path = Dir1.Path
  

  What does all that mean? It means that we are telling the File Listbox to look in the path set by the Directory listbox when the user changes it. So when they double click on a directory or change to another one the File listbox automatically fills itself with the contents of the directory. Easy? Yes, but this will only work on one drive. We need to make the Drive Listbox interact with the other two controls.
• Double click on the Drive Listbox. Notice we are again in the Drive1_Change event because we want to activate this code when the user changes a selection in the listbox. Here's how:
• Type the following:

  
                          Dir1.Path = Drive1.Path
  

  Is that it? Yep, so far two lines of code and we have an almost complete Windows File dialog. What this code is doing is telling the Directory Listbox to look at the drive specified in the Drive Listbox and when the Drive Listbox is changed, to update the Directory Listbox with the contents of the new drive.

Part One/Step Three - Mummy! Mummy! I want my piccy!

This is where it gets tricky. We now need to get the selected filename, check that it is a valid Bitmap file and then load it into the Picture box. Lets press on.

• Double click on the File Listbox. You will notice that VB puts you into the Click_Event - we don't want this because Windows File dialogs require a double click to load a file. By all means put the code into the "Click" event but like I was saying earlier: its best to maintain a standard. Change to the File_DblClick event like this:
  

• Now type:

  
  On Local Error GoTo picture_error
  filename$ = dir1.Path & "\" & file1.FileName
  picture1.Picture = LoadPicture(filename$)
  Exit Sub
  
  picture_error:
  Select Case (Err)
      Case 481
          MsgBox "That is not a picture file!", 16, "Error"
          Exit Sub
      Case Else
          MsgBox "An error occured loading the picture!", 16, "Error"
          Exit Sub
  End Select
  

  Yikes!! Well yes, this is a bit more complicated - but don't worry, I'll talk you through each line.

  On Local Error GoTo picture_error

  Ok, read this line like a book. What its saying is, when an error occurs "locally" within the application then goto "picture_error" to handle it. The code for error handling is held in "picture_error" and only called when necessary, notice the other code breaks away with an "Exit Sub" before it reaches "picture_error".

  filename$ = dir1.Path & "\" & file1.FileName

  filename$ is a string, we know this because of its data-type being a "$" sign. There are several data types, "%" = 2 Byte Integer, "&" = 4 Byte Long but we don't need to go into them in detail. Simply, the "$" sign means that "filename" is capable of storing text.

  We then tell it to equal the current path that the Directory list box is looking at, for example this could be c:\windows and then we add the "\" followed by the file selected in the File Listbox. Without the backslash, filename$ would read for example: "c:\windows256col.bmp" which would cause an error - file not found, so we have to help the program a long a bit by adding the backslash where necessary. This is why computers are said to be stoopid. Ok, so now we have the variable filename$ holding the value of the Directory listbox path and the filename of the bitmap picture.

  picture1.Picture = LoadPicture(filename$)

  This is where the bitmap held in filename$ is loaded and displayed in the picture box. The code before the full stop references the control name and the code following the full stop represents the control's property that you are changing, hence "picture1.Picture". We follow that by an "=" operator and the command "LoadPicture" which will finally load the Bitmap into the "picture" property of "picture1". You might be looking at the code and thinking, why didn't I just put the "dir1.Path & "\" & file1.FileName" inside the brackets and dispense with the variable? Well yes I could have done that, but later on in the application you might need to get the filename of the picture again, its far quicker to write "filename$" than it is to keep writing "dir1.Path & "\" & file1.FileName".

  Exit Sub

  "Exit Sub" does exactly what it says, it exits the subroutine and returns you to the application. After loading the picture there is no longer any need to be in that subroutine so we bail out with that command. If we had omitted the "Exit Sub" then the application would have continued into the "picture_error" procedure and generated an error.

  picture_error:

  This is simply a label. It is just like a line number in standard BASIC. Remember the first line when we told the application where to look if there was an error? Well this is the code it will execute.

  Select Case (Err) This is what the VB Help file says about "case": "Executes one of several statement blocks depending on the value of an expression." Understand? Probably not. I'll try and simplify it for you.

  
  Select Case (Err)
      Case 481
          MsgBox "That is not a picture file!", 16, "Error"
          Exit Sub
      Case Else
          MsgBox "An error occured loading the picture!", 16, "Error"
          Exit Sub
  End Select
  

  The value held in "err" is the code of the error generated probably by the user clicking on an invalid file. The code for "Invalid Picture File" is 481 as stated in the Microsoft VisualBasic help files under "trapable errors". So we need to look for error 481 and "trap" it to prevent the program crashing. Select is the best method of doing it. I will show you another way of writing it which I feel is long-winded and hopefully you will see how simplistic Select Case is along side it.

  We could use an IF statement like this:

  
          If Err = 481 Then
                  MsgBox "That is not a picture file!", 16, "Error"
                  Exit Sub
          Else
          If Not Err = 481 Then
                  MsgBox "An error occured loading the picture!", 16, "Error"
                  Exit Sub                End If
          End If
  

  Which is cleaner? They both do the same job but I hope you can see how "Select Case" is more apropriate, especially if you wanted to look for more error codes along with 481.

  Case 481

  The Case statement is really handy and useful to use. It is the equivelent to:

  
                  If Err = 481 then
                          ....
                  End If
  

  We have already defined "Err" as being the conditon using the "Select Case(Err)" statement so all we have to do is type "Case < error code >" followed by the code we want to execute if the error code is generated. In this case we want to display a message. MsgBox "That is not a picture file!", 16, "Error"

  The "MsgBox" function displays a Windows style message box with the specified message in it. The format for "MsgBox" is: MsgBox(msg , type, title ) where msg is your message to be displayed, type is a number representing the style (16 = a stop sign) and title is the title of the message box.

  Case Else

  This is the same as the "Else" statement when writitng an IF block. It simply says if anything else is generated other than specified in the Case statements then do the following code. In this case we want to display another message box. Notice we return to the application with an "Exit Sub" after each message box to avoid the error occuring.

  End Select

  Finally, we finish the coding by telling the compiler that we have finished with the "Case" statement.

Now, if we press F5 to see how our application is doing we should be able to move around our hard drive, find a bitmap file (a file ending in BMP), be able to double click on it and it will be displayed in the picture box. If we click on a file that isn't a BMP the application will tell us we've done wrong but let us continue selecting files. Almost there now folks, honest!

Part One/Step Four - My mouse won't double click!...

We're nearly at the end of the program as well as our Chinese takeaway. Remember we created a command button? Well its time to make it do something. The button will do exactly the same as double-clicking on a file would do, some people find a button easier to use and I want to show you a nice trick as well. To make the button display the picture in exactly the same way as double clicking on the filename in the File Listbox:

• Double click on the command button to go into the Command1_Click event.
• Type the following code into the event:

  
                          File1_DblClick
  

Part One/Step Five - Yusssss!

Celebrate wildly by dancing round the room in a bikini with a bowl of fruit balanced on your head. Procede to force your program onto everyone that owns a computer and let them know that you are a programmer - almost ;-)

If you're game, you may want to move onto the Visual Basic 4.0 Tutorial...go on, I dare ya!