May 29

Flex中利用Repeater显示一组RadioButton控件的例子

FlexAdd comments

接下来的例子演示了Flex中如何Repeater作为一个数据提供源，用来显示一组RadioButton控件。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里查看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         Alert {
  9.             backgroundAlpha: 0.8;
  10.             backgroundColor: black;
  11.             borderAlpha: 0.8;
  12.             borderColor: black;
  13.         }
  14.     </mx:Style>
  15.  
  16.     <mx:Script>
  17.         <![CDATA[
  18.             import mx.controls.Alert;
  19.             import mx.controls.RadioButton;
  20.  
  21.             private function radioButton_change(evt:Event):void {
  22.                 var radio:RadioButton = RadioButton(evt.currentTarget);
  23.                 var item:Object = radio.getRepeaterItem();
  24.                 var cssObj:CSSStyleDeclaration;
  25.                 cssObj = StyleManager.getStyleDeclaration("Alert");
  26.                 cssObj.setStyle("modalTransparencyColor", item.data);
  27.                 cssObj.setStyle("themeColor", item.data);
  28.                 Alert.show(item.label, "getRepeaterItem()");
  29.             }
  30.         ]]>
  31.     </mx:Script>
  32.  
  33.     <mx:Array id="arr">
  34.         <mx:Object label="Red" data="red" />
  35.         <mx:Object label="Orange" data="haloOrange" />
  36.         <mx:Object label="Yellow" data="yellow" />
  37.         <mx:Object label="Green" data="haloGreen" />
  38.         <mx:Object label="Blue" data="haloBlue" />
  39.     </mx:Array>
  40.  
  41.     <mx:ApplicationControlBar dock="true">
  42.         <mx:Form styleName="plain">
  43.             <mx:FormItem label="selectedValue:">
  44.                 <mx:Label text="{radioGroup.selectedValue}" />
  45.             </mx:FormItem>
  46.         </mx:Form>
  47.     </mx:ApplicationControlBar>
  48.  
  49.     <mx:HBox id="hb" horizontalGap="60">
  50.         <mx:RadioButtonGroup id="radioGroup" />
  51.         <mx:Repeater id="radioRepeater"
  52.                 dataProvider="{arr}">
  53.             <mx:RadioButton id="radioButtons"
  54.                     label="{radioRepeater.currentItem.label}"
  55.                     group="{radioGroup}"
  56.                     change="radioButton_change(event);" />
  57.         </mx:Repeater>
  58.     </mx:HBox>
  59.  
  60. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , , ,

Related Post

One Response to “Flex中利用Repeater显示一组RadioButton控件的例子”

Trackbacks

Leave a Reply