Home >
As a Flex developer, one of the most valuable skills you can learn is custom component development. Although a lot of the training and information that's available for Flex focuses on how to use existing components, the truth is that memorizing every property of every Flex component isn't all that important. Eventually you're going to need custom graphics or functionality that no one ever anticipated, and this is where OpenFlux is going to make your day.
OpenFlux is an open-source component framework for Flex which makes custom component development fast and easy. To get started you'll need to download the SWC files provided on the project homepage http://openflux.googlecode.com or grab the source code from our public SVN. Then, copy the compiled SWC files into the libs folder of your Flex project.
Once your project references the OpenFlux SWC, simply declare the namespace "http://openflux.googlecode.com" in your application or component to use the framework.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flux="http://openflux.googlecode.com" layout="absolute">
<flux:Button label="Button Example" left="20" top="20" />
</mx:Application>
As you can see, OpenFlux components work a lot like the normal Flex components that you're used to using. You can define properties inline, bind values, and listen to events dispatched by the component. However there is one fundamental difference in the way that OpenFlux components work. In the OpenFlux framework each component has reassignable view and controller properties, and the objects assigned to these properties are responsible for the component's display and behavior respectively.
In the example below I've assigned a custom view to the Button component so that it looks like a checkbox. I'm also defining the controller inline so that I can set it's selectable property to true.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flux="http://openflux.googlecode.com" layout="absolute">
<flux:Button label="Button Example" left="20" top="20">
<flux:view>
<flux:CheckBoxView />
</flux:view>
<flux:controller>
<flux:ButtonController selectable="true" />
</flux:controller>
</flux:Button>
</mx:Application>
It's possible to use any custom view or controller with a component and even bind to the properties or styles which may be specific to the view or controller class. That's an important capability, but in some cases you may want a simpler way to assign these values.
In the next example, I've used CSS to define a set of values for components with a styleName of checkbox. By using CSS I can easily seperate all of the visual and behavioral settings from the application wiring and API. It also let's me reuse common settings across multiple components.
.checkbox {
selectable: true;
view: ClassReference("com.openflux.views.CheckBoxView");
}
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flux="http://openflux.googlecode.com" layout="absolute">
<mx:Style source="css/button_example_3.css" />
<flux:Button label="Button Example" left="20" top="20" styleName="checkbox" />
</mx:Application>
I hope that the examples in this post help demonstrate the benefits of working with OpenFlux and give you a solid starting point for using the framework in your own projects. In a future post I'll show you how to use Degrafa with OpenFlux to create custom component views. Until then, please download OpenFlux, join the mailing list, and let us know what you think!
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Any chance you could link the swfs generated by your example code?
this looks really cool. nice to have an easy frameworks to start building Flex components going. keep us posted on cool new UI components built on top of this framework.
The idea has been around for a while and I'm glad to see a framework that will make this kind of micro mvc's even more popular.
I have two questions though...
1. Which is the most basic component in OpenFlux. Is there an analog with the 'bare bone' UIComponent, just like the sample with the Button - can I start with a component that's really basic and not a button or other component from the Flex set of UI controls?
2. Is the framework supporting not just view and controller, but also a model which these two can use? Something like:
So you can store data and state information inside.
Very nice and brief article!
Vladimir, You're absolutely right, and those are some great questions. Here are a few quick answers for you.
1. Yes, the FluxComponent is the most basic component in OpenFlux and is analogous to Flex's UIComponent. You could also implement IFluxComponent if you're feeling especially adventurous.
2. No, the framework uses the component itself as the model. Because the view and controller functionality have been abstracted out (along with all their related properties and styles), the only API of the component besides the boiler-plate MVC coordination should constitute that components model. We've definitely considered a structure like you've suggested, but found that it over-complicates usage of the components in MXML applications.
How to configure openflux with flashdevelop
True.. a separate model messes up with the ability to set properties in MXML.
But... one reasonable use case for having a separate model is to
connect it to more than one view/controller at the same time. Which is quite a powerful use case.
Conceptually it shouldn't be hard to tweak OpenFlux to allow this... off the top of my head:
The complete bundle... MVC
Additional V and C, hooked to the previous M
Or something like that.
Great article ;)
Best,
A
Hi,
I am Neeraj ,recently join this group..
it's rally cool to see this type of framework .
this is really helpful for developer and time saving..
Thanks
Neeraj