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~~ |