Create category/subcategory uniformed listing
May 25th, 2009
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.
<?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>