FFC : LinkButton - Tidying Up

This is my third post looking at creating a LinkButton Fireworks Flex Component (FFC). In the first post we looked at using a state property to manage the appearance for different states of the FFC within Fireworks. This state property created a problem with the exported MXML by introducing an invalid property so in the second post we talked about using flexClassDefinition to get more control over the exported MXML. In this post we'll look at some of the small details that we missed in those posts.

Firstly, let's look at adding a property to manage if the LinkButton is enabled. This property is included in the default FFC's and I'm aiming to maintain consistency with those as much as possible. We actually need two properties; enabled (a Boolean) and disabledColor (a Color). The disabledColor effects the text color when the LinkButton is disabled. All that's required to make this work is the addition of an additional if statement within applyCurrentValues :

if(enabled)
{
switch (state)
{
//states managed here
}
}
else
{
label_obj.pathAttributes.fillColor = values[13].value;
bg_obj.visible = false;
}

The second missing detail relates to a group of three properties that are relatively easy to implement ; fontWeight, fontStyle, textDecoration. Each of these properties have two potential states (which vary for each). So the best way to handle this in the properties is with a ComboBox :

values.push({ name:"fontWeight", type:"ComboBox", value:"bold,normal,bold" });
values.push({ name:"fontStyle", type:"ComboBox", value:"normal,normal,italic" });
values.push({ name:"textDecoration",type:"ComboBox", value:"normal,normal,underline" });

This creates a slight complication in applyCurrentValues because in Fireworks each of these settings is actually a Boolean so we need to do a simple if else statement for each property :

if(values[9].value.split(",")[0] == "bold")
{
label_obj.bold = true;
}
else
{
label_obj.bold = false;
}

if(values[10].value.split(",")[0] == "italic")
{
label_obj.italic = true;
}
else
{
label_obj.italic = false;
}

if(values[11].value.split(",")[0] == "underline")
{
label_obj.underline = true;
}
else
{
label_obj.underline = false;
}

Adding these also creates a problem in the export. Because it outputs all the options to the MXML rather than just the selected one. I could make them all Text but then you'd need to know the correct value to type in. Which could lead to all sorts of problems. As is all you need to do is to remove the unwanted options from the MXML. I'm keen to fix this but I haven't found an answer as yet. With some luck a kind reader will emerge with the solution.

There are four other styles that could be added to our LinkButton FFC ; cornerRadius, paddingLeft, paddingRight, letterSpacing. They could be easily added to the properties list. But I've yet to find a way to update the FFC to display these styles. Everything else we've added is able to be visualised and I don't see any value in having the styles included if they can't be displayed. The whole point is to be able to create a document that can be used to create a design and to output a working Flex file. So for now I've left these styles out until I can find a way to get them working.

If you want to use my LinkButton FFC or use the files as the basis for your own FFC's or you want to experiment with the missing details you can get the files here.