Usable search function

Alternative to Array and ArrayCollection inbuilt search method:

@whatToSearch – int/number/string value to search in target array/arraycollection whereToSearch.

@propToSearch – if array or arraycollection contains list of objects then propToSearch contains field name of object.

public static function search(whatToSearrch:*, whereToSearch:*, propToSearch:String, caseSensitive:Boolean=true):int
{
var index:int=-1;

if (whatToSearch == null || whereToSearch == null)
return index;

if (whatToSearch is String && String(whatToSearch).length == 0)
return index;

//CHECK CASE SENSITIVE SEARCH FOR STRING VALUE
var searchingFor:*=whatToSearch;

if (propToSearch == null || propToSearch.length == 0)
{
//search into whereToSearch without property
for (var i:int=0; i < whereToSearch.length; i++)
{
//string search
if(isNaN(whatToSearch))
{
if (whatToSearch is String && !caseSensitive)
{
//convert into upper case and then match
if (whereToSearch[i].toString().toUpperCase() == searchingFor.toString().toUpperCase())
{
index=i;
break;
}
}
else
{
if (whereToSearch[i] == searchingFor)
{
index=i;
break;
}
}
}else
{
//numeric search
//parse numeric value and then match
if(parseFloat(whereToSearch[i]) == parseFloat(searchingFor))
{
index=i;
break;
}
}
}
}
else
{
//search into whereToSearch with property
for (var j:int=0; j < whereToSearch.length; j++)
{
//string search
if(isNaN(whatToSearch))
{
if (whatToSearch is String && !caseSensitive)
{
if (String(whereToSearch[j][propToSearch]).toUpperCase() == searchingFor.toString().toUpperCase())
{
index=j;
break;
}
}
else
{
if (whereToSearch[j][propToSearch] == searchingFor)
{
index=j;
break;
}
}
}else
{
//numeric search
//parse numeric value and then match
if(parseFloat(whereToSearch[j][propToSearch]) == parseFloat(searchingFor))
{
index=j;
break;
}
}
}
}

return index;

}

Leave a comment

Hide sort number in AdvancedDataGridColumn using sortItemRenderer

To hide sort number in AdvancedDataGridColumn using sortItemRenderer, provide custom sortItemRenderer

<mx:AdvancedDataGrid

sortItemRenderer=”{new ClassFactory(NoColumnSortNumberSortItemRenderer)}”/>

NoColumnSortNumberSortItemRenderer.as

import mx.controls.advancedDataGridClasses.AdvancedDataGridSortItemRenderer;
import mx.core.UITextField;
    
    public class NoColumnSortNumberSortItemRenderer extends AdvancedDataGridSortItemRenderer
    {
        public function NoColumnSortNumberSortItemRenderer()
        {
            super();
        }
        
        override protected function childrenCreated():void
        {
            super.childrenCreated();
            
            // Get reference to sort number text field
            var sortOrderTextField:UITextField = this.getChildAt(0) as
                UITextField;
            
            if (sortOrderTextField != null)
            {
                // Hide sort number text field
                sortOrderTextField.includeInLayout = false;
                sortOrderTextField.visible = false;
            }
        }
    }

, ,

Leave a comment

Sort Arraycollection based on date field in Flex

If you have ArrayCollection as Dataprovider to Datagrid and you want to sort dataprovider based on single date field for ex: created_Date or modified_Date, then below is code snippet:

public function sortOnFilterModifiedDate():void
{
var dataSortField:SortField = new SortField();
dataSortField.name = “modified_Date”;//date field
dataSortField.numeric = false;
dataSortField.descending = true;//true or false do not affect sorting logic
dataSortField.caseInsensitive = true;

var filterModifiedDateSort:Sort = new Sort();
filterModifiedDateSort.fields = [dataSortField];
filterModifiedDateSort.compareFunction = filterModifiedDateSortCompareFunc;

pageFilters.sort = filterModifiedDateSort;
pageFilters.refresh();

}

private function filterModifiedDateSortCompareFunc (itemA:Object,itemB:Object,fields:Array):int
{
return ObjectUtil.dateCompare(DateFormatter.parseDateString(itemA.modified_Date),

DateFormatter.parseDateString(itemB.modified_Date));
}

Use below code to sort in Descending order: -1*ObjectUtil.dateCompare(DateFormatter.parseDateString(itemA.modified_Date),

DateFormatter.parseDateString(itemB.modified_Date));

,

Leave a comment

Show various shapes in Flex chart control

For BarChart:

Set itemRenderer property for barSeries

barSeries.setStyle(“itemRenderer”, new ClassFactory(ShapedChartItemRenderer));

————————————————————————————————————-

ShapedChartItemRenderer.as

package
{
    import flash.display.Graphics;
    import mx.charts.series.items.BarSeriesItem;
    import mx.core.IDataRenderer;
    import mx.skins.ProgrammaticSkin;
    import mx.utils.StringUtil;
    
    public class ShapedChartItemRenderer extends ProgrammaticSkin implements IDataRenderer
    {
        private var chartItemShape:String = “”;
        private var chartItemColor:uint = 0x71c0ff;
        private var _chartItem:BarSeriesItem;
        private var shapeFillAlpha:Number = 0.4;
        private var shapeBorderThickness:Number = 2;
        
        public function ShapedChartItemRenderer() {
            // Empty constructor.
        }
        
        public function get data():Object {
            return _chartItem;
        }
        
        public function set data(value:Object):void {
            _chartItem = value as BarSeriesItem;
            invalidateDisplayList();
        }
        
        override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            var g:Graphics = graphics;
            g.clear();  
            
            //for drawing oval shape in chart
            g.beginFill(0xff0000,1);
            g.lineStyle(1,0xff0000,1);
            g.drawEllipse(0,0,25,13);

            //uncomment below function for drawing different shapes in chart based on some //condition
            //condition for various shapes and set chartItemShape
            /*chartItemShape = “OVAL”;
            chartItemColor = 0x71c0ff;
            
            if(data)
            {
                drawConditionalShapes(g,chartItemShape,chartItemColor,unscaledWidth,unscaledHeight);
            }*/
            
            g.endFill();
        }
        
        private function drawConditionalShapes(g:Graphics,shape:String,color:uint,uwidth:Number,uheight:Number):void
        {
            switch(StringUtil.trim(shape.toUpperCase()))
            {
                case ChartItemShapes.OVAL_SHAPE:
                    g.beginFill(color,shapeFillAlpha);
                    g.lineStyle(shapeBorderThickness,color,1);
                    g.drawEllipse(0,0,25,13);
                    break;
                case ChartItemShapes.HEXAGON_SHAPE:
                    g.beginFill(color,shapeFillAlpha);
                    g.lineStyle(shapeBorderThickness,color,1);
                    g.moveTo(0,0);
                    g.lineTo(20,10);
                    g.lineTo(40,10);
                    g.lineTo(60,0);
                    g.lineTo(40,-10);
                    g.lineTo(20,-10);
                    g.lineTo(0,0);
                    break;
                case ChartItemShapes.GROUPED_SHAPE:
                    g.beginFill(color,shapeFillAlpha);
                    g.lineStyle(shapeBorderThickness,color,1);
                    g.drawRect(0, 0, uwidth, uheight);
                    break;
                case ChartItemShapes.RECTANGLE_SHAPE:
                    g.beginFill(color,shapeFillAlpha);
                    g.lineStyle(shapeBorderThickness,color,1);
                    g.drawRect(0, 0, 20, 20);
                    break;
                default:
                    g.beginFill(color,1);
                    g.lineStyle(1,color,1);
                    g.drawRect(0, 0, uwidth, uheight);
                break;
            }
        }
    } // Close class.
} // Close package.

 

,

Leave a comment

Flex – check browser is Firefox or not?

var userAgent:Object = ExternalInterface.call(“function() { return navigator.userAgent; }”);

if (userAgent != null && String(userAgent).indexOf(“Firefox”) > -1) {
                    //browser is Firefox
 }

,

Leave a comment

Custom header renderer In mx:DataGrid

mx:DataGrid

<fx:Script><![CDATA[

 

    protected function initGrid():void
        {
            orderGrid.addEventListener(FilterEvent.FILTER_EVENT,applyFilter,true);    
        }

public function applyFilter(event:FilterEvent):void
        {             
           //action on event passed from header renderer

       }

]]>
    </fx:Script>

 

<mx:DataGrid id=”orderGrid” dataProvider=”{dp}”
            width=”100%” height=”100%” creationComplete=”{initGrid();}”>
                <mx:columns>
                    <components1:TextInputHeaderColumn headerText=”headerText1″ dataField=”dataField1″
                      width=”110″ minWidth=”110″
                    headerRenderer=”{new ClassFactory(TextInputHeaderRenderer)}”/>
                    
                    <mx:DataGridColumn headerText=”headerText2″ dataField=”dataField2″/>
                                       
                    <components1:FromTODateFieldDataGridColumn
                        headerText=”headerText3″ dataField=”dataField3″
                        headerRenderer=”{new ClassFactory(FromTODateFieldHeaderRenderer)}”
                        minWidth=”110″
                        />
                    <components1:FromTOTextInputDataGridColumn
                        headerText=”headerText4″ dataField=”dataField4″
                        headerRenderer=”{new ClassFactory(FromTOTextInputHeaderRenderer)}”
                        minWidth=”70″
                        />
                    <components1:MXComboboxHeaderColumn headerText=”headerText5″ dataField=”dataField5″
                        minWidth=”120″ width=”120″ comboboxDP=”{comboDp}”
                        comboboxLabelField=”label” headerRenderer=”{new ClassFactory(MXComboboxHeaderRenderer)}”
                        />
                </mx:columns>
            </mx:DataGrid>

 

//—————TextInputHeaderColumn.as

package components

{
    import mx.controls.dataGridClasses.DataGridColumn;
    [Event(name=”click”, type=”flash.events.MouseEvent”)]
    public class TextInputHeaderColumn extends DataGridColumn
    {
        public function TextInputHeaderColumn(columnName:String=null)
        {
            //TODO: implement function
            super(columnName);
            isTextChanged = false;
        }
        
        public var isTextChanged:Boolean;
    }
}

 

//—————FromTODateFieldDataGridColumn.as

package components
{
    import mx.controls.dataGridClasses.DataGridColumn;
    [Event(name=”click”, type=”flash.events.MouseEvent”)]
    public class FromTODateFieldDataGridColumn extends DataGridColumn
    {
        public function FromTODateFieldDataGridColumn(columnName:String=null)
        {
            super(columnName);
        }
    }
}

//—FromTOTextInputDataGridColumn.as

package components
{
    import mx.controls.dataGridClasses.DataGridColumn;
    [Event(name=”click”, type=”flash.events.MouseEvent”)]
    public class FromTOTextInputDataGridColumn extends DataGridColumn
    {
        public function FromTOTextInputDataGridColumn(columnName:String=null)
        {
            super(columnName);
        }
    }
}

//————–TextInputHeaderRenderer.as

 

package components
{
    import events.FilterEvent;
    
    import flash.events.Event;
    
    import mx.containers.Canvas;
    import mx.controls.DataGrid;
    import mx.controls.Label;
    import mx.controls.TextInput;
    import mx.controls.dataGridClasses.MXDataGridItemRenderer;
    import mx.controls.listClasses.IListItemRenderer;
    import mx.core.IDataRenderer;
    import mx.events.DataGridEvent;
    import mx.events.FlexEvent;
    
    import vo.MagentoDataModel;
    
    public class TextInputHeaderRenderer extends MXDataGridItemRenderer
    {
        private var _textInput:TextInput ;
        private var _headerLbl:Label ;
        publicjm6 function TextInputHeaderRenderer()
        {
            //TODO: implement function
            super();
        }
        
        private var _dataField:String;
        public function get dataField():String
        {
            return _dataField;
        }
        
        public function set dataField(value:String):void
        {
            _dataField = value;
        }

        
        private var _data:TextInputHeaderColumn ;
        override public function get data():Object
        {
            return _data;
        }
        
        override public function set data(value:Object):void
        {
            _data = value as TextInputHeaderColumn;
            _dataField = TextInputHeaderColumn(_data).dataField ;
            DataGrid(dataGridListData.owner).addEventListener(DataGridEvent.HEADER_RELEASE, sortEventHandler);
        }
        
        override protected function createChildren():void
        {
            super.createChildren();
            if(_data)
            {
                _headerLbl = new Label();
                _headerLbl.text = _data.headerText ;
                _headerLbl.setStyle(‘textAlign’,’left’);
                _headerLbl.height = 20;
                
                this.addElement(_headerLbl);
                
                _textInput = new TextInput();
                _textInput.percentWidth = 98;
                _textInput.horizontalCenter = 0;
                _textInput.height = 20;
                _textInput.addEventListener(FlexEvent.ENTER,onInputEnterKey);
                _textInput.addEventListener(Event.CHANGE,onInput);
                this.addElement(_textInput);
            }
        }
        
        override protected function updateDisplayList(uWidth:Number, uHeight:Number):void
        {
            super.updateDisplayList(uWidth,uHeight);
            _headerLbl.x = 2;
            _headerLbl.y = 2;
            
            _textInput.horizontalCenter = 0;
            _textInput.y = 25;
            
        }
        
        public function reset():void
        {
            _textInput.text = “”;    
        }
        
        private function sortEventHandler(event:DataGridEvent):void
        {
            if (event.itemRenderer == this)
                event.preventDefault();
        }
        
        private function onInput(event:Event):void
        {
            //action on textinput change
        }
        
        private function onInputEnterKey(event:FlexEvent):void
        {
            //action on textinput enter event
        }

    }
}

//——————FromTODateFieldHeaderRenderer.as

package components
{
    import events.FilterEvent;
    
    import flash.events.Event;
    
    import mx.controls.Alert;
    import mx.controls.DataGrid;
    import mx.controls.DateField;
    import mx.controls.Label;
    import mx.controls.dataGridClasses.MXDataGridItemRenderer;
    import mx.events.CalendarLayoutChangeEvent;
    import mx.events.DataGridEvent;
    
    import vo.MagentoDataModel;
    
    public class FromTODateFieldHeaderRenderer extends MXDataGridItemRenderer
    {
        public function FromTODateFieldHeaderRenderer()
        {
            super();
        }
        
        private var _fromDateField:DateField ;
        private var _toDateField:DateField ;
        private var _headerLbl:Label ;
        private var _fromLbl:Label ;
        private var _toLbl:Label ;
        private var _data:FromTODateFieldDataGridColumn ;
        
        private var _dataField:String;
        public function get dataField():String
        {
            return _dataField;
        }
        
        public function set dataField(value:String):void
        {
            _dataField = value;
        }
        
        override public function get data():Object
        {
            return _data;
        }
        
        override public function set data(value:Object):void
        {
            _data = value as FromTODateFieldDataGridColumn;
            _dataField = FromTODateFieldDataGridColumn(_data).dataField;
            DataGrid(dataGridListData.owner).addEventListener(DataGridEvent.HEADER_RELEASE, sortEventHandler);
        }
        
        override protected function createChildren():void
        {
            super.createChildren();
            if(_data)
            {
                _headerLbl = new Label();
                _headerLbl.text = _data.headerText ;
                _headerLbl.setStyle(‘textAlign’,’left’);
                _headerLbl.height = 20;
                this.addElement(_headerLbl);
                
                _fromLbl = new Label();
                _fromLbl.text = ‘From’ ;
                _fromLbl.setStyle(‘textAlign’,’left’);
                //_fromLbl.height = 20;
                this.addElement(_fromLbl);
                
                _fromDateField = new DateField();
                _fromDateField.percentWidth = 50;
                _fromDateField.minWidth = 120;
                _fromDateField.height = 20;
                _fromDateField.addEventListener(CalendarLayoutChangeEvent.CHANGE,onChange);
                this.addElement(_fromDateField);
                
                _toLbl = new Label();
                _toLbl.text = ‘To’ ;
                _toLbl.setStyle(‘textAlign’,’left’);
                //_fromLbl.height = 20;
                this.addElement(_toLbl);
                
                _toDateField = new DateField();
                _toDateField.percentWidth = 50;
                _toDateField.minWidth = 120;
                _toDateField.height = 20;
                _toDateField.addEventListener(CalendarLayoutChangeEvent.CHANGE,onChange);
                this.addElement(_toDateField);
            }
        }
        
        override protected function updateDisplayList(uWidth:Number, uHeight:Number):void
        {
            super.updateDisplayList(uWidth,uHeight);
            _headerLbl.x = 2;
            _headerLbl.y = 2;
            
            _fromLbl.x = 2;
            _fromLbl.y = 25;
            _fromLbl.width = 45;
            
            _fromDateField.x = 50;
            _fromDateField.y = 25;
            _fromDateField.percentWidth = 50;
            
            _toLbl.x = 2;
            _toLbl.y = 45;
            _toLbl.width = 45;
            
            _toDateField.x = 50;
            _toDateField.y = 45;
            _toDateField.percentWidth = 50;
        }
        
        public function reset():void
        {
            _toDateField.selectedDate = null;    
            _fromDateField.selectedDate = null;    
        }
        
        private function sortEventHandler(event:DataGridEvent):void
        {
            if (event.itemRenderer == this)
                event.preventDefault();
        }
        
        private function onChange(event:CalendarLayoutChangeEvent):void
        {
            //action on date field change event. event can be dipatched to parent datagrid
            //for ex:
            DataModel.getInstance().filterVO.created_at_To = _toDateField.selectedDate;    
            DataModel.getInstance().filterVO.created_at_From = _fromDateField.selectedDate;    
            
            dispatchEvent(new FilterEvent(FilterEvent.FILTER_EVENT));
        }
    }
}

 

//————–FromTOTextInputHeaderRenderer.as

package components
{
    import events.FilterEvent;
    
    import flash.events.Event;
    
    import mx.controls.Alert;
    import mx.controls.DataGrid;
    import mx.controls.DateField;
    import mx.controls.Label;
    import mx.controls.TextInput;
    import mx.controls.dataGridClasses.MXDataGridItemRenderer;
    import mx.events.CalendarLayoutChangeEvent;
    import mx.events.DataGridEvent;
    import mx.events.FlexEvent;
    
    import vo.MagentoDataModel;
    
    public class FromTOTextInputHeaderRenderer extends MXDataGridItemRenderer
    {
        public function FromTOTextInputHeaderRenderer()
        {
            super();
        }
        
        private var _fromTextInput:TextInput ;
        private var _toTextInput:TextInput ;
        private var _headerLbl:Label ;
        private var _fromLbl:Label ;
        private var _toLbl:Label ;
        private var _data:FromTOTextInputDataGridColumn ;
        
        private var _dataField:String;
        public function get dataField():String
        {
            return _dataField;
        }
        
        public function set dataField(value:String):void
        {
            _dataField = value;
        }
        
        override public function get data():Object
        {
            return _data;
        }
        
        override public function set data(value:Object):void
        {
            _data = value as FromTOTextInputDataGridColumn;
            _dataField = FromTOTextInputDataGridColumn(_data).dataField;
            DataGrid(dataGridListData.owner).addEventListener(DataGridEvent.HEADER_RELEASE, sortEventHandler);
        }
        
        override protected function createChildren():void
        {
            super.createChildren();
            if(_data)
            {
                _headerLbl = new Label();
                _headerLbl.text = _data.headerText ;
                _headerLbl.setStyle(‘textAlign’,’left’);
                _headerLbl.height = 20;
                this.addElement(_headerLbl);
                
                _fromLbl = new Label();
                _fromLbl.text = ‘From’ ;
                _fromLbl.setStyle(‘textAlign’,’left’);
                //_fromLbl.height = 20;
                this.addElement(_fromLbl);
                
                _fromTextInput = new TextInput();
                _fromTextInput.percentWidth = 50;
                _fromTextInput.minWidth = 70;
                _fromTextInput.height = 20;
                _fromTextInput.addEventListener(Event.CHANGE,onChange);
                _fromTextInput.addEventListener(FlexEvent.ENTER,onInputEnterKey);
                this.addElement(_fromTextInput);
                
                _toLbl = new Label();
                _toLbl.text = ‘To’ ;
                _toLbl.setStyle(‘textAlign’,’left’);
                //_fromLbl.height = 20;
                this.addElement(_toLbl);
                
                _toTextInput = new TextInput();
                _toTextInput.percentWidth = 50;
                _toTextInput.minWidth = 70;
                _toTextInput.height = 20;
                _toTextInput.addEventListener(Event.CHANGE,onChange);
                _toTextInput.addEventListener(FlexEvent.ENTER,onInputEnterKey);
                
                this.addElement(_toTextInput);
            }
        }
        
        override protected function updateDisplayList(uWidth:Number, uHeight:Number):void
        {
            super.updateDisplayList(uWidth,uHeight);
            _headerLbl.x = 2;
            _headerLbl.y = 2;
            
            _fromLbl.x = 2;
            _fromLbl.y = 25;
            _fromLbl.width = 50;
            
            _fromTextInput.x = 55;
            _fromTextInput.y = 25;
            _fromTextInput.percentWidth = 50;
            
            _toLbl.x = 2;
            _toLbl.y = 45;
            _toLbl.width = 50;
            
            _toTextInput.x = 55;
            _toTextInput.y = 45;
            _toTextInput.percentWidth = 50;
        }
        
        public function reset():void
        {
            _toTextInput.text = null;    
            _fromTextInput.text = null;    
        }
        
        private function sortEventHandler(event:DataGridEvent):void
        {
            if (event.itemRenderer == this)
                event.preventDefault();
        }
        
        private function onChange(event:Event):void
        {
            //action on change event of textinput    
        }
        
        private function onInputEnterKey(event:FlexEvent):void
        {
            //action on enter event of textinput
        }
    }
}

2 Comments

Formatting dates, numbers, and currencies by using localization

Find out Adobe’s doc on Using localization

Sample Code:

            var currencyFormatter:CurrencyFormatter = new CurrencyFormatter();
            currencyFormatter.setStyle(“locale”, LocaleID.DEFAULT);
            currencyFormatter.useCurrencySymbol = true;
            currencyFormatter.trailingZeros = true;

            var dateFormatter: DateTimeFormatter = new DateTimeFormatter();
            dateFormatter.setStyle(“locale”, LocaleID.DEFAULT);
            dateFormatter.dateTimePattern = “MM/dd/yyyy”;

Leave a comment