[flexcoders] Re: Vertical separator in MenuBar

[jamesfin]

Here's a starting point for you.

To get a leg up on this the next time around you need to do something special 
like this, dive into the base class source code (menubar.as in this case) and 
look around to get a feel for what is happening within the default component.  
For this question, I dove right in and noticed that the updateDisplayList was 
looping through each menu item.  From there I created a new class based upon 
MenuBar and over-rode the updateDisplayList method.  Voila, a quick and easy 
answer.


Also, it would be considerate for all who respond to these type of questions to 
post working code that can be easily pasted into FB as well as describe in 
detail what you did to solve it.  It doesn't help too much when we push off the 
answer and not explain how to solve it the next time.  I spent 10 minutes to 
create the sample and respond which will go a long way for all the other 
developers who will google "flex MenuBar vertical line".



MenuBarWithVerticalLine.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" 
xmlns:local="*">
         <local:LocalMenuBar id="myMenuBar" labelField="@label">
        <mx:XMLList>
            <menuitem label="MenuItem A">
                <menuitem label="SubMenuItem A-1" enabled="false"/>
                <menuitem label="SubMenuItem A-2"/>
            </menuitem>
            <menuitem label="MenuItem B"/>
            <menuitem label="MenuItem C"/>
            <menuitem label="MenuItem D">
                <menuitem label="SubMenuItem D-1" 
                    type="radio" groupName="one"/>
                <menuitem label="SubMenuItem D-2" 
                    type="radio" groupName="one"
                    selected="true"/>
                <menuitem label="SubMenuItem D-3" 
                    type="radio" groupName="one"/>
            </menuitem>
        </mx:XMLList>
</local:LocalMenuBar>
</mx:Application>



LocalMenuBar.as


package{

        import mx.controls.MenuBar;
        import mx.controls.menuClasses.IMenuBarItemRenderer;
        
        public class LocalMenuBar extends MenuBar{

                public function LocalMenuBar(){
                        super();
                }


                // we are overriding the updateDisplayList so we can
                // get some of the painting action for our vertical bars...     
                override protected function 
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

                        // let the base class draw-up the menu...               
                        super.updateDisplayList(unscaledWidth, unscaledHeight);
        
                        // setup the line style...
                        graphics.clear();
                        graphics.lineStyle(1, 0x000000, .25);

                        // time to draw the vertical lines
                        // skip the first one as we don't
                        // need a vertical bar before the first menu item
                                                
                for (var i:int = 1; i < menuBarItems.length; i++){
        
                    var item:IMenuBarItemRenderer = menuBarItems[i];
        
                                graphics.moveTo(item.x, 2);
                                graphics.lineTo(item.x, unscaledHeight - 2);
                }
                }
        }
}


--- In flexcoders@yahoogroups.com, Alex Harui <aha...@...> wrote:
>
> Use Flex 4 and start with the MenuBar prototype on my blog.
> 
> 
> On 2/25/10 9:52 AM, "creativepragmatic" <creativepragma...@...> wrote:
> 
> 
> 
> 
> 
> 
> Hello Everyone,
> 
> My client has requested that a MenuBar be separated by vertical lines in the 
> way that is enabled by default in the LinkBar.  It does not look like this is 
> possible using MenuBar styles.  Does anyone know another way to do it?
> 
> Thank you for any guidance,
> 
> Orville
> 
> 
> 
> 
> 
> 
> --
> Alex Harui
> Flex SDK Team
> Adobe System, Inc.
> http://blogs.adobe.com/aharui
>