Flight Stealth, a Flex Component Alternative

The first question you probably have after seeing the title of this post is “why would you make an alternative to Flex?” Or perhaps, “how could you even think of competing with Flex?” Honestly, we aren’t trying to compete. This will be open source. And alternatives are always nice to have. We could talk about how difficult it can be to extend the Flex components, how limited the styling is, or how Flex makes complicated things easy and easy things complicated, but the fact of the matter is we just thought building an alternative would be fun.

Now, that being said, I think we’re going to have a KILLER alternative to Flex. We (Tyler Wright, my twin, and I) have been wanting to do something like this for awhile. After hearing Ely Greenfield’s Flex roadmap presentation at MAX we got all excited about it again. Much of what was presented there are things we’ve had in mind and wanting to build. I’ve been working on a proof-of-concept over the last few weeks, although we’ve worked on it off and on for a couple of years, and we are definitely headed in the right direction. I’ll list here a bunch of the stuff we’ve got worked out so far.

Features

Model View Controller Architecture

Flight’s components, code-named Stealth (because code names are cool!), are fully MVC show-off worthy. Each component (model) has a skin (view) and behaviors (controller) which are set at run-time. A component will have one skin, but could have many behaviors. User-input listeners only appear in the behaviors, databinding is used in the skin, and the component doesn’t have to worry about anything but it’s own logic. There is also a concept of “content” we are borrowing from (dun dun daaaaaa) Microsoft’s Blend. Content is data assigned to a component that can be displayed or used by the skin and covers anything from a Button’s label to a List’s dataProvider.

Stealth Pieces

Layout

Instead of having special components called containers that deal with laying out their children, every component has layout. That means you have a nice way to tell the icon in your button to be on the right or the left of your label. You can have somethings laid out horizontally in a panel and some things absolute positioned. Layout doesn’t just work horizontally, vertically, or absolute though. It uses concepts such as anchor, dock, and tile. These will be explained in detail at a later date. AND last but not least to me, when something turns visible=false it is removed from the layout. I’ve always used visible and includeInLayout together with Flex and it’s always bugged me that turning it invisible didn’t automatically remove it from the layout. Yay!!

State

Components always have state. You could consider all the data in a component its current state, however, lots of state is dependent on the behavior of a component. If a component behaves like a Button, for example, you’ll have mouseUp, mouseOver, and mouseDown states. If it is a toggle button you’ll also have selected state. And if it’s an application area you might give it state’s such as screen = “login”. So Stealth provides a state object that you can set mouse state, selected state, and any other state you might desire on it. This allows behaviors to add new types of state at run time.

Style

Stealth has full CSS selector support. This means you can parse a stylesheet at runtime and have “Application #loginScreen Form .inputs” styled just the way you need it. The styles also have state support using pseudo selectors. This would allow your application to show and hide different screens depending on their state like this “Application:login #loginScreen {visible: true;}”. Skins and behaviors are assigned via stylesheets at runtime as well: “Button { skin: ButtonSkin; behaviors: ButtonBehavior ToggleBehavior; }”.

Styles pull it all together like this:

How Stealth Pieces Fit

MXML Skinning

And finally, we’ve worked it out such that even though Stealth is not Flex, you can still use Flex Builder and MXML to create and define your skins and application. This was the “make it or break it” part of the deal for Stealth. Once we knew we could still use markup to define the layout and that we still had all the autocomplete and refactoring that Flex Builder provides, we were sold.

Right now Tyler, myself and hopefully soon Rob Taylor from flashextensions.com are working on it (I hope you don’t mind the mention Rob), but we hope to get the code public soon so that others can help and everyone can check in on the progress.

I really want to get a demo up that showcases the styling. That may or may not happen soon as I’m working on a project that may continue until April 15 (to pay off the government for all my contracting last year). :D I’ll stop procrastinating tomorrow.

8 Responses to “Flight Stealth, a Flex Component Alternative”

  1. jylaxx Says:

    I completely disagree with you about the fusion of visible and includeInLayout properties. I have exemples where I need to preserve appearance of the layout and just want to hide an object and leave other objects at the same place.
    If setting visible to false exclude the object from the layout then child objects of the same container should move… what I don’t want !!!!

  2. Jacob Wright Says:

    That may be true. We’ll have to see how it works out because the layout is quite different (and I think better) with this component set. It is easy enough to change that.

  3. Thijs Triemstra Says:

    Hi Jacob, any ideas when you’re going to release the code? And what license are you going to use? The project sounds really promising and it’s about time someone started with a good Flex alternative :) Let me know if you need beta testers!

  4. Jacob Wright Says:

    This month is a busy one, but after that I hope to be working on it more heavily. It will be open source, probably MIT license, and we could put the code up now though it won’t be useful to anyone in its current state. I’ll talk to Tyler and Rob about it and see if we can’t get this public soon.

  5. Dirk Stevens Says:

    Interesting Jacob, looking forward to seeing some ideas of yours in reality…

  6. Stealth Component Framework Demo Says:

    […] in February I posted some ideas Tyler and I worked on for a component framework we’re calling Stealth. We were inspired after […]

  7. CJ Cenizal Says:

    Btw, “behavior” is misspelled in all of your diagrams!

    But your ideas sound great.

  8. Jacob Wright Says:

    Copy-paste is a great time-saver. But a beast when you’ve misspelled a word and don’t catch it. :D