• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 807
  • Last Modified:

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?
0
anil_fdk
Asked:
anil_fdk
  • 8
  • 5
1 Solution
 
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
 
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
Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
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:
user borderSize CSS attribute (top,left,right). And on the end you can add one extra box with only "top" CSS parameter
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

Featured Post

Creating Active Directory Users from a Text File

If your organization has a need to mass-create AD user accounts, watch this video to see how its done without the need for scripting or other unnecessary complexities.

  • 8
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now