通过自定义控件实现:在Repeater 控件中使用RadioButton.
示例:
源文件:
comps/MyComp.as :
mxml文件:
源文件:
comps/MyComp.as :
/**
* http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex-redux/
*/
package comps {
import flash.events.Event;
import mx.containers.ApplicationControlBar;
import mx.containers.Canvas;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.containers.HBox;
import mx.controls.Alert;
import mx.controls.Label;
import mx.controls.RadioButton;
import mx.controls.RadioButtonGroup;
import mx.core.Application;
import mx.core.Repeater;
import mx.core.UIComponentDescriptor;
import mx.styles.CSSStyleDeclaration;
import mx.styles.StyleManager;
public class MyComp extends Canvas {
private var arr:Array;
private var appControlBar:ApplicationControlBar;
private var form:Form;
private var formItem:FormItem;
private var lbl:Label;
private var hBox:HBox;
private var radioGroup:RadioButtonGroup;
private var radioRepeater:Repeater;
public function MyComp() {
super();
init();
}
private function init():void {
var alertCSS:CSSStyleDeclaration;
alertCSS = StyleManager.getStyleDeclaration("Alert");
alertCSS.setStyle("backgroundAlpha", 0.8);
alertCSS.setStyle("backgroundColor", "black");
alertCSS.setStyle("borderAlpha", 0.8);
alertCSS.setStyle("borderColor", "black");
arr = [];
arr.push({label:"Red", data:"red"});
arr.push({label:"Orange", data:"haloOrange"});
arr.push({label:"Yellow", data:"yellow"});
arr.push({label:"Green", data:"haloGreen"});
arr.push({label:"Blue", data:"haloBlue"});
radioGroup = new RadioButtonGroup();
lbl = new Label();
formItem = new FormItem();
formItem.label = "selectedValue:";
formItem.addChild(lbl);
form = new Form();
form.styleName = "plain";
form.addChild(formItem);
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
Application.application.addChildAt(appControlBar, 0);
hBox = new HBox();
hBox.setStyle("horizontalGap", 60);
addChild(hBox);
var descriptorProps:Object = {};
descriptorProps.type = RadioButton;
descriptorProps.document = this;
descriptorProps.propertiesFactory = radioPropFac;
descriptorProps.events = {change:"radioButton_change"};
var radioDescriptor:UIComponentDescriptor = new UIComponentDescriptor(descriptorProps);
radioRepeater = new Repeater();
radioRepeater.dataProvider = arr;
radioRepeater.childDescriptors = [radioDescriptor];
radioRepeater.initializeRepeater(hBox, true);
}
private function radioPropFac():Object {
var obj:Object = {};
obj.label = radioRepeater.currentItem.label;
obj.group = radioGroup;
return obj;
}
public function radioButton_change(evt:Event):void {
var radio:RadioButton = RadioButton(evt.currentTarget);
var item:Object = radio.getRepeaterItem();
var cssObj:CSSStyleDeclaration;
cssObj = StyleManager.getStyleDeclaration("Alert");
cssObj.setStyle("modalTransparencyColor", item.data);
cssObj.setStyle("themeColor", item.data);
Alert.show(item.label, "getRepeaterItem()");
callLater(updateSelectedValue, [evt]);
}
private function updateSelectedValue(evt:Event):void {
lbl.text = radioGroup.selectedValue.toString();
}
}
}
* http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex-redux/
*/
package comps {
import flash.events.Event;
import mx.containers.ApplicationControlBar;
import mx.containers.Canvas;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.containers.HBox;
import mx.controls.Alert;
import mx.controls.Label;
import mx.controls.RadioButton;
import mx.controls.RadioButtonGroup;
import mx.core.Application;
import mx.core.Repeater;
import mx.core.UIComponentDescriptor;
import mx.styles.CSSStyleDeclaration;
import mx.styles.StyleManager;
public class MyComp extends Canvas {
private var arr:Array;
private var appControlBar:ApplicationControlBar;
private var form:Form;
private var formItem:FormItem;
private var lbl:Label;
private var hBox:HBox;
private var radioGroup:RadioButtonGroup;
private var radioRepeater:Repeater;
public function MyComp() {
super();
init();
}
private function init():void {
var alertCSS:CSSStyleDeclaration;
alertCSS = StyleManager.getStyleDeclaration("Alert");
alertCSS.setStyle("backgroundAlpha", 0.8);
alertCSS.setStyle("backgroundColor", "black");
alertCSS.setStyle("borderAlpha", 0.8);
alertCSS.setStyle("borderColor", "black");
arr = [];
arr.push({label:"Red", data:"red"});
arr.push({label:"Orange", data:"haloOrange"});
arr.push({label:"Yellow", data:"yellow"});
arr.push({label:"Green", data:"haloGreen"});
arr.push({label:"Blue", data:"haloBlue"});
radioGroup = new RadioButtonGroup();
lbl = new Label();
formItem = new FormItem();
formItem.label = "selectedValue:";
formItem.addChild(lbl);
form = new Form();
form.styleName = "plain";
form.addChild(formItem);
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
Application.application.addChildAt(appControlBar, 0);
hBox = new HBox();
hBox.setStyle("horizontalGap", 60);
addChild(hBox);
var descriptorProps:Object = {};
descriptorProps.type = RadioButton;
descriptorProps.document = this;
descriptorProps.propertiesFactory = radioPropFac;
descriptorProps.events = {change:"radioButton_change"};
var radioDescriptor:UIComponentDescriptor = new UIComponentDescriptor(descriptorProps);
radioRepeater = new Repeater();
radioRepeater.dataProvider = arr;
radioRepeater.childDescriptors = [radioDescriptor];
radioRepeater.initializeRepeater(hBox, true);
}
private function radioPropFac():Object {
var obj:Object = {};
obj.label = radioRepeater.currentItem.label;
obj.group = radioGroup;
return obj;
}
public function radioButton_change(evt:Event):void {
var radio:RadioButton = RadioButton(evt.currentTarget);
var item:Object = radio.getRepeaterItem();
var cssObj:CSSStyleDeclaration;
cssObj = StyleManager.getStyleDeclaration("Alert");
cssObj.setStyle("modalTransparencyColor", item.data);
cssObj.setStyle("themeColor", item.data);
Alert.show(item.label, "getRepeaterItem()");
callLater(updateSelectedValue, [evt]);
}
private function updateSelectedValue(evt:Event):void {
lbl.text = radioGroup.selectedValue.toString();
}
}
}
mxml文件:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="comps.*"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<comps:MyComp />
</mx:Application>
<!-- http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="comps.*"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<comps:MyComp />
</mx:Application>