Button controls and using methods to make a simple web browserPresentation Transcript
ComputingLesson 2 – Properties and Methods
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)?
Answer time1. Windows Form Application2. The PROPERTIES window3. Double click!4. The IMAGE property5. Click!
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
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 settings3. 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 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!!!!!!
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!!!!!!
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!
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)
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)
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
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() or Me.Close()A property change looks like: Me.Width = Me.Width + 100
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
Web Browser – Create New ProjectFile > New > Project > Windows Form ApplicationName - 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
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)
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’
Web Browser – Check layout1. Your form should look like this with: 1. Web Browser 2. ‘Show’ button 3. Text Box
Double Click on the buttonType in the following code: WebBrowser1.Navigate(TextBox1.Text)Your code should look like (the green bit is anoptional comment):
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)
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?