Posted by: Doug | November 26, 2008

Skinning & Styling In Flex 3

…Working on a new AIR application and i wanted to use a MenuBar component…

It didn’t quite look right so i set about trying to style and skin it… haha!!!! If only i had realised how much time i would waste! In the end i got 80% of what i wanted done but there’s still an issue that for the love of god i can’t resolve!

Anyway during my quest of much tinkering i found some useful links so thought a post might help all of us…

I’ll try and keep this list updated as i discover more but for now you should always start with the Style Explorer as it shows most of the basic styling options available. So anything you can do there shouldn’t cause too much of a headache to implement in your project.

…and finally… Does anyone have any idea how i can remove the padding/margin/spacing to the left of a MenuBarItem within a MenuBar??? I want to have my first item appear left aligned with the 0,0 position of the MenuBar but there is always a 10-15px gap/spacer/offset which seems to be set by a private constant in MenuBar.as… Do i have to recompile MenuBar.as without this?? PLEASE HELP :)

Here’s my code for the extended MenuBar which i’m currently using in my AIR application to allow me to adjust the margin.


Responses

  1. Your Question:
    there is indeed a private static const MARGIN_WIDTH in the MenuBar.
    the solution:
    extend the menuBar and override updateDisplayList (its posible that you also have to override measure() ):)

    private var MARGIN_WIDTH:int =100
    override protected function updateDisplayList(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 unscaledHeight ||
    (lastX + lastW) > unscaledWidth))
    {
    clipContent = true;
    }
    }

    }

  2. @Kris – Thanks so much! You’re a superstar much appreciated :)

  3. @Kris – what’s the deal with your for loop? Is it a typo?

  4. mmm, something went wrong with the copy pasting, this is the loop:

    for (var i:int = 0; i unscaledHeight ||
    (lastX + lastW) > unscaledWidth))
    {
    clipContent = true;
    }
    }

  5. Strange, it keeps getting wrong
    here is the source

    http://www.neuroproductions.be/uploads/MenuBarExtend.mxml

  6. @Kris – I’ve just learnt a massive lesson in Flex programming so thanks for making time to help me out mate!

  7. @Kris – Is there any reason why the sub class is missing these lines of code?

    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;

  8. I was just running into the same problem. I was originally going to skip the subclass and build my own menu bar based on the MenuBar code but then you hit the various dependency problems, e.g. the IMenuBarItemRenderer requires accessors for the concrete MenuBar type.

    Its unfortunate that some parts of the framework are specified by interfaces but some other seemingly arbitrary parts are just concrete classes.

    I think in this case the best option is to override those 2 methods, even though they end up running twice just because they put the margin as a constant. :(

  9. @Martin – Check out the original post as i’ve added a link to the bottom showing my custom mxml file.

  10. Brilliant man, thank you for this!

  11. When I try the example code I get the error:

    Access of undefined property menuBarItems.

    Any suggestions?

    Thanks

  12. Hi Jay,

    Did you use my code added to the bottom of the post?


Leave a response

Your response:

Categories

Dev Friends

Expanded Horizons

My Sites

Useful Shizzam

Web Blogs

Web Groups

Web Innovate

Top Posts

 

November 2008
M T W T F S S
« Oct   Dec »
 12
3456789
10111213141516
17181920212223
24252627282930