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.

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

Answer 1

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.