Visual Basic 101 (part 2)

In part one of this series, I discussed installing and setting up your Visual Basic environment in preparation for creating a bandwidth calculator for use with SAM's component monitors.

In this installment, I'll explain how to create the visual elements of the calculator.

Lesson 3 - The Build

First, open Visual Basic and create a new project. (Use the pictures above as a visual aid.)

Get the Form in Shape:

1. Stretch the Form to make it about twice as wide as it is high. (Select it and grab a corner node to do this.)
2. With the Form still selected, go to the Properties window to the right of the Form and find the Text property.
3. Change the default text from Form1 to Bandwidth Calculator.
   
4. Also in the Properties window, change the Name property to read frmMain.
   

Make a Container:

1. From the Toolbox on the left, select Groupbox and draw one on the left side of your Form. This Groupbox will house the majority of your controls. Ensure that it's wide enough to do so.
2. With the Groupbox still selected, go to the Properties window to the right of the Form and find the Text property.
3. Change the default text from Groupbox1 to Number of Monitors (1-10,000).
   
   

Label it:

1. From the Toolbox on the left, select Label, then draw four labels on the Form inside the Groupbox.
2. Change the text of these Labels to read, WMI, SNMP, RPC, and Nodes (ICMP).
3. Arrange them in the Groupbox on the Form as illustrated above.

Get the Textboxes out:

1. From the Toolbox on the left, select Textbox.
2. Draw four Textboxes below the Labels you created in the previous step.
3. Change the Text property of these four Textboxes to read nothing. (Delete the default text from the Properties window for each Textbox.)
4. Change the name of each Textbox using the Properties window. Rename these four Textboxes to txtWMI, txtSNMP, txtRPC, and txtICMP.
5. Arrange them under their respective labels (created in the previous steps).
   
   

Now we need Sliders:

1. From the Toolbox on the left, select TrackBar (a slider).
2. Place four TrackBars on the Form to the right of each Textbox you created in the previous section. (Note: These also go into the Groupbox.)
3. Change the name of each TrackBar using the Properties window.
4. Rename these four TrackBars  to TBWMI, TBSNMP, TBRPC, and TBICMP.
5. Arrange them to the right of their respective Textbox while still keeping them in the Groupbox.

More labeling:

1. From the Toolbox on the left, select Label.
2. Draw four labels on the Form inside the Groupbox and to the right of each TrackBar.
3. Change the Name property of these Labels to read, lblWMI, lblSNMP, lblRPC, and lblICMP.
4. Change the Text property of these Labels to all read 00.00 Kbps.
5. Arrange them in the Groupbox on the Form as illustrated above.
6. Add an additional Label above these four and change the Text property to read Per Protocol.

Adding a Picturebox:

1. From the Toolbox on the left, select PictureBox.
2. Place it and size it in the GroupBox as illustrated above.
3. To change the image of the PictureBox:
   1. Select the Image property for it from the Properties window.
   2. From there, click the ellipsis (...) button, then select Local Resource.
   3. Click Import, then select an image and click OK.
   4. Change the Name property of the Picturebox to picSpeak.

Add the Button:

1. From the Toolbox on the left, select Button
2. Place it on the Form and in the Groupbox next to the PictureBox.
3. From the Properties window, change the Name property of the button to cmdReset.
4. Change the Text property of the button to read Reset.

Still More Labeling:

1. From the Toolbox on the left, select Label.
2. Change the Text property of the Label to read Share of Bandwidth.
3. Place it outside of the Groupbox and to the top-right of the Form, as illustrated above.

The Pie Chart:

1. From the Toolbox on the left, under the collapsed heading, Data, select Chart.
2. Draw a Chart on the right side of the Form and outside of the Groupbox, as illustrated above.

   1. From the Properties window, change the Series property by clicking the ellipsis (...) button.
      

   2. Select ChartType and then select Pie from the dropdown menu.
   3. Click OK.

More Groupboxes:

1. Add two more Groupboxes to the Form.
2. Change the Text property of the first to read Total Number of Monitors.
3. Change the Text property of the second to read Recommended Bandwidth.
4. Arrange them on the Form as shown above.
5. Inside the Total Number of Monitors Groupbox, add a Label.
   1. Rename the Label in the Property window to lblMonitors.
   2. Change the Text property to read 0.
6. Inside the Recommended Bandwidth Groupbox, add a Label.
   1. Rename it in the Property window to lblTotal.
   2. Change the Text property to read 00.00Kbps.

Congratulations!

If you've done everything successfully, you should have a Form that looks something like this:

This probably looks a bit different from what you have, which leads to today's homework assignment.

Homework

Today, I've given you the minimum you need to design the calculator. That is, all the objects needed for the calculator to work are now on the Form. By now, I'm sure you've noticed there are many more properties that you can tweak, like the color and size of the fonts. Your assignment is to play with these properties and try and get the calculator to look as close in appearance to the one at the top of this page.

In the next installment, we'll begin coding.....oooooohhhhh.