Topic: Static and Web Oriented Control

• 1. TreeView Control
• 2. ProgressBar Control
• 3. Drag-and-Drop Operation
• 4. WebBrowser Control
  
  

1. Project using TreeView Control:

     The TreeView control is used to organise information in a hierarchial, structure.   The TreeView Control allows you to place information into an outline format similar to the one we see in Windows Explorer.   The figure 1 shows  the type of organization which we require and this is the run mode window of our project.   Drag a TreeView Control and three Command buttons in the form.   Set the caption and the name property of the buttons as shown in the figure
2 and arrange the controls accordingly.

                         Figure 1

                       Figure 2

Entering the Code:

     Open the Code window and enter the codes for the three command buttons as shown in the figure 1a.

Private Sub Command1_Click()
Dim nodx As Node
Set nodx = TreeView1.Nodes.Add(, , "R", "FoodTypes")
Set nodx = TreeView1.Nodes.Add("R", tvwChild, "Ft", "Fruits")
Set nodx = TreeView1.Nodes.Add("R", tvwChild, "Vg", "Vegetables")
Set nodx = TreeView1.Nodes.Add("R", tvwChild, "Mt", "Meat")
Set nodx = TreeView1.Nodes.Add("R", tvwChild, "Jf", "Juicy Food")
Set nodx = TreeView1.Nodes.Add("R", tvwChild, "Sf", "Salty Snacks")
nodx.EnsureVisible
End Sub

Private Sub Command2_Click()
Set nodx = TreeView1.Nodes.Add("Ft", tvwChild, "Ap", "Apple")
Set nodx = TreeView1.Nodes.Add("Ft", tvwChild, "Or", "Orange")
Set nodx = TreeView1.Nodes.Add("Ft", tvwChild, "Pr", "Pear")
End Sub

Private Sub Command3_Click()
Set nodx = TreeView1.Nodes.Add("Vg", tvwChild, "Bn", "Beans")
Set nodx = TreeView1.Nodes.Add("Vg", tvwChild, "Cr", "Carrot")
Set nodx = TreeView1.Nodes.Add("Vg", tvwChild, "Rd", "Raddish")
End Sub

       Figure 1a

Running the Project:

     On selecting the start button from the Run menu, the run mode window aoppears.   Now click the createlist button.   It will first create the first level list.   Then click the addfruit button.  The fruits list will be added at the second level..  Then click the addveg button.   The vegetables list will be added at the second level and the final window appears as shown in the figure 1.

2. Project using ProgressBar:

      The ProgressBar Control is used to pictorially represent the progress of a lengthy computer operation, say file copying or doing complex computations etc.   An advancing rectangular bar will usually denote the progress.   Drag a ProgressBar Control, a Text box and a command button and locate them in the form as shown in the figure 3.

                               Figure 3

Entering the code:

     Open the code window of the PictureBox and enter the code as shown in the figure 3a.  Select the Start button from the Run Menu and click the start button.   The run mode window shows the progress of the computation by an advancing rectangular bar and comes to a stop when the computation is over.   The Text box shows the percentage of progress completed. The run mode window is shown in the figure 4.

Private Sub cmdStart_Click()
    ' Set minimum and maximum values for progress
    ProgressBar1.Min = 1
    ProgressBar1.Max = 5000
    ' Loop 5000 times
    For i = 1 To 5000
        ' Set current value to loop value so progress will show status
        ProgressBar1.Value = i
 Text1 = CStr(i / 50) + "%completed"
    Next i
    ' Tell user routine is complete
    MsgBox "Done", vbInformation, "Complete."
End Sub

Figure 3a

                             Figure 4

3. Project involving Drag-Drop Operations:

     Many of the controls in VB-5 have a DragMode property which determines whether a control can be dragged or not with the mouse.   In this project the drag  property of a command button is illustrated by dragging it over a PictureBox Control.   Drag a PictureBox and a commands button and position them as shown in the figure 5.  Set the DragMode property of the button as 1-automatic.   Open the code window  of the PictureBox and enter the code as shown in the figure 5a.

                      Figure 5a
Private Sub Picture1_DragDrop(Source As Control, X As Single, Y As Single)
Picture1.BackColor = vbBlue
End Sub

Private Sub Picture1_DragOver(Source As Control, X As Single, Y As Single, State As Integer)
If State = 0 Then Picture1.BackColor = vbRed
If State = 2 Then Form1.Caption = "source control moves over the PictureBox"
If State = 1 Then
Picture1.BackColor = vbGreen
Form1.Caption = "Drag and Drop demo"
End If
End Sub
                   Figure 5a

On running the project you will notice that when the button is first dragged over the picture box, it is paintede red.   When the button leaves the picture box, the picture box is painted green.   If the user drops the button while it is over the picture box, the picure box is painted blue.   The run mode window is shown in the figure 6.

        Figure 6

• Project using WebBrowser:

     The WebBrowser ActiveX control acts like an Internet Explorer and so can be used to view all  html documents,   Thus it becomes possible to view all web pages from within Visual Basic.
oject using WebBrowser:

     Select Microsoft Internet Controls from the Component Dialog box and place them in the Toolbox.  The Web Browser control appears as a globe in the tool box.  Drag a Web Browser, a common dialog and a command button control in the design form.   The WebBrowser will appear as empty rectangle and increase its size to the maximum extent possible.   Change the Caption property of the command button as ‘browse’.   The design window will look as shown in the figure7.

 

               Figure 7

Entering the Event Code:

     Open the code window by double clicking the command button and enter the code as shown in the figure 7a.

Private Sub Command1_Click()
CommonDialog1.Filter = "HTML Files|*.HTM|Text Files| *.Text|All Files|*.*"
CommonDialog1.ShowOpen
If CommonDialog1.filename <> "" Then
WebBrowser1.Navigate CommonDialog1.filename
End If
End Sub

                        Figure 7a

Running the Project:

     Select Start from the Run Menu.   Then click the command button.   The Commmon dialog box will help you by displaying the file open dialog box.   Browse through the folders and select a html document.   In this case we have selected a html document containing a VBScript Program for printing the calender for the current month.   The html document looks as in the figure 7b.  The run mode window appears as in the figure 8.   You will ,find that the calender is displayed for the current month.   In fact you can browse any HTML document with this Web Browser.
 
<html>
<script language="vbscript">
dim imonth, thisdate, nextday, cday
imonth = month(date)
document.write "<center>"
document.write "<font face='verdanna' size=5>"
document.write "Calendar for " &date
document.write "<p>"
document.write "<table cellpadding=10 border><tr>"
document.write "<td><b>sun<td><b>mon<td><b>tue<td><b>
wed<td><b>thu<td><b>fri<td><b>sat"
document.write "<tr>"
thisdate=DateSerial(year(date), month(date), 1)
nextday=1
for cday = 1 to 7
if WeekDay(thisdate) > cday Then
document.write "<td></td>"
else
document.write "<td align=center> <font size=3>" & nextday
& "</td>"
nextday = nextday + 1
thisdate =DateSerial(year(date), imonth, nextday)
end if
Next
document.write "<tr>"
weekdays = 1
while month(thisdate) = imonth
document.write "<td align=center><font size=3>" & nextday
& "</td>"
nextday = nextday + 1
weekdays = weekdays + 1
if weekdays > 7 Then
weekdays = 1
document.write "<tr>"
end if
thisdate = DateSerial(year(date), imonth, nextday)
wend
document.write "</table>"
document.write "</center>"
</script>
</html>

            Figure 7b

                     Figure 8