{"id":1579,"date":"2017-03-03T14:12:45","date_gmt":"2017-03-03T22:12:45","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=1579"},"modified":"2017-03-03T14:12:45","modified_gmt":"2017-03-03T22:12:45","slug":"storing-and-accessing-user-interface-components-as-variables","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2017\/03\/03\/storing-and-accessing-user-interface-components-as-variables\/","title":{"rendered":"Part 1: Storing and accessing user interface components as variables"},"content":{"rendered":"<p>App Inventor programmers routinely store values, such as numbers or text strings (&#8220;Hello!&#8221;) in variables. For example,<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/totalbuttons.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1592\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/totalbuttons.gif\" alt=\"\" width=\"317\" height=\"48\" \/><\/a>stores the numeric value 6 in to the variable <em>TOTALBUTTONS<\/em>.<\/p>\n<p>To illustrate by example, here is a global variable named <em>SpecialButton<\/em>. We can initialize it to anything we want at this point.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/SpecialButtonDef.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1598\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/SpecialButtonDef-300x46.gif\" alt=\"\" width=\"300\" height=\"46\" \/><\/a>Next, inside our app, our blocks code assigns <em>Button1<\/em> to the variable <em>SpecialButton<\/em>. <em>SpecialButton<\/em> now holds a reference to the actual user interface control <em>Button1<\/em>.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/InitButton.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1599\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/InitButton-300x60.gif\" alt=\"\" width=\"300\" height=\"60\" \/><\/a><\/p>\n<p>Since <em>SpecialButton<\/em> is a variable and not an actual button, we cannot directly use a <em>SpecialButton.Click <\/em>handler but we can use a feature of App Inventor to do the same thing in a different way. We will see how to do this in this a bit later.<\/p>\n<p>You can store any App Inventor components &#8211; a <em>Clock<\/em>, a <em>Bluetooth<\/em> device &#8211; any component, in a variable.<\/p>\n<p><em>Why would you want to do that? We will see in the example in this lesson<\/em>.<\/p>\n<p>This tutorial is in both written form and as an online video.<\/p>\n<p><!--more--><\/p>\n<p>To those who may have programmed in other languages, you may have seen this idea elsewhere. This idea is common in &#8220;object oriented programming&#8221; (or OOP). In OOP, nearly everything is an &#8220;object&#8221;. A number, a string, a variable, a list, user interface components, code blocks &#8211; everything becomes an &#8220;object&#8221;. App Inventor &#8220;components&#8221; are basically the same idea &#8211; each is an &#8220;object&#8221; or a &#8220;something&#8221; that exists.<em> If it exists, you can store it in a variable!<\/em><\/p>\n<p>This is Part 1 of a 2-part tutorial. This tutorial continues in <a href=\"http:\/\/appinventor.pevest.com\/?p=1620\">Part 2<\/a>.<\/p>\n<h2>Topics Mentioned<\/h2>\n<ul>\n<li>Lists<\/li>\n<li>Screen1.Initialize<\/li>\n<li>Component references<\/li>\n<li>For each loops<\/li>\n<li>Selecting colors<\/li>\n<\/ul>\n<h2>Online Video or this Tutorial<\/h2>\n<p>Watch here or <a href=\"https:\/\/youtu.be\/sujMdFD3Q2Y\">directly on Youtube<\/a> &#8211; be sure to click on the <strong><span style=\"color: #ff0000;\">Subscribe<\/span> <\/strong>button on Youtube! More videos coming!<\/p>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" style=\"position: absolute; width: 100%; height: 100%; left: 0;\" src=\"https:\/\/www.youtube.com\/embed\/sujMdFD3Q2Y?ecver=2\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h2>Source Code<\/h2>\n<p>Download source from the MIT App Inventor Gallery:<\/p>\n<p><a href=\"http:\/\/ai2.appinventor.mit.edu\/?locale=en#6458280812216320\">http:\/\/ai2.appinventor.mit.edu\/?locale=en#6458280812216320<\/a><\/p>\n<p>(The Gallery was not working when I published this post so use the alternate link if needed)<\/p>\n<p>Or download here: <a href=\"http:\/\/appinventor.pevest.com\/ExampleCode\/UsingComponentsList.aia\">UsingComponentsLists.aia<\/a><\/p>\n<p>And then upload to App Inventor using Projects | Import project from my computer &#8230;<\/p>\n<h2>User Interface View<\/h2>\n<p>The user interface is simple &#8211; to demonstrate the idea of storing user interface components in a variable, we create 6 buttons on the screen, and store each of the components into a list. When the <em>Change Button Colors<\/em> button is pressed, the six buttons are changed to a random color selection.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/Screenshot_20170223-104526.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1604\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/Screenshot_20170223-104526.jpg\" alt=\"\" width=\"282\" height=\"501\" \/><\/a><\/p>\n<p>After pressing <em>Change Button Colors<\/em>, we see the result:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/Screenshot_20170223-104536.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1605\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/03\/Screenshot_20170223-104536.jpg\" alt=\"\" width=\"286\" height=\"508\" \/><\/a><\/p>\n<h2>Designer View<\/h2>\n<p>The user interface is set up using a <em>VerticalArrangement<\/em> layout with 6 buttons added inside the <em>VerticalArrangement<\/em>, and one additional button outside. In most apps, I change the names of the buttons to something like <em>btnSaveFiles<\/em> to show what the button does &#8211; but in this example, we are referencing the buttons to store them in variables, so their name is not important and we use the default names of <em>Button1<\/em>, <em>Button2<\/em> and so on. Do change the text of each button, though, to read &#8220;Button 1&#8221;, &#8220;Button 2&#8221;, &#8230;.<\/p>\n<p>A 7th button is added &#8211; when touched, this button causes all of the other buttons to change color.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsDesigner.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1580\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsDesigner.gif\" alt=\"\" width=\"217\" height=\"300\" \/><\/a><\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsComponents.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1581\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsComponents.gif\" alt=\"\" width=\"191\" height=\"261\" \/><\/a><\/p>\n<h2>Blocks View<\/h2>\n<p>For this demonstration we will store the six buttons in a list named <em>ListOfButtons<\/em>. We assign the buttons to the list inside <em>Screen1&#8217;s .Initialize<\/em> event handler.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsBlocks1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1582\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsBlocks1.gif\" alt=\"\" width=\"408\" height=\"88\" \/><\/a><\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsBlocks2.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1583\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsBlocks2.gif\" alt=\"\" width=\"483\" height=\"233\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Where do you find the references to <em>Button1<\/em>, <em>Button2<\/em>, etc?<\/p>\n<p>Click on a button in the <em>Blocks<\/em> section, and then scroll all the way to the bottom of the list of events, procedures and properties:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/SelectingTheButton.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1591\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/SelectingTheButton.gif\" alt=\"\" width=\"441\" height=\"607\" \/><\/a><\/p>\n<p>As soon as our app begins running, it calls a procedure named <em>ChangeButtonColors<\/em> to immediately change the color of all the buttons (this procedure is explained below).<\/p>\n<p>Once our buttons are saved in a list, we change the color of the buttons by going through the list to get each button.<\/p>\n<p>First, <em>for each number from <\/em>creates an iteration loop &#8211; that is, this code will run through several times. The first time, the value of <em>number<\/em> is 1, and the code inside the for each block is executed. At the end of this code block <em>number<\/em> is increased by 1 to a value of 2. The loop continues, adding 1 to <em>number<\/em> at the end of the loop, until the value of <em>number<\/em> is greater than the value of <em>TOTALBUTTONS<\/em> (which is 6).<\/p>\n<p>Next, we obtain the button corresponding to <em>number<\/em> &#8211; e.g. when 1, we fetch <em>Button1<\/em>, when 2, we fetch <em>Button2<\/em>. This action is performed using the select list item block which is used to obtain the element of the list corresponding to the value of number. <em>Button1<\/em> is in position 1 of the list, <em>Button2<\/em> is in position 2 of the list, due to how we created the list in the .<em>Initialize<\/em> routine, above.<\/p>\n<p>Finally, we set the background color of the button control. Normally, you would set the <em>Button<\/em> background control using something like<\/p>\n<p><em>Set Button1.BackgroundColor to some color value<\/em><\/p>\n<p>But in our code, we are using the <em>Button1<\/em> reference from the list &#8211; and need a different way to access <em>Button1<\/em>&#8216;s <em>BackgroundColor<\/em> property. To do that, we use a semi secret block hidden at the bottom left of the Blocks.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsAnyComponentClosed.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1586\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsAnyComponentClosed.gif\" alt=\"\" width=\"193\" height=\"502\" \/><\/a><\/p>\n<p>Click on the + arrow next to <em>Any component<\/em> &#8211; you it opens to display additional blocks:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsAnyComponentOpen.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1587\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsAnyComponentOpen.gif\" alt=\"\" width=\"198\" height=\"77\" \/><\/a><\/p>\n<p>Since our app is\u00a0 simple, we see only a few components here. In a large app, many components will be shown.<\/p>\n<p>Next, click on <em>Any Button<\/em> and see a pop up of available blocks &#8211; select the <em>Set<\/em> <em>Button.BackgroundColor<\/em> block.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsBackgroundColor.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1588\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsBackgroundColor.gif\" alt=\"\" width=\"404\" height=\"390\" \/><\/a><\/p>\n<p>Putting this together, we end up with these blocks:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsBlocks3.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1584\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentsBlocks3.gif\" alt=\"\" width=\"836\" height=\"326\" \/><\/a><\/p>\n<p>We could set the <em>BackgroundColor<\/em> to a color swatch available in the palette but we want to set the color to a randomly selected color. The block <em>make color<\/em> takes as input, three separate values, each in value from 0 to 255. The first value sets the Red color, the second value sets the Green color and the third sets the Blue color value. Combinations of red, green and blue produce any color. Values near 0 are very dark and values near 255 are very light. If we set the color values to [0, 0, 0] we get black and if set to [255, 255, 255] we get white. In between black and white, we get a rainbow of colors.<\/p>\n<p>In our app, we set the values to a random number between the value of 20 to 240. This avoids selecting colors that are too dark or too bright.<\/p>\n<p>To summarize, this code goes through our list of six buttons, obtains a reference to the button, and then uses the special set <em>Button.BackgroundColor<\/em> of component block to access the property of the selected button.<\/p>\n<p>With the <em>ChangeButtonColors<\/em> procedure written, all we need to do is call the procedure each time our 7th button is pressed:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentBlocks4.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1585\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/ComponentBlocks4.gif\" alt=\"\" width=\"279\" height=\"86\" \/><\/a><\/p>\n<h2>Why Do This?<\/h2>\n<p>The code above shows a way to change the background colors of a group of buttons without having to access every button individually. We could alternately write out this code for each individual button, something like:<\/p>\n<p>Set Button1.BackgroundColor = make color &#8230;<\/p>\n<p>Set Button2.BackgroundColor = make color &#8230;<\/p>\n<p>Set Button3.BackgroundColor = make color &#8230;<\/p>\n<p>In other words, repeat nearly identical code six times. While this is a simple example, in more complex programs, this could end up with a lot of duplicate code. Duplicate code not only uses more memory space but is harder to maintain &#8211; if we make a fix to one section we must then copy our fix to all of the other copies of that code!<\/p>\n<p>There are other\u00a0 examples where the same code needs to run for each control.<\/p>\n<p>For example, previous tutorials on this blog have shown how to use Bluetooth to send serial data to and from another Android device or an Arduino board. I have a large, complex app that is a part of a commercial product and it communicates with six external devices using Bluetooth. Rather than write code to read and write from each of the six Bluetooth devices, I wrote one code block that does the reading and one code bock that does the writing. I reference the Bluetooth device in a manner similar to that described above, and store the Bluetooth device references in a list.<\/p>\n<p>Reading or writing to the Bluetooth devices uses the same block of code &#8211; only the reference to the Bluetooth device itself changes, to select which of the six Bluetooth connections will be used.<\/p>\n<p>This simplifies the code by<\/p>\n<ul>\n<li>making the total app code smaller<\/li>\n<li>makes bug fixing easier as bug fixes do not have to be copied to separate code blocks handling each device one by on<\/li>\n<li>making performance improvements easier, as only one block of code needs to be improved, rather than several.<\/li>\n<\/ul>\n<p>I hope to revise a previous on Bluetooth to show how to do this to support two Bluetooth devices with one code section.<\/p>\n<p>The suggested exercise in the next section illustrates another example for using component references, as described in this tutorial.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/?p=1620\">Part 2 of this tutorial<\/a> provides another example of why the use of reference is valuable to reduce code size, simplify programming and to make future maintenance and modification to your programs easier.<\/p>\n<h2>Suggested Exercise<\/h2>\n<p>Suppose you have a user interface screen that displays six <em>Checkbox<\/em> components. Write a procedure to set all of the <em>Checkbox<\/em> items so to &#8220;checked&#8221; by default. You can do this by putting the check box user interface components into a list and then, go through the list and change the component&#8217;s Checked property to true. To clear the check box selection, set the <em>Checked<\/em> property to false.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/Screenshot_Resized.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1594\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2017\/02\/Screenshot_Resized.jpg\" alt=\"\" width=\"270\" height=\"480\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>App Inventor programmers routinely store values, such as numbers or text strings (&#8220;Hello!&#8221;) in variables. For example, stores the numeric value 6 in to the variable TOTALBUTTONS. To illustrate by example, here is a global variable named SpecialButton. We can initialize it to anything we want at this point. Next, inside our app, our blocks &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2017\/03\/03\/storing-and-accessing-user-interface-components-as-variables\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Part 1: Storing and accessing user interface components as variables<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10,14],"tags":[],"class_list":["post-1579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-components","category-programming-method","category-user-interfacedesign"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/1579","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=1579"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/1579\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media\/1609"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=1579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=1579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=1579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}