{"id":885,"date":"2015-09-08T17:13:33","date_gmt":"2015-09-09T00:13:33","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=885"},"modified":"2015-09-08T17:13:33","modified_gmt":"2015-09-09T00:13:33","slug":"tip-using-component-colors-to-find-components-in-the-blocks-editor","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2015\/09\/08\/tip-using-component-colors-to-find-components-in-the-blocks-editor\/","title":{"rendered":"Tip: Using component colors to find components in the Blocks Editor"},"content":{"rendered":"<p>Finding a specific programming block with in the AI2 Blocks editor can be hard for new AI programmers.<\/p>\n<p><em>You found a great code example online and want to recreate it by entering the blocks in to your program &#8211; but you cannot find that red block in the middle of the code sample? Where is it? !!!<\/em><\/p>\n<p>You start poking\u00a0around the drop down lists, scanning up and down the pop up menus, missing it the first time(!) and then going through all the blocks again until you finally locate that darned block! Frustrating!<\/p>\n<p><!--more--><\/p>\n<p>Here\u00a0is a sample code section:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/09\/ColorCode0.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-891\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/09\/ColorCode0.png\" alt=\"ColorCode0\" width=\"603\" height=\"209\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><em>How do you find that red &#8220;<span style=\"text-decoration: underline;\">split at first<\/span>&#8221; block in the top middle?<\/em><\/p>\n<p>There are two ways to help find the block in the Blocks editor.<\/p>\n<p><em>One is the block color<\/em> &#8211;<span style=\"text-decoration: underline;\"> the blocks are color coded.<\/span> The <span style=\"color: #000000;\">red <\/span>block corresponds to the &#8220;Text&#8221; blocks as seen in the list of Built-in Blocks in the editor:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/09\/ColorCode2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-887\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/09\/ColorCode2.png\" alt=\"ColorCode2\" width=\"154\" height=\"261\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Blocks\u00a0such as &#8220;<em>If-then<\/em>&#8221; are <em>light brown<\/em> in color. Where would you find the <em>if-then<\/em> block? Probably in the &#8220;Control&#8221; section!<\/p>\n<p>&nbsp;<\/p>\n<p>The second method\u00a0is to look at how the block is used and what type of parameters it works with. In the example above,\u00a0you may\u00a0guess the\u00a0&#8220;<em>split at first<\/em>&#8221; block\u00a0is a Text block because it uses text as a parameter.<\/p>\n<p><em>As you learn your way around the App Inventor Blocks editor, use the block color to guide you towards a likely location for the block. Use hints about the block&#8217;s usage to further refine the location.<\/em><\/p>\n<p><strong>Color Coding Does Not Always Work!<\/strong><\/p>\n<p>Consider the following code segment:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/09\/ColorCode2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-886 alignnone\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/09\/ColorCode1.png\" alt=\"ColorCode1\" width=\"758\" height=\"323\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Where do we find the light brown <em>&#8220;when&#8221;<\/em> block?<\/strong> Its the same color as the &#8220;<em>if-then<\/em>&#8221; block &#8211; but it is not located in the Control section!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-888\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/09\/ColorCode3.png\" alt=\"ColorCode3\" width=\"428\" height=\"211\" \/><\/p>\n<p>This is where the color coding scheme is not fool proof.<\/p>\n<p>When a block names a control (such as <em>Spinner1<\/em>)\u00a0you must\u00a0click on the <em>Spinner1<\/em>\u00a0control\u00a0in the list of components on the left side of the Blocks editor, to find the block. Even though this event handler block is the same color as a Control, you will not find the event handler in the Control section!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-889\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2015\/09\/ColorCode4.png\" alt=\"ColorCode4\" width=\"575\" height=\"335\" \/><\/p>\n<p>Dark green blocks\u00a0<em>set<\/em> the value of a control\u00a0property. These are also located by clicking on the component name.<\/p>\n<p>Light green blocks <em>get<\/em> the value of a property, and these light green blocks\u00a0are found by clicking on the component name.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Strategy<\/strong><\/p>\n<p>With practice, you will soon memorize the location of each block &#8211; really!<\/p>\n<p>But until that happens, use the color coding to help you find a needed block.<\/p>\n<p>Learn to recognize references to controls and remember to click on the control in the list of user interface controls, at lower left to look for event handlers, &#8220;calls&#8221; to method procedures, and to get and set property values.<\/p>\n<p>Hope these tips are useful to you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Finding a specific programming block with in the AI2 Blocks editor can be hard for new AI programmers. You found a great code example online and want to recreate it by entering the blocks in to your program &#8211; but you cannot find that red block in the middle of the code sample? Where is &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2015\/09\/08\/tip-using-component-colors-to-find-components-in-the-blocks-editor\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Tip: Using component colors to find components in the Blocks Editor<\/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,6,10,12],"tags":[19,22,28,52,132,151,170,171,172,176,181,190],"class_list":["post-885","post","type-post","status-publish","format-standard","hentry","category-components","category-documentation","category-programming-method","category-stem-education","tag-android","tag-app-inventor","tag-appinventor","tag-cellular","tag-mobile","tag-programming","tag-smart-phone","tag-smart-phones","tag-smartphone","tag-software","tag-stem","tag-tablets"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/885","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=885"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/885\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}