jQuery for Flex - Behavior Injection framework

Update - Please visit http://bifff.seanhess.net for more information and to be directed to the google group

Update - These examples are out-of-date. Visit the url above for the latest examples and downloads.

I’ve just finished my pre-alpha version of a Behavior Injection framework for Flex. It adds support for functionality similar to jQuery for flex, along with support for a more complete CSS syntax. The approach is slightly different than jQuery, and hopes to play along with Flex’s strengths as well.

Downloads and Examples

• Selectors Example - old
• Behaviors Example - old
• Download SWC v0.1a - old
  
• GitHub Repository

Background…

I love jQuery. I love CSS. jQuery allows you to use css selectors to select objects on an html page, and dynamically change things, add behavior, and do whatever you want. I’m calling that “Behavior Injection.” It allows you to print out semantic html, and inject functionality from outside.

Flex is a totally different beast. It has very good support for making encapsulated components, so the need isn’t as great as for Javascript.  However, the ability to inject behavior can really help decouple your components from your application framework, and the css support is miserable.

The Approach

You define <Selectors> in a <BehaviorMap> that match certain views as they are created. When a match is found, it applies all of its behaviors to the matched view. Behaviors can be anything, all they have to do is implement IBehavior, which has one method, apply. The behavior then “applies” itself to the matched object.

Selector Syntax

Visit the links above for more complete examples, but here’s a taste of what the syntax looks like. You can select by Tag, by styleName (multiple classes are supported), by id, by superclass, by interface, etc. It also has support for wildcards “*” and direct children “>”.

• Full Example

-

Behavior Syntax

I won’t bother posting an example inline, the syntax is quite different for each behavior I’ve included in the core.

• Full Behaviors Example

Possible Uses

• Adding Full CSS Support to Flex (You can even set width/height)
• Tying encapsulated views into your application framework via events (Mate/Cairngorm)
• Adding Dependency Injection to a framework that doesn’t have it (Cairngorm!)
• Improving DI of other frameworks with CSS selectors
• Adding custom behaviors that do amazing things
• Skinning 3rd-party components that aren’t stylizable
• Blah, blah, I don’t know, let’s see if anyone else thinks it is useful

Limitations / Known Issues

I am using styleName to set class names, so you can say <mx:Button styleName=”big fat important”/> but if you create a .big style in a regular stylesheet, it won’t apply. I also ran out of time trying to figure out how to apply a CSSStyleDeclaration to a component by hand. The <Styles> behavior needs this to function propertly.

Note that the <Set> tag happens on creation complete, meaning it will override any local settings. This is very different from how css works.

The <Swap> and <Contents> tags are still in Flux. I had some weird ideas for <Swap> when I started out, and have since abandoned them. <Contents> needs a way to add copies of views before it will be really useful.

For custom behaviors - Right now a behavior is really a data object that knows how to apply itself to several different views. They should not store state, since the framework uses the same one for each one.

The Future

I’m mostly interested in peer review at this point. I’d like some feedback on the idea, the implementation, and the approach. After that, I suspect a beta release wouldn’t take too long.

It wouldn’t take long to write a parser for a real stylesheet. That would give us all the selectors this framework has + the ability to set properties instead of just styles.

Finally, well deserved thanks must be rendererd to the Mate crew for stolen code and ideas, and to the jQuery guys for their amazing framework.