{"id":316,"date":"2014-11-12T02:12:54","date_gmt":"2014-11-12T10:12:54","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=316"},"modified":"2014-11-12T02:12:54","modified_gmt":"2014-11-12T10:12:54","slug":"android-app-inventor-tip-calculator-version-4-introduction-to-procedures","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/11\/12\/android-app-inventor-tip-calculator-version-4-introduction-to-procedures\/","title":{"rendered":"Android App Inventor Tip Calculator version 4: Introduction to Procedures"},"content":{"rendered":"<p><strong>What the App Does<\/strong><\/p>\n<p>This is the fourth version\u00a0of 5 versions\u00a0that implement a tip calculator. Each version has added improvements or new programming methods.<\/p>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=245\">Version 1<\/a>\u00a0introduced the basic app and the use of error checking to handle user data entry mistakes.<\/li>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=260\">Version 2<\/a> introduced the <em>Slider<\/em> user interface component to select the tip amount. Using the <em>Slider<\/em>, 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.<\/li>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=296\">Version 3<\/a>\u00a0introduced an improved\u00a0user interface to eliminate user data entry errors.<\/li>\n<li>Version 4 introduces &#8220;procedures&#8221; to clean up the code in preparation for version 5.<\/li>\n<li>Version 5 revises\u00a0Version 4 to make the calculation of the tip fully automatic\u00a0plus\u00a0fixes some minor oddities.<\/li>\n<\/ul>\n<p><strong>The Tip Calculator User Interface<\/strong><\/p>\n<p>No changes from version 3.<\/p>\n<p><strong>The Designer View<\/strong><\/p>\n<p>No changes from version 3.<\/p>\n<p><strong>The Blocks Code<\/strong><\/p>\n<p><!--more--><\/p>\n<p>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&#8217;s 5 key and 6 key &#8211; similar code is used for each of the buttons 9 through 9:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator4-3a-blocks.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-313\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator4-3a-blocks.png\" alt=\"TipCalculator4-3a-blocks\" width=\"544\" height=\"287\" \/><\/a><\/p>\n<p>Notice the code for each digit key event handler is identical, except for the digit value (&#8220;5&#8221; or &#8220;6&#8221;). 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\u00a0a &#8220;procedure&#8221;. \u00a0Thereafter, rather than write the same code blocks ten times (for each of the\u00a0digits 0 to 9), each digit can directly refer to the procedure. <em>This is known as &#8220;calling the procedure&#8221;.<\/em><\/p>\n<p>The procedure blocks, illustrated below, are located in the &#8220;Procedures&#8221; section of the Palette. The name of the procedure is set by typing a new name in the &#8220;procedure&#8221; area (after &#8220;to&#8221;).<\/p>\n<p>First, we\u00a0isolate the\u00a0repeated\u00a0code, shown above, into procedure blocks named <em>AddDigit<\/em> and <em>UpdateDisplay<\/em>. A procedure is defined using\u00a0the &#8220;<em>to<\/em>&#8221; block. We\u00a0split out <em>AddDigit<\/em> and <em>UpdateDisplay<\/em> (updates the <em>lblBillAmount.text<\/em> value) into separate &#8220;to&#8221; procedures:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator4-AddDigit-UpdateDisplay.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-320\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator4-AddDigit-UpdateDisplay.png\" alt=\"TipCalculator4-AddDigit-UpdateDisplay\" width=\"542\" height=\"214\" \/><\/a><\/p>\n<p>The <em>UpdateDisplay<\/em> &#8220;<em>to<\/em>&#8221; block is the easiest to understand &#8211; it includes the blocks to update the bill amount shown on the display.<\/p>\n<p>The second &#8220;<em>to<\/em>&#8221; block is named <em>AddDigit<\/em> and has a &#8220;parameter&#8221; value named\u00a0<em>digit<\/em>. The <em>parameter value<\/em> is the digit indicated by the button press &#8211; that is &#8220;1&#8221;, &#8220;2&#8221;, &#8220;3&#8221; and so on. The parameter value is passed to the <em>AddDigit<\/em> procedure using the <em>call<\/em> block as shown here:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator4-CallProcedure.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-321\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator4-CallProcedure.png\" alt=\"TipCalculator4-CallProcedure\" width=\"246\" height=\"214\" \/><\/a><\/p>\n<p>When <em>btn1<\/em> is clicked, the <em>btn1<\/em> event handler calls the <em>AddDigit<\/em> procedure, passing to it the value &#8220;1&#8221;. Inside the &#8220;<em>to<\/em>&#8221; block, the incoming value &#8220;1&#8221; is copied to the parameter variable <em>digit.<\/em><\/p>\n<p>To add a parameter to the &#8220;to&#8221; block, click on the blue button at the upper left of the &#8220;to&#8221; block and drag the &#8220;input x&#8221; block over to the right. Then click on the &#8220;input&#8221; name and change it to &#8220;digit&#8221;.<\/p>\n<p>The \u00a0<em>AddDigit<\/em> procedure then, itself, calls the <em>UpdateDisplay<\/em> procedure to show the entered digit on the phone&#8217;s display.<\/p>\n<p>We can also call <em>AddDigit<\/em> from with the <em>btnDecPoint<\/em>.<em>Click<\/em> event handler:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator4-AddDecPt.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-322\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculator4-AddDecPt.png\" alt=\"TipCalculator4-AddDecPt\" width=\"479\" height=\"172\" \/><\/a><\/p>\n<p>Procedures provide a way to simplify large programs, by\u00a0putting common code that is\u00a0used in multiple places, into a single procedure. This fosters what is known as &#8220;code re-use&#8221;.<\/p>\n<p>(Note &#8211; programming purists may object to having <em>AddDigit<\/em> call <em>UpdateDisplay<\/em>. In larger programs, it is best to have each procedure perform one specific task. In this example, <em>AddDigit<\/em> is performing two tasks &#8211; adding the entered digit and updating the display.)<\/p>\n<p><strong>Key Features Shown<\/strong><\/p>\n<ul>\n<li>Version 4 introduced\u00a0the use of &#8220;procedures&#8221;<\/li>\n<li>Check back here for Version 5 and the final version.<\/li>\n<\/ul>\n<p><strong>Downloads<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/source\/tutorials\/TipCalculator4_Final.aia\">Source code App Inventor \u201c.aia\u201d source file<\/a>\u00a0(App Inventor source code files have the filename extension .aia)<\/li>\n<li>Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select \u201cImport project (.aia) from my computer\u2026\u201d<\/li>\n<\/ul>\n<p><strong>Please Share on Social Media<\/strong><\/p>\n<p>Please click on the buttons below this post to share with your friends on Facebook or other social media.<\/p>\n<p>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!<\/p>\n<p><a href=\"https:\/\/www.facebook.com\/appinventor2\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/facebook-like.png\" alt=\"\" width=\"150\" \/><\/a><a href=\"https:\/\/plus.google.com\/107302082825289724871\/posts\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/coldstreams.com\/images\/plus-badge.png\" alt=\"\" width=\"48\" \/><\/a><a href=\"http:\/\/twitter.com\/appinventorplus\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/coldstreams.com\/images\/twitter-follow.png\" alt=\"\" width=\"100\" \/><\/a><a href=\"http:\/\/appinventor.pevest.com\/?feed=rss2\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/coldstreams.com\/images\/rss.png\" alt=\"\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What the App Does This is the fourth version\u00a0of 5 versions\u00a0that implement a tip calculator. Each version has added improvements or new programming methods. Version 1\u00a0introduced 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 &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2014\/11\/12\/android-app-inventor-tip-calculator-version-4-introduction-to-procedures\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Android App Inventor Tip Calculator version 4: Introduction to Procedures<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[19,28,150,201],"class_list":["post-316","post","type-post","status-publish","format-standard","hentry","category-components","category-programming-method","tag-android","tag-appinventor","tag-procedures","tag-tip-calculator"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=316"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/316\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}