2005 Experimenting With Flash Form Styles
The look of Flash Forms can be controlled using styles. To help fine tune style selections, I threw this quick and dirty form together. It allows you to set eight style settings, the results of which are immediately reflected in a sample button control. Note that I am using the setStyle() method to set styles programmatically at runtime, but styles are typically defined in the style attribute.
Here's the code (you can try the example here):
1<cfform format="flash"
2 height="400"
3 width="400">
4
5 <cfformitem type="text">
6 Specify colors as RGB values (eg. 0x000000 0x00FF00) or color literals (eg. red green yellow).
7 </cfformitem>
8 <cfinput type="text"
9 name="color"
10 label="Text Color"
11 width="100"
12 onchange="btn.setStyle('color', color.text)">
13 <cfinput type="text"
14 name="textRollOverColor"
15 label="Text Rollover Color"
16 width="100"
17 onchange="btn.setStyle('textRollOverColor', textRollOverColor.text)">
18 <cfinput type="text"
19 name="fillColor1"
20 label="Background Colors"
21 width="100"
22 onchange="btn.setStyle('fillColors', [fillColor1.text, fillColor2.text])">
23 <cfinput type="text"
24 name="fillColor2"
25 width="100"
26 onchange="btn.setStyle('fillColors', [fillColor1.text, fillColor2.text])">
27 <cfselect name="themeColor"
28 label="Theme Color"
29 width="100"
30 onchange="btn.setStyle('themeColor',
31 themeColor.selectedItem.data)">
32 <option value="haloGreen">Halo Green</option>
33 <option value="haloBlue">Halo Blue</option>
34 <option value="haloOrange">Halo Orange</option>
35 <option value="haloSilver">Halo Silver</option>
36 </cfselect>
37 <cfselect name="borderThickness"
38 label="Border Thickness"
39 width="100"
40 onchange="btn.setStyle('borderThickness',
41 borderThickness.selectedItem.data)">
42 <cfloop from="1" to="25" index="i">
43 <cfoutput><option value="#i#">#i#</option> </cfoutput>
44 </cfloop>
45 </cfselect>
46 <cfselect name="cornerRadius"
47 label="Corner Radius"
48 width="100"
49 onchange="btn.setStyle('cornerRadius',
50 cornerRadius.selectedItem.data)">
51 <cfloop from="1" to="50" index="i">
52 <cfoutput><option value="#i#">#i#</option> </cfoutput>
53 </cfloop>
54 </cfselect>
55 <cfinput type="text"
56 name="fontFamily"
57 label="Font"
58 width="100"
59 onchange="btn.setStyle('fontFamily', fontFamily.text)">
60 <cfselect name="fontSize"
61 label="Font Size"
62 width="100"
63 onchange="btn.setStyle('fontSize',
64 fontSize.selectedItem.data)">
65 <cfloop from="1" to="25" index="i">
66 <cfoutput><option value="#i#">#i#</option> </cfoutput>
67 </cfloop>
68 </cfselect>
69
70 <cfinput type="button"
71 height="100"
72 width="300"
73 name="btn"
74 value="Sample Button">
75
76</cfform>
2 height="400"
3 width="400">
4
5 <cfformitem type="text">
6 Specify colors as RGB values (eg. 0x000000 0x00FF00) or color literals (eg. red green yellow).
7 </cfformitem>
8 <cfinput type="text"
9 name="color"
10 label="Text Color"
11 width="100"
12 onchange="btn.setStyle('color', color.text)">
13 <cfinput type="text"
14 name="textRollOverColor"
15 label="Text Rollover Color"
16 width="100"
17 onchange="btn.setStyle('textRollOverColor', textRollOverColor.text)">
18 <cfinput type="text"
19 name="fillColor1"
20 label="Background Colors"
21 width="100"
22 onchange="btn.setStyle('fillColors', [fillColor1.text, fillColor2.text])">
23 <cfinput type="text"
24 name="fillColor2"
25 width="100"
26 onchange="btn.setStyle('fillColors', [fillColor1.text, fillColor2.text])">
27 <cfselect name="themeColor"
28 label="Theme Color"
29 width="100"
30 onchange="btn.setStyle('themeColor',
31 themeColor.selectedItem.data)">
32 <option value="haloGreen">Halo Green</option>
33 <option value="haloBlue">Halo Blue</option>
34 <option value="haloOrange">Halo Orange</option>
35 <option value="haloSilver">Halo Silver</option>
36 </cfselect>
37 <cfselect name="borderThickness"
38 label="Border Thickness"
39 width="100"
40 onchange="btn.setStyle('borderThickness',
41 borderThickness.selectedItem.data)">
42 <cfloop from="1" to="25" index="i">
43 <cfoutput><option value="#i#">#i#</option> </cfoutput>
44 </cfloop>
45 </cfselect>
46 <cfselect name="cornerRadius"
47 label="Corner Radius"
48 width="100"
49 onchange="btn.setStyle('cornerRadius',
50 cornerRadius.selectedItem.data)">
51 <cfloop from="1" to="50" index="i">
52 <cfoutput><option value="#i#">#i#</option> </cfoutput>
53 </cfloop>
54 </cfselect>
55 <cfinput type="text"
56 name="fontFamily"
57 label="Font"
58 width="100"
59 onchange="btn.setStyle('fontFamily', fontFamily.text)">
60 <cfselect name="fontSize"
61 label="Font Size"
62 width="100"
63 onchange="btn.setStyle('fontSize',
64 fontSize.selectedItem.data)">
65 <cfloop from="1" to="25" index="i">
66 <cfoutput><option value="#i#">#i#</option> </cfoutput>
67 </cfloop>
68 </cfselect>
69
70 <cfinput type="button"
71 height="100"
72 width="300"
73 name="btn"
74 value="Sample Button">
75
76</cfform>
have you seen this?
http://cfpim.coffeeflower.com/stylemanager/
between cfpim.blogspot.com and www.asfusion.com/blog/ these folks are creating up a storm of really useful cfform stuff.
I am experimenting a new version of it with a little colorPicker, it will move if you focus in a single color attribute, I am adapting to have it work with array of colors (fillColors, alternatingRowColors ...), adding the missing controls (hdividedbox..), when I have free time ;)
You can view it here: http://cfpim.coffeeflower.com/stylemanagernew/
Cheers
From here, you can also download the source code:
http://cfpim.blogspot.com/2005/04/flash-cfforms-st...
on this example i realized that some styles are not accesible thru style="" but they are thru setStyle() for a button. what setStyle options do i have for a cfgrid?