You are here: Hello » Tutorials » Radio Button in AppInventor


This shows you the differences between two versions of the page.

Link to this comparison view

tutorial:radiobutton [2012/11/26 08:18] (current)
Line 1: Line 1:
 +===== Radio Button in AppInventor ======
 +{{https://​​--I9-qmDbmow/​T3lbjKz-XBI/​AAAAAAAADvA/​1MzaBScjdWI/​s128/​screenshot.02-04-2012%2010.55.59.jpg?​75 }}There is no RadioButton in AppInventor'​s components list, so you have to build it yourself. I've saw [[http://​​watch?​v=Hc_j3zAezv4|youtube tutorial]] how to build RadioButtons based on CheckBoxes. I didn't realy liked that work-a-round,​ though it works. But that tutorial trow me idea how to build more RadioButton looking ones, out from {{popup>​ai:​component:​basic:​image|Images}} and regular {{popup>​ai:​component:​basic:​button|Buttons}}
 +==== Graphical user interface design ====
 +To build RadioButton in AppInventor,​ follow this tutorial:
 +You will need TableArrangement,​ Images and Buttons. Also you will need images, that represents RadioButtons status. Build your own thet fits your theme or download from me:​{{https://​​-mjQWVkk8wDQ/​T3lYZGo6kuI/​AAAAAAAADu0/​25od4q86Tl0/​s128/​rbc.png}} {{https://​​-52BeILV1e3M/​T3lYZGss1bI/​AAAAAAAADuw/​JwLMAZ0FCX4/​s128/​rbu.png}} ​
 +I named my images as ''​rbu.png''​ //​(unchecked)//​ & ''​rbc.png''​ //​(checked)//​. Upload this media to your server.
 +|Image#​|Image|''​rbu.png''​ //or any other image that represents unchecked image//|
 +|Image#​|Height|30 pixels|
 +|TableArrangement|Rows|''​3''​ //One row will represent one RadioButton//​|
 +| The table represent properties other than default |||
 +[[https://​​lh/​photo/​dswIde-mDMZ5Jh7nL-P0ROOTSUKDtqMXV2iiaJ9poqM?​feat=directlink|{{https://​​-NFDgSxBAI8Q/​T3ljKcvckzI/​AAAAAAAADvw/​x4FA0h2kk38/​s128/​screenshot.02-04-2012%2011.28.31.jpg }}]]
 +[[https://​​lh/​photo/​SZacla_K8qMUebUcCY-nl-OTSUKDtqMXV2iiaJ9poqM?​feat=directlink|{{https://​​-bdzsFsWWzqw/​T3lf0RsHJtI/​AAAAAAAADvg/​NKRtZMcTanM/​s128/​screenshot.02-04-2012%2011.14.09.jpg }}]]
 +You may edit other properties to customize look of application,​ but these changes are mandatory. I preset all my RadioButtons as unchecked by default. Here is it how it looks in AppInventor development screen.
 +Button4 and Notifier1 is used to test how everything works. Its not mandatory in for RadioButton tutorial.
 +==== Programming part (aka AppBlocks) ====
 +[[https://​​lh/​photo/​dswIde-mDMZ5Jh7nL-P0ROOTSUKDtqMXV2iiaJ9poqM?​feat=directlink|{{https://​​-7uiXuqXgC5Y/​T3lnMRmnGHI/​AAAAAAAADwA/​Bgc6TTMubeQ/​s128/​screenshot.02-04-2012%2011.45.39.jpg }}]]
 +I will use two global variables, one for group name. I've called it **radioGroupt1**. Other variable **radioGroup1Variable** will be used to store that groups value. Initial **radioGroup1** value i set to text "​0"​. **radioGroup1Value** is set to text <​empty>​
 +[[https://​​lh/​photo/​Ab6k_0hV6JA2UqGHr2zWd-OTSUKDtqMXV2iiaJ9poqM?​feat=directlink|{{https://​​-E17DkkLm4cI/​T3mBT9qObpI/​AAAAAAAADwQ/​Vff18Gk_yMA/​s128/​screenshot.02-04-2012%2013.37.05.jpg }}]] On application initialization we need to have global variable **radioGroup1** as a list of all RadioButtons that belongs to this group. In this tutorial I've build just one group, but with a little modification to **radioGroup1Switch** function (additional argument and and use it in foreach list). Also you need to pass a variables of a list, whom belongs that button and image.If RadioButton groups has more than 3 elements- add more images components to list.
 +[[https://​​lh/​photo/​ZUvx8wqh8Ws3d9bT-QsnIeOTSUKDtqMXV2iiaJ9poqM?​feat=directlink|{{https://​​-XJwy6P8CmKM/​T3mBl1GCB3I/​AAAAAAAADwg/​kuwZAlmxvNM/​s128/​screenshot.02-04-2012%2013.38.23.jpg }}]] Now lets analyze "​heart"​ of the program- RadioButton switching function **radioGroup1Switch**. As I'me mentionet earlier you may edit it a little and you can reuse it for multiple RadioButtons groups. In this tutorial I only used it for one group, so tried to keep it as simple as possible. ​
 +!!!!I will analyze it block-by-block.
 +On any call, funtions sets all RadioButtons to unckecked (''​rbu.png''​) state. This is done in foreach loop with global variable **radioGroup1** witch represents our list of images of specific group. ​
 +After a loop I set specific image to checked (''​rbc.png''​) state.
 +The las one block changes **radioGroup1Value** to specific buttons value.
 +__That'​s it, as simple as that!!__
 +[[https://​​lh/​photo/​39XJbWBCQw6_sReyePphSuOTSUKDtqMXV2iiaJ9poqM?​feat=directlink|{{https://​​-fJ2wyUX7wVw/​T3mBpscVR6I/​AAAAAAAADwo/​Op7rqt0mJFs/​s128/​screenshot.02-04-2012%2013.38.45.jpg }}]] Now wee need to call our function by button click with two parameter- component and value for **radioGroup1value**.
 +If you modified **radioGroup1Switch** to work with multiple RadioButton groups- then you should pass group on button click together with the rest arguments.
 +Button click method is quite straight forward, so i do not analyze it deeply, I leave it to yourself.
 +==== Testing ====
 +[[https://​​lh/​photo/​D3dyCywc_VqiUxcFSFR1o-OTSUKDtqMXV2iiaJ9poqM?​feat=directlink|{{https://​​-PLO04j5Mn-w/​T3mBvDBd2KI/​AAAAAAAADww/​ogawQv76C-I/​s128/​screenshot.02-04-2012%2013.39.08.jpg }}]]
 +For testing purposes I've added additional button **Button4**. It's click method checks if value in **radioGroup1Value** is not empty and show it or displays message about error. For these messages I've used [[Notifier|Components-Other]] components function //​ShowAlert//​
 +==== Full AppBlocks view for Tutorial#1: RadioButton ====
 +{{ https://​​-iNicXs3XMN8/​T3mqYwo-duI/​AAAAAAAADxk/​kBA6zRABbTU/​s720/​screenshot.02-04-2012%252016.32.19.jpg }}
 +{{tag>​tutorial radiobutton ai appinventor component workaround}}
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 3.0 Unported - Nemokamas lankytojų skaitliukas XHTML