 |
+ CSS + |  |
= |  |
The EnhancedButton
This enhanced Button for Flex is a new component that extends the Button class and provides you more styles, properties and methods to customize the icon you embed in each button of your application.
This is actually allowed by a "simple" thing: icons are "just" children of the button and they can be accessed by the getChild methods.
Goal
The goal behind this enhanced button is to minimize the activity of designing external objects as button skins with icons or just icons to be shown at different states (up, over, down…).
An advantage of this is that if you embed less external files to skin your buttons and/or their icons, the size of the applicaton should be slightly reduced.
What can be done with the EnhancedButton ?
You can :
- Move the icon horizontally and vertically,
- Change its alpha,
- Apply filters for each icon state (up, down, over, selectedUp, selectedDown, selectedOver, disabled)
Position are applied for all icon states. Only filters can be different, allowing you to add a DropShadow when the mouse is over and a BlurFilter on click for example. Multiple filters are of course possible as filter styles are Arrays.
The disabled and selectedDisabled icons are customized using the same property / style. The EnhancedButton applies by default a special ColorMatrixFilter on the icon that turns gray when the button is disabled (taken from another ticket).
The EnhancedButton, like its super Class, can be:
- totally styled using CSS
- skinned with jpg, png files and programmatic skins like Degrafa skins (shown in the demo).
What can’t be done with the EnhancedButton ?
Coffee for example.
On this first version, the width and the height of this icon can be set. You will then have to set them "by design".
As said above, the position properties (x and y) are defined for all icon states, it is not possible to set them for each individual states of the icon.
Rotation is not supported for this version as it seems there is a bug in the Flex framework with rotations. I tried to implement rotationX,Y and Z available in the last Flex SDK with no success and I am really sorry for that.
Demo
I provide an EnhancedButton Demo application with which you can test all new properties of the component. For filters, the demo application just provides basic non-customizable filters but you can apply all BitmapFilters on your icons.
Credit:
Application skin : Brownie by Nahuel Foronda. Available from ScaleNine gallery.
Icons : Function and BlogPerfume.com
Tips
1. To apply an icon filter using MXML, place the Array between brackets:
upIconFilters="{[myGlowFilter, myDropShadow]}"
2. The icon may move with the length of the label and the icon seems to be not at the same place for each button. To avoid this, change the labelPlacement, reduce paddings and move the icon at the right positions x and y. Or use the absolute coordinates. The icon will then be fixed, independant of the length of the label.
Downloads
Licence:
This component is free for use, modification and distribution under the following condition: Just mention the name and the url of the author in a part of your product that is visible to the user (about section, documentation…)
Downloads
Version 1.0
First release
Rotations are not supported
Download the package - including the Brownie skin, the EnhancedButton component and examples (in the code itself):
Downloaded a total of 1153 times
Or get sources from its bitbucket.org repository.
You will also need the DEGRAFA library to run it.
Next Steps
Enhancement of the label ? a EnhancedButtonBar ? New properties ?
Lots of ideas actually, not enough time of course. In a short term, I think I am going to continue my work on SVG files and Flex but don’t hesitate to report me bugs or suggestion on this component. It will be my pleasure to help you and improve it.
Have fun.
Related posts
Written by Arnaud
Tags: AIR, Button, Component, Flex
(5 votes, average: 4.6 out of 5)
Loading ...Comments are closed.
