OpenFlux向 Flex开发者提供了一个基于MVC（Model-View-Controller）架构的开源组件框架。该库拥有一套组件，目前包括Buttons、 Lists及ScrollBars。OpenFlux的目标在于简化Flex应用中组件的定制，进而无需担心会影响组件的其他部分。
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.
<flux:Button label="Button Example" left="20" top="20" />
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.
<flux:Button label="Button Example" left="20" top="20">
<flux:ButtonController selectable="true" />
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.
<mx:Style source="css/button_example_3.css" />
<flux:Button label="Button Example" left="20" top="20" styleName="checkbox" />
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!