New to flexlib: CSSPropertyInjector

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.

7 thoughts on “New to flexlib: CSSPropertyInjector”

  1. Gilles Guillemin

    Hi Adam, excellent and definitely useful one (and I'm quite sure I will use it).
    There's one thing that seems missing though (or maybe it's there and I just don't see it): if you push the idea to its limits, one should be able to set the various stylenames inside the CSS itself, so you can easily change the various targets' styles by editing the CSS only.

    Something like affection stylename="cssPropertyInjectorStyle" to the CSSPropertyInjector and then:
    styleNames: "blueBorder,solidBorder,whiteBackground,padding20px,centered,ceneterdContent"; inside the CSS.

    See what I mean?

  3. Gilles Guillemin

    Exactly. Say, in your first example, you want to change the outterbox from blueBorder to redBorder you would just have to change it in the css and not as a property of the CSSPropertyInjector.

  5. Adam Flater

    @Gilles

    I'd have to explore this one a little bit. It sounds like a good idea, but at the same time sort of turns it back into the current Flex implementation of CSS. The power is being able to mix and match different selectors. I suppose CSS in HTML has the feature you're talking about so it's probably valuable for some cases.

  6. Adam Flater

    Now that I think about it.. you can do this now:

    <mx:Style>
    .style1
    {
    color : #ff0000;
    }
    .style2
    {
    border-color : #00ff00;
    }
    .style3
    {
    fill-colors : #000000, 000000;
    }
    .buttonStyles
    {
    styleNames : style1, style2, style3;
    }
    </mx:Style>

    <flexlib:CSSPropertyInjector
    target="{ buttonInjector }"
    styleName="buttonStyles" />
    <flexlib:CSSPropertyInjector
    id="buttonInjector"
    target="{ button }" />

    <mx:Button id="button" label="Test" />

Comments are closed.