Lesson 3 – Extending the Browser

Computing

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)

Objective

To extend the use of the WebBrowser method by adding additional controls

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

It should look like…

‘Title’ Property

This button will invoke a method to load a web page

from the internet!

Win Form App – Web Browser

‘TextBox.Text’ Property will be the address of

our web page

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!

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 property3. Type in google.com4. Save your work5. Run the app using the

‘run/debug button’ (looks like )

6. What happens?

Let’s add some controlling buttons with the following properties

Button 3Name: StopBtnText: StopSize: 40, 40

Button 1Name: BackBtnText: BackSize: 40, 40

Button 4Name: ForwardBtnText: ForwardSize: 40, 40

Button 2Name: RefreshBtnText: RefreshSize: 40, 40

Double click on the Back Button

Add the following code within the BackBtn_Click section:

WebBrowser1.GoBack()

Double click on the Refresh Button

Add the following code within the RefreshBtn_Click section:

WebBrowser1.Refresh()

Double click on the Stop Button

Add the following code within the StopBtn_Click section:

WebBrowser1.Stop()

Double click on the Forward Button

Add the following code within the ForwardBtn_Click section:

WebBrowser1.GoForward()

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!

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, RightAddress bar / Text Box Top, Left, Right

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

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!

NEXT LESSON

Variables……