Flex 4.5 align menu items center

Question

I have searched the net, but all those tuts are for Flex 3.

What is the approcach in Flex 4.5 to align the mx:MenuBar items in middle of the bar ?

(usually they are on the far left side)

Answer 1

from flexdeveloper.eu, set itemAlign to center:

package custom{
    import flash.geom.Rectangle;

    import mx.controls.MenuBar;
    import mx.controls.menuClasses.IMenuBarItemRenderer;
    import mx.core.IFlexDisplayObject;

    public class AlignableMenuBar extends MenuBar {
        private static  const MARGIN_WIDTH:int=10;
        private var background:IFlexDisplayObject;
        public var itemAlign:String;

        public function AlignableMenuBar() {
            super();
        }

        override protected  function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
            if (this.itemAlign == "right") {
                updateDisplayListRightAlign(unscaledWidth,unscaledHeight);
            } else if (this.itemAlign == "center") {
                updateDisplayListCenterAlign(unscaledWidth,unscaledHeight);
            } else {
                updateDisplayListLeftAlign(unscaledWidth,unscaledHeight);
            }
        }

        protected function updateDisplayListLeftAlign(unscaledWidth:Number,unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth,unscaledHeight);

            var lastX:Number=MARGIN_WIDTH;
            var lastW:Number=0;
            var len:int=menuBarItems.length;

            var clipContent:Boolean=false;
            var hideItems:Boolean=unscaledWidth == 0 || unscaledHeight == 0;

            for (var i:int=0; i < len; i++) {
                var item:IMenuBarItemRenderer=menuBarItems[i];

                item.setActualSize(item.getExplicitOrMeasuredWidth(),unscaledHeight);
                item.visible=! hideItems;

                lastX=item.x=lastX + lastW;
                lastW=item.width;

                if (! hideItems && item.getExplicitOrMeasuredHeight() > unscaledHeight || lastX + lastW > unscaledWidth) {
                    clipContent=true;
                }
            }

            if (background) {
                background.setActualSize(unscaledWidth,unscaledHeight);
                background.visible=! hideItems;
            }

            // Set a scroll rect to handle clipping.
            scrollRect=clipContent?new Rectangle(0,0,unscaledWidth,unscaledHeight):null;

        }

        protected function updateDisplayListCenterAlign(unscaledWidth:Number,unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth,unscaledHeight);

            var len:int=menuBarItems.length;

            var totalWidth:int=0;
            for (var i:int=0; i < len; i++) {
                var tempItem:IMenuBarItemRenderer=menuBarItems[i];
                totalWidth+= tempItem.width;
            }
            var lastX:Number=(this.width - totalWidth)/2;
            var lastW:Number=0;

            var clipContent:Boolean=false;
            var hideItems:Boolean=unscaledWidth == 0 || unscaledHeight == 0;

            for (var j:int=0; j < len; j++) {
                var item:IMenuBarItemRenderer=menuBarItems[j];

                item.setActualSize(item.getExplicitOrMeasuredWidth(),unscaledHeight);
                item.visible=! hideItems;

                lastX=item.x=lastX + lastW;

                lastW=item.width;

                if (! hideItems && item.getExplicitOrMeasuredHeight() > unscaledHeight || lastX + lastW > unscaledWidth) {
                    clipContent=true;
                }
            }

            if (background) {
                background.setActualSize(unscaledWidth,unscaledHeight);
                background.visible=! hideItems;
            }

            // Set a scroll rect to handle clipping.
            scrollRect=clipContent?new Rectangle(0,0,unscaledWidth,unscaledHeight):null;


        }

        protected function updateDisplayListRightAlign(unscaledWidth:Number,unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth,unscaledHeight);

            var len:int=menuBarItems.length;

            var totalWidth:int=0;
            for (var i:int=0; i < len; i++) {
                var tempItem:IMenuBarItemRenderer=menuBarItems[i];
                totalWidth+= tempItem.width;
            }
            var lastX:Number=this.width - totalWidth;
            var lastW:Number=0;

            var clipContent:Boolean=false;
            var hideItems:Boolean=unscaledWidth == 0 || unscaledHeight == 0;

            for (var j:int=0; j < len; j++) {
                var item:IMenuBarItemRenderer=menuBarItems[j];

                item.setActualSize(item.getExplicitOrMeasuredWidth(),unscaledHeight);
                item.visible=! hideItems;

                lastX=item.x=lastX + lastW;

                lastW=item.width;

                if (! hideItems && item.getExplicitOrMeasuredHeight() > unscaledHeight || lastX + lastW > unscaledWidth) {
                    clipContent=true;
                }
            }

            if (background) {
                background.setActualSize(unscaledWidth,unscaledHeight);
                background.visible=! hideItems;
            }

            // Set a scroll rect to handle clipping.
            scrollRect=clipContent?new Rectangle(0,0,unscaledWidth,unscaledHeight):null;
        }
    }
}

Answer 2

Why don't you just put your MenuBar in a parent container? The parent container would have a 100% width, while the MenuBar would not. The MenuBar could then be positioned horizontally within that container.