OO Computer Programming REAL Basic · OOP ( Object Oriented Programming ) is different from PASCAL....

OO Computer Programming

REAL Basic

OOP ( Object Oriented Programming ) is different from PASCAL. OOP involves creating a Graphical User Interface ( GUI ) for your program, or application.

Load the REALBasic programming environment ( click the REALBasic icon in the Launcher ). The first thing you see is the tool palette :

Computing Programming - REALBasic

The American International School in Cyprus Page - 2 - 2nd Draft - April 2000

From this tool palette, you can drag and drop objects on to the form :Computing Programming - REALBasic


Any objects you drag on to your form have a set of properties, which show in the properties palette :



You’re now going to create your first program ( or ‘application’ ). This program will display a message when the user clicks a button on the screen.

Drag a button from the tool palette onto the form.

You should name the button in the ‘Properties’ for the button - the accepted conventions for naming are listed below ( button names are pre-fixed with the three letters ‘cmd’ ) :

Object Naming convention Example

Text / editfield box txt txtItemPrice

Command / pushbutton cmd cmdBuyFries

Text label lbl lblBurgerCount

Radio button opt optChoice1

List box lst lstPeople

You should also rename your button ( the button caption ) so that it does not say ‘Untitled’. You can do this by single-clicking the button, and changing the [ Title ] option under the [ Appearance ] section of the properties palette for the button.



You now need to have an action ( sometimes referred to as a ‘click-event’ ), which will happen when you click the button.

Double-click your button on the form and the following action window will appear :

You will need to type the code to display a message box which will be displayed when the user clicks your button ( the code is written in the above diagram ) :

MsgBox “Hello World!”Now you need to run the program. Select <Run> from the <Debug> menu :

What happens ?

PROGRAMMING PROBLEM # 1

Design an application which will provide a text input box ( an EditField dragged

from the tool palette and placed on your form ) where the user can type in their name.

The user should be able to click a button and the program should display a message similar to the following ( assuming the name ‘Fred’ was typed in the text box ) :



Hello Fred. How are you today ?

In the ‘action’ for your button ( which should have a label other than ‘Untitled’ ! ), to get text output combining text from the EditField you need code similar to the following :

MsgBox “Hello “ + EditField1.text + “. How are you today ?”

All OOP programming works with text boxes. To do any calculations, any input entered through EditFields, needs to be converted to numeric values ( numbers ).

This is done through the use of the VAL command. For example, if you have an EditField, then the numeric value can be found by using :

data=val(EditField1.text)

DON’T FORGET. . . YOU HAVE TO DECLARE VARIABLES ! . . . FOR THE ABOVE EXAMPLE, YOUR VARIABLE DECLARATION WOULD BE :

dim data as integer

It is possible to convert from numbers back to text by use of the STR command. For example, if you have a result from a calculation you wish to place in a text box ( EditField ), then you use :

EditField1.text=str(data)




Design an application which will allow the user to input the number of hours worked by employee, and the hourly pay rate. For example, the hours worked could be 40 ( for a week ), and the hourly pay rate could be £5.00 per hour.

The program should calculate and display ( in a third text field ) the wages to be paid to the employee. Using the above example data, the wages to be paid should be £200.


Design an application which will simulate an electronic scoreboard. The user should be able to click on one of three buttons :

• if the <MESSAGE> button is clicked, then a message should be displayed such as “GOAL!” or “GOOD SHOT!”• if the <INCREASE HOME TEAM SCORE> button is pressed, then the home team score ( EditField text box ) should be increased by 1• IF THE <INCREASE VISITOR TEAM SCORE> button is pressed, then the visitor team score ( EditField text box ) should be increased by 1




Design an application which will play the “Guess The Number” game.

The computer will have a number which the player has to guess. The computer should display an appropriate message such as “Too low!”, “Too high!”, or “Correct!”, depending on the number the player enters.

You will need an EditField box for the player to enter his / her guess, and a push button for the computer to compare the player’s guess with the correct result.



The code for the pushbutton will be :

Sub Action()dim player_guess as integerplayer_guess=val(EditField1.text)// the following code assumes the number to guess is 7if player_guess>7 then

MsgBox “Too high !”end ifif player_guess<7 then

MsgBox “Too low !”end ifif player_guess=7 then

MsgBox “Correct !”end if

End Sub




Design an application which will play the “Rock, Scissors, Paper” game. The code to generate a random number between 1 and 3 is listed here :

Sub Action()// the variables are defineddim number as integerdim d as double

// the loop starts heredo until number>=1 and number<=3

// this gets a random decimal number between 0 and 1d=rnd// have to multiply by 10 to place between 1 and 10number=d*10

loop

// the random integer is converted to a string// and placed in the text fieldEditField1.text=str(number)

End Sub




Design an application which will simulate an electronic cash register as used in ‘McDonalds’ ( feel free to use your own fast food franchise name ! )

The person operating the cash register should be able to click on any one of a number of buttons on screen :

[ Burger ][ Fries ][ Soda ][ Pie ]

As each item is selected, a running total should be kept of the amount charged and displayed in an EditField text box. If you are feeling adventurous ( ! ) you could have TWO EditField text boxes - one to display the running total, and a second to display the cost for the last item ordered.

When the customer completes his / her selections, the cashier should be able to enter an amount tendered ( the amount the customer pays ) in a second ( or third ) EditField text box, press a [CHANGE] button, and have the computer calculate and display in a third ( or fourth ) EditField text box the change to be given to the customer.



Once again, working on the screen ( monitor ) is useful, but sometimes a hard-copy of program output is also required.

Work through the following steps to add a hard copy option to an application.

Create a simple application ( form ) containing a text box ( EditField ), then double-click the Menu editor in the project box :

Add a Print option to the File menu ( you can change the order of the choices on the menu by dragging the items up or down the list ) :



Now you need to enable the new menu item - click once back on your main form, and press <Option><TAB> on your keyboard to bring up the code editor for your project :

Click on the EnableMenuItems event, and enter the code as shown above to enable your Print option.

The code to enable the Print menu item has been reproduced here for clarity :

Sub EnableMenuItems()FilePrint.enabled=true

End Sub



Now you need to write the code ( the Menu Handler ) to actually do the work when someone uses your application and chooses the Print option !

Select <Edit><New Menu Handler> and choose the FilePrint option as shown below :

The code which will be run when someone chooses the Print option is shown in the diagram below but is also reproduced separately here for clarity :

Function Action As Booleandim g as graphicsg=OpenPrinterDialog()if g<>Nil then

g.DrawString EditField1.text,100,100end if

End Function



Save and run your ‘sample’ text printing application to check your code works !




Design an application which will allow the user to input information about a dance including :

• the date• the time• the place• the DJ• the price

The application should have a Print option which will then output the information in the form of a dance ticket.



As with our previous work on programming in Pascal, until now in REALBasic we have only been working with variables, and operating on data stored in memory of the computer. It is often useful to have a more permanent storage system i.e. saving your work for future use the following day, week, month, year etc.

Create a basic application showing a single text field entry box ( “EditField” ).

Create the following menu options below the File menu :

Open

Save

Print

You will need to enable these menu items ( refer to pages 10 through 13 on how to do this ).

As with your previous assignment on printing, write the handler for the Print option.

You will also need a menu handler for the Open and Save menu options - use the following code for the Open menu handler :

Function Action As Booleandim file as FolderItemdim fileReadFrom as TextInputStreamfile=GetOpenFolderItem(“text/plain”)fileReadFrom=file.OpenAsTextFileeditField1.text=fileReadFrom.ReadLinefileReadFrom.Close

End Function

- and the following code for the Save menu handler :

Function Action As Booleandim file as FolderItemdim fileWriteTo as TextOutputStreamfile=GetSaveFolderItem(“text/plain”,”Untitled”)fileWriteTo=file.CreateTextFilefileWriteTo.WriteLine editField1.textfileWriteTo.Close

End Function

NOTE : You ALSO need to ‘tell’ your application which file formats you are working with.



Select <File Types> from the Edit menu, select the existing ‘text’ option and EDIT... select text/plain from the drop down menu


Design an application which will act as a simple word processor - offering the three basic options of opening text files, saving text files and printing text files.


Design an application which will simulate the operation of an ATM ( automated teller machine ) - like the electronic cash points offered be Popular Bank, Cyprus Bank etc.



The first step should be the user should input their PIN ( Personal Identification Number ) - this is a four-digit number known only to the customer. He / she is only allowed 3 possible tries before the ATM shuts down - this is to prevent fraud.

Next, assuming the customer enters his / her PIN correctly, a menu of choices should be made available :

• find out balance ( the amount of money in their account )• withdraw cash ( fixed amounts - £10, £20, £40, £60, £80, £100 or other amount BUT only in multiples of £10 AND the customer should not be able to withdraw more money than is in their account, the balance should be reduced by the appropriate amount )• make a deposit, either check or cash ( cash in £’s only, check for any amount which should be credited to the customer’s account i.e. the balance should be increased by the amount deposited )• send the bank a message• end transaction, withdraw card

As an extension to this task, you could have the ATM print out a receipt.


Design an application which will act as a calculator. You can examine the calculator which is found on most computers ( select the calculator on your computer in the lab through the Apple menu ).


Design an application which will act as a ‘trivia machine simulator’ ( quiz machine ).

You should have an editfield ( text box ) which will display the question. You will also need a set of radio buttons which will act as a multiple choice answer selection.

Concentrate on getting ONE question and answer system set up before going on to multiple questions.




Design an application which will play the game of Nim ( ‘pick-up-stones’ ). This is a two-player game that starts with a pile of 21 stones. Each player takes turns removing 1, 2 or 3 stones from the pile. The player that removes the last stone wins.

You should design your application first to work with two human players, then if time permits go on to provide an alternative option of playing against the computer.



Tab panels offer a way of working within one window but provide the option of multiple work areas.

To change the label on each tab panel ( access the tab panel menu ) click the dark grey tab with ... on it.


Design an application using tab panels which offers three panels - one panel should offer the option to calculate the area of a square. The user should be able to enter the relevant dimensions, click a button and have the result returned on the same panel.

The second panel should offer the option to similarly calculate the area of a triangle, and the third to calculate the area of a circle.




Design an application which will play the game of ‘noughts and crosses’ / ‘tic-tac-toe’ - two human players.

You should go on to develop your application so that there is a human v. computer option.


Design an application which will play the game of ‘Hangman’.


Design an application which will play the game of ‘Simon’ ( a memory game ). The computer should randomly play sequences which the player should have to match. As each turn progresses, the sequence extends by 1.



Up until now, we have only been working with text. It is also possible to include graphics ( pictures ) in programs.

Each graphic placed on your form needs to be contained within a ‘canvas’. You will also need a simple graphic - PICT file format picture - create a simple picture in ClarisWorks or use the ‘Library’ feature within ClarisWorks.

REMEMBER TO SAVE THE PICTURE IN PICT FILE FORMAT AND SAVE THE PICTURE IN THE SAME PLACE WHERE YOUR PROGRAM IS SAVED !

When you have your picture saved, import it into your project . . .

<File><Import>

Create a canvas to contain your picture on your form, then change the ‘backdrop’ of the canvas to show the picture ( use the ‘backdrop’ section of the properties for the canvas ).

If all goes well, you should see your picture show up on your form ( inside the canvas ).


Create a simple application which will show a light bulb / lamp either lit or not lit by clicking a button.




Create a simple application which will move a picture around the screen :

This can be done by adjusting the canvas.left and canvas.top properties when each button is clicked.

For example, if the ‘Down’ button is coded :

canvas1.top = canvas1.top + 1

then the ‘bicycle’ will move down the screen one pixel on the push of the down button.

( NOTE : The screen is organised in such a way that the ‘origin’ i.e. 0 , 0 is located in the top left corner of the form. )



To store information input into a program, variables are used. For example, in the ATM machine, you might have used a variable called ‘running_total’ to keep track of the balance in your bank account.

If many items of data need to be input and the data items are related e.g. a set of numbers representing a set of class test scores, then an array is used.

An array is declared in a similar way to declaring a single variable e.g. to declare a variable you might code :

dim salary as integer

To declare an array to hold a set of five salaries, you would code :

dim salary(4) as integer

( NOTE : As arrays are ‘zero-based’, this means that there are 5 salary variables from the above code : salary(0), salary(1), salary(2), salary(3) and salary(4). )


Create a simple application which will read in a set of 4 student grades ( numeric scores, out of 100 ) in a year.The application should display the average score for the student. You should use a single text / editfield box for data entry and an array to store the student scores. A sample form is shown below :



Scroll bars are used in many applications to change values by clicking on arrows at either end of the scroll bar OR you can also click on the bar area itself above and below the position marker / indicator in the scroll bar.


Create a simple application ( similar to an earlier program you wrote to convert celsius to fahrenheit / fahrenheit to celsius temperatures ) EXCEPT this time use a scroll bar.

As you click either end of the scroll bar, the values in the celsius and fahrenheit boxes should change accordingly.

HANDY HINT . . .You can put the ‘value’ of the scroll bar directly in a text / editfield box by using code similar to :

EditField1.text = str ( ScrollBar1.value )

NOTE : YOU WILL NEED TO CHANGE THESE NAMES TO MATCH THE NAMES OF OBJECTS YOU HAVE USED IN YOUR PROJECT ! EDITFIELD1 AND SCROLLBAR1 ARE NOT ACCEPTABLE OBJECT NAMES !

[ To convert from Celsius to Fahrenheit, multiply celsius value x 1.8, and add 32 ]

F = C x 1.8 + 32



List boxes are used in many applications to contain multiple values ( a text or editfield box can only contain one single line item at a time ).


Create a simple application that allows you to list your chores for the day. There should be two lists, one should be Possible Chores, and the other should be your To Do List.

There should be an add button that will allow you to add a Possible Chore to the To Do List. There should be a Chore Done button that will allow you to remove a chore from the To Do List once you have completed it. There should also be a Clear Chores button that will remove all of the chores from the To Do List. ( A sample screenshot is shown below : )

HANDY HINT . . .You can use the following code to copy a selected ( clicked on ) item from the first listbox into the second listbox :

ListBox2.addrow ListBox1.list(listbox1.listindex)

REMEMBER TO USE PROPER OBJECT NAMES !



‘Properties’ of objects placed on forms can be changed and updated while a program or application is running.

For example, it is possible to change the captions ( text labels ) which appear on button as they are clicked OR ‘rolled over’ with a mouse.


Create a simple application combining the following objects on one form :

1. A button which will show an appropriate caption when the mouse is rolled over it, and reverts back to an original caption when the mouse is rolled off it.[ You will need to use the MouseEnter and MouseExit properties of the button to do this . . . ]

2. A button which acts as a ‘toggle’ - if it is clicked, then the caption changes accordingly, until it is clicked a second time in which case the caption changes back to the original state. ( If the button is clicked a third time, the caption changes again, and a fourth click would return it to its original state ).

3. A pop-up menu which can change the color of the background of the form to a MINIMUM of 4 different colors.[ You will need to ensure the ‘Has Backcolor’ property of the form has been enabled / selected in the properties for the form, and use code similar to that shown below to change the color accordingly . . . ]

select case popupMenu1.textcase "red"

window1.backcolor=rgb(255,0,0)case "blue"

window1.backcolor=rgb(0,0,255)end select



Sometimes it is necessary for an action to occur while a program is running independent of any buttons being clicked or menu items being selected. This can be achieved while a program or application is running by use of a timer.


Create a simple application which will simulate a set of traffic lights. You could use 3 different circles ( drawn using the oval tool in the tool palette ).

For color change, the following options are suggested :

Color RGB values

Light red rgb ( 255, 0, 0 )

Dark red rgb ( 102, 0, 0 )

Light amber rgb ( 255, 128, 0 )

Dark amber rgb ( 153, 76, 0 )

Light green rgb ( 0, 255, 0 )

Dark green rgb ( 0, 76, 0 )

Instead of having each oval ‘appear’ and ‘disappear’ ( which would not happen on a real set of traffic lights ! ), use these color values listed above, and simply switch between the light and dark values to give the illusion of lights switching on and off.



Sample code to switch an oval to light green :

oval1.fillColor=rgb(0,255,0)

Sample code to switch an oval back to dark green :

oval1.fillColor=rgb(0,76,0)

In the ‘Action’ for the timer which you place on your form, you should use code similar to that shown below which ‘switches the lights’. Within the action you should have a select-case structure similar to that below ( YOU will need to write the actual code to switch the light colors ! ) :

Sub Action()select case processcase 1

// make light redcase 2

// make light amber / orangecase 3

// make light greencase 4

// make light amber / orange// set process back to zero

end selectprocess = process + 1

End Sub



Many programs operate through the use of multiple windows. A common example is the ‘quit confirmation’ type of window :


Create a simple application with a ‘Quit’ button. When the user presses the quit button, a new ‘confirmation’ window should appear.

To do this, you will need to add a new window to your project . . .

<File> <New Window>

You should rename your new window - you may also want to try alternative types of windows by changing the MacProcID in the properties of your new window ( you can find the specific ID numbers of different kinds of windows in the on-line reference within REALBasic ).

You should set the new window to be invisible, until ‘Quit’ is clicked, when the new ‘Confirm quit’ window should become visible.

* DO NOT RUN YOUR PROGRAM UNTIL YOU HAVE PLACED AND CODED THE ‘YES’ ( CONFIRM QUIT ) BUTTONS ON YOUR NEW WINDOW OTHERWISE YOU WILL NOT BE ABLE TO QUIT YOUR PROGRAM !



It is possible to have more than one column in a list box. This means that more than one kind of data ( on a specific topic ) can be stored on a single row.


Create a simple application which will act as a bank ledger / checkbook tracker for deposits and withdrawals in a bank account.

Change the number of columns in the listbox to 4 - edit the ‘ColumnCount’ in the properties for the listbox, and “check” the ‘HasHeading’ property for the listbox.

In the ‘Open’ event for the listbox you should put the following code to set up headings for each column :

me.heading(0)="Date"me.heading(1)="Description"me.heading(2)="Deposit"me.heading(3)="Withdrawal"

You should note that list-boxes are ‘zero-based’, i.e. the count starts from zero so the leftmost column is column zero ( the ‘date’ column ).



For the ‘submit’ button to write the values into the listbox, you will need to use code similar to the following ( note that a ‘blank’ addrow has to be written to the listbox to provide space for the data to be written into ) :

// this code adds a blank row for space to put dataListBox1.addrow ("")

// this code writes the date from a date editfield// into the first available row, first columnListBox1.cell(listbox1.listcount-1,0)=txtDate.text

// this code writes the description from a desc // editfield into the first available row, second // columnListBox1.cell(listbox1.listcount-1,1)=txtDesc.text

To calculate the total deposits, you will need to set up a loop to run through all the listed deposits, similar to the following :

for counter=0 to listcount-1total_deposit=total_deposit+ListBox1.cell(counter,2)

nexttxttotaldep.text=str(total_deposit)

The total withdrawal value should be calculated in a similar way.




Create a simple application which acts as a control for a basic single-digit LED display.

You should set up a simple system with several buttons for switching on / off the individual elements within the single digit display to have the display show different numbers ( for example, if you only ‘light’ or ‘switch on’ the outside elements then the display would show ‘0’ ).




Create a simple application which plays the game of Blackjack ( sometimes called ‘Pontoon’ or ‘21’. ) You should incorporate a betting feature where the player can choose how much money to gamble.

If you’re feeling really adventurous you could have the computer show in graphics the cards dealt to the player !



String or text manipulation is a common feature used in programming languages - databases such as student files store large amounts of text in a compressed format. The database program can separate names from other information by string manipulation.


Create a simple application which will join together ( concatenate ) 3 single letters into a single word.



It is also possible to split text information into elements and extract the required parts of text strings.


Create a simple application which will split a five-character ( five letter ) word into its component letters.

This is achieved by use of the mid command, which selects the text from a start-point in the string, up to a requested length. For example, to select the first 2 characters of a editfield / text box :

txtRequested.text=mid( txtWord.text,1,2 )

- would place the first 2 characters of the string stored in the txtWord editfield, and place those characters in the txtRequested editfield.




Create a simple application which will split a five-character ( five letter ) word into the following components :

(i) the complete word(ii) the first 4 letters of the word(iii) the first 3 letters of the word(iv ) the first 2 letters of the word(v) the first letter of the word



It is also possible to find out the length of a text string. This is possible by use of the len function :

EditField2.text=str( len( EditField1.text ))

- would place into EditField 2, the length of the string typed in EditField1.


Create a simple application which will state the length of a text string inputted into a text / editfield box.



Computers do not store characters as we see them.. instead they store ASCII values. For example, the letter ‘A’ is not stored as ‘A’ - instead it is stored as decimal 65 ( or to be exact, it is stored as a binary pattern 0 1 0 0 0 0 0 1 ! )


Create a simple application which will show the ASCII value for a typed character, or will give the character for an inputted ASCII value.

To find an ASCII value of a character, the asc function is used :

txtASCII.text = str(asc( txtCharacter.text ))

To find the character equivalent of an ASCII value, the chr function is used :

txtCharacter.text = chr(val(txtASCII.text))




Create a simple application which will encode messages. You will need to use the len function to loop through each character in your message to be encoded. Add one to each character’s ASCII value, convert those values back to characters and write them to a new editfield box, which can display the ‘coded’ message.

A possible solution for the ‘program’ to encode messages is given below. You should note that this will only provide one form of code. You may wish to adapt it so that a person could enter a ‘key value’ ( the value added to each letter to make it into code ) and have the program work accordingly.

In addition, you should go on to offer a ‘decoding’ option ( where the key value is deducted from the ASCII value of each coded letter ).

dim counter as integerdim selected_letter as stringdim ascii_value as integerdim updated_value as integerdim new_character as string

for counter=1 to len(EditField1.text)// this picks out each letter of the inputted string // one letter at a timeselected_letter=mid(EditField1.text,counter,1)

//this code finds the ascii value of each letterascii_value=asc(selected_letter)

//this updates the ascii value by 1 to codeupdated_value=ascii_value+1

// this converts the updated value back to a characternew_character=chr(updated_value)

// this adds the changed character to the coded // message text boxEditField2.text=Editfield2.text+new_character

next



In some cases, it is necessary to set up a system for adjusting numeric values. This is called a spinner :

Clicking the top arrow would increase the value in the text or editfield box by 1, and clicking the lower arrow would decrease the value in the text or editfield box by 1.


Create a simple application which will act as a safe or combination lock guessing game, using four spinners and a ‘stopwatch’.

You should include a count-down timer, which is activated by clicking a ‘start timer’ button ( set the ‘mode’ of the timer to 0-off in its properties when you place the timer on the form ).

Sub Action()Timer1.mode=2

End Sub



In the ‘action’ for the timer, you should write code which will decrease the value of a counter by 1, and update the timer display :

Sub Action()counter=counter-1txtTimerDisplay.text=str(counter)

End Sub



Sometimes we need to create buttons different from the few basic kinds of buttons available to us in the tool palette. We can do this by using a canvas and changing the ‘backrop’ of the canvas dynamically.


Create a simple application which uses a custom button - place a single canvas on the form, and in the mouseDown event of the canvas, code :

window1.canvas1.backdrop = button_pressedreturn true

In the mouseUp event of the canvas, code :

window1.canvas1.backdrop = button_released

( This code assumes your two button images - pressed and released - are named accordingly ).




Create a simple application which will act as an electronic address book. Your address book should be capable of storing names, addresses, e-mail addresses and telephone numbers in addition to one other category of information ( about each person ) of your own - a sample screen layout is shown here :

You should code your program in such a way that when the user clicks the ‘Add’ button, a new window for data entry pops up. The user can enter the data, click an ‘OK’ button and the data entry window closes and the data is written in to the above table.

The ‘Delete’ button should display another window and ask for confirmation BEFORE a selected item is deleted.

The ‘Modify’ button should cause a ‘Data modification’ window to pop-up, with the relevant data in editfield / text boxes for modification. Clicking the ‘OK’ button will cause the modified data to be written back to the table.

As with the ‘checkbook / ledger’ program, you should set up headings, and you may also want to allocate specific ( varying ) column widths ( in the ‘open’ event of the listbox ) :

me.heading(0)="Name"me.heading(1)="Address"me.heading(2)="Phone"me.heading(3)="E-mail"me.heading(4)="Other"me.columnwidths="10%,20%,10%,10%,10%"



Sometimes it is nice to have a ‘visual’ representation of a process happening, or an indicator that some processing is being caarried out by your application.


Create a simple application which shows a progress bar, controlled by a timer ( started by clicking a button ).

When the progress bar reaches its maximum value, the computer should ‘beep’.



OO Computer Programming REAL Basic · OOP ( Object Oriented Programming ) is different from PASCAL....

Documents

Transcript of OO Computer Programming REAL Basic · OOP ( Object Oriented Programming ) is different from PASCAL....