Galaxy Viewer 1.0

Description: Create a 'viewer' that will show a picture based on a list box selection. Topics covered include adding items to a list box; loading pictures into an image box; using IF..THEN..ELSE.
Controls needed: List box, image box, command button.
Level: Beginner

Before you start create a sub-directory in your VB directory and name it explore; you can store all your tutorials here. Next create a sub-directory in the explore directory called galaxy for this project; unzip the galaxy.zip file to this directory, it contains the pictures you'll use for this project.

1. Open a new project and add a list box, 2 image boxes and 2 command buttons to the form (when your done it should look roughly like the image of the completed project above).

2. Now go to the properties box and set the following by typing in these new values; you can select the picture for imgLogo by clicking on the button in the Picture property and selecting ss.bmp. You can change the icon in the Form1 title bar by selecting the Icon property for Form1

The picture property for Form1 will place a picture directly on the form background rather than in the title bar, convenient if you want to add a custom background, though it does not support the stretch property so you may prefer stretching an imagebox on the form first. When you learn more you can write or find some code on the net to tile an image on the background similar to what is done on a webpage.

Control	Property	Set Value To
List Box	Name	lstPlanets
Image Box	Name	imgLogo
' '	Picture	ss.bmp
' '	Stretch	True
Image Box	Name	imgShow
' '	Stretch	True
Command Button	Name	cmdAbout
' '	Caption	&About
Command Button	Name	cmdQuit
' '	Caption	&Quit
Form1	Caption	Galaxy Viewer
' '	Icon	earth.ico

3. Save the project and form as "Galaxy".

Setting the Stretch property to true will make the picture resize to fit the image control or the picture box. Setting it to false will make the control change size to fit the picture size. The '&' that you see in &About and &Quit above simply designates the letter after the '&' as a hot key combination -so hitting ALT-A ,for example, is the same as clicking the cmdAbout button.

4. Ok, now let's warm up with a little coding. Double click on the 'Quit' command button and add the following statement;

Private Sub cmdQuit_Click()
'---------------------------------
'Exit the program  
'---------------------------------
    Unload Me
End Sub

The Me keyword refers to the current form -you can find more info in online help. I changed this to use Unload Me instead of the End statement. In a simple program like this End gives you a quick out, and is probably ok, but in a more complicated program you would probably have to unload forms and perform other clean-up before ending the program or risk leaving stuff in memory which might cause unexpected reactions or degrade the performance of your application. Mick Lambino, a fellow newbie, suggested that I might want to explicitly free the resources by putting something like the following in the Form_Unload event;

Private Sub Form_Unload(Cancel As Integer)
'---------------------------------
'Free all resources explicitly  
'---------------------------------
  Set imgShow.Picture = nothing
  Set imgLogo.Picture = nothing
  Set Form1.Icon = nothing
  Set Form1 = nothing
End Sub

Feel free to try this if you want, VB will actually clean up a lot of stuff on its own and this is a simple program -but there are times when you will have to do this so you may want to try it now. Every form in VB also has what is known as a Control Collection which acts something like an array of all the controls on the form; using this it should be possible to write code to loop through all items in the collection and unload them. You may want to check online help and the resources on my Great Links page for more information on this.

I can't over emphasize how important it is to comment your code. Proper commenting makes your code clearer and easier to maintain. Comment code with the single quote (not the apostrophe), use descriptive variable and procedure names to provide self-documenting code. For instance, a variable named FirstName or a procedure named OpenFile is more descriptive than X and Kalamazoo.

'--------------------------------------
'So you can create comments like this!
'Visual Basic ignores all of this so I 
'can write this...
'VB can't see me nah nah :-P
'
'Add information about sections of code 
'whose purpose might not be easily 
'understood by another programmer (or 
'even you if looked at much later). 
'--------------------------------------

Most will also provide additional information
in a header in each module or form if needed,
something like this...

'--------------------------------------
'PROGRAM: Galaxy Viewer
'--------------------------------------
'Programmer: Burt Abreu
'Version: 1a                   08/20/98
'
'Description: Picture viewer demo that
'also shows some basic control usage.
'Some programmers will even include a
'version history, bug fix index or in
'the case of a sub or a function info
'on how to call it like this...
'--------------------------------------
'Update History:
'--------------------------------------
'7/20/97: Version 1
'
'8/20/98: Version 1a modifies the xyz
'file and update abc. 
'--------------------------------------
'Usage Example:
'--------------------------------------
'Call MySub(para1,para2)
'     para1 = who knows
'     para2 = who cares
'--------------------------------------

I think that you'll agree that you have a much better
chance of figuring out the purpose of a program or its
variables and code if you add sufficient commenting.

5. Next double-click the About command button. We'll create a simple About box with your name, using the MsgBox function. Add this code;

Private Sub cmdAbout_Click()
'---------------------------------
'Creates a simple About box using
'the MsgBox function.
'---------------------------------
    MsgBox "Created by: Your Name Here", , "About"
End Sub

NOTE: The message box is a convenient way to display a small (what else) message box. Some common uses for this might be to warn of an error, supply information, or request a simple 'Yes' or 'No' response. There is much more that you can do with the message box -check online help to see how you can choose differnt options and icons.

6. Now save your project in the galaxy directory and run the program by pressing F5 or selecting Run and then Start from the menu; now try out your About and quit buttons. If you get an error message of any type re-check your code for syntax errors.

7. Ok, now let's add items to the list box; we'll use the AddItem method for this. Type the following code in the Form_Load event procedure;

Private Sub Form_Load()
'---------------------------------
'Add items to the List box using
'AddItem.
'---------------------------------
    lstPlanets.AddItem "Asteroids"
    lstPlanets.AddItem "Earth"
    lstPlanets.AddItem "Jupiter"
    lstPlanets.AddItem "Mars"
    lstPlanets.AddItem "Mercury"
    lstPlanets.AddItem "Meteor"
    lstPlanets.AddItem "Neptune"
    lstPlanets.AddItem "Pluto"
    lstPlanets.AddItem "Saturn"
    lstPlanets.AddItem "Space Craft"
    lstPlanets.AddItem "Sun"
    lstPlanets.AddItem "Uranus"
    lstPlanets.AddItem "Venus"
End Sub

8. Let's add some code to the lstPlanets_Click event procedure which will provide the action when our user selects something in the listbox;

Private Sub lstPlanets_Click()

Dim Path As String
'---------------------------------
'Create a variable named Path and
'assign it the path to where your
'graphics are; just to cut down on
'the repetition. Your path may be
'different from the one I have here.
'---------------------------------

Path = "c:\program files\devstudio\vb\myprojects\"

'-----------------------------------------
'Now we load load pictures into 
'the image box using an IF..THEN..ELSE 
'decision structure to test the ListIndex
'property. The ListIndex property holds
'the index value of the currently selected
'listbox item. 
'-----------------------------------------

If lstPlanets.ListIndex = 0 Then
        imgShow.Picture = LoadPicture(Path + "asteroid.bmp")
    End If
        
    If lstPlanets.ListIndex = 1 Then
        imgShow.Picture = LoadPicture(Path + "earth.bmp")
    End If
    
    If lstPlanets.ListIndex = 2 Then
        imgShow.Picture = LoadPicture(Path + "jupiter.bmp")
    End If
    
    If lstPlanets.ListIndex = 3 Then
        imgShow.Picture = LoadPicture(Path + "mars.bmp")
    End If
    
    If lstPlanets.ListIndex = 4 Then
        imgShow.Picture = LoadPicture(Path + "merc.bmp")
    End If
    
    If lstPlanets.ListIndex = 5 Then
        imgShow.Picture = LoadPicture(Path + "meteor.bmp")
    End If
    
    If lstPlanets.ListIndex = 6 Then
        imgShow.Picture = LoadPicture(Path + "neptune.bmp")
    End If
    
    If lstPlanets.ListIndex = 7 Then
        imgShow.Picture = LoadPicture(Path + "pluto.bmp")
    End If
    
    If lstPlanets.ListIndex = 8 Then
        imgShow.Picture = LoadPicture(Path + "saturn.bmp")
    End If
    
    If lstPlanets.ListIndex = 9 Then
        imgShow.Picture = LoadPicture(Path + "craft.bmp")
    End If
    
    If lstPlanets.ListIndex = 10 Then
        imgShow.Picture = LoadPicture(Path + "sun.bmp")
    End If
    
    If lstPlanets.ListIndex = 11 Then
        imgShow.Picture = LoadPicture(Path + "uranus.bmp")
    End If
    
    If lstPlanets.ListIndex = 12 Then
        imgShow.Picture = LoadPicture(Path + "venus.bmp")
    End If
End Sub

Run the program and test all the features, then save your program.

Congratulations! You have completed your first project. Review the code carefully and feel free to experiment. You learned some basic uses of the ListBox, AddItem, ListIndex, ImageBox, LoadPicture, MsgBox, Command Buttons, IF..THEN..ELSE and a few other things like creating and assigning a value to a string variable and commenting code.

If you want to experiment, you can open the project and choose Save Project As... then save the project as Galaxy11 for example, in case you make a mistake while your learning.

What's Next?

In our next project we'll add some additional features to the Galaxy project. We'll add a descriptive text box, our first function, a module and we'll explore some ways of making the program more efficient and readable with Select Case structure.

To download the pictures for the galaxy tutorial click here.