注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

神魔破杜梓的叨叨堂

Programming every day!

 
 
 

日志

 
 
 
 

OpenFlux简介  

2008-07-02 12:36:07|  分类: My Tech |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

OpenFlux向 Flex开发者提供了一个基于MVC(Model-View-Controller)架构的开源组件框架。该库拥有一套组件,目前包括Buttons、 Lists及ScrollBars。OpenFlux的目标在于简化Flex应用中组件的定制,进而无需担心会影响组件的其他部分。

——InfoQ,《针对Flex的OpenFlux组件框架》


原文来自InsideRIA

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>
ButtonExample1: example | source

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>
ButtonExample2: example | source

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>
ButtonExample3: example | source

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!

  评论这张
 
阅读(413)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017