Flex Examples
The following example shows how you can display a series of CheckBox controls using the Flex Repeater with an Array data provider.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/29/displaying-checkbox-controls-using-the-repeater-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.CheckBox;
private function button_click(evt:Event):void {
var selArr:Array = [];
var idx:int;
var len:int = arr.length;
for (idx=0; idx<len; idx++) {
if (checkBox[idx].selected) {
selArr.push(checkBox[idx].label);
}
}
var title:String = selArr.length + " of " + len + " item(s) selected.";
var message:String = selArr.join("\\n");
Alert.show(message, title);
}
private function doFilter(element:*, index:int, arr:Array):Boolean {
return element.selected;
}
private function checkBox_change(evt:Event):void {
var ch:CheckBox = evt.currentTarget as CheckBox;
Alert.show(ch.getRepeaterItem().data);
}
]]>
</mx:Script>
<mx:Array id="arr">
<mx:Object label="Red" data="red" />
<mx:Object label="Orange" data="haloOrange" />
<mx:Object label="Yellow" data="yellow" />
<mx:Object label="Green" data="haloGreen" />
<mx:Object label="Blue" data="haloBlue" />
</mx:Array>
<mx:Panel id="panel" width="50%" paddingLeft="10" verticalGap="10">
<mx:Repeater id="checkBoxRepeater" dataProvider="{arr}">
<mx:CheckBox id="checkBox"
label="{checkBoxRepeater.currentItem.label}"
data="{checkBoxRepeater.currentItem.data}"
change="checkBox_change(event);" />
</mx:Repeater>
<mx:ControlBar horizontalAlign="right">
<mx:Button id="button"
label="Click me"
emphasized="true"
click="button_click(event);" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
oh common! no demo app today? gettin lazy now huh? ;P
steve,
SWF posted.
Peter
good!
clean!
How can add checkbox in a Datagrid…? and print the content of the row for a selected checkbox.
Awesome example, thanks for the help!
How can we select and delect all checkboxes in repeater by clicking on a button
Taqi,
Something like this:
<?xml version="1.0" encoding="utf-8"?> <mx:Application name="Repeater_CheckBox_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.CheckBox; private function button_click(evt:Event):void { var idx:int; var len:int = arr.length; for (idx=0; idx<len; idx++) { // invert: //checkBox[idx].selected = !checkBox[idx].selected; // toggle: checkBox[idx].selected = button.selected; } } ]]> </mx:Script> <mx:Array id="arr"> <mx:Object label="Red" data="red" /> <mx:Object label="Orange" data="haloOrange" /> <mx:Object label="Yellow" data="yellow" /> <mx:Object label="Green" data="haloGreen" /> <mx:Object label="Blue" data="haloBlue" /> </mx:Array> <mx:Panel id="panel" width="50%" paddingLeft="10" verticalGap="10"> <mx:Repeater id="checkBoxRepeater" dataProvider="{arr}"> <mx:CheckBox id="checkBox" label="{checkBoxRepeater.currentItem.label}" data="{checkBoxRepeater.currentItem.data}" /> </mx:Repeater> <mx:ControlBar horizontalAlign="right"> <mx:Button id="button" label="Toggle all checkboxes" toggle="true" emphasized="true" click="button_click(event);" /> </mx:ControlBar> </mx:Panel> </mx:Application>You can comment/uncomment some of the ActionScript logic based on if you want to toggle or invert the selected items.
Peter
Hello friend, first let me say that the post is very good and I’m here again to ask you one more help. I’m trying to use mx: Repeater for a repetition of a Canvas, the problem is that I’m doing it and seeking the data in a database with php and I do not know how. Can you help me? Below the code to better understand:
Flex in the file:
<mx:Repeater id=”myRepeater” dataProvider=”{dataCont.lastResult.xmlrecCont.xmlRepeater}” >
<mx:Canvas width=”80%” height=”80″ backgroundColor=”#E3E3E3″ left=”10″ top=”85″ themeColor=”#4BB6B7″ borderColor=”#BFBEBE” cornerRadius=”5″ borderStyle=”solid” borderThickness=”1″>
<mx:Label text=”RI:” left=”5″ top=”5″ width=”28″ height=”20″ fontWeight=”bold”/>
<mx:Label text=”Tipo:” left=”5″ top=”30″ width=”35″ height=”20″ fontWeight=”bold”/>
<mx:Label text=”Razão Social:” left=”75″ top=”5″ width=”80″ height=”20″ fontWeight=”bold”/>
<mx:Label text=”Data:” width=”40″ height=”20″ right=”138″ top=”30″ fontWeight=”bold”/>
<mx:Label text=”Número Contrato” width=”110″ height=”20″ right=”68″ top=”55″ fontWeight=”bold”/>
<mx:Label text=”Situação:” width=”60″ height=”20″ top=”55″ fontWeight=”bold” left=”5″/>
<mx:Label width=”30″ height=”20″ top=”5″ left=”41″ text=”{dataCont.lastResult.xmlrecCont.xmlRI}” textAlign=”left”/>
<mx:Label width=”80″ height=”20″ top=”30″ left=”41″ text=”{dataCont.lastResult.xmlrecCont.xmlTpo}”/>
<mx:Label width=”80″ height=”20″ top=”55″ left=”75″ text=”{dataCont.lastResult.xmlrecCont.xmlSit}”/>
<mx:Label width=”70″ height=”20″ top=”55″ right=”5″ text=”{dataCont.lastResult.xmlrecCont.xmlId_cont}”/>
<mx:Label height=”20″ top=”5″ text=”{dataCont.lastResult.xmlrecCont.xmlRazso_no}” textAlign=”left” left=”160″ right=”5″/>
<mx:Label width=”135″ height=”20″ right=”5″ top=”30″ text=”{dataCont.lastResult.xmlrecCont.xmlDate}”/>
</mx:Canvas>
</mx:Repeater>
In the PHP file:
<?php
require_once(“conexao.php”);
$id_rep = “1″;
$mysql_select = “SELECT * FROM projcont WHERE id_rep = ‘$id_rep’”;
$mysql_query = mysql_query($mysql_select);
$mysql_fetch = mysql_fetch_array($mysql_query);
$cto = “<xmlrecCont>”;
if($mysql_query) {
$cto .= “<xmlRepeater>”;
$cto .= $mysql_fetch = mysql_fetch_array($mysql_query);
$cto .= “</xmlRepeater>”;
$cto .= “<xmlRI>”;
$cto .= $mysql_fetch['ID_cad'];
$cto .= “</xmlRI>”;
$cto .= “<xmlRazso_no>”;
$cto .= $mysql_fetch['razso_no'];
$cto .= “</xmlRazso_no>”;
$cto .= “<xmlTpo>”;
$cto .= $mysql_fetch['tpo'];
$cto .= “</xmlTpo>”;
$cto .= “<xmlData>”;
$cto .= $mysql_fetch['data'];
$cto .= “</xmlData>”;
$cto .= “<xmlSit>”;
$cto .= $mysql_fetch['sit'];
$cto .= “</xmlSit>”;
$cto .= “<xmlId_cont>”;
$cto .= $mysql_fetch['id_cont'];
$cto .= “</xmlId_cont>”;
} else {
$cto .= “Error mysql_query”;
}
$cto .= “</xmlrecCont>”;
echo($cto);
?>
Thank you already!
@Peter deHaan:
Thanks! your comment is very helpful! Exactly what i needed!
Thanks again!!
great work peter.
Thank alot Peter!
Your example realy hepl me to settle my troubles.
Okay Now.. !!! How to deal with Equally spaced Horizontal Layout for Checkboxes mentioned above.. I need something like this:
Red Orange Yellow Green
Blue Black Violet Pink
.. Consider the above as the layout of the checkboxes
Okay I think I’ve found a clue here..
http://blog.flexexamples.com/2009/03/10/using-the-repeater-class-in-flex-gumbo/
.. still the above doesn’t solve my question..
if I have 8 different labels for the checkboxes, and I am using a single repeater, then how would I divide those 8 components as first 4 and then next 4.. as mentioned in my above comment
What is the purpose of the doFilter function in this example?