Home > Flex 3 > Create category/subcategory uniformed listing

Create category/subcategory uniformed listing

This will show how you can create a category uniformed list with subcategories as checkboxes using 2 arrayCollections, a category and a subcategory. This makes use of layered repeaters.

The Flash plugin is required to view this object.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#ffffff">
 <mx:Script>
 <![CDATA[
 import mx.controls.CheckBox;
 
 [Bindable] public var cnt:Number = 0;
 [Bindable] public var xx:Number = 0;
 [Bindable] public var yy:Number = 0;
 
 public function setSub(e:Event):void {
 var subcatnum:String = e.currentTarget.currentItem.CategoryNumber;
 
 //if repeater 1 categorynumber equal to repeater 2 categorynumber
 if(subcatnum == rp1.currentItem.CategoryNumber){
 	// set counter
 	cnt = cnt + 1;
 
 	//create checkbox
 	var cx:CheckBox = new CheckBox();
 	cx.id = "chx";
 	cx.label = rp2[rp1.currentIndex].currentItem.SubCategoryName;
 	cx.data = rp2[rp1.currentIndex].currentItem;
 
 
 	// if counter is greater than 3
 	// 3 is the number of columns we are going to show
 	// we set counter to 1, reset x to 0, and y to the current y + next row.
 	// 22 is the height of each row.
 	if(cnt > 3){	
 		cnt = 1;
 		xx = 0;
 		yy = yy + 22
 	}
 
 	// if counter is less than column count and greater than 1
 	// this adds amount to x if the column count is 3 or less and greater than 1 
 	// 4 is the column count.
 	if(cnt < 4 && cnt > 1) {
 		xx = xx + 150;	
 	}
 	// set x and y cordinates
 	cx.x = xx;
 	cx.y = yy;
 
 	hRP1[rp1.currentIndex].addChild(cx);
 
 	// this will reset the counter, xx and yy between each category
 } else {
 	cnt = 0;
 	xx = 0;
 	yy = 0;
 }
 
 
 }
 	]]>
 </mx:Script>
 <mx:ArrayCollection id="A00Category">
	<mx:Object CategoryName="Category A" 	CategoryNumber="1"/>
	<mx:Object CategoryName="Category B" 	CategoryNumber="2"/>
	<mx:Object CategoryName="Category C" 	CategoryNumber="3"/>
 
 </mx:ArrayCollection>
 
  <mx:ArrayCollection id="A00SubCategory">
	<mx:Object SubCategoryName="SubCategory A1"	CategoryNumber="1"/>
	<mx:Object SubCategoryName="SubCategory A2"	CategoryNumber="1"/>
	<mx:Object SubCategoryName="SubCategory A3"	CategoryNumber="1"/>
	<mx:Object SubCategoryName="SubCategory A4"	CategoryNumber="1"/>
	<mx:Object SubCategoryName="SubCategory A5"	CategoryNumber="1"/>
	<mx:Object SubCategoryName="SubCategory A6"	CategoryNumber="1"/>
	<mx:Object SubCategoryName="SubCategory B1"	CategoryNumber="2"/>
	<mx:Object SubCategoryName="SubCategory B2"	CategoryNumber="2"/>
	<mx:Object SubCategoryName="SubCategory B3"	CategoryNumber="2"/>
	<mx:Object SubCategoryName="SubCategory B4"	CategoryNumber="2"/>
	<mx:Object SubCategoryName="SubCategory B5"	CategoryNumber="2"/>
	<mx:Object SubCategoryName="SubCategory B6"	CategoryNumber="2"/>
	<mx:Object SubCategoryName="SubCategory C1"	CategoryNumber="3"/>
	<mx:Object SubCategoryName="SubCategory C2"	CategoryNumber="3"/>
	<mx:Object SubCategoryName="SubCategory C3"	CategoryNumber="3"/>
	<mx:Object SubCategoryName="SubCategory C4"	CategoryNumber="3"/>
	<mx:Object SubCategoryName="SubCategory C5"	CategoryNumber="3"/>
	<mx:Object SubCategoryName="SubCategory C6"	CategoryNumber="3"/>
 
 </mx:ArrayCollection>
 
 
<mx:VBox paddingLeft="10">
<mx:Repeater id="rp1" dataProvider="{A00Category}">
	<mx:VBox width="100%" height="100%">
		<mx:Label text="{rp1.currentItem.CategoryName}" fontSize="12" fontWeight="bold"/>
		<mx:Canvas id="hRP1">
			<mx:Repeater id="rp2" dataProvider="{A00SubCategory}" repeat="setSub(event)"/>
		</mx:Canvas>
	</mx:VBox>
</mx:Repeater>
</mx:VBox>	
 
 
 
</mx:Application>

Flex 3 , ,

  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.