Posts Tagged flex4

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

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