公告
- 记不住我的BLOG，没有关系，在各大搜索引擎使用关键字kenshin或者flex blog来搜索即可找到我哦(*^__^*)
跟随我
订阅我
关注一下
订阅、收藏、分享
最新文章
最新评论
反向链接

[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截取的片段代码。

详细代码请看：http://github.com/seanhess/bifff/blob/f8a9dee24129933001d0a1ba696d12f5cd630c83/examples/src/Selectors.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns="http://bifff.seanhess.net/2009" viewSourceURL="srcview/index.html">

</Selector>

</Selector>

<Selector match="#rowBox > mx.core.Container">

</Selector>

<Selector match="#rowBox > Canvas:odd">

</Selector>

<Selector match="#rowBox > Canvas:even">

</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:VBox>

<mx:VBox id="nestedCanvas">

<mx:Button label="hi"/>

<mx:HBox>

<mx:Button label="hi"/>

<mx:VBox>

<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的主页