ColdFusion Muse

Flex Styles in CFMX Flash Forms

Mark Kruger May 20, 2005 9:04 AM CFMX 7 Flash Forms Comments (1)

Figuring out the nuances of formatting and positioning flash forms in CFMX is a challenge - especially when you first start out. I found this link to the flex style explorer yesterday on an MM blog by John Dowell. We are not involved in a flex project at the moment - although I have installed and played with te flex server and IDE a little bit. Even so I found this to ap to be very useful. You might know that the flash forms that are a part of CFMX 7 are created by a restricted version of the flex server. Many of the styles listed and explored by the explorer ap are available within the flash forms of a cfmx server. In fact, you can copy styles out of the flex style explorer directly into the styles attribute of a cf form item and it will work (if it's one of the valid flash form style attributes).

Take the tab navigator for example. The following code sets margins and alignment for the tabs

<cfset style="horizontal-align: center; horizontal-gap: -3; margin-left: 28; margin-right: 28;">
<cfformgroup type="tabnavigator" height="220" style="#style#">

Notice a couple of things. First, if you have spent any time navigating the "Coldfusion MX Flash Form Style Reference" that is a part of the help section, you will immediately say "Hey! Those styles aren't formatted like the styles in the help!!" That's right. These styles are more or less "CSS like". Whereas the styles in the help are more "Flash-like". Take a look. The help section states that you should use horizontalAlign as the style for aligning the tabs of a tabnavigator. The flex style explorer produces the style as horizontal-align. Which one is right? Both!! It turns out that both approaches work exactly the same. You can even mix and match them if you wish with no effect.

   // this works even though it's "CSSish"    style   =   "horizontal-align: center; horizontal-gap: -3; margin-left: 28; margin-right: 28;";
   //this works and mimics what's in the help file.    style   =   "horizontalAlign: center; horizontalGap: -3; marginLeft: 28; marginRight: 28;";
   //Even this "mix and match" approach works fine    style   =   "horizontal-align: center; horizontalGap: -3; margin-left: 28; marginRight: 28;";

So as we program using flash forms we are going to try keeping the flex style explorer handy. It's a useful tool for building the base style code we need to create a particular effect or alignment.

  • Share: