Posts Tagged flex

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;
            }
        }
    }

Advertisements

, ,

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

Gradient background container with button as icon with states

 

<s:Group width=”170″ height=”20″>
<s:Rect left=”0″ top=”0″ right=”0″ bottom=”0″>
<s:stroke>
<s:SolidColorStroke color=”#e9e9e9″ />
</s:stroke>
<s:fill>
<s:LinearGradient rotation=”-90″>
<s:GradientEntry color=”#cccccc” ratio=”.4″ />
<s:GradientEntry color=”#eeeeee” />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label left=”5″ right=”5″ top=”2″ bottom=”2″
text=”title” fontSize=”10″
verticalAlign=”middle” />
<s:Button width=”10″ height=”10″ right=”8″ top=”3″
buttonMode=”true” click=”clickHandler(event)”
skinClass=”ButtonIconSkin”/>
</s:Group>

 

ButtonIconSkin.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>
<!– host component –>
<fx:Metadata>
[HostComponent(“spark.components.Button”)]
</fx:Metadata>

<!– states –>
<s:states>
<s:State name=”disabled” />
<s:State name=”down” stateGroups=”stateUp” />
<s:State name=”over” />
<s:State name=”up” stateGroups=”stateUp” />
</s:states>

<s:Group visible.stateUp=”false” visible=”true” buttonMode=”true”>
<s:BitmapImage source=”@Embed(‘../images/icon_maximize_up.png’)” />
</s:Group>
<s:Group visible.stateUp=”true” visible=”false” buttonMode=”true”>
<s:BitmapImage source=”@Embed(‘../images/icon_maximize_normal.png’)” />
</s:Group>
</s:Skin>

 

, ,

Leave a comment

Advanceddatagrid with custom tool tip and HTML content

 

<mx:AdvancedDataGrid width=”100%” height=”100%” dataProvider=”{orgData}” id=”iADG”
                         useRollOver=”false” creationComplete=”{onADGCreation();}”>
</mx:AdvancedDataGrid>
  

 
    private function onADGCreation():void
    {
        iADG.addEventListener(ShowToolTipEvent.ROLL_OVER, onIconRollOver);
        iADG.addEventListener(ShowToolTipEvent.ROLL_OUT, onIconRollOut);
        iADG.addEventListener(ShowToolTipEvent.MOUSE_WHEEL, onIconMouseWheel);
    }
    
    private var descToolTipMenu:HTMLToolTipComp = null;
        private var oTimer:Timer;
        private var startSecond:Number;
        private var menuDelayDuration:Number = 500; //delay duration for popup menu
        private var tooltipData:String;

        private function onIconRollOver(event:ShowToolTipEvent):void {
            tooltipData = event.toolTipText ;
            if(tooltipData == null)
                return;
            oTimer.stop();
            startTimer();
        }

        private function onIconRollOut(event:ShowToolTipEvent):void {
            oTimer.stop();
            if(descToolTipMenu==null) return;

            if(!descToolTipMenu.hitTestPoint(event.stageX,event.stageY))
            {
                hideMenu();
            }
        }

        private function onIconMouseWheel(event:ShowToolTipEvent):void {
            hideMenu();
        }

        /**
         * Function: startTimer
         * This function is called from onRollOver function.
         */
        private function startTimer():void
        {
            var oDate:Date = new Date();
            startSecond = oDate.getTime();
            oTimer.start();
        }

        /**
         * Function: checkMouseDelayOnCell
         * This function is the listener for the timer oTimer, called after the delay period of timer.
         * In our case function is called after every 200 miliseconds.
         */
        private function checkMouseDelayOnCell(event:TimerEvent):void
        {
            var oDate:Date = new Date();
            //show the menu if the mouse is over the cell for the duration of menuDelayDuration
            if((oDate.getTime()-startSecond)>menuDelayDuration)    {
                showMenu();
                oTimer.stop();
            }
        }

        public function showMenu():void
        {
            if(descToolTipMenu!=null) return;

            descToolTipMenu = PopUpManager.createPopUp(this,HTMLToolTipComp,false) as HTMLToolTipComp;
            descToolTipMenu.toolTipText = tooltipData ;
            trace(‘current tooltipData[‘+tooltipData+’]’);
            descToolTipMenu.addEventListener(MouseEvent.ROLL_OUT,hideMenuOnRollOut);
            descToolTipMenu.maxHeight = FlexGlobals.topLevelApplication.screen.height ;
            descToolTipMenu.maxWidth = FlexGlobals.topLevelApplication.screen.width ;

            FlexGlobals.topLevelApplication.addEventListener(MouseEvent.MOUSE_MOVE,checkMouseOverMenu);

            var xPos:Number = FlexGlobals.topLevelApplication.mouseX
            var yPos:Number = FlexGlobals.topLevelApplication.mouseY

            descToolTipMenu.addEventListener(FlexEvent.UPDATE_COMPLETE,function(event:FlexEvent)
            {
                if(descToolTipMenu!=null)
                {
                    if(yPos+descToolTipMenu.height>FlexGlobals.topLevelApplication.screen.height)
                    {
                        yPos  = FlexGlobals.topLevelApplication.mouseY – (descToolTipMenu.height+10) ;
                    }
                    if(xPos+descToolTipMenu.width>FlexGlobals.topLevelApplication.screen.width)
                    {
                        xPos = FlexGlobals.topLevelApplication.mouseX – (descToolTipMenu.width+10) ;
                    }

                    descToolTipMenu.move(xPos,yPos);
                }

            });

        }

        private function hideMenu():void
        {
            if(descToolTipMenu!=null)
            {
                PopUpManager.removePopUp(descToolTipMenu);
                descToolTipMenu = null;
            }
        }

        private function hideMenuOnRollOut(event:MouseEvent):void
        {
            if(descToolTipMenu==null) return;

            var nx:Number=event.stageX;
            var ny:Number=event.stageY;

            if((nx<=descToolTipMenu.x || nx>=(descToolTipMenu.x+descToolTipMenu.width) || ny<=descToolTipMenu.y || ny>=(descToolTipMenu.y+descToolTipMenu.height))
                && !this.hitTestPoint(event.stageX,event.stageY))
            {
                hideMenu();
            }
        }

        private function checkMouseOverMenu(event:MouseEvent):void
        {
            if(!this.hitTestPoint(event.stageX,event.stageY))
            {
                hideMenu();
            }
        }
        
        
//——————ShowToolTipEvent.as——————————–//
package com.jpmorgan.myclient.events
{
    import flash.events.Event;
    import flash.events.MouseEvent;

    public class ShowToolTipEvent extends MouseEvent
    {

        public static const ROLL_OVER:String=’mRollOver’;
        public static const ROLL_OUT:String=’mRollOut’;
        public static const MOUSE_WHEEL:String=’mWheel’;

        public var toolTipText:String;

        public function ShowToolTipEvent(type:String, value:String=””, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            this.toolTipText=value;
            super(type, bubbles, cancelable);
        }

        override public function clone():Event
        {
            return new ShowToolTipEvent(type, toolTipText);
        }
    }
}

//————-HTMLToolTipComp.mxml————————-//
<?xml version=”1.0″ encoding=”utf-8″?>
<s:TextArea xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
         xmlns:s=”library://ns.adobe.com/flex/spark”
         xmlns:mx=”library://ns.adobe.com/flex/mx”
          borderAlpha=”1″ borderVisible=”true” borderColor=”#000000″
         paddingLeft=”2″ paddingTop=”2″ paddingRight=”2″ paddingBottom=”2″ heightInLines=”{NaN}”
         contentBackgroundAlpha=”1″ contentBackgroundColor=”#ffffff” color=”#000000″
         verticalScrollPolicy=”off” updateComplete=”{onUpdateComplete();}”
        width=”250″>
    

    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.TextConverter;

            [Bindable]private var _toolTipText:String ;

            public function get toolTipText():String
            {
                return _toolTipText;
            }

            public function set toolTipText(value:String):void
            {
                _toolTipText = value;
                showToolTip();
            }

            public function showToolTip():void
            {
                this.textFlow = TextConverter.importToFlow(
                    _toolTipText,
                    TextConverter.TEXT_FIELD_HTML_FORMAT);
            }

            /**need to update */
            protected function onUpdateComplete():void
            {
                this.heightInLines = NaN ;
            }

        ]]>
    </fx:Script>

</s:TextArea>

, , , ,

Leave a comment

Spark Combox with case-in-sensitive search

The Spark ComboBox control also searches the item list as the user enters characters into the prompt area. As the user enters characters, the drop-down area of the control opens. It then and scrolls to and highlights the closest match in the item list.

itemMatchingFunction is a callback function used to search the item list as the user enters characters into the prompt area. The function referenced by this property takes an input string and return the index of the items in the data provider that match the input. The items are returned as a Vector.&lt;int&gt; of indices in the data provider.

The callback function must have the following signature:
     * function myMatchingFunction(comboBox:ComboBox, inputText:String):Vector.&lt;int&gt;</pre>
    By default, if an input string of length n is equivalent to the first n characters of an item (ignoring case), then it is a match to that item. For example, ‘aRiz’ is a match to “Arizona” while ‘riz’ is not.</p>

    We have used this function to make case-in-sensitive Combobox.

CaseSensComboBox

<local:CaseSensComboBox caseSens=”true”/>

 

CaseSensComboBox.as 

package
{
    import mx.core.mx_internal;
    
    import spark.components.ComboBox;
    
    public class CaseSensComboBox extends ComboBox
    {
        public function CaseSensComboBox()
        {
            super();
        }
        
        [Bindable]private var _caseSens:Boolean
        public function get caseSens():Boolean
        {
            return _caseSens;
        }

        public function set caseSens(value:Boolean):void
        {
            _caseSens = value;
            if(value)
            {
                this.itemMatchingFunction = caseSensitiveFilterFunc ;
            }
        }
        
        protected function caseSensitiveFilterFunc(comboBox:ComboBox, inputText:String):Vector.<int>
        {
            var matchingItems:Vector.<int>;
            
            if (!dataProvider || dataProvider.length <= 0)
                return matchingItems;
            
            if (textInput.text != “”)
            {
                matchingItems = findMatchingItems(textInput.text);
            }
            else
            {
                // If the input string is empty, then don’t select anything
                this.mx_internal::changeHighlightedSelection(NO_SELECTION);
              }
            
            return matchingItems;
                
        }
        
        // Returns an array of possible values
        private function findMatchingItems(input:String):Vector.<int>
        {
            // For now, just select the first match
            var startIndex:int;
            var stopIndex:int;
            var retVal:int;  
            var retVector:Vector.<int> = new Vector.<int>;
            
            retVal = findStringLoop(input, 0, dataProvider.length);
            
            if (retVal != -1)
                retVector.push(retVal);
            return retVector;
        }
        
        private function findStringLoop(str:String, startIndex:int, stopIndex:int):Number
        {
            // Try to find the item based on the start and stop indices.
            for (startIndex; startIndex != stopIndex; startIndex++)
            {
                var itmStr:String = itemToLabel(dataProvider.getItemAt(startIndex));
                
                itmStr = itmStr.substring(0, str.length);
                if (str == itmStr)
                {
                    return startIndex;
                }
            }
            return -1;
        }

    }
}

 

, ,

1 Comment