button controls and using methods to make a simple web browser

Computing

Lesson 2 – Properties and Methods

Quick revision quiz

1. What type of Visual Basic program creates a standard Windows application?

2. What window is used to change the properties (eg size, name,text) of a form or object?

3. How do you access the code of a control/object?4. Which property of a picture box do you set to

display an image?5. What is the default action/event for a button

(control)?

Answer time

1. Windows Form Application2. The PROPERTIES window3. Double click!4. The IMAGE property5. Click!

Lesson Objectives

1. Use controls to modify the appearance of a Windows Form Application

2. Describe what a METHOD is3. Use a Method in a code example

Revision – what is a control?

Anything that you can use in a program / application to trigger an event or call a

procedure

Practical Revision Time!

1. Go to Visual Studio2. (if you haven’t already) check your:

Tools>Options>Projects & Solutions settings

3. File > Open > Picture Box/Viewer

Let’s do our usual admin!

• Check the toolbox is pinned to the left• Check the properties window is sorted A-Z• Click once on the Form in the middle

Add a button with the properties:

Name

Location

Size

Text

btnEnlarge

338,261

21,23

+

NOTE!!!! If you changed the sizes/locations of your form/controls last lesson, you will need to adjust the properties shown on this slide to match your form!!!!!!

Add ANOTHER button with the properties:

Name

Location

Size

Text

btnShrink

359,261

21,23

-

NOTE!!!! If you changed the sizes/locations of your form/controls last lesson, you will need to adjust the properties shown on this slide to match your form!!!!!!

Double click on the ‘+’ button

Add the following code (no pressing the enter key yet):

Me.

Notice what happens when you type in the .

Scroll down to ‘Width’ and then press the TAB key to auto select it!

Let’s keep typing…

You should now have:Me.Width

Keep typing so that you end up with:Me.Width = Me.Width + 100Me.Height = Me.Height + 100

(Making sure to press the Enter key after each line)

Double click on the ‘-’ button

Type in this code:Me.Width = Me.Width - 100Me.Height = Me.Height - 100

(Making sure to press the Enter key after each line)

Try running your program

1. Click the + button on your form2. Click the – button on your form3. Get it to a size you are happy with4. Try opening an image using the “Select

Picture’ button5. Now resize the window using the buttons to

see what happens!6. Save it and then File > Close

Understanding Methods

DOG

Bark

Wag Tail

Eat

METHODSOBJECT

To put it simply

Invoking / triggering a method, code is executed

or, in English…

A method makes something happen in your program

How do I tell the difference between properties and methods?

A method looks like:AlbumForm.ShowDialog()

orMe.Close()

A property change looks like:

Me.Width = Me.Width + 100

‘Title’ Property

This button will invoke a method to load a web page

from the internet!

Win Form App 2 – Web Browser

‘TextBox.Text’ Property will be the address of

our web page

Web Browser – Create New Project

File > New >

Project > Windows Form Application

Name - SimpleWebBrowser

Web Browser – Add Controls (Web Browser)

1. Add WebBrowser from ToolBox

2. Click on the Smart Tag arrow as shown

3. Select ‘Unlock in Parent Container’

4. Adjust the size so that there is some space at the bottom for the other parts

1. Add TextBox from Common Controls

2. Move it to the bottom left

3. Edit its properties to be:

1. Name – TextBox12. Text – (leave blank)

Web Browser – Add Controls (Text Box)

1. Add a Button from Common Controls

2. Move it to the bottom right

3. Edit its properties to be:

1. Name – TextBox12. Text – ‘Show’

Web Browser – Add Controls (Button)

1. Your form should look like this with:

1. Web Browser2. ‘Show’ button3. Text Box

Web Browser – Check layout

Double Click on the button

Type in the following code:WebBrowser1.Navigate(TextBox1.Text)

Your code should look like (the green bit is an optional comment):

How does this work?

The WebBrowser Control uses the Navigate() method to navigate to the Text Property of the textbox (which just happens to be the website address that you typed in)

Summary

• A method makes something happen in code• A property changes how something looks• Properties and Methods work together in

programs

Quiz Time!

1. An attribute that changes the state of an object is called a …………?

2. To change the value of a property, the property is referenced on which side of the =?

3. Visual Basic 2010 is known as am object-oriented language – true or false?

Quiz Time!

1. Property2. Left3. True!

Done! Questions?