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

ide2.png

Lesson 3 - The Build

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


Get the Form in Shape:

  1. Stretch the Form from the lower right-hand corner to make it as large as possible. (Select it and then 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 Quad NOC.


Add the Tools:

tools.png
The table below explains the tools you need to put on the top of the form, as shown above. The tools used, from left to right in both the illustration above and the table below, are indicated by the header of the table.

 

Tool from the Toolbox:ButtonButtonText BoxButtonRadio Button

Radio Button

Radio Button

Radio Button

Link LabelLink LabelCheck boxCheck box
Change the Name property of this tool to:cmdBackcmdForwardTextbox1cmdGoQ1Q2Q3Q4LinkLabel1LinkLabel2chZoomchRefresh
Change the Text property to:<>GoQuadrant 1Quadrant 2Quadrant 3Quadrant 4Your link name hereYour link name hereAuto-ZoomRefresh views every minute.
Change the Anchor property to:Top-RightTop-Right


Important: Be sure the two check boxes are not checked. If needed, change the Checked property of each to False. Also, ensure the CheckState property is set to Unchecked for both.


Add a Timer

  1. Add a Timer from the Toolbox to the form. (When placed on a form, the timer will move to a taskbar below the form automatically.)
  2. Use the default name of Timer1.
  3. Set the Interval property to 60000 (60,000 milliseconds = 60 seconds.)
  4. Set the Enabled property to False.


Now the tough stuff:

  1. From the Toolbox, add a SplitContainer to the center of the form. Use the default name of SplitContainer1.
  2. Change the Dock property from Fill to None. You should now have something that resembles the following:
    panels1.png
  3. In panel 1, add another SplitContainer and leave the default name of SplitContainer2.
  4. Change the Orientation property from Vertical to Horizontal.
  5. In panel 2, add another SplitContainer and leave the default name of SplitContainer3.
  6. Change the Orientation property from Vertical to Horizontal.
  7. Change the SplitterWidth property of each SplitContainer to 10. You should now have something that looks like this:
    panels4.png
  8. From the Toolbox, add a webbrowser control for each of the four quadrants. Leave the default names. Place them in the order shown below:
    qw.png
  9. For the URL property of each browser, set the default navigation page (For example: http://123.4.15.7, or the Orion home page in your environment.)
  10. Save everything.

 

Homework

Today, I've given you the minimum you need to design the Quad NOC browser. That is, all the objects needed for the browser 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 browser to look as close in appearance to the one seen in part 1..

 

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