This started off last night as an extension of the ToggleButtonBar so that I could easily skin it with solid background colors for the button states as I was tired of creating custom skins for this. By the time I finished I ended up hacking some multiline and button separator features into it too.
- The separators width, height and color can be set via ToggleButtonBar mxml attributes.
- Multiline can be set via the “multiline” mxml attribute (true/false). If you set this to true, you may want to remove the height to allow it to autosize and prevent clipping.
- This was really designed for solid colored states (up, over, down, selectedUp, selectedOver, selectedDown, disabled) but I’m sure it can be used for custom skins just as easy. Take a look at the example source to see the actual attribute names for setting these.
Note: I haven’t tested this yet but the separators may not remove themselves if you dynamically remove buttons. I think it was the removeChild function in one of the Super classes that was set to private so I left it as is for now (it’s working for the project I need it for at the moment). If anyone improves on this (trust me there’s plenty of room), please shoot it back my way and I’ll update the example. …Thanks, -Rob
Nice component !!
Is there a way to use it with corneradius on the first and the last button like we can do with the css Style
Hi gils, I just updated the example and source so that the properties “cornerRadiusLeft” and “cornerRadiusRight” were added for the first and last button respectively.
Hope that helps.
Thanks a lot Rob !
Juste a small error in the syntax of the source code of ToogleButtonBar.as
[Style("selectionColor", type="uint", format="Color", inherit="yes")]
name is missing :
[Style(name="selectionColor", type="uint", format="Color", inherit="yes")]
Bizarre… for some reason the source view Flash Builder creates left out the “name=” on the styles. Thanks for noting this gils. The actual source is ok though.
Anyone who uses this should download the source rather than copying and pasting straight from source view web page.
Great component!!
how to enable particular button & set disable style of button in this component?
@Steve, good question. I’m not sure exactly.
I just reviewed this code again but my brain has been in Flex Spark mode for so long that I couldn’t see an obvious solution. If you figure it out, let me know and I’ll update this example.
You don’t have to know HTML, JavaScript, CSS or any other coding languages to make multi-state rollover web buttons, professional cross-browser, search engine friendly DHTML menus. All you have to do is make some clicks and adjust buttons as you wish for them to appear. Vista Web Buttons will generate all necessary images, html, javascripts, css styles automatically!