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!