您的位置:首页 > 其它

通过自定义控件实现:在Repeater 控件中使用RadioButton.

2008-05-29 14:44 363 查看
示例:

源文件:

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();

}

}

}

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: