flex 无边框透明背景MenuBar

打开FLEX帮助搜了半天,只有bordercolor属性,没有borderAlpha属性, 不想要那个该死的边框,怎么半呢方法在这里:(原作者只针对FLEX2,经测试,在FLEX3中一样是OK的~) 来自:http://www.cnblogs.com/taobataoma/archive/2008/01/22/1048332.html

在Flex中，大家是否发现MenuBar的背景与边框是不能去掉的，其实这是因为MenuBar的缺省的backgroundSkin属性使用的是mx.skins.halo.MenuBarBackgroundSkin，不管您怎么设置，该skin都会绘制背景以及边框，所以我们不能去掉MenuBar的边框。

既然这样的话，要去掉边框，只需要不使用该Skin就可以，所以我们自定义了一个Skin：MenuBarNoBorderFillSkin,该Skin什么都不做，只是用来替代MenuBarBackgroundSkin而已。

另外，使用了MenuBarNoBorderFillSkin以后，MenuBar的菜单栏不再根据鼠标移动显示不同的选择状态了，所以我们又做了个MenuBarActiveSkin类来响应鼠标，然后将MenuBar的itemDownSkin和itemOverSkin属性MenuBarActiveSkin，这样菜单栏就可以显示不同的状态。

完整代码见下：

MenuBarWidthNoBorder.mxml

Java代码

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
3. <mx:Script>
4. <![CDATA[
5. import com.eshangrao.skin.MenuBarNoBorderFillSkin;
6. import com.eshangrao.skin.MenuBarActiveSkin;
7. [Bindable]
8. public var menubarXML:XML =
9. <menu>
10. <menuitem label="System" >
11. <menuitem label="File"/>
12. <menuitem label="Save"/>
13. <menuitem type="separator"/>
14. <menuitem label="Exit"/>
15. </menuitem>
16. <menuitem label="Edit">
17. <menuitem label="Cut"/>
18. <menuitem label="Parste"/>
19. <menuitem label="Delete"/>
20. </menuitem>
21. <menuitem label="Navigate">
22. <menuitem label="Go Into" state="killTermState"/>
23. <menuitem label="Go To"/>
24. </menuitem>
25. </menu>;
26. ]]>
27. </mx:Script>
28. <mx:ApplicationControlBar width="100%">
29. <mx:MenuBar labelField="@label" dataProvider="{menubarXML.menuitem}" width="100%"
30. backgroundSkin="com.eshangrao.skin.MenuBarNoBorderFillSkin"
31. itemDownSkin="com.eshangrao.skin.MenuBarActiveSkin"
32. itemOverSkin="com.eshangrao.skin.MenuBarActiveSkin"
33. />
34. </mx:ApplicationControlBar>
35. </mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
    <![CDATA[
            import com.eshangrao.skin.MenuBarNoBorderFillSkin;
            import com.eshangrao.skin.MenuBarActiveSkin;            
            [Bindable]
            public var menubarXML:XML =
                <menu>
                    <menuitem label="System" >
                        <menuitem label="File"/>
                        <menuitem label="Save"/>
                        <menuitem type="separator"/>   
                        <menuitem label="Exit"/>
                    </menuitem>
                    <menuitem label="Edit">
                        <menuitem label="Cut"/>
                        <menuitem label="Parste"/>
                        <menuitem label="Delete"/>                        
                    </menuitem>
                    <menuitem label="Navigate">
                        <menuitem label="Go Into" state="killTermState"/>
                        <menuitem label="Go To"/>
                    </menuitem>
                </menu>;   
        ]]>
    </mx:Script>
    <mx:ApplicationControlBar width="100%">
        <mx:MenuBar labelField="@label" dataProvider="{menubarXML.menuitem}" width="100%"
            backgroundSkin="com.eshangrao.skin.MenuBarNoBorderFillSkin"
            itemDownSkin="com.eshangrao.skin.MenuBarActiveSkin"
            itemOverSkin="com.eshangrao.skin.MenuBarActiveSkin"
        />
    </mx:ApplicationControlBar>
</mx:Application>

MenuBarActiveSkin.as

Java代码

1. package com.eshangrao.skin
2. {
3. import mx.skins.ProgrammaticSkin;
4. import flash.display.Graphics;
5. import mx.utils.ColorUtil;
7. public class MenuBarActiveSkin extends ProgrammaticSkin
8. {
9. public function MenuBarActiveSkin()
10. {
11. super();
12. }
13. override protected function updateDisplayList(w:Number, h:Number):void
14. {
15. var backgroundAlpha:Number = getStyle("backgroundAlpha");
16. var rollOverColor:uint=getStyle("rollOverColor");
18. graphics.clear();
19. drawRoundRect(0,0,w,h,5,rollOverColor,backgroundAlpha);
21. }
22. }
23. }

package com.eshangrao.skin
{
    import mx.skins.ProgrammaticSkin;
    import flash.display.Graphics;
    import mx.utils.ColorUtil;

    public class MenuBarActiveSkin extends ProgrammaticSkin
    {
        public function MenuBarActiveSkin()
        {
            super();
        }
        override protected function updateDisplayList(w:Number, h:Number):void
        {
            var backgroundAlpha:Number = getStyle("backgroundAlpha");
            var rollOverColor:uint=getStyle("rollOverColor");
            
            graphics.clear();
            drawRoundRect(0,0,w,h,5,rollOverColor,backgroundAlpha);
            
        }
    }
}

MenuBarNoBorderFillSkin.as

Java代码

1. package com.eshangrao.skin
2. {
3. import mx.skins.ProgrammaticSkin;
4. import flash.display.Graphics;
6. public class MenuBarNoBorderFillSkin extends ProgrammaticSkin
7. {
8. public function MenuBarNoBorderFillSkin()
9. {
10. super();
11. }
12. }
13. }