I just made a quick new component and added it to FlexLib. It’s a Button component, but it allows you to add any child UI components to the button via MXML. So if you find the single icon and label format of the button to be a bit too restrictive, you can use this component to layout your button however you want. This is in response to a recent question asked on flexcoders.
So for example, in the sample below the top button is created like this:
<flexlib:CanvasButton width="150">
<mx:VBox height="100%" width="100%" verticalGap="0" >
<mx:Label text="This is a" width="100%" textAlign="left" />
<mx:VBox width="100%" horizontalAlign="center">
<mx:Canvas cornerRadius="5"
backgroundColor="0xff0000" backgroundAlpha=".5"
borderStyle="solid">
<mx:Label text="crazy" width="100%"
fontSize="20" fontStyle="italic"
fontWeight="bold" />
</mx:Canvas>
</mx:VBox>
<mx:Label text="button!" width="100%" textAlign="right" />
</mx:VBox>
</flexlib:CanvasButton>
View the source
View the documentation
Note: this has been added to the SVN repository for FlexLib but is not yet in the distribution zip. The distribution zip will get updated once we have a bigger changeset (oh, and it’s coming…)
This movie requires Flash Player 9.
Entries (RSS)
June 3rd, 2007 at 6:05 am
Hi Doug, thanks again for this nice and useful component (I’ve already left some comments on Flexcoders).
Borek
June 4th, 2007 at 2:36 am
Hi Doug, I played around with your component and it unfortunately brakes the design view. I am quite happy to live in the MXML world but this can be an issue for designers (and to be honest, sometimes it’s quite convenient to be able to edit things in WYSIWYG mode).
But thanks for your component anyway.
Borek
June 19th, 2007 at 6:39 am
Hi Doug, thanks for the component. I’m having a problem when trying to use an extension of CanvasButton as a headerRenderer for an Accordion. I get the following exception at runtime:
ReferenceError: Error #1065: Variable http://www.adobe.com/2006/flex/mx/internal::setDocumentDescriptor is not defined.
Am I doing something silly, or missing something?
Thanks!
July 18th, 2007 at 8:26 pm
great. but how would/could u change the shape of the button to something non-square?
September 18th, 2007 at 2:50 am
Hi Doug, I am trying to use the component in Flex 3 and it doesn’t appear to like it, either in the IDE design view, via MXML, or if I instantiate programmatically within ActionsScript. Does this component work in Flex 3, or maybe no?
I was hoping to use it as a delegate headerRenderer for an Accordion header and I noticed that someone else on this post had the same issues, but their link is dead. Is there any info you could give me?
Can’t wait to see if this will work for me. The component looks great!
September 18th, 2007 at 10:38 am
Bryan,
I’ve tested the component in Flex 3 and all seems to be OK with the latest FlexLib source code. However, I just added a new component to the FlexLib SVN repository specifically for using CanvasButton as a header renderer in an Accordion.
See: http://dougmccune.com/blog/2007/09/18/using-complex-headers-with-the-flex-accordion/
September 19th, 2007 at 3:09 am
You are the freakin’ man!!! You have my vote for President! thx!!!
February 29th, 2008 at 2:03 am
Cool, i ll use it !)
October 27th, 2009 at 1:31 pm
Thanks for this. Can you use the CanvasButton class to have the label text on a button wrap? If so, chow can you create a Custom Button class that extends the CanvasButton class and make sthe label text wrap?
thanks!
-Mike
November 26th, 2009 at 11:03 pm
[...] http://dougmccune.com/blog/2007/06/01/new-component-canvasbutton-added-to-flexlib/ [...]
May 17th, 2010 at 6:56 pm
[...] http://dougmccune.com/blog/2007/06/01/new-component-canvasbutton-added-to-flexlib/ [...]
December 11th, 2010 at 5:13 am
[...] http://dougmccune.com/blog/2007/06/01/new-component-canvasbutton-added-to-flexlib/ [...]
June 2nd, 2011 at 4:17 pm
[...] http://dougmccune.com/blog/2007/06/01/new-component-canvasbutton-added-to-flexlib/ [...]