Products
Technologies

Developer resources
Avg. Rating 3.0

Problem

Often I need to use multiple forms as columns so the FormItems are aligned on by one, but the problem is that we need to create one form for every column and then order the formItems in all the columns.

Solution

Here it is an extended HBox that creates forms based on a maxColumn parameter and then it order the formItems we add to it.

Detailed explanation

package components
{
        import flash.display.DisplayObject;
        import flash.events.Event;
        
        import mx.collections.ArrayCollection;
        import mx.containers.Form;
        import mx.containers.FormItem;
        import mx.containers.HBox;
        
        public class MultiColumnForm extends HBox
        {
                private var _inputItems:ArrayCollection = null;
                private var _maxColumns:int = 2;
                private var _columns:Array;
                
                public function MultiColumnForm()
                {
                        super();
                        _inputItems = new ArrayCollection();
                        _columns = new Array();
                        
                }
                
                public function set maxColumns(maxColumns:int):void
{
                        _maxColumns = maxColumns;
                }
                
                public function
creationCompleteHandler(event:Event):void {
                        refresh();
                }
                
                override public function
addChild(child:DisplayObject):DisplayObject {
                        var displayObject:DisplayObject = null;
                        displayObject = _inputItems.addItem(child)
as DisplayObject;
                        refresh();                      
                        return displayObject;
                }
                
                override public function
addChildAt(child:DisplayObject, index:int):DisplayObject {
                        if(child is FormItem) {
                                var displayObject:DisplayObject =
_inputItems.addItemAt(child,index) as DisplayObject;
                                refresh();
                                return displayObject;
                        } else {
                                return
super.addChildAt(child,index);
                        }
                }
                
                override public function
removeChild(child:DisplayObject):DisplayObject {
                        if(child is FormItem) {
                                var index:int =
_inputItems.getItemIndex(child);
                                var displayObject:DisplayObject =
_inputItems.removeItemAt(index) as DisplayObject;
                                refresh();
                                return displayObject
                        } else {
                                return super.removeChild(child);
                        }
                }
                
                override public function
getChildIndex(child:DisplayObject):int {
                        if(child is FormItem) {
                                return
_inputItems.getItemIndex(child);
                        } else {
                                return getChildIndex(child);
                        }
                }
                
                override public function removeAllChildren():void {
                        _inputItems.removeAll();
                        super.removeAllChildren();
                }
                
                override public function getChildren():Array {
                        return _inputItems.source;
                }
                
                private function generateColumns(maxColumns:int,
items:Array):void {
                        var totalItems:int = items.length;
                        var itemsByColumn:int = totalItems /
maxColumns;
                        if( (totalItems % maxColumns) == 0) {
                                for (var i:int = 0;
i<maxColumns; i++) {
                                        var form:Form = new Form();
                                        for(var j:int = 0;
j<itemsByColumn && items.length > 0; j++) {
                                               
form.addChildAt(items.pop(),0);
                                        }
                                        if(form.numChildren != 0) {
                                               
_columns.push(form);
                                        }
                                }
                        } else {
                                var form:Form = new Form();
                                for(var k:int = 0;
k<itemsByColumn && items.length > 0; k++) {
                                       
form.addChildAt(items.pop(),0);
                                }
                                if(form.numChildren != 0) {
                                        _columns.push(form);
                                }
                                generateColumns(maxColumns - 1,
items);
                                
                        }
                        
                }
                
                private function refresh():void {
                                super.removeAllChildren();
                                var itemsToAdd:Array = new Array();
                                _columns = new Array();
                                
                                for each (var formItem:FormItem in
_inputItems) {
                                        if(formItem != null
&& formItem.visible) {
                                               
itemsToAdd.push(formItem);
                                        }
                                }
                               
generateColumns(_maxColumns,itemsToAdd);
                                for (var i:int = _columns.length -
1; i>=0; i--) {
                                       
super.addChild(_columns[i]);
                                }
                }
                
        }
}
 
There it is the source code for the multiColumnForm, what this class does is to generate columns using a recursive function every time a child is added and then add this columns to itself. 
 
 Here it is a demo: 
 
 

 


+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Report abuse

Related recipes