[教學] flex topological diagram 製作
#################################################### 作者 : FIEND
# 文章來源 : [url]http://bbs.ecstart.com[/url]
# 轉貼請注明出處
###################################################
使用 kap lab 套件 ( 非常強悍的 flex as3 物件庫 )
[url]http://lab.kapit.fr/display/kaplabhome/Home[/url]
[url]http://lab.kapit.fr/display/diagrammer/Diagrammer[/url]
[url]http://lab.kapit.fr/display/visualizer/Visualizer[/url] <<< 我們使用這個套件來做 topological diagram
[url]http://lab.kapit.fr/display/radarchart/Radar+Chart[/url]
[url]http://lab.kapit.fr/display/treemap/TreeMap[/url]
[url]http://lab.kapit.fr/display/ringchart/Ring+Chart[/url]
#####################################
這個物件庫 是 free 使用的 . 而且功能全部都是為 it 產業設計 .
可惜的是 它是加過密的 swc 檔 .
待回我們就會介紹 swc 檔如何 導入 project .
STEP1 . 解壓縮 附件 . Visualizer.1.2.1.zip
STEP2. 導入 Visualizer.swc 將 解壓縮後的檔內找到 swc 檔匯入 flex .
project => Properties => Flex Build Path => Library Path => Add Swc .
[attach]3268[/attach]
STEP3. 貼上這段程式碼 到 mxml 上 :[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:KapLab="com.kapit.visualizer.*">
<mx:Script>
<![CDATA[
import mx.controls.Image;
import com.kapit.visualizer.LayoutConstants;
]]>
</mx:Script>
<mx:XML xmlns="" id="myDataProvider">
<Organization name="Manager" experience="20">
<Organization name="Project Lead" experience="10">
<Organization name="Architect" experience="6"/>
<Organization name="Developer" experience="3"/>
<Organization name="Developer" experience="1"/>
<Organization name="Developer" experience="2"/>
</Organization>
<Organization name="Project Lead" experience="8">
<Organization name="Architect" experience="7"/>
<Organization name="Architect" experience="5"/>
<Organization name="Developer" experience="4"/>
<Organization name="Developer" experience="3"/>
<Organization name="Developer" experience="3"/>
<Organization name="Developer" experience="1"/>
</Organization>
<Organization name="Project Lead" experience="12">
<Organization name="Architect" experience="7"/>
<Organization name="Architect" experience="7"/>
<Organization name="Architect" experience="5"/>
<Organization name="Developer" experience="3"/>
<Organization name="Developer" experience="3"/>
<Organization name="Developer" experience="2"/>
<Organization name="Developer" experience="1"/>
</Organization>
</Organization>
</mx:XML>
<KapLab:Visualizer x="0" y="0" width="800" height="600"
backgroundColor="0xFFFFFF"
id="integrationDemo"
dataProvider="{ myDataProvider}"
labelFields="{['@name']}"
tooltipFields="{['@experience']}"
toolTipTitles="{['Experience']}"
layout="{LayoutConstants.BALLOON_LAYOUT}"
/>
</mx:Application>[/code]STEP4. Run ( OR CTRL + F11 )
[attach]3269[/attach]
頁:
[1]