practical programming comp153-08s week 5 lecture 1: screen design subroutines and functions

Practical ProgrammingCOMP153-08S

Week 5 Lecture 1: Screen Design Subroutines and Functions

Core VB steps

1. Design an interface (create paper prototype)

2. Turn this design into a VB form

3. Code events to occur

4. Test and debug

Screen Design

Step 1: Create a Paper Prototype

• Get a piece of paper and pencil• Sketch the user interface display boundaries• Sketch on the input areas • Sketch on the output areas• Sketch on the interactive elements (e.g.

buttons)• Sketch on any information areas• Scribble notes onto design to explain each

part of the sketch

Have a go…

• Design a single form application interface that allows a user to convert currencies

– Take a piece of paper… that’s the interface

form– Sketch the

• overall shape of the interface form• input, output, interactive (button) areas• any information areas

– Scribble some notes to say what controls do…

Core VB steps

1. Design an interface (sketch paper prototype)


3. Code events

4. Test and debug

1. Design an interface (sketch paper prototype)


3. Code events

4. Test and debug

Step 2: Turning design into a form

• Place controls onto a VB form– Input areas (e.g. textboxes, check box, radio button, list

box)

– Output areas (e.g. labels, pictures, lines,)

– Information areas (e.g. labels, progressive bar)

– Interactive elements (e.g. command buttons, menu items)

• Arrange the layout & size of controls– Information should flow vertically or horizontally

– Top → Bottom, Left → Right (similar to reading a book)

– Most important information at top left

• Edit the properties of a control– E.g. name and text contents

– Access Keys

– Tab Index Properties

Step 2: Turning design into a form

Qualities of a Good Programmer

• Correct scope is used

• Accurate & consistent naming

• Code is documented well

• Code is broken into modules

• Code is in logical sequence

• Correct selection structures are

used

Structured Programming

This is about building blocks of code


• Simple Sequence

Lines of codes to undertake tasks




• Control Structure e.g. selection

Lines of codes to undertake tasksLines of codes to undertake tasks

If condition Then Lines of codes to undertake tasks



Else Lines of codes to undertake tasks


EndIfLines of codes to undertake tasksLines of codes to undertake tasks


• Control Structure e.g. repetition




Do While condition Lines of codes to undertake tasks



Loop





• Form Event ProceduresClick on Clear Button


Enter Text into Text BoxLines of codes to undertake tasksLines of codes to undertake tasksLines of codes to undertake tasks

Click on Calculate ButtonLines of codes to undertake tasksLines of codes to undertake tasksDo While condition


LoopLines of codes to undertake tasks

Click on Exit ButtonLines of codes to undertake tasksLines of codes to undertake tasks


• Form LevelEntry Form



Calculate FormClick on Clear Button



Click on Exit ButtonLines of codes to undertake tasks

Display FormClick on Clear Button




• Event Procedure/User ProcedureClick on ThrowIt Button

Lines of codes to undertake tasksLines of codes to undertake tasksLines of codes to undertake tasksLines of codes to undertake tasks

Enter Text into Entry BoxLines of codes to undertake tasksLines of codes to undertake tasksLines of codes to undertake tasksLines of codes to undertake tasksLines of codes to undertake tasks

Click on Result ButtonLines of codes to undertake tasksLines of codes to undertake tasksLines of codes to undertake tasksLines of codes to undertake tasks

User Defined ProcedureLines of codes to undertake tasksLines of codes to undertake tasksLines of codes to undertake tasks

User Defined Procedures

Two purposes

1. To execute a block of code• (User Defined) Sub Procedure

2. To execute code and return a result

• Function Procedure

• these are given a name• look very similar to an event Procedure• activated using the Call command

line of codeCall CalcTimeOfDayline of code

Private Sub CalcTimeOfDay()lines of codelines of codelines of code

End Sub

1. User Defined Sub Procedure

2. Function Procedure

• these are given a name• look very similar to an event Procedure• usually activated with the "=" assignment

character

line of codeIntTotalSpeed = CalculateSpeed ()line of code

Private Function CalculateSpeed() As Integerlines of codelines of codelines of codeReturn SomeValue

End Function

Passing Variables

Passing Variables

• There are two ways we can pass data in the form of variables, in and out of sub routines/functions

1. Passing By Value ByVal– Sub routine gets a copy of the variable– Variable’s original value is not altered

2. Passing By reference ByRef– Sub routine is told variable location (reference)– Variable’s original value is altered

Passing Variables

Private Sub YoyoPause (By Ref strYoTime As String)lines of codelines of code

End Sub

Private Function SpeedCalculate(ByVal intSpeedTot as Integer) As Integer

lines of codelines of codeReturn SomeValue

End Function

THE END

of the lecture

practical programming comp153-08s week 5 lecture 1: screen design subroutines and functions

Documents

form slide

tasks loop lines of

tasks endif lines of

condition lines of codes

sketch slide

selection lines of codes

repetition lines of

text box lines of codes