…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.
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;
}
}
}
By: kris on November 26, 2008
at 4:04 pm
@Kris – Thanks so much! You’re a superstar much appreciated
By: Doug on November 26, 2008
at 5:13 pm
@Kris – what’s the deal with your for loop? Is it a typo?
By: Doug on November 26, 2008
at 5:17 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;
}
}
By: kris on November 26, 2008
at 5:27 pm
Strange, it keeps getting wrong
here is the source
http://www.neuroproductions.be/uploads/MenuBarExtend.mxml
By: kris on November 26, 2008
at 5:31 pm
@Kris – I’ve just learnt a massive lesson in Flex programming so thanks for making time to help me out mate!
By: Doug on November 26, 2008
at 8:36 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;
By: Doug on November 26, 2008
at 9:10 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.
By: Martin on January 2, 2009
at 12:57 pm
@Martin – Check out the original post as i’ve added a link to the bottom showing my custom mxml file.
By: Doug on January 2, 2009
at 2:34 pm