Extending the web browser
Download as PPTX, PDF0 likes213 views
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.
Extending the web browser
- 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!
Editor's Notes
- #3: Reinforcing Terminology
- #7: 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!
- #8: The complexity does increase with the number of controls that are added but it will greatly improve the use of the webbrowser app
- #9: Should auto load google into the webbrowser app window