[Flex]JQuery for Flex – Behavior Injection Framework

想必前端开发工程师都知道JQuery这个第三方的Java Script Library。

JQuery令人称道的一个功能就是:$选择器功能,而这个功能带给我们的便利条件就是:可以让Html程序员与JS程序员在代码上彻底分离开来。(虽然现在没有将他们分离开来的必要,但是在之前的一段时间里,的确是将HTML程序员与JS程序员分开对待的)
 
目前我所在的公司所负责的一个比较大型的Flex项目,由于人手不够,因此打算加入一些专门做UI设计的Flex成员,而加入这个需求的最大问题就是使用何种方式可以将Flex中的UI与逻辑部分彻底分离开,让只负责公司业务逻辑的人在现成的UI中增加逻辑,而现成的UI是由其他程序员所负责的。如果不单纯的将UI与Logic分开的弊端就是一旦Flex的代码发生了问题,那么负责UI和Logic的人将都会被牵扯进去。
因此有些时候的确是对于如何将UI与逻辑彻底分离这个话题而头痛不已,但是seanhess为我们带来一个令人兴奋的功能,即在Flex里面也可以使用JQuery一样的$选择器功能。
 
下面的代码是Kenshin截取的片段代码。
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns="http://bifff.seanhess.net/2009" viewSourceURL="srcview/index.html">
    
  <BehaviorMap>
    
    <!-- Select by id -->
    <Selector match="#thirdButton">
      <Set color="#FF0000"/>
    </Selector>
    
    <!-- Descendants -->
    <Selector match="#nestedCanvas Button">
      <Set color="#0000FF"/>
    </Selector>
    
    <!-- Direct Child -->
    <Selector match="#rowBox > mx.core.Container">
      <Set width="300" height="50"/>
    </Selector>
    
    <!-- Even and Odd -->
    <Selector match="#rowBox > Canvas:odd">
      <Set backgroundColor="#000000"/>
    </Selector>
    
    <Selector match="#rowBox > Canvas:even">
      <Set backgroundColor="#FFFFFF"/>
    </Selector>
    
  </BehaviorMap>
  
  <mx:Button label="First Button" styleName="fat short" id="firstButton"/>
  <mx:Button label="Second Button" styleName="skinny tall"/>
  <mx:Button label="Third Button" id="thirdButton"/>
  
  <mx:VBox id="rowBox">
    <mx:Canvas></mx:Canvas>
    <mx:Canvas></mx:Canvas>
    <mx:Canvas></mx:Canvas>
    <mx:Canvas></mx:Canvas>
  </mx:VBox>
  
  <mx:VBox id="nestedCanvas">
    <mx:Button label="hi"/>
    <mx:HBox>
      <mx:Button label="hi"/>
      <mx:Button label="hi"/>
      <mx:VBox>
        <mx:Button label="hi"/>
        <mx:Button label="hi"/>
      </mx:VBox>  
    </mx:HBox>
  </mx:VBox>
    
</mx:Application>

上面的代码是关于Flex选择器方面的代码。我就不再进行解释了,大家可以将上面这个url里面的例子下载到Flex Project里面运行一下就可以了。

下面的代码是关于使用监听Event等方式的代码:
地址:http://github.com/seanhess/bifff/blob/f8a9dee24129933001d0a1ba696d12f5cd630c83/examples/src/Behaviors.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns="http://bifff.seanhess.net/2009">
  
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
    ]]>
  </mx:Script>
  
  <mx:Style>
    .one {
      padding-left:300;  
    }
    
    .two {
      font-style:italic;
    }
    
    .three {
      color: #FFF000;
    }
    
    .four {
      font-weight:normal;
    }
  </mx:Style>
 
  <Listen target="{button}" event="click" call="Alert.show('woot: ' + button.styleName)"/>
  <Set target="{button}" width="400" fontSize="24" textDecoration="underline" height="400"/>
  <MultiStyle target="{button}"/>
  <Styles target="{button}" addClass="four" removeClass="two"/>
 
  <mx:Button id="button" label="Hello" styleName="one two three"/>
 
</mx:Application>

哦,忘记说了,这个项目被称为Bifff,下面是Bifff的一些信息,希望可以对你有用。

这是Bifff的主页
swc下载地址
网上讨论Bifff的论坛