Click here to read Part 1 of the lesson plan!
We left the first lesson at the stage of near completion of the GUI. The focus of this second session is to add some functionality, making the picture appear/disappear, but for the more able student other functions of the program could be attempted. There are some suggestions for such extension work in the text below.
Arrangements needed prior to the lesson
1. Students really need to have completed the previous session and not be left trying to catch up previous work while you are demonstrating and teaching how to use code to alter the properties of the picture frame. You could have an interface available for students to use if they did not complete the previous session.
2. Define terms: Objects, Design Time, Run Time.
3. It would be beneficial to underline the nature of screen object’s properties and remind the students of how they changed the properties of the Form (e.g. its Name property) and the PictureBox (e.g. the use of the StretchImage property to size the image to fit the PictureBox).
4. Mention that up to now we have altered the Properties of an Object during the Design phase, but for this session we want a user to be able to interact with the program and change a Property whilst the program is Running.
5. A useful tip is to ask students to close the project they have been working on before loading a new project (File -> Close Project) otherwise the current project remains within the IDE and this can be confusing.
Suggested second lesson
Background
It would be useful to review the idea of sequential instructions to control a process. You could use the example of posting a letter, making toast or another familiar task. You might follow this up with asking the students to formalise the process by writing the instructions as a flow diagram. This is a useful homework subject, but remember to allow sufficient time to introduce both the concept and the controls for the diagram, there are some of these below which could be used:
Second lesson
- Open Visual Basic 2010 Express
- On the Start Page click either the name of the project under Recent Projects or use Open Project and Explorer to locate the project.
- Look in the Toolbox (left hand pane of the screen) and click on the Button control.
- Draw a suitably sized button on the form:
- Find the Properties pane (bottom right) and change them (for the command button) as follows:
- We need to add some code to the button so that it can change the Visible property of the Picture Box.
- Double click the Button, this reveals the code:
Important Tips: Remember to use the correct Name for the Picture Box. The full stop between the name of the Picture Box and its Visible property is important; VB 2010 will try to help you, if you need to type it in then something is wrong.
- Change back to Design View by clicking View in the Menu bar and then click the menu option Designer
- We need to check that the program has been written correctly, this process is called “Debugging” (you could find out why this peculiar term is used). Find the green triangle in the Toolbar:
This, as well as checking your program, Runs the program so that you can test it to see if the command button works as you intended. This is an example of a “Functionality Test”. The next diagram shows what you should see, with a Design View partially covered by the Run Time view:
All being well you should find that the Picture Box and its image disappear when you click the Command Button.
Once you have checked that everything is well, close the Run Time window by clicking the cross at its top right.
Now it’s over to you! You need to add some more functionality to the program, this time to make the Picture Box re-appear. You have all the technical ability to do this, but remember to add the new code to the correct button
You need to:
- Add another Command Button
- Change its Name and Text properties
- Write code for the new button to alter the Picture Box property Visible to be set as True when the Command Button is clicked.
I am sure that you won’t need the help of course, but here is a view of the finished code; do remember that you may have used different names for the Command Buttons and Picture Boxes. Just in case!
Notice the writing in green. It’s good practice to add this so that if you or another programmer have to change the program, there is a guide to what the line of code is meant to do. These are called “remarks” or “rem statements” and you need to put an apostrophe either side of the writing so that VB ignores the writing and doesn’t get all grumpy trying to process the code (technical term is “Compiling the code”).
- Test the program by clicking the Command Buttons. If there are problems, first of all check that the name of the Picture Box control is correct in the code inside the Command Buttons and then check the lines of code themselves.
- In the File menu, click Save All (if you have started fresh today you will need to use Save Project As). Now we are going to make this program an “executable”. This means that we can run the program outside of VB, just like other professionally produced programs.
- Start the “Publish” wizard by clicking on Publishxxx in the Project menu and choose a location for the finished executable files and the installation system. You can use Browse… for this purpose, but it is BEST to make a folder specifically for the purpose, i.e. NOT the one in which you throw all of your school work! Once you have set the location (and remembered where you have put it!), click Next.
- The next page in the wizard asks about how users will install the application; unless you intend them to use a website or File Share, choose the last option, “From a CD-ROM or DVD-ROM”. Click Next.
- Unless you expect to issue updates for your program, choose the no updates alternative then click Next.
- The wizard now shows you where the application is to be saved. Once again, check you know where this is, then click Finish.
- After a while (give it time!), the wizard shows you the contents of the folder you made. If you double click Setup, the executable version of your program will be installed on your computer. STOP!! It is polite to ask your teacher about this. Installation of Hide_n_Show.exe on the Headmaster’s file account is not going to increase your retinue of buddies and the Techies are going to ban you from any computer system until they draw their pensions.
[Tip – Copy the Folder and its contents to a pen drive and run the install on YOUR computer at home]
- Finally close the Project (File -> Close Project) and then close VB.
That’s it.
…although, if the bug has bitten you, you could try adding other command buttons to your project, for example to change the colour of the form or (harder) to swap between 2 pictures.
John Giles
John Giles is an educational consultant and author specialising in IT and computing. He works closely with exam boards, and has written syllabuses and exam papers.
