This is what we are going to build in the next example that uses methods and properties/controls to create a basic Windows Form Application to browse and view web pages.Follow the instructions over the next few slides to build your first web browser!
The complexity does increase with the number of controls that are added but it will greatly improve the use of the webbrowser app
Should auto load google into the webbrowser app window
Extending the web browser
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)
ObjectiveTo extend the use of the WebBrowser methodby 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
Win Form App – Web Browser‘Title’ Property This button will invoke amethod to load a web page from the internet! ‘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 Properties1. 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 propertiesButton 1 Button 2 Name: BackBtn Name: RefreshBtn Text: Back Text: Refresh Size: 40, 40 Size: 40, 40Button 3 Button 4 Name: StopBtn Name: ForwardBtn Text: Stop Text: Forward Size: 40, 40 Size: 40, 40
Double click on the Back ButtonAdd the following code within the BackBtn_Clicksection:WebBrowser1.GoBack()
Double click on the Refresh ButtonAdd the following code within theRefreshBtn_Click section:WebBrowser1.Refresh()
Double click on the Stop ButtonAdd the following code within the StopBtn_Clicksection:WebBrowser1.Stop()
Double click on the Forward ButtonAdd the following code within theForwardBtn_Click section:WebBrowser1.GoForward()
Let’s do some tidying up!For each button or control,you can tell them where tostick to follow the window ifyou resize it.Click on the WebBrowsercontrol (the white bit)Scroll to the ‘Anchor’ propertyand type in: Top, Bottom, Left, RightSee what happens!
Now for the buttonsSet the following properties for each of yourbuttons 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
ExtensionWhat about using graphics / icons for thebuttons instead of text?Try looking online for stop / go / forward / backicons and investigate the properties list forsomething that might let you choose a graphicor 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!