1. Lecture Roger Sutton c.r.sutton@kent.ac.uk CO331 Visual Programming 1: Module introduction and the programming environment 1

2. CO331 Visual Programming 2 Moodle page To access your module on Moodle go to: http://moodle.kent.ac.uk, log-in and select the required module. http://moodle.kent.ac.uk

3. CO331 Visual Programming 3 Assessment Coursework 50% Examination 50% The coursework comprises: 1.Class attendance and effort10% 2.In-class test20% 3.Programming assignment 1: ‘Using a given class’25% 4.Programming assignment 2: ‘Writing and using classes 25% 5.In-class on-line multiple choice test 20% 2 hr closed-book written examination. This module is non-compensatable – you must obtain at least 40% overall in this module to progress to Stage 2.

4. CO331 Visual Programming 4 Logbooks It is strongly recommended that you keep an A4 bound log/note book (A separate one for different modules. Similar to a laboratory note book) Every time you do any work/activity related to the module, make a record. 1.Each entry should be dated 2.Start, possibly, by indicating what is to be achieved during the session, or the purpose of meeting, etc. 3.Indicate any relevant references, data sources 4.Record salient points of meeting discussions, agreed decisions and actions

5. CO331 Visual Programming 5 Logbooks - cont’d 5.Record any design decisions or revisions and the reasons why these are considered necessary 6.Record any failed prototyping, the cause and any conclusions 7.Indicate what has been achieved and/or still outstanding 8.Indicate the duration of the session This should not resemble so much a diary but more a jotting pad that records in one place all activities, significant thoughts, attempts and failures relating to your work.

6. CO331 Visual Programming 6 Object Oriented Programming “All the world’s a stage, And all the men and women merely players; They all have their exits and their entrances, And one man in his time plays many parts,” As you like it, W Shakespeare

7. CO331 Visual Programming 7 OOP – cont’d A computer program is an attempt to represent some aspect of the world. Not all of the world but just a small part of interest – the problem domain. Thus a computer program can be thought of as a model. The model will have various components or actors that interact with each other to simulate the behaviour of the problem domain. Accordingly the model will change. In programming the components of the model are called objects and we shall be concerned with manipulating these objects – hence the term: Object Oriented Programming (OOP).

8. CO331 Visual Programming 8 Programming environment Most programming is now performed with aid of a software development tool. This is sometimes referred to as an IDE or integrated development environment. This provides the means to write, edit and compile code, and run and debug programs. We shall create Visual Basic programs within an environment called Visual Studio.

9. CO331 Visual Programming 9 Program Development Environment – cont’d When Visual Studio is first opened, it displays a dialog where you select the required developer tool from the profile list, i.e. Visual Basic.Net. It then displays the Start Page. At this point it is recommended that Tools/Options is used to indicated the default folder in which to store VB projects. I suggest you create a folder called progs within your co331 folder, then use the browse button to navigate to this folder to enter location address.

10. CO331 Visual Programming 10 Create new project  Click on the New Project link on the Start Page, or icon.  Select Windows Forms Application and give project a name, say co331Welcome.  Ok.

11. CO331 Visual Programming Environment – cont’d The design view of the IDE is then opened. This comprises several windows, a menu bar and tool bar:

12. CO331 Visual Programming 12 Environment windows Form1.vb [Design] window contains a form, Form1, where the program’s graphical user interface (GUI) will be constructed. This will be used for data entry and output. Properties – Form1 records/displays the form’s properties, e.g. colour, font style, size, etc. These are listed alphabetically or categorically depending on the tab selected

13. CO331 Visual Programming 13 Environment windows – cont’d Solution Explorer – co331Welcome. This window groups the project’s files by type. Usually referred to as ‘the Solution window’, it has buttons to: ■ View code – displays a window for writing VB code ■ View Designer – displays the form in design view ■ Show all files – lists all files in the current project

14. CO331 Visual Programming 14 Environment windows – cont’d The Toolbox contains controls used to customise forms. Controls are pre-packaged components that may be incorporated into forms and allow programs to be created more quickly.

15. CO331 Visual Programming 15 A simple program -to display the text “Welcome to Visual basic” on a form. 1.Create New Project called co331Welcome and open the IDE in design view. If necessary click the Form design icon to reveal Form1 in design view 2.In the properties window: Set the form’s title bar – opposite Text enter: Lecture1: A simple program

16. CO331 Visual Programming 16 A simple program – cont’d Ensure that the form “has the focus” by clicking on the form then 3. Change the form’s background colour, BackColor - choose a light colour from custom palette 4. Set the form’s default font to Arial, bold, 14pt. 5. Set the font colour, forecolor, to a dark colour

17. CO331 Visual Programming 17 A simple program – cont’d If not already open, click on the Toolbox icon and then the drawing pin symbol so that it remains open. If necessary, click Common Controls within the Toolbox. 6. Add a label control to the form: Click and drag the toolbox label control to the form and position it using the sizing handles. 7.To set the label display: Type the required text: Welcome to Visual Basic! in the label’s Text property.

18. CO331 Visual Programming 18 A simple program – cont’d Reposition the label on the form using the handler (top left of label). Note the change of values in the Location property.

19. CO331 Visual Programming 19 A simple program – cont’d In Design view an Output window may be made visible: View|Other Windows|Output When the program is run this windows will report any errors detected. To run the program click the Start icon on the menu bar. The program is terminated by closing the form window. Click the close dialog icon.

20. CO331 Visual Programming 20 Summary Moodle page Assessment Logbooks Object oriented programming Visual Studio environment Environment windows Visual programming – controls and properties