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.

Advertisements

12 responses to “Skinning & Styling In Flex 3

  • kris

    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;
    }
    }

    }

  • Doug

    @Kris – Thanks so much! You’re a superstar much appreciated πŸ™‚

  • Doug

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

  • kris

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

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

  • Doug

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

  • Doug

    @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;

  • Martin

    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. 😦

  • Doug

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

  • Rob S.

    Brilliant man, thank you for this!

  • Jay

    When I try the example code I get the error:

    Access of undefined property menuBarItems.

    Any suggestions?

    Thanks

  • Doug

    Hi Jay,

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: