Using global CSS in your cfform
The other day someone asked in the comments about a way to use CSS classes instead of adding inline styles in each control. One of the problems is that using inline code consume a lot of Kb and it's good to save size as much as possible because a form only allows the use of 32Kb (or 64Kb depending on who you ask :)). Right now, it is not possible to include an external CSS file with all our styles. I wish ( and it's on top of my list) that the next update will allow it :)
For now, and because we have the onLoad event in the CF Updater 7.01 we can set up some global styles when the form loads and save some Kb to spend in other places.
The other day someone asked in the comments about a way to use CSS classes instead of adding inline styles in each control. One of the problems is that using inline code consume a lot of Kb and it's good to save size as much as possible because a form only allows the use of 32Kb (or 64Kb depending on who you ask :)). Right now, it is not possible to include an external CSS file with all our styles. I wish ( and it's on top of my list) that the next update will allow it :)
For now, and because we have the onLoad event in the CF Updater 7.01 we can set up some global styles when the form loads and save some Kb to spend in other places.
The idea of this technique is to set the properties of the components that we want to change when the form loads one by one. Note that any inline style will overwrite the global style for that control. Also, for styles that are inheritable (themeColor for example), you can use the style property of the form tag. A list of controls with their properties can be found on the Flex docs. In this example I'm just showing a few of them.
The looks like this
cfform name="myform" height="400" width="280" format="Flash" onload="formOnLoad()">
function formOnLoad()
{
// Do anything that you need to do in the onload Event
// call the function that is in charge of applying the styles
applyStyles();
}
function applyStyles()
{
_global.styles.CheckBox.setStyle("fillColors", [0x006699, 0xffffff]);
_global.styles.RadioButton.setStyle("fillColors", [0x006699, 0xffffff]);
_global.styles.Form.setStyle("color", 0x000000);
_global.styles.Button.setStyle("borderThickness", 1);
_global.styles.Panel.setStyle("backgroundColor", 0xE5F0F9);
_global.styles.Panel.setStyle("color", 0xffffff);
_global.styles.Panel.setStyle("headerColors", [0x277DC6,0x50ABF7]);
_global.styles.HBox.setStyle("backgroundColor", 0x006699);
_global.styles.HBox.setStyle("marginTop", 10);
_global.styles.HBox.setStyle("marginBottom", 10);
_global.styles.HBox.setStyle("marginLeft", 10);
_global.styles.Accordion.setStyle("fillColors", [0x277DC6,0x50ABF7]);
_global.styles.Accordion.setStyle("selectedFillColors", [0xff6600,0xffcc00]);
_global.styles.Accordion.setStyle("themeColor", 0x0066cc);
_global.styles.Accordion.setStyle("color", 0x0ffffff);
_global.styles.TextArea.setStyle("fontSize",14);
_global.styles.TextInput.setStyle("fontSize",9);
}
Some large text
Check Box
Radio Buttons
Some other useful styles (replace the style, ie: "fillColors", with your own definition):
Tabs:
_global.styles.Tab.setStyle("fillColors", [0x277DC6,0x50ABF7]);
_global.styles.Tab.setStyle("selectedFillColors", [0xff6600,0xffcc00]);
Tab pages
_global.styles.VBox.setStyle("backgroundColor", 0x507A9C);
Dropdowns
_global.styles.ComboBox.setStyle("fillColors", [0x006699, 0xffffff]);
_global.styles.ComboBox.setStyle("backgroundColor", 0x006699);
Calendar (dateFields and cfcalendar)
_global.styles.CalendarLayout.setStyle("rollOverColor",0x996699);
_global.styles.CalendarLayout.setStyle("selectionColor",0xcc33ff);
_global.styles.CalendarLayout.setStyle("todayColor",0xcc33ff);
Validation tooltip colors
_global.styles.ErrorTip.setStyle( "borderColor", 0x339900);
_global.styles.ErrorTip.setStyle( "color", 0x000000);