Flex UI组件

因公司自己研发了一套工作流程引擎，并且开发了基于Eclipse的可视化流程定制的plugin，但是客户抱怨说需要能在web页面上定制流程。没办法，只好选择Flex来开发啦。于是想把Flex的学习心得记录下来。

在网上搜索到了许多优美的Flex component，跟大伙儿分享一下啦

第一个是Google的flexlib

google提供的flexlib，这真是一个好东西,现在最新的版本是2.4版

里面封装了许多超cool的Flex component，先共享几个给大家（新手）看看啦

Flexlib-fire 火焰效果，是不是有点像八神的苍炎呢？

<flexlib:Fire delay="{dStep.value}"
      detail="{detail.value}"
      colors="{[color1.selectedColor, color2.selectedColor]}"
      width="{wStep.value}" height="{hStep.value}"   
      xSpeed="{xStep.value}" ySpeed="{yStep.value}" 
      wFactor="{wFStep.value}" hFactor="{hFStep.value}" 
      />

[img]http://dl.iteye.com/upload/attachment/165277/0bb0d2ec-fb1b-3cdd-a644-5bf2ee1ff5cf.jpg[/img]


2.TreeGrid

<flexlib:TreeGrid 
    styleName="datagridStyle"
    headerStyleName="dataGridHeader"
    width="100%" height="100%" 
    dataProvider="{ dataProviderXMLList }"
    paddingLeft="25"
    verticalTrunks="none"
    disclosureClosedIcon="@Embed(source='../assets/tree_openNode.png')"
    disclosureOpenIcon="@Embed(source='../assets/tree_closeNode.png')">

    <flexlib:columns>
     <flexlib:TreeGridColumn dataField="@name" headerText="name" />
     <mx:DataGridColumn dataField="@desc" headerText="desc" />
    </flexlib:columns>
   </flexlib:TreeGrid>

[img]http://dl.iteye.com/upload/attachment/165279/89677477-2e40-3c70-8678-42d80b05525e.jpg[/img]

3.HAccordion

<flexlib:HAccordion id="accordion" width="100%" height="100%">
<mx:VBox label="Accordion Button for Panel 1" horizontalScrollPolicy="off">
<mx:Label text="Accordion container panel 1"/>
</mx:VBox>
<mx:VBox label="Accordion Button for Panel 2" horizontalScrollPolicy="off">
<mx:Label text="Accordion container panel 2"/>
</mx:VBox>
<mx:VBox label="Accordion Button for Panel 3" horizontalScrollPolicy="off">
<mx:Label text="Accordion container panel 3"/>
</mx:VBox>
</flexlib:HAccordion>
<flexlib:VAccordion id="accordion2" ">
<mx:VBox label="Accordion Button for Panel 1">
<mx:Label text="Accordion container panel 1"/>
</mx:VBox>
<mx:VBox label="Accordion Button for Panel 2">
<mx:Label text="Accordion container panel 2"/>
</mx:VBox>
<mx:VBox label="Accordion Button for Panel 3">
<mx:Label text="Accordion container panel 3"/>
</mx:VBox>
</flexlib:VAccordion>

[img]http://dl.iteye.com/upload/attachment/165281/685f677d-260c-306f-81ee-772197ca289a.jpg[/img]


Google flexlib
2.就皮肤来说，推荐一下Yahoo的skin

Yahoo Flex Skin

[img]http://dl.iteye.com/upload/attachment/165285/66fd239e-d52f-3b3f-bb24-033bdd618f28.jpg[/img]


3.特效

Macromedia提供的六款Flex特效

切换效果

仿Mac弹出窗口效果

仿Mac界面

鱼眼效果Fisheye（给一个鱼眼效果的Fisheye特效图片吧）

[img]http://dl.iteye.com/upload/attachment/165287/e379b0cd-b070-353e-b7b1-66d087647ba1.jpg[/img]


拓扑图显示SpringGraph（上传几个我自己项目中的截图吧）


MDIWindow,多窗口显示配合立方体旋转


好累，其他的暂时不写啦