What the App Does

This is the fourth version of 5 versions that implement a tip calculator. Each version has added improvements or new programming methods.

• Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
• Version 2 introduced the Slider user interface component to select the tip amount. Using the Slider, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.
• Version 3 introduced an improved user interface to eliminate user data entry errors.
• Version 4 introduces “procedures” to clean up the code in preparation for version 5.
• Version 5 revises Version 4 to make the calculation of the tip fully automatic plus fixes some minor oddities.

The Tip Calculator User Interface

No changes from version 3.

The Designer View

No changes from version 3.

The Blocks Code

Version 3 of the Tip Calculator introduced the use of buttons for data entry. Here is a section of the Version 3 code blocks used for handling the numeric keypad’s 5 key and 6 key – similar code is used for each of the buttons 9 through 9:

Notice the code for each digit key event handler is identical, except for the digit value (“5” or “6”). When we have code that is used over and over again, as it is in this simple example, we can move the code blocks into a separate block known as a “procedure”.  Thereafter, rather than write the same code blocks ten times (for each of the digits 0 to 9), each digit can directly refer to the procedure. This is known as “calling the procedure”.

The procedure blocks, illustrated below, are located in the “Procedures” section of the Palette. The name of the procedure is set by typing a new name in the “procedure” area (after “to”).

First, we isolate the repeated code, shown above, into procedure blocks named AddDigit and UpdateDisplay. A procedure is defined using the “to” block. We split out AddDigit and UpdateDisplay (updates the lblBillAmount.text value) into separate “to” procedures:

The UpdateDisplay “to” block is the easiest to understand – it includes the blocks to update the bill amount shown on the display.

The second “to” block is named AddDigit and has a “parameter” value named digit. The parameter value is the digit indicated by the button press – that is “1”, “2”, “3” and so on. The parameter value is passed to the AddDigit procedure using the call block as shown here:

When btn1 is clicked, the btn1 event handler calls the AddDigit procedure, passing to it the value “1”. Inside the “to” block, the incoming value “1” is copied to the parameter variable digit.

To add a parameter to the “to” block, click on the blue button at the upper left of the “to” block and drag the “input x” block over to the right. Then click on the “input” name and change it to “digit”.

The  AddDigit procedure then, itself, calls the UpdateDisplay procedure to show the entered digit on the phone’s display.

We can also call AddDigit from with the btnDecPoint.Click event handler:

Procedures provide a way to simplify large programs, by putting common code that is used in multiple places, into a single procedure. This fosters what is known as “code re-use”.

(Note – programming purists may object to having AddDigit call UpdateDisplay. In larger programs, it is best to have each procedure perform one specific task. In this example, AddDigit is performing two tasks – adding the entered digit and updating the display.)

Key Features Shown

• Version 4 introduced the use of “procedures”
• Check back here for Version 5 and the final version.

Downloads

• Source code App Inventor “.aia” source file (App Inventor source code files have the filename extension .aia)
• Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select “Import project (.aia) from my computer…”

Please Share on Social Media

Please click on the buttons below this post to share with your friends on Facebook or other social media.

If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader. Thank you for visiting!