Adam Flater » CSS http://www.adamflater.net Tech, UX, Design Fri, 13 Dec 2013 05:00:11 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 New to flexlib: CSSPropertyInjector http://www.adamflater.net/2009/09/14/new-to-flexlib-csspropertyinjector/ http://www.adamflater.net/2009/09/14/new-to-flexlib-csspropertyinjector/#comments Mon, 14 Sep 2009 00:20:00 +0000 adamflater http://www.adamflater.net/?p=75 As my first contribution to flexlib I’ve been developing a utility class called “CSSPropertyInjector“. The CSSPropertyInjector class is used to apply styles from CSS to an Object that has properties that are not stylable or on Objects that are generally not stylable. Another nice feature of CSSPropertyInjector is the ability to specify multiple styleNames. This util will also allow multiple style selectors. The basic idea is that you bind a target object to the injector and set a styleName value. Given those two properties are set, the injector will automatically set styles or properties on the target object. Granted, it is possible to do a lot of stuff with this util that are questionable in terms of best practices, but it does give the option to apply styles to objects that never had the option in the past. So, without delay, on to examples.

Flex 3 with multiple selectors:

This example shows how powerful CSS can be with the ability to apply multiple selectors to each component. Each style is used generically and applied to a component regardless of the component’s type. So, we’re able to share a “redBorder” selector between button1, innerBox, and button2 without adding unique styles about the button’s text colors, padding, etc to the “redBorder” selector.

Degrafa skin with styled elements:

This example shows a simple Degrafa circle with it’s style properties (color, angle, alpha) abstracted into CSS. From a skinning perspective the lack of styles in Degrafa has always been just a little annoying for me. On large, enterprise applications it is essential to create conventional approaches to tasks performed throughout the app. Skinning is one of these tasks. Without the support of CSS, styling a Degrafa skin is much different than styling a halo skin, but now with the CSSPropertyInjector util a similar styling approach can be taken with both skins types.

Flex Chart with styled elements:

Another painful set of elements to style is the Flex Charting Framework. In this example you’ll see that the color and weight of stroke of the LineSeries is styled using CSS.

Flex 4 FXG with styled elements:

FXG is similar to Degrafa and easily styled using CSSPropertyInjector.

So, this is a start for CSSPropertyInjector. It’s checked into flexlib and ready for you to play with. I look forward to your feedback on making this a complete addition to flexlib. Please feel free to leave a comment on this post, e-mail me directly, or comment in the flexlib Google Code project.

]]> http://www.adamflater.net/2009/09/14/new-to-flexlib-csspropertyinjector/feed/ 7