…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…
- Flex 3 Style Explorer
- Designing Flex 3 Skins
- Flex Component Kit For flash
- Flex Component Kit Docs
- Tour De Flex
- Flex Examples
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.
November 26th, 2008 at 4:04 pm
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;
}
}
}
November 26th, 2008 at 5:13 pm
@Kris – Thanks so much! You’re a superstar much appreciated
November 26th, 2008 at 5:17 pm
@Kris – what’s the deal with your for loop? Is it a typo?
November 26th, 2008 at 5:27 pm
mmm, something went wrong with the copy pasting, this is the loop:
for (var i:int = 0; i unscaledHeight ||
(lastX + lastW) > unscaledWidth))
{
clipContent = true;
}
}
November 26th, 2008 at 5:31 pm
Strange, it keeps getting wrong
here is the source
http://www.neuroproductions.be/uploads/MenuBarExtend.mxml
November 26th, 2008 at 8:36 pm
@Kris – I’ve just learnt a massive lesson in Flex programming so thanks for making time to help me out mate!
November 26th, 2008 at 9:10 pm
@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;
January 2nd, 2009 at 12:57 pm
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.
January 2nd, 2009 at 2:34 pm
@Martin – Check out the original post as i’ve added a link to the bottom showing my custom mxml file.
September 16th, 2009 at 9:39 pm
Brilliant man, thank you for this!
September 21st, 2009 at 12:28 pm
When I try the example code I get the error:
Access of undefined property menuBarItems.
Any suggestions?
Thanks
September 23rd, 2009 at 11:44 am
Hi Jay,
Did you use my code added to the bottom of the post?