This document provides instructions for extending a web browser application by adding additional controls and customizing properties. It discusses: 1) Adding buttons to navigate back, refresh, stop, and forward and linking each button to the appropriate web browser method through their click event. 2) Setting properties like size, text, and anchors for controls to position them and make the interface responsive to resizing. 3) Suggests using images instead of text for the navigation buttons and investigating properties to set graphic buttons. 4) Recaps that methods, controls, and properties can be combined to build applications like a simple web browser was demonstrated.

1. Lesson 3 – Extending the Browser
Computing

2. Quick Recap
• We primarily make Windows Form Apps
• Methods make things happen ( eg browse
website)
• Controls can be objects such as buttons in an
app
• Events are things that happen (eg click button)
• Properties are attributes that can be changed
(eg size, name, title)

3. Objective
To extend the use of the WebBrowser method
by adding additional controls

4. Let’s get started with our routine!
• Open Visual Studio
• Open your word doc – “VB Instructions.doc”
• V Studio > Tools > Options> Projects and
Solutions
– Copy and paste your network programs folder into
ALL 3 BOXES!!!
– Click ok
• File > Open > WebBrowser> Webbrowser.proj

5. It should look like…

6. Win Form App – Web Browser
‘Title’ Property
This button will invoke a
method to load a web page
from the internet!
‘TextBox.Text’ Property
will be the address of
our web page

7. Let’s look at how we can customise it
• Properties
– The form itself (background colour, size, title)
– The text box / address bar
– Buttons… lots of buttons!

8. Setting a start page using Properties
1. Click on the WebBrowser
section of the app (it will most
likely have a white background)
2. Scroll down to the URL property
3. Type in google.com
4. Save your work
5. Run the app using the
‘run/debug button’ (looks like
)
6. What happens?

9. Let’s add some controlling buttons
with the following properties
Button 1 Button 2
Name: BackBtn Name: RefreshBtn
Text: Back Text: Refresh
Size: 40, 40 Size: 40, 40
Button 3 Button 4
Name: StopBtn Name: ForwardBtn
Text: Stop Text: Forward
Size: 40, 40 Size: 40, 40

10. Double click on the Back Button
Add the following code within the BackBtn_Click
section:
WebBrowser1.GoBack()

11. Double click on the Refresh Button
Add the following code within the
RefreshBtn_Click section:
WebBrowser1.Refresh()

12. Double click on the Stop Button
Add the following code within the StopBtn_Click
section:
WebBrowser1.Stop()

13. Double click on the Forward Button
Add the following code within the
ForwardBtn_Click section:
WebBrowser1.GoForward()

14. Let’s do some tidying up!
For each button or control,
you can tell them where to
stick to follow the window if
you resize it.
Click on the WebBrowser
control (the white bit)
Scroll to the ‘Anchor’ property
and type in:
Top, Bottom, Left, Right
See what happens!

15. Now for the buttons
Set the following properties for each of your
buttons and address bar / text box:
CONTROL ANCHOR PROPERTY VALUE
Forward Button Top, Left
Back Button Top, Left
Stop Button Top, Left
Refresh Button Top, Left
Show / Go / Browse Button Top, Right
Address bar / Text Box Top, Left, Right

16. Extension
What about using graphics / icons for the
buttons instead of text?
Try looking online for stop / go / forward / back
icons and investigate the properties list for
something that might let you choose a graphic
or image instead of using the ‘Text’ property

17. Summary
• Use a combination of methods, controls and
properties to make applications
• We have made a simple web browser out of a
blank Windows Form App
• It’s just the start, it gets even better!

18. NEXT LESSON
Variables……