FFC : :LinkButton (flexClassDefinition)

In my last post we talked about creating a LinkButton Fireworks Flex Component (FFC). By the time we finished we had a component that could update and export the LinkButton's different states. We could also control the label, font and fontSize. As you may remember there was a problem in the exported MXML. There isn't a state property for LinkButton and consequently Flex Builder correctly flagged an error.

We can get more control over what is exported to MXML by using the flexClassDefinition. The flexClassDefinition is an object with some useful properties that can be added to customData. The basics looks like this:

var definitionObject = new Object();
Widget.elem.customData["flexClassDefinition"] = definitionObject;

You won't see this defined in the default FFC's (e.g Button) as this is handled by the exporter. But for our custom components this mechanism is needed. I'm not going to talk about all the available properties (because there is an article that does a much better job than I ever will) only those we need. Let's start by removing 'state' from the exported MXML. To do this we define the attributes we wanted exported:

definitionObject.defaultProperties = ["id","x", "y", "width", "height"];
definitionObject.attributeProperties = ["label", "enabled"]; 

The defaultProperties is an array of attributes that we haven't defined as properties and that we want to have included. The array can also include; alpha, source and styleName. By not including these within defaultProperties they won't be included in the export. If one of the included defaultProperties isn't required (for example if we don't change the FFC's opacity it's alpha attribute isn't required) it isn't exported.

The attributeProperties is an array of the properties that we've defined that we want included. By not including 'state' in this array then 'state' isn't included in the exported attributes. You'll notice I've kept this list short and consequently none of the style properties would be exported. The reason is that I actually want them defined as a style. In fact ideally I'd like to have one style defined for all LinkButtons if they look the same and to use custom styles if they are different. I want the same styling intelligence we get using Text to create Labels (see FFC : Label for more on this). We can get this exact behaviour by defining styleProperties :

definitionObject.styleProperties = ["color","textRollOverColor",
       "textSelectedColor","rollOverColor",
       "selectionColor","fontFamily",
       "fontSize","disabledColor"];

Defining styleProperties like this earns us the following style definition in the exported MXML :

<mx:Style>
 LinkButton {
  disabledColor:#AAB3B3;
  fontSize:11;
  fontFamily:Verdana;
  selectionColor:#7FCDFE;
  rollOverColor:#AADEFF;
  textSelectedColor:#2B333C;
  textRollOverColor:#2B333C;
  color:#0B333C;
 }
</mx:Style>

That brings us pretty close to a fully functional LinkButton FFC. There are still a few things that can be added and a few problems to be solved. But let's talk about them next time. Until then you might want to take a look at the source files.