button controls and using methods to make a simple web browser

28
Computing Lesson 2 – Properties and Methods

Upload: secondary-school

Post on 25-May-2015

787 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Button controls and using methods to make a simple web browser

Computing

Lesson 2 – Properties and Methods

Page 2: Button controls and using methods to make a simple web browser

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)?

Page 3: Button controls and using methods to make a simple web browser

Answer time

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

Page 4: Button controls and using methods to make a simple web browser

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

Page 5: Button controls and using methods to make a simple web browser

Revision – what is a control?

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

procedure

Page 6: Button controls and using methods to make a simple web browser

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

Page 7: Button controls and using methods to make a simple web browser

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

Page 8: Button controls and using methods to make a simple web browser

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!!!!!!

Page 9: Button controls and using methods to make a simple web browser

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!!!!!!

Page 10: Button controls and using methods to make a simple web browser

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!

Page 11: Button controls and using methods to make a simple web browser

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)

Page 12: Button controls and using methods to make a simple web browser

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)

Page 13: Button controls and using methods to make a simple web browser

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

Page 14: Button controls and using methods to make a simple web browser

Understanding Methods

DOG

Bark

Wag Tail

Eat

METHODSOBJECT

Page 15: Button controls and using methods to make a simple web browser

To put it simply

Invoking / triggering a method, code is executed

or, in English…

A method makes something happen in your program

Page 16: Button controls and using methods to make a simple web browser

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

Page 17: Button controls and using methods to make a simple web browser

‘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

Page 18: Button controls and using methods to make a simple web browser

Web Browser – Create New Project

File > New >

Project > Windows Form Application

Name - SimpleWebBrowser

Page 19: Button controls and using methods to make a simple web browser

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

Page 20: Button controls and using methods to make a simple web browser

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)

Page 21: Button controls and using methods to make a simple web browser

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)

Page 22: Button controls and using methods to make a simple web browser

1. Your form should look like this with:

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

Web Browser – Check layout

Page 23: Button controls and using methods to make a simple web browser

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):

Page 24: Button controls and using methods to make a simple web browser

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)

Page 25: Button controls and using methods to make a simple web browser

Summary

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

programs

Page 26: Button controls and using methods to make a simple web browser

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?

Page 27: Button controls and using methods to make a simple web browser

Quiz Time!

1. Property2. Left3. True!

Page 28: Button controls and using methods to make a simple web browser

Done! Questions?