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,多窗口顯示配合立方體旋轉


好累，其他的暫時不寫啦