It's always a joy when you need something and after writing a few lines of code, you have it. Such is the beauty of nice extendable components and the Flex architecture.
Today I needed a panel which had a button in the top right corner of the header. Where the 'status' text is normally is. I wanted to put a 'save' button there. One problem, the mx.containers.Panel component does not have a button in the header.
Solution. Make a new component which extends all the functions of the Panel and stick a button in the top corner where I want.
Click here to see a demo
Click here to view the source
My new ButtonPanel component extends Panel and adds 2 new properties and 1 event.
Properties
buttonLabel : String - Defines the label for the button in the top corner
buttonPadding : Number - Defines how much padding to provide in the header
Event
buttonClick : Event - Dispatched when the button is clicked
Hello. I have a new blog.
I've moved this blog to the following URL Kerkness.ca. Thank you for visiting, please update your bookmarks.
Wednesday, October 1, 2008
Flex Component : ButtonPanel puts a button in your panel header
Subscribe to:
Post Comments (Atom)
This was an extremely useful post, however, when you tab to the button you create on the panel, the highlight box appears within the panel and not over the actual button. Do you know of any way to fix this issue?
ReplyDeleteHi jsa166
ReplyDeleteThank you for the comment. I don't really have a fix for that problem. Recently I found this component and it works way better than my own. Although I don't have a link to any tutorial or documentation atm.
http://jwopitz.pastebin.ca/raw/423850
Check out the author's google code page for more info
http://code.google.com/p/jwopitz-lib/