Displaying RadioButton controls using the Repeater in Flex (redux)

Steve Walker,

Perhaps a little crude, but this should work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="San Francisco" population="776733" year="2000" />
        <mx:Object label="San Jose" population="894943" year="2000" />
        <mx:Object label="San Mateo" population="92482" year="2000" />
        <mx:Object label="Daly City" year="2000" />
        <mx:Object label="Pacifica" population="N/A" year="2000" />
        <mx:Object label="Foster City" population="NA" year="2000" />
        <mx:Object label="Redwood City" population="N\A" year="2000" />
        <mx:Object label="Fremont" population="" year="2000" />
    </mx:Array>

    <mx:DataGrid id="dataGrid" dataProvider="{arr}">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="year" />
            <mx:DataGridColumn dataField="population"
                    itemRenderer="comps.CustomItemRenderer" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

comps/CustomItemRenderer.as:

package comps {
    import mx.controls.dataGridClasses.DataGridItemRenderer;

    public class CustomItemRenderer extends DataGridItemRenderer {

        override public function validateNow():void {
            super.validateNow();
            if (data) {
                switch(data.population) {
                    case undefined:
                    case null:
                        data.population = "";
                    case "":
                        background = true;
                        backgroundColor = 0xFF0000;
                        break;
                    case "N/A":
                    case "N\\A":
                    case "NA":
                        background = true;
                        backgroundColor = 0xFFFF00;
                        break;
                    default:
                        background = false;
                        backgroundColor = 0xFFFFFF;
                        break;
                }
            }
        }
    }
}

Peter

For more great posts on item renderers, check out Alex Harui’s blog at http://blogs.adobe.com/aharui/, and more specifically, http://blogs.adobe.com/aharui/item_renderers/.

Reply

I combined the example you placed above with the one from the site you referenced and it works like a charm. I really appreciate all your assistance. I have one more problem related to this and it is how to use a wildcard in the evaluation of the string. Thanks to the ingenuity of lazy people, the data that I have has 30 or more variations of UNKNOWN (e.g. UNK, UNK101, UNK2, UNKOWN, etc) and I would like the renderer to match anything that starts with UNK. Is it possible?

Reply

You could also do something like the following (using the indexOf() instead of the search() method):

private function isUnknown(value:String):Boolean {
    return value.indexOf("UNK") == 0;
}

Although the indexOf() method would perform a case sensitive search instead of our clever case insensitive search using the search() method.

Peter

Reply

How do Repeater in ActionScript?

I am using this way!

But only runs the first record!

private function Repeat (): void (

var repeater: Repeater = new Repeater ();
repeater.dataProvider = dataprovider_Controller.item;

trace ( "repeater.currentItem.image:" + repeater.currentItem.image);
var image: Image = new Image ();

image.setStyle ( "HorizontalAlign", "left");
image.source = repeater.currentItem.image;
image.id = "image";
trace ( "image.source:" + image.source);

)

I think I have to quit Repeat to make the loop of
records, but how would this in ActionScript?

Reply

I have a complicated problem using a Repeater.
There are four new classes: Souce, SourceData, Tactic, TacticData.
Source has a name.
SourceData has a Source (thus a Source name) and quantity.
Tactic has a name.
TacticData has a Tactic (…), selected, dueDate, and done.
(Nevermind why it has to be so split up like that.)
When displayed, a Source has one or more Tactics.
If a tactic is selected, then dueDate and done are enabled.
Now the problems:
1- I’ve gotten this much to for the data supplied at compile time, but how to make the tactic’s field change at runtime?
2- Bonus: if a tactic’s done is checked, then the entire tactic is disabled (selected and dueDate) except done. And then, another tactic of the same name must appear in the same source.
I don’t know if that makes any sense the way I explain it, but here is the source and if I could just get the first problem solved, I’ll be doing alright:
Source.as:

package
{
	public class Source
	{
		public function Source(){}

		public function get name():String {
			return _name;
		}
		public function set name(value:String):void{
			_name = value;
		}
		private var _name:String = "";
	}
}

SourceData.as:

package
{
	public class SourceData
	{
		public function SourceData(source:Source) {
			_source = source;
		}

		public function name():String {
			return _source.name;
		}
		public function get quantity():Number {
			return _quantity;
		}
		public function set	quantity(value:Number):void {
			_quantity = value;
		}
		private var _source:Source = null;
		private var _quantity:Number = 0;
	}
}

Tactic.as:

package
{
	public class Tactic
	{
		public function Tactic(){}

		public function get name():String {
			return _name;
		}
		public function set name(value:String):void{
			_name = value;
		}
		private var _name:String = "";
	}
}

TacticData.as:

package
{
	public class TacticData
	{
		public function TacticData(tactic:Tactic){
			_tactic = tactic;
		}
		//this must be a get (unlike the name function of SourceData)
		//for the label of checkboxes
		//either that or jump thru some hoops when calling name to display text of function result
		public function get name():String {
			return _tactic.name;
		}
		public function get selected():Boolean {
			return _selected;
		}
		public function set selected(value:Boolean):void{
			_selected = value;
		}
		public function get dueDate():Date {
			return _dueDate;
		}
		public function set dueDate(value:Date):void{
			_dueDate = value;
		}
		public function get done():Boolean {
			return _done;
		}
		public function set done(value:Boolean):void{
			_done = value;
		}
		private var _selected:Boolean = false;
		private var _dueDate:Date = new Date();
		private var _done:Boolean = false;
		private var _tactic:Tactic = null;
	}
}

Main.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init()">
<mx:Script>
<![CDATA[
	import mx.controls.CheckBox;
	import mx.controls.Alert;
	import mx.collections.ArrayCollection;

	[Bindable]
	private var sources:ArrayCollection;

	private function init():void{
			var s1:Source = new Source();
			s1.name = "Source 1"
			var s2:Source = new Source();
			s2.name = "Source 2"

			var s1d:SourceData = new SourceData(s1);
			var s2d:SourceData = new SourceData(s2);

			var ta:Tactic = new Tactic();
			ta.name = "tactic A";
			var tb:Tactic = new Tactic();
			tb.name = "tactic B";
			var tc:Tactic = new Tactic();
			tc.name = "tactic C";

			var tad:TacticData = new TacticData(ta);
			var tbd:TacticData = new TacticData(tb);
			tbd.selected=true;
			var tcd:TacticData = new TacticData(tc);

			var a1:Array = new Array(tad,tbd);
			var a2:Array = new Array(tcd);

			sources = new ArrayCollection();
			sources.addItem({name:s1d.name(),quantity:s1d.quantity,tactics:a1});
			sources.addItem({name:s2d.name(),quantity:s2d.quantity,tactics:a2});
	}
	private function checkTactic(event:Event):void{
		var cb:CheckBox = event.currentTarget as CheckBox;
		var t:TacticData = cb.getRepeaterItem() as TacticData;
	}
	private function checkDone(event:Event):void{
		var cb:CheckBox = event.currentTarget as CheckBox;
		var t:TacticData = cb.getRepeaterItem() as TacticData;
		//Alert.show(t.name);
		//now how to get the sourceData associated with this tacticData?
	}
	private function n():void{
		var a:int = 0;
		a++;
	}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
	<mx:HBox horizontalGap="0" >
		<mx:Label text="Source" fontSize="14" fontWeight="bold" />
		<mx:Label text="Quantity" fontSize="14" fontWeight="bold" />
		<mx:Label text="Tactic" fontSize="14" fontWeight="bold" />
	</mx:HBox>

	<mx:Grid horizontalScrollPolicy="auto" verticalScrollPolicy="auto"
		id="mainGrid"
		width="100%" >
		<mx:Repeater id="repSources" dataProvider="{this.sources}"
			>
			<mx:GridRow>
				<mx:GridItem colSpan="2">
					<mx:HRule width="100%" />
				</mx:GridItem>
			</mx:GridRow>
			<mx:GridRow>
				<mx:GridItem>
					<mx:Label id="sourceName" text="{repSources.currentItem.name}" />
				</mx:GridItem>
				<mx:GridItem>
					<mx:TextInput text="{repSources.currentItem.quantity}" />
				</mx:GridItem>
				<mx:GridItem>
				<mx:VBox>
					<mx:Repeater id="repTactics" dataProvider="{repSources.currentItem.tactics}">
					<mx:HBox>
						<mx:CheckBox label="{repTactics.currentItem.name}"
							selected="{repTactics.currentItem.selected}"
							change="checkTactic(event)"/>
						<mx:DateField enabled="{repTactics.currentItem.selected}"/>
						<mx:CheckBox label="Done"
							selected="{repTactics.currentItem.done}"
							enabled="{repTactics.currentItem.selected}"
							change="checkDone(event)"/>
					</mx:HBox>
					</mx:Repeater>
				</mx:VBox>
				</mx:GridItem>
			</mx:GridRow>
		</mx:Repeater>
	</mx:Grid>
</mx:VBox>

</mx:Application>

Reply

This was a great example. I’m using the same logic but I’m using the repeater for the text component. For reasons I won’t get into, I was having problems with the line:
descriptorProps.propertiesFactory = radioPropFac;

I decided to replace the function “radioPropFac” with the something like this:

descriptorProps.propertiesFactory = function():Object {
return {
text: itemRepeater.currentItem.label
}}

…that worked like a charm.

Reply

, i want to do it the above mxml in as3… anyone help me.. i cannt repeat the datas in repeater while using in as3

box_v=new VBox();
babyactimg=new Image();
rep=new Repeater();
addChild(box_v);
rep.dataProvider=cat.img;
babyactimg.source=rep.currentItem.@src;
babyactimg.width=30;
babyactimg.height=30;
addChild(babyactimg);
box_v.addChild(rep);
this was i done in as3 but i got the first record only…what can i do for get all the records from the repeater using as3..

Reply