Differences

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

--- tutorial:radiobutton [2012/11/26 08:18]
+++ tutorial:radiobutton [2012/11/26 08:18] (current)
@@ Line 1: / Line 1: @@
+===== Radio Button in AppInventor ======
+{{https://lh4.googleusercontent.com/--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://www.youtube.com/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://lh4.googleusercontent.com/-mjQWVkk8wDQ/T3lYZGo6kuI/AAAAAAAADu0/25od4q86Tl0/s128/rbc.png}} {{https://lh6.googleusercontent.com/-52BeILV1e3M/T3lYZGss1bI/AAAAAAAADuw/JwLMAZ0FCX4/s128/rbu.png}}
+I named my images as ''rbu.png'' //(unchecked)// & ''rbc.png'' //(checked)//. Upload this media to your server.
+^Component^Property^Value^
+|Image#|Image|''rbu.png'' //or any other image that represents unchecked image//|
+|Image#|Height|30 pixels|
+|Button#|BackgroundColor|None|
+|Button#|TextAlignment|left|
+|TableArrangement|Rows|''3'' //One row will represent one RadioButton//|
+| The table represent properties other than default |||
+[[https://picasaweb.google.com/lh/photo/dswIde-mDMZ5Jh7nL-P0ROOTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh3.googleusercontent.com/-NFDgSxBAI8Q/T3ljKcvckzI/AAAAAAAADvw/x4FA0h2kk38/s128/screenshot.02-04-2012%2011.28.31.jpg }}]]
+[[https://picasaweb.google.com/lh/photo/SZacla_K8qMUebUcCY-nl-OTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh6.googleusercontent.com/-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://picasaweb.google.com/lh/photo/dswIde-mDMZ5Jh7nL-P0ROOTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh6.googleusercontent.com/-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://picasaweb.google.com/lh/photo/Ab6k_0hV6JA2UqGHr2zWd-OTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh3.googleusercontent.com/-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://picasaweb.google.com/lh/photo/ZUvx8wqh8Ws3d9bT-QsnIeOTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh3.googleusercontent.com/-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://picasaweb.google.com/lh/photo/39XJbWBCQw6_sReyePphSuOTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh5.googleusercontent.com/-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://picasaweb.google.com/lh/photo/D3dyCywc_VqiUxcFSFR1o-OTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh3.googleusercontent.com/-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://lh3.googleusercontent.com/-iNicXs3XMN8/T3mqYwo-duI/AAAAAAAADxk/kBA6zRABbTU/s720/screenshot.02-04-2012%252016.32.19.jpg }}
+{{tag>tutorial radiobutton ai appinventor component workaround}}
+~~DISCUSSION~~