Flex Styling without the Flex (example and source)

Question: What’s 2.8KB, can style any DisplayObject on the stage, and enjoys long walks on the beach?

Answer: Flex styling pwned!

So it’s leaked out on twitter that Ben Stucki, Ryan Campbell, Tyler Wright, and myself are working together on a new RIA component initiative. Taking a different approach than Open Flux, we are starting from scratch and building up fresh. We’re bringing together what we’ve learned from Open Flux and Stealth with the goal to release finished features and stable builds. We hope to provide something that we all can use in production. We haven’t announced the name yet, officially.

Ryan posted about using MXML without Flex last week. Though it isn’t for the new framework, the principle can be used for that framework. Maybe someday styling could be too. Today, I’m posting about using Flex styling without the Flex framework. I’ve taken the same example that Ryan posted and embellished. The components in there are Explanation of what is styled after the example.

Here’s the new MinimalComps.mxml source:

And the styles.css source:

The example looks very similar to Ryan’s, but notice differences including:

  • the PushButton label is set from the stylesheet
  • x, y, and spacing are no longer in the MXML on the VBox, they are only in the stylesheet
  • Descendent selectors work
  • #id can match the name property of DisplayObject
  • There is no styling code built into the components. This styling is not intrusive and can work with any display objects.
  • If you were to extend the IStylable interface provided, then you could also match against .stylenames and :pseudo selectors for state.

Pros and Cons

In order to accomplish this, I had to provide the mx.style.* classes that a stylesheet expects to be there when it is loaded. That means you cannot use this approach along with Flex, only in place of Flex. We could get it to work in a sub-applicationDomain, but that is more work and this is only a proof-of-concept.

This may actually be considered more of a IoC framework than styling. We do not have getStyle/setStyle on the components and anything (any public property that is) can be set from the stylesheet, not just stylable properties. That may be considered a con to styling purists, or a pro to those who have wanted to set whatever they want.

View or Download the source code.

Update: Oh, I forgot a couple pros and cons.
Pro: Using Flex styling for non-flex projects allows you to embed assets and class references into the stylesheet. Something you can’t do with traditional text-only styling. It allows a stylesheet full of skin classes to be overridden with another stylesheet full of skin classes for theming.
Con: It only supports CSS up to what Flex 4 does. That means only descendent selectors, no child selectors, sibling selectors, attribute selectors, etc. because MXMLC just ignores those rules it doesn’t understand.

4 Responses to “Flex Styling without the Flex (example and source)”

  1. xero / fontvir.us Says:

    very interesting. thanx for sharing!

  2. mico Says:

    great, but what will be the difference between reflex and openflux ? mvc approach is still in action?

    watching your project on github to see some changes ;)

  3. Jacob Wright Says:

    The major goal of OpenFlux was to provide an easier model within Flex to create components.

    While we still want to be able to have our components work with Flex, the main goal of reflex is to provide a complete alternative to Flex. Other goals include smaller, more lightweight, and pay-as-you-go, meaning if you don’t use a feature, you shouldn’t have to include the code for it.

  4. Arturo Alcalde Says:

    Very interesting project. I came to your site by surfing on the web. I can’t find any tutorials about objects in flex. (my mayor issue is to fill an object that have an array of objects from a custom class.)

    Well i have defined my classes and get to work with my own objects from .net to flex.
    But i want to go viceversa. I am rehusing and making my own components for combos and grids that are filled once from sql.

    Here is my class example.

    public class ClassEmpleados
    public var ClassName:String;
    public var TeacherName:String;
    public var TeacherID:int;
    private var _empleados:ArrayCollection;

    public function ClassEmpleados()