change the text of the LinkBarItem when linkbaritem is clicked

Question

I want to create a custom LinkBar in which the item which is selected shown with some space before the text or anything else as shown in the Image below. enter image description here

when second item is selected then Two is having some effect and move slightly to left side.

when third item is selected then Three is having some effect and move slightly to left side and Two move at its original place.

Please Help me ...

Thanks in advance

Are you sure you don't wanna use Flex 4 for this one? Would be a 5-minute job then. — RIAstar, Feb 24 '12 at 14:58
sorry RIAstar but i suggest to use FLEX 4 but our client is not ready so please suggest some link or code to give that kind of effect... — Sagar Rawal, Feb 27 '12 at 04:27

score 2 · Answer 1 · answered Feb 24 '12 at 14:34

check this out, it could be a great beginning :

<s:layout>
    <s:VerticalLayout gap="10"/>
</s:layout>

<fx:Script>
    <![CDATA[
        import mx.controls.LinkButton;
        import mx.events.ItemClickEvent;

        import spark.effects.animation.RepeatBehavior;

        [Bindable] public var offset:Number = 50;


        protected function animateLink(event:ItemClickEvent):void {
            _resetOtherButtons(event.index);

            var linkButton:LinkButton = event.relatedObject as LinkButton;
            if (linkButton) {
                var moveEffect:Move = moveEffects.getItemAt(event.index) as Move;
                if (moveEffect) {
                    moveEffect.target = linkButton;
                    if (moveEffect.isPlaying || (linkButton.x - offset) >= linkbar.x) {
                        moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft");
                    } else {
                        moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft") + offset;
                    }
                    moveEffect.play();
                }
            }
        }


        protected function _resetOtherButtons(index:int):void {
            var length:int = moveEffects.length;
            for (var i:int=0; i < length; i++) {
                if (i != index) {
                    var moveEffect:Move = moveEffects.getItemAt(i) as Move;
                    if (moveEffect) {
                        moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft");
                        moveEffect.play();
                    }
                }
            }
        }
    ]]>
</fx:Script>

<mx:LinkBar id="linkbar" direction="vertical" itemClick="animateLink(event)" width="100" textAlign="left">
    <mx:dataProvider>
        <s:ArrayCollection>
            <fx:String>Test1</fx:String>
            <fx:String>Test2</fx:String>
            <fx:String>Test3</fx:String>
        </s:ArrayCollection>
    </mx:dataProvider>
</mx:LinkBar>

<fx:Declarations>
    <s:ArrayCollection id="moveEffects">
        <s:Move/>
        <s:Move/>
        <s:Move/>
    </s:ArrayCollection>
</fx:Declarations>

score 2 · Accepted Answer · answered Feb 28 '12 at 22:52

This simple application demos a basic approach to doing this with spaces, its not bullet proof by any means, but it works, and its build on Flex SDK 3.6.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.events.ItemClickEvent;
            private var _labels:Array = ["link 1", "link 2", "link 3"];
            private var _links:ArrayCollection = new ArrayCollection();

            /**
             * Creation complete handler for linkbar.
             * Sets up the link bar data provider.
             * 
             * @param FlexEvent creation complete event dispatched from link bar
             * */
            private function links_creationCompleteHandler(event:FlexEvent):void{
                resetLinks();
                linkBar.dataProvider = _links;
            }

            /**
             * Item click handler for link bar.
             * Checks if user has selected the same link again.
             * If not then resets the link bar data provider with original label values.
             * Then adds event.label with 4 leading spaces at the index of the same string in array col.
             * Then removes the original string form the array col.
             * 
             * @param ItemClickEvent dispatched from link bar
             * */
            private function links_itemClickHandler(event:ItemClickEvent):void{
                if (event.label.search("    ") == -1){
                    resetLinks();
                    _links.addItemAt("    " + event.label, event.index);
                    _links.removeItemAt(event.index + 1);
                }

            }

            /**
             * Remove all items from the link bar data provider.
             * Then add back in the original items to reset item labels.
             * */
            private function resetLinks():void{
                _links.removeAll();
                for each (var str:String in _labels){
                    _links.addItem(str);
                }
            }

        ]]>
    </mx:Script>

    <mx:LinkBar id="linkBar"
                direction="vertical"
                creationComplete="links_creationCompleteHandler(event)"
                width="100"
                itemClick="links_itemClickHandler(event)"/>
</mx:Application>

In summary, it just adds some spaces onto the front of the item label selected. It does this by resetting the linkbars data provider each time the link bar dispatches the item click event. Then adding a replacement label for the selected item, removing the old one.

Feels a little clunky, and you could probably do something smoother with effects.

change the text of the LinkBarItem when linkbaritem is clicked

2 Answers2