radio buttons inside a radiobuttongroup made using repeater

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?
anil_fdkAsked:
Who is Participating?
 
dgofmanConnect With a Mentor Commented:
user borderSize CSS attribute (top,left,right). And on the end you can add one extra box with only "top" CSS parameter
0
 
dgofmanCommented:
<?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
 
anil_fdkAuthor Commented:
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
Managing Security Policy in a Changing Environment

The enterprise network environment is evolving rapidly as companies extend their physical data centers to embrace cloud computing and software-defined networking. This new reality means that the challenge of managing the security policy is much more dynamic and complex.

 
dgofmanCommented:
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
 
anil_fdkAuthor Commented:
<?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
 
dgofmanCommented:
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
 
dgofmanCommented:
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
 
anil_fdkAuthor Commented:
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
 
dgofmanCommented:
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
 
anil_fdkAuthor Commented:
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
 
dgofmanCommented:
What version of FB are you using and SDK?
The code what I sent to you working well on FB4 & SDK 4
0
 
anil_fdkAuthor Commented:
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
 
dgofmanCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.