Quick Jumps
Getting Started
Solution Explorer
Create a WebBrowser
Make WebBrowser Look Good
|
Terms to Remember
- IDE=Intergrated Development Environment.
The IDE is the interface you use to create Visual Basic programmes. Once you open up Visual Basics your IDE is ready for you to use.
- Project
Upon opening Visual Basics you have opened a Project, this is where all the parts of your programme are kept.
- Form = Form Designer
The form represents a window that will display when the program is running. You drag and dop controls onto the form.
- Toolbox
The Toolbox is found on the left hand side. It has several tabs - Data, Components, All Windows Forms. Inside each tab there are controls or components that you can add to your application. The toolbox can be pinned open for ease of access. You can also list items in alphabetical order, you do this by right clicking an item and choosing "sort items alphabetically."
- Controls
Controls contain codes that tell the application what to do. EG button, browser.
- Properties
The properties window is found on the right hand side. You use the properties window to set the properties that will control the appearance and behaviour of the application. When you click on a control in the Form Designer that control is then opened in the properties window.
- Code
Code controls the program's functions.
- Code Editor
In the Code Editor window you will add code.
- Solution Explorer
The solution explorer is found on the right hand side. The Solution explorer allows you to open the properties panel, all files, code page, designer page and refreshes.
- Debug
The debug command runs your program. It can be found on the top toolbar. The Debug shortcut is F5.
Once you run Debug your program is opened up as a web page. All you have to do is drag and drop a few controls and write a very small amount of code. Visual Basics takes all the hard work out of coding.
- On the File menu, click New Project. The New Project dialogue box appears.
- Click Windows Forms Applicationand then click OK.
- If Solution Explorer is hidden, click the View menu and then click Solution Explorer.
- Right click Form1.vb in Solution Explorer, and then click View Code. The code editor appears.
- Right click Form1.vb in Solution Explorer again, but this time click View Designer. The Windows Form appears in Design view.
| Video br>
I'd like you to watch this video, it gives clear, simple instructions on how to create a web browser in Visual Basics. If you are having problems viewing this video try using Internet Explorer to open the website.
|
How to Create a WebBrowser
|
Transcript
Here is the transcript of the video. These notes will allow you to follow each step at your own pace. You may like to save these notes into your folder or print them out.
|
Browser Transcript
|
And here are the easy to follow, step by step instructions.
- I'll assume you already have Windows Application1 open.
- Pin open the Toolbox on the left hand side
- Choose All Windows Forms.
- Right click on one of the items and choose Sort Items Alphabetically
- Click and drag a Panel out onto the form and place it in the top left hand corner.
- Click and drag a Textbox out and place it on top of the Panel.
- Now drag a Button out and place it to the right of the text box. You can resize any of these to fit.
- Drag out a WebBrowser and place it under the panel.
- If you click onto each item you should see that each one shows up in the Properties window, to the right.
- Click on the Panel in the form, and then in the properties window choose Dock, go to the drop down menu and choose top. You will see the Panel change to fill up all of the top part of the form. Then in the Properties window go to Size, click on the plus button and change the height to 50.
- Click on Button1in the form, then in the Properties window where it says Text, change the wording Button1 to Hit Me! When you click back on your form you will see the Button wording change.
- Click on the Browser in the form, then in the properties window go to Dock and choose the big fat one in the middle. This is called the Fill.
- Now you can resize the textbox so that a url will fit into it and move the button over to the right. The whole web browser can be resized as well.
- Double click on the Button and the Coding Editor page will open up.
You will see that the cursor is flashing between the lines that start with Private Sub and End Sub.This is where you will be writing your coding.
- Write the following code.
WebBrowser1.Navigate(TextBox1.Text)
- As you write this code you will notice a small box of codes open up, you can highlight the required code and hit the Tab key to put the code in.
- Debug>Start Debugging or F5.>
- Now all you have to do is write a url (web address) in the Text box and press the Button.
Troubleshooting
If your program does not work, there are a few things you can check.
- Are you connected to the Internet?
- Make sure you typed the web address correctly
- Did you put the correct controls on the form?
- Did you type the code correctly?
I want you to think of a theme for your WebBrowser. You might like to put a picture as the background or just choose a colour. You may change the text colour. It may be necessary to change the height of your panel to make it larger. All of this can be done from the Properties window.
|
|