{"id":1620,"date":"2017-03-09T12:31:11","date_gmt":"2017-03-09T20:31:11","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=1620"},"modified":"2017-03-09T12:31:11","modified_gmt":"2017-03-09T20:31:11","slug":"part-2-storing-and-accessing-user-interface-components-as-variables","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2017\/03\/09\/part-2-storing-and-accessing-user-interface-components-as-variables\/","title":{"rendered":"Part 2: Storing and accessing user interface components as variables"},"content":{"rendered":"<p><a href=\"http:\/\/appinventor.pevest.com\/?p=1579\">Part 1<\/a>\u00a0showed how to reference and store user interface components as a variable. That tutorial used this method to easily change the background colors of six buttons on screen.<\/p>\n<p>In Part 2, we\u00a0use this technique to simplify<a href=\"http:\/\/appinventor.pevest.com\/?p=1538\"> a past tutorial about using a Bluetooth link between and Android device and two Arduino devices<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>In the <a href=\"http:\/\/appinventor.pevest.com\/?p=1538\">tutorial on connecting to two Arduino devices<\/a>, the app has two buttons &#8211; one button to send data to device #1 and a second button to send data to device #2. The code to handle each sending routine is nearly identical and looked like this:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/BTArduino_Client2Before.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1621\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/BTArduino_Client2Before.gif\" alt=\"\" width=\"529\" height=\"514\" \/><\/a><\/p>\n<p>The code for <em>btnSendNumeric1<\/em> and <em>btnSendNumeric2<\/em> is nearly identical except for the <em>BluetoothClient<\/em> and the text box input.<\/p>\n<p>By using references, we can simplify this and move the identical code into a procedure\u00a0that we will call <em>SendBTData<\/em>.<\/p>\n<p><em>SendBTData\u00a0<\/em>copies the duplicate code from above and adds\u00a0two parameter\u00a0variables: <em>BTDevice<\/em> and <em>DataValue<\/em>.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/SendBTDataProcedure.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1622\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/SendBTDataProcedure.png\" alt=\"\" width=\"440\" height=\"231\" \/><\/a><\/p>\n<p>When the procedure is called, we pass to the procedure the <em>Bluetooth<\/em> device component to use and the <em>value<\/em> to send. \u00a0For sending to device #1, we use the reference to <em>BluetoothClient1<\/em> and pass that as our selected <em>BTDevice<\/em>. The <em>DataValue<\/em> is set to the input text box for the first device.<\/p>\n<p>For device #2, we reference <em>BluetoothClient2<\/em>.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/ModifiedClickHandlers.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1623\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/ModifiedClickHandlers.png\" alt=\"\" width=\"413\" height=\"230\" \/><\/a><\/p>\n<p>Consider if you had an app that linked to multiple Bluetooth devices. (I have an app that communicates with six different Bluetooth devices simultaneously.) <em>Without references we need to duplicate our reading and writing code six times!<\/em><\/p>\n<p>By using references to components, we implement a single procedure. This saves code space in our app and makes future maintenance easier. If we need to change our <em>SendBTData<\/em> routine, or fix a problem, we need only modify a single procedure &#8211; <em>versus changing six pieces of code using the old method!<\/em><\/p>\n<p>For example, we can make a simplification to our simple <em>SendBTData<\/em> routine by changing the two separate calls to<em> .Send1ByteNumber<\/em> to a single call to <em>.SendBytes<\/em>:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/SendBTData2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1624\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/SendBTData2.png\" alt=\"\" width=\"442\" height=\"232\" \/><\/a><\/p>\n<p>.<em>SendBytes<\/em> takes its input as a list of values and sends them at once, instead of making separate calls to the <em>BluetoothClient<\/em>.<\/p>\n<p>Now that our code is in one procedure, we need make this change in one place &#8211; not in several different locations in our code.<\/p>\n<p>Using references to App Inventor components is an advanced programming method. As your skills develop and the size and scope of your programs grow and become more complex, &#8220;tricks&#8221; such as the use of references and consolidating common code into procedures will make your programs smaller, simpler and easier to debug and maintain.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Part 1\u00a0showed how to reference and store user interface components as a variable. That tutorial used this method to easily change the background colors of six buttons on screen. In Part 2, we\u00a0use this technique to simplify a past tutorial about using a Bluetooth link between and Android device and two Arduino devices.<\/p>\n","protected":false},"author":1,"featured_media":1625,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/1620","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=1620"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/1620\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/menu-items\/1625"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=1620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=1620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=1620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}