Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

radio buttons inside a radiobuttongroup made using repeater

Posted on 2011-03-14
13
788 Views
Last Modified: 2012-05-11
I am having a vbox, which has radio buttons made using radiobuttongroup and the repeater ??
Also i have text area as questions.
how can  i save the user input  from radio buttons and radio buttons?
0
Comment
Question by:anil_fdk
  • 8
  • 5
13 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 35134422
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Script>
		<![CDATA[
			[Bindable]
			private var _list:Array = [1,2,3,4,5,6,7,8];
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<mx:RadioButtonGroup id="rbg"/>
	</fx:Declarations>
	<mx:VBox width="100%" height="100%">
		<mx:Repeater id="rep" dataProvider="{_list}">
			<mx:RadioButton group="{rbg}" label=" RadioButton{rep.currentItem}" value="{rep.currentItem}" selected="{rep.currentIndex == 0}"/>
		</mx:Repeater>
	</mx:VBox>
	<mx:TextInput text="{rbg.selectedValue}"/>
</s:Application>

Open in new window

0
 

Author Comment

by:anil_fdk
ID: 35138074
hi
thanks for the reply, i have been able to make the app til the part you described above, is there anyway to add repeater dynamically , depending on what data is coming (boolean, string etc)
Also to save the input from the radio buttons , what method is preferred?/
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35140562
I cannot understand what you want. You can change dataProvider in the Repeter at runtime. And get selected rabdio button value from RafioButtonGroup

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			[Bindable]
			private var _list1:Array = [1,2,3,4,5,6,7,8];
			[Bindable]
			private var _list2:Array = ["Value 1","Value 2","Value 3","Value 4","Value 5","Value 6"];
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<mx:RadioButtonGroup id="rbg"/>
	</fx:Declarations>
	<mx:VBox width="100%" height="200">
		<mx:Repeater id="rep">
			<mx:RadioButton group="{rbg}" label=" RadioButton{rep.currentItem}" value="{rep.currentItem}" selected="{rep.currentIndex == 0}"/>
		</mx:Repeater>
	</mx:VBox>
	<mx:TextInput text="{rbg.selectedValue}"/>
	<mx:Button label="Numbers" click="rep.dataProvider=_list1"/>
	<mx:Button label="Strings" click="rep.dataProvider=_list2"/>
</s:Application>

Open in new window

0
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 

Author Comment

by:anil_fdk
ID: 35140801
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
	minWidth="955" minHeight="600" fontFamily="Arial" fontSize="12 ">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->

		<mx:RadioButtonGroup id="rbg"
			itemClick="rbg_itemClickHandler(event)" />
	</fx:Declarations>
	<fx:Script> 
           <![CDATA[ 
                 import mx.collections.ArrayCollection; 
                 import mx.controls.Alert; 
                 import mx.events.ItemClickEvent; 
                 import mx.states.AddChild; 

                  
                  
                  
                 [Bindable] 
                 var rques:ArrayCollection = new ArrayCollection ([ 
                       {type:"radio", text:"Are"}, 
                       {type:"radio", text:"Are"}, 
                       {type:"radio", text:"?"}, 
                       {type:"radio", text:""}, 
                       {type:"radio", text:"O"}, 
                       {type:"radio", text:"?"}, 
                       {type:"radio", text:"?"}, 
                       {type:"radio", text:""},]);       
                  
                 [Bindable] 
                 public var tques: ArrayCollection = new ArrayCollection ([ 
                       {type:"txt", text:""}, 
                       {type:"txt", text:""}]); 
                 [Bindable] 
                 private var rbGroups:ArrayCollection; 
                  
                 private function createRBGroups():void{ 
                       rbGroups= new ArrayCollection(); 
                       var repeaterDP:ArrayCollection = r.dataProvider as ArrayCollection; 
                       var rbGroup:RadioButtonGroup; 
                       for each(var item:Object in repeaterDP){ 
                             rbGroup = new RadioButtonGroup(); 
                             rbGroups.addItem(rbGroup); 
                       } 
                 } 
                  
                 private function submit():void { 
                       var arr:ArrayCollection = rbGroups; 
                        
                       Alert.show(arr[1].selectedValue.label); 
                 } 



                 protected function rbg_itemClickHandler(event:ItemClickEvent):void 
                 { 
                       var arr:ArrayCollection = rbGroups; 
                       Alert.show(event.label); 
                 } 


                 protected function components():void{} 
                        

           ]]>
	</fx:Script>

	<mx:VBox height="850" width="770" horizontalCenter="10">

		<mx:VBox paddingTop="20" paddingBottom="20" paddingLeft="20"
			paddingRight="20" height="70" width="700" horizontalScrollPolicy="off"
			verticalScrollPolicy="off">

			<mx:Text text=""
			height="60" width="680" />
		</mx:VBox>
		<mx:Spacer width="5" />


		<mx:VBox height="620" width="710" paddingLeft="10"
			verticalGap="0" horizontalScrollPolicy="off">
			<mx:Repeater id="r" dataProvider="{rques}" repeatStart="createRBGroups()">

				<mx:VBox height="50" width="698" horizontalScrollPolicy="off"
					verticalScrollPolicy="off" borderStyle="solid" borderColor="#0099ff">
					<mx:HBox>
						<mx:VBox paddingTop="10" paddingBottom="10" width="540"
							horizontalScrollPolicy="off" verticalScrollPolicy="off"
							paddingLeft="10">

							<mx:Text text="{r.currentIndex+1}. {r.currentItem.text}"
								height="40" width="460" />
						</mx:VBox>
						<mx:HBox paddingTop="10" height="40">
							<mx:RadioButton label="Yes"
								group="{RadioButtonGroup(rbGroups.getItemAt(r.currentIndex))}" />
							<mx:Spacer width="5" />
							<mx:RadioButton label="No"
								group="{RadioButtonGroup(rbGroups.getItemAt(r.currentIndex))}" />
						</mx:HBox>
					</mx:HBox>
				</mx:VBox>
			</mx:Repeater>

			<mx:Repeater id="t" dataProvider="{tques}">

				<mx:VBox height="100" width="698" horizontalScrollPolicy="off"
					verticalScrollPolicy="off" borderStyle="solid" borderColor="#0099ff">
					<mx:HBox paddingTop="10" width="600" height="30"
						horizontalScrollPolicy="off" verticalScrollPolicy="off"
						textIndent="10">

						<mx:Text text="{t.currentIndex+9}. {t.currentItem.text}"
							width="600" />
					</mx:HBox>

					<mx:HBox paddingLeft="10" width="540" height="60"
						horizontalScrollPolicy="off" verticalScrollPolicy="off">
						<s:TextArea width="500" height="45" />
					</mx:HBox>
				</mx:VBox>
			</mx:Repeater>
		</mx:VBox>

		<mx:HBox paddingRight="20" textAlign="center">
			<mx:Spacer width="445" />
			<mx:Button id="btn_Cancel" label="Cancel" width="120" />
			<mx:Button id="btn_Submit" label="Submit" width="120" />
		</mx:HBox>

	</mx:VBox>
</s:Application> 

Open in new window


in the above code , how will i dynamically create the radio buttons vox or text box, dpending on what kind of data is coming, and save the user input?????????
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35143746
Why do you need two Repeats?
Check if this code handle your problems

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
			   fontFamily="Arial" fontSize="12 " 
			   >
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		
		<mx:RadioButtonGroup id="rbg" itemClick="rbg_itemClickHandler(event)" />
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.ItemClickEvent;
			import mx.states.AddChild;

			[Bindable]
			private var listData:ArrayCollection = new ArrayCollection ([
				{type:"radio", text:"Are you looking ?"},
				{type:"radio", text:"Are you looking to "},
				{type:"radio", text:"Are you intrested i?"},
				{type:"radio", text:"Do you plan t"},
				{type:"radio", text:"One way"},
				{type:"radio", text:"Are you ?"},
				{type:"radio", text:"Are you...?"},
				{type:"radio", text:"Are you...?"},
				{type:"txt", text:"How can we ...?"},
				{type:"txt", text:"If you answered Yes to any of the questions , please provide more detail here."}
			]);      
	
			[Bindable]
			private var rbGroups:ArrayCollection;
			
			private function createRBGroups():void{
				rbGroups= new ArrayCollection();
				var repeaterDP:ArrayCollection = r.dataProvider as ArrayCollection;
				var rbGroup:RadioButtonGroup;
				for each(var item:Object in repeaterDP){
					rbGroup = new RadioButtonGroup();
					rbGroups.addItem(rbGroup);
				}
			}
			
			private function submit():void {
				var options:Array = [];
				for(var i:uint = 0; i < listData.length; i++){
					var item:Object = listData[i];
					var str:String = label[i].text;
					if(item.type == 'radio'){
						options.push(str + "="+ rbGroups[i].selectedValue);
					}else{
						options.push(str + "="+ info[i].text);
					}
				}
				Alert.show(options.join("\n"));
			}
			
			
			
			protected function rbg_itemClickHandler(event:ItemClickEvent):void
			{
				var arr:ArrayCollection = rbGroups;
				Alert.show(event.label);
			}
			
			
			protected function components():void{}
			
			
		]]>
	</fx:Script>
	
	<mx:VBox  height="850" width="770"  horizontalCenter="10" >
		
		<mx:VBox id="medpolicyQues"
				 paddingTop="20"
				 paddingBottom="20"
				 paddingLeft="20"
				 paddingRight="20"
				 height="70" width="700" horizontalScrollPolicy="off" verticalScrollPolicy="off">
			
			<mx:Text text="" 
					 height="60" width="680" />
		</mx:VBox>
		<mx:Spacer width="5" />
		
		
		<mx:VBox height="620" width="710"   paddingLeft="10" verticalGap="0"  horizontalScrollPolicy="off" >
			<mx:Repeater id="r" dataProvider="{listData}" repeatStart="createRBGroups()"  >
				<mx:VBox width="698" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="solid"  borderColor="#0099ff">
					<mx:HBox>
						<mx:VBox paddingTop="10"  paddingBottom="10" width="540" 
								 horizontalScrollPolicy="off" verticalScrollPolicy="off" 
								 paddingLeft="10">
							<mx:Label id="label" text="{r.currentIndex+1}. {r.currentItem.text}" width="460" />

							<mx:HBox paddingLeft="10" width="540" height="60" horizontalScrollPolicy="off" verticalScrollPolicy="off" 
									 visible="{r.currentItem.type=='txt'}" includeInLayout="{r.currentItem.type=='txt'}">
								<mx:TextArea id="info" width="500" height="45" />
							</mx:HBox>
						</mx:VBox>

						<mx:HBox paddingTop="10" height="40" 
								 visible="{r.currentItem.type=='radio'}" includeInLayout="{r.currentItem.type=='radio'}">
							<mx:RadioButton label="Yes" group="{RadioButtonGroup(rbGroups.getItemAt(r.currentIndex))}" value="YES"/>
							<mx:Spacer width="5"/>
							<mx:RadioButton label="No" group="{RadioButtonGroup(rbGroups.getItemAt(r.currentIndex))}" value="NO"/>
						</mx:HBox>
					</mx:HBox>
				</mx:VBox>
			</mx:Repeater>
		</mx:VBox>
		
		<mx:HBox paddingRight="20"  textAlign="center">
			<mx:Spacer width="445"/>
			<mx:Button id="btn_Cancel" label="Cancel" width="120"/>
			<mx:Button id="btn_Submit" label="Submit" click="submit()" width="120"/>
		</mx:HBox>
		
	</mx:VBox>
</s:Application>

Open in new window

0
 
LVL 29

Expert Comment

by:dgofman
ID: 35144314
But I will optimize and remove RadioButtonGroup from your implementation, because you always using only two RadioButtons. Check this code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
			   fontFamily="Arial" fontSize="12 " 
			   >
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;

			[Bindable]
			private var listData:ArrayCollection = new ArrayCollection ([
				{type:"radio", text:"Are you looking ?"},
				{type:"radio", text:"Are you looking to "},
				{type:"radio", text:"Are you intrested i?"},
				{type:"radio", text:"Do you plan t"},
				{type:"radio", text:"One way"},
				{type:"radio", text:"Are you ?"},
				{type:"radio", text:"Are you...?"},
				{type:"radio", text:"Are you...?"},
				{type:"txt", text:"How can we ...?"},
				{type:"txt", text:"If you answered Yes to any of the questions , please provide more detail here."}
			]);      

			private function submit():void {
				var options:Array = [];
				for(var i:uint = 0; i < listData.length; i++){
					var item:Object = listData[i];
					var str:String = label[i].text;
					if(item.type == 'radio'){
						options.push(str + "="+ (yes_rb[i].selected ? "YES" : "NO"));
					}else{
						options.push(str + "="+ info[i].text);
					}
				}
				Alert.show(options.join("\n"));
			}
			
		]]>
	</fx:Script>
	
	<mx:VBox  height="850" width="770"  horizontalCenter="10" >
		
		<mx:VBox id="medpolicyQues"
				 paddingTop="20"
				 paddingBottom="20"
				 paddingLeft="20"
				 paddingRight="20"
				 height="70" width="700" horizontalScrollPolicy="off" verticalScrollPolicy="off">
			
			<mx:Text text="" 
					 height="60" width="680" />
		</mx:VBox>
		<mx:Spacer width="5" />
		
		
		<mx:VBox height="620" width="710"   paddingLeft="10" verticalGap="0"  horizontalScrollPolicy="off" >
			<mx:Repeater id="r" dataProvider="{listData}">
				<mx:VBox width="698" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="solid"  borderColor="#0099ff">
					<mx:HBox>
						<mx:VBox paddingTop="10"  paddingBottom="10" width="540" 
								 horizontalScrollPolicy="off" verticalScrollPolicy="off" 
								 paddingLeft="10">
							<mx:Label id="label" text="{r.currentIndex+1}. {r.currentItem.text}" width="460" />

							<mx:HBox paddingLeft="10" width="540" height="60" horizontalScrollPolicy="off" verticalScrollPolicy="off" 
									 visible="{r.currentItem.type=='txt'}" includeInLayout="{r.currentItem.type=='txt'}">
								<mx:TextArea id="info" width="500" height="45" />
							</mx:HBox>
						</mx:VBox>

						<mx:HBox paddingTop="10" height="40" 
								 visible="{r.currentItem.type=='radio'}" includeInLayout="{r.currentItem.type=='radio'}">
							<mx:RadioButton id="yes_rb" label="Yes" groupName="group{r.currentIndex}"/>
							<mx:Spacer width="5"/>
							<mx:RadioButton id="no_rb" label="No" groupName="group{r.currentIndex}"/>
						</mx:HBox>
					</mx:HBox>
				</mx:VBox>
			</mx:Repeater>
		</mx:VBox>
		
		<mx:HBox paddingRight="20"  textAlign="center">
			<mx:Spacer width="445"/>
			<mx:Button id="btn_Cancel" label="Cancel" width="120"/>
			<mx:Button id="btn_Submit" label="Submit" click="submit()" width="120"/>
		</mx:HBox>
		
	</mx:VBox>
</s:Application>

Open in new window

0
 

Author Comment

by:anil_fdk
ID: 35147297
Hi, thanks a lot, the code is working perfectly fine ,
Can you help in one thing, the vbox borders are overlapping, can we do something to
look them they are not overlapping, still i want the horizontal lines seprating the ques???
0
 
LVL 29

Accepted Solution

by:
dgofman earned 500 total points
ID: 35149299
user borderSize CSS attribute (top,left,right). And on the end you can add one extra box with only "top" CSS parameter
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35149444
Create a CSS style declaration

 <fx:Style>
	@namespace mx "library://ns.adobe.com/flex/mx";
	mx|VBox.topBorder, mx|VBox.rowBorder{
		borderSides: "top";
		borderStyle:solid;
		borderColor:#0099ff;
	}
	mx|VBox.rowBorder{
		borderSides: "left right bottom";
	}
</fx:Style>

Open in new window


And apply CSS style name to your VBox(es)
<mx:VBox height="620" width="700" verticalGap="0"  horizontalScrollPolicy="off" styleName="topBorder">
			<mx:Repeater id="r" dataProvider="{listData}">
				<mx:VBox width="100%" styleName="rowBorder">

Open in new window


NOTE:

borderSides - available only for HALO theme. So if you are using Eclipse (FB) you need to change compiler arguments:

-locale en_US -theme=${flexlib}/themes/Halo/halo.swc
0
 

Author Comment

by:anil_fdk
ID: 35149944
i am using FB, with specified HALO theme but still it gives warning
Warning: CSS type selectors are not supported in components: 'mx.containers.VBox.topBorder'
Warning: CSS type selectors are not supported in components: 'mx.containers.VBox.rowBorder'

And it does not dislplay any borders.
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35150327
What version of FB are you using and SDK?
The code what I sent to you working well on FB4 & SDK 4
0
 

Author Comment

by:anil_fdk
ID: 35150372
well yes it is, but i am using sdk 4.1, and namespace used is mx instead of fx
This is because everthing else has been done in mx , it seems like VBox does not support the
stylename in this namespace , Can u help????
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35150418
In this case do not use any spark components. For example you are declared s:Application.
You don't need to include halo theme in your compiler arguments, but you need to change in "Flex Build Path" use "ONLY MX"

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   fontFamily="Arial" fontSize="12" backgroundColor="#ffffff">
<fx:Style>
	.topBorder, .rowBorder{
		borderSides: "top";
		borderStyle:solid;
		borderColor:#0099ff;
	}
	.rowBorder{
		borderSides: "left right bottom";
	}
</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;

			[Bindable]
			private var listData:ArrayCollection = new ArrayCollection ([
				{type:"radio", text:"Are you looking ?"},
				{type:"radio", text:"Are you looking to "},
				{type:"radio", text:"Are you intrested i?"},
				{type:"radio", text:"Do you plan t"},
				{type:"radio", text:"One way"},
				{type:"radio", text:"Are you ?"},
				{type:"radio", text:"Are you...?"},
				{type:"radio", text:"Are you...?"},
				{type:"txt", text:"How can we ...?"},
				{type:"txt", text:"If you answered Yes to any of the questions , please provide more detail here."}
			]);      

			private function submit():void {
				var options:Array = [];
				for(var i:uint = 0; i < listData.length; i++){
					var item:Object = listData[i];
					var str:String = lbls[i].text;
					if(item.type == 'radio'){
						options.push(str + "="+ (yes_rb[i].selected ? "YES" : "NO"));
					}else{
						options.push(str + "="+ info[i].text);
					}
				}
				Alert.show(options.join("\n"));
			}
			
		]]>
	</fx:Script>
	
	<mx:VBox  height="850" width="770"  horizontalCenter="10" >
		
		<mx:VBox id="medpolicyQues"
				 paddingTop="20"
				 paddingBottom="20"
				 paddingLeft="20"
				 paddingRight="20"
				 height="70" width="700" horizontalScrollPolicy="off" verticalScrollPolicy="off">
			
			<mx:Text text="" 
					 height="60" width="680" />
		</mx:VBox>
		<mx:Spacer width="5" />
		
		
		<mx:VBox height="620" width="700" verticalGap="0"  horizontalScrollPolicy="off" styleName="topBorder">
			<mx:Repeater id="r" dataProvider="{listData}">
				<mx:VBox width="100%" styleName="rowBorder">
					<mx:HBox>
						<mx:VBox paddingTop="10"  paddingBottom="10" width="540" 
								 horizontalScrollPolicy="off" verticalScrollPolicy="off" 
								 paddingLeft="10">
							<mx:Label id="lbls" text="{r.currentIndex+1}. {r.currentItem.text}" width="460" />

							<mx:HBox paddingLeft="10" width="540" height="60" horizontalScrollPolicy="off" verticalScrollPolicy="off" 
									 visible="{r.currentItem.type=='txt'}" includeInLayout="{r.currentItem.type=='txt'}">
								<mx:TextArea id="info" width="500" height="45" />
							</mx:HBox>
						</mx:VBox>

						<mx:HBox paddingTop="10" height="40" 
								 visible="{r.currentItem.type=='radio'}" includeInLayout="{r.currentItem.type=='radio'}">
							<mx:RadioButton id="yes_rb" label="Yes" groupName="group{r.currentIndex}"/>
							<mx:Spacer width="5"/>
							<mx:RadioButton id="no_rb" label="No" groupName="group{r.currentIndex}"/>
						</mx:HBox>
					</mx:HBox>
				</mx:VBox>
			</mx:Repeater>
		</mx:VBox>
		
		<mx:HBox paddingRight="20"  textAlign="center">
			<mx:Spacer width="445"/>
			<mx:Button id="btn_Cancel" label="Cancel" width="120"/>
			<mx:Button id="btn_Submit" label="Submit" click="submit()" width="120"/>
		</mx:HBox>
		
	</mx:VBox>
</mx:Application>

Open in new window

0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
The business world is becoming increasingly integrated with tech. It’s not just for a select few anymore — but what about if you have a small business? It may be easier than you think to integrate technology into your small business, and it’s likely…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question