Your SlideShare is downloading. ×
Button controls and using methods to make a simple web browser
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Button controls and using methods to make a simple web browser

766
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
766
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Lesson is split into two parts, may be split over two periods if required. The parts are:Reinforce the use of controls and properties through carrying on with the PictureBox Viewer project.Learn about methods and use the WebBrowser example to demonstrate the use of methodsThis may be split over two lessons if required due to time constraints.
  • If you don’t have picture box viewer already made then you can unhide slides 11-19 that give you the instructions and code for making the Picture Box Viewer
  • Text entered into the Title bar appears in the open file dialog box that opens later
  • Clicking on a button is called an event. The code that you put in the button is called an event handler, ie it tells the program the instructions to carry out once the button is clicked.
  • Finished code: Private Sub btnSelectPicture_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSelectPicture.Click ' Show the open file dialog box. If ofdSelectPicture.ShowDialog = DialogResult.OK Then ' Load the picture into the picture box. picShowPicture.Image = Image.FromFile(ofdSelectPicture.FileName) ' Show the name of the file in the form's caption. Me.Text = "Picture Viewer(" & ofdSelectPicture.FileName & ")" End If End SubComments in green
  • Finished code: Private Sub btnQuit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnQuit.Click ' Close the window and exit the application Me.Close() End SubComments in green
  • The typing of the period will prompt VS to produce a drop down menu that will afford you a number of options to choose form that suit the controls in use. This is called Intellisense (aka predictive text).
  • The typing of the period will prompt VS to produce a drop down menu that will afford you a number of options to choose form that suit the controls in use. This is called Intellisense (aka predictive text).
  • They may have named the Select Picture button as something else – Image, select etcetc
  • In addition to properties, most objects have methods. Methods are actions the object can perform, in contrast to attributes, which describe the object. To understand this distinction, think about the pet object on the slide. A Dog object has a certain set of actions it can perform. These actions, called methods in Visual Basic, include barking, tail wagging, and eating your homework. The figure above illustrates the Dog Object and its methods.
  • Examples of common methods would be saving or deleting a record in a database. Properties are different in that they are used to get and set the attributes of an object (eg size/location/colouretc)
  • The notable difference in the coding of a method versus properties is the use of parentheses (brackets).
  • 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!
  • Make sure to name the project before hitting ok/create/new button!
  • The Web Browser control will automatically take up the whole of the form window if allowed. To manually override this, we need to unlock it from the confines of the form. You will see why soon!
  • Transcript

    • 1. ComputingLesson 2 – Properties and Methods
    • 2. Quick revision quiz1. 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)?
    • 3. Answer time1. Windows Form Application2. The PROPERTIES window3. Double click!4. The IMAGE property5. Click!
    • 4. Lesson Objectives1. Use controls to modify the appearance of a Windows Form Application2. Describe what a METHOD is3. Use a Method in a code example
    • 5. Revision – what is a control?Anything that you can use in a program / application to trigger an event or call a procedure
    • 6. Practical Revision Time!1. Go to Visual Studio2. (if you haven’t already) check your: Tools>Options>Projects & Solutions settings3. File > Open > Picture Box/Viewer
    • 7. 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
    • 8. Add a button with the properties: Name btnEnlarge Location 338,261 Size 21,23 Text +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!!!!!!
    • 9. Add ANOTHER button with the properties: Name btnShrink Location 359,261 Size 21,23 Text - 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!!!!!!
    • 10. Double click on the ‘+’ buttonAdd the following code (no pressing the enterkey yet): Me.Notice what happens when you type in the .Scroll down to ‘Width’ and then press the TABkey to auto select it!
    • 11. Let’s keep typing…You should now have: Me.WidthKeep typing so that you end up with: Me.Width = Me.Width + 100 Me.Height = Me.Height + 100 (Making sure to press the Enter key after each line)
    • 12. Double click on the ‘-’ buttonType in this code: Me.Width = Me.Width - 100 Me.Height = Me.Height - 100 (Making sure to press the Enter key after each line)
    • 13. Try running your program1. 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
    • 14. Understanding MethodsOBJECT METHODS BarkDOG Wag Tail Eat
    • 15. To put it simply Invoking / triggering a method, code is executed or, in English…A method makes something happen in your program
    • 16. How do I tell the difference between properties and methods?A method looks like: AlbumForm.ShowDialog() or Me.Close()A property change looks like: Me.Width = Me.Width + 100
    • 17. Win Form App 2 – 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
    • 18. Web Browser – Create New ProjectFile > New > Project > Windows Form ApplicationName - SimpleWebBrowser
    • 19. 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
    • 20. Web Browser – Add Controls (Text Box)1. Add TextBox from Common Controls2. Move it to the bottom left3. Edit its properties to be: 1. Name – TextBox1 2. Text – (leave blank)
    • 21. Web Browser – Add Controls (Button)1. Add a Button from Common Controls2. Move it to the bottom right3. Edit its properties to be: 1. Name – TextBox1 2. Text – ‘Show’
    • 22. Web Browser – Check layout1. Your form should look like this with: 1. Web Browser 2. ‘Show’ button 3. Text Box
    • 23. Double Click on the buttonType in the following code: WebBrowser1.Navigate(TextBox1.Text)Your code should look like (the green bit is anoptional comment):
    • 24. How does this work?The WebBrowser Control uses the Navigate() method to navigate to the Text Property ofthe textbox (which just happens to be the website address that you typed in)
    • 25. Summary• A method makes something happen in code• A property changes how something looks• Properties and Methods work together in programs
    • 26. 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?
    • 27. Quiz Time!1. Property2. Left3. True!
    • 28. Done! Questions?