Building The SpringGraph Flex Component
-
Upload
guo-albert -
Category
Technology
-
view
6.043 -
download
1
Transcript of Building The SpringGraph Flex Component
![Page 2: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/2.jpg)
2
Pre-requisites What is SpringGraph Flex Component? Where to download SpringGraph? How to configure SpringGraph? SpringGraph Verification Write a simple example Reference
Agenda
![Page 3: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/3.jpg)
3
Eclipse (Java EE)◦ http://www.eclipse.org/downloads/
Flex Builder 3.1 Plug-in for Eclipse◦ http://www.adobe.com/cfusion/entitlement/index.c
fm?e=flexbuilder3
SpringGraph◦ http://www.adobe.com/cfusion/exchange/index.cf
m?event=extensionDetail&extid=1048510
Pre-requisites
![Page 4: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/4.jpg)
4
SpringGraph is a Adobe Flex 2.0 component that displays a set of items that are linked to each other. The component calculates the layout for the items using an organic-looking annealing algorithm based on the size and links of each item, and draws lines to represent the links
What is SpringGraph Flex Component?
![Page 5: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/5.jpg)
5
Please go to here, http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1048510, to download
Where to download SpringGraph?
![Page 6: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/6.jpg)
6
How to configure SpringGraph?
![Page 7: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/7.jpg)
7
How to configure SpringGraph?
Unzip springgraph.zip
![Page 8: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/8.jpg)
8
How to configure SpringGraph? – cont.
Go to Flex Project's properties page in Eclipse
Click Flex Build Path
![Page 9: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/9.jpg)
9
How to configure SpringGraph? – cont.
Go to Library Path path and click Add SWC
![Page 10: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/10.jpg)
10
How to configure SpringGraph? – cont.
Click Browse button, and navigate to springgraph/SpringGraph_20061210/SpringGraph/bin, and find out the SpringGraph.swc file
Click OK Button
![Page 11: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/11.jpg)
11
How to configure SpringGraph? – cont.
Click OK Button
![Page 12: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/12.jpg)
12
SpringGraph Verification
![Page 13: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/13.jpg)
13
SpringGraph Verification
Create a MXML application
![Page 14: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/14.jpg)
14
SpringGraph Verification – cont.
Give it name, called SpringGraphTest
Click Finish
![Page 15: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/15.jpg)
15
SpringGraph Verification – cont.
Add this namespace in <mx:Application> tag
![Page 16: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/16.jpg)
16
SpringGraph Verification – cont.
If you can see SpringGraph tag in your editor, it means you had build SpringGraph into your Eclipse successfully.
![Page 17: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/17.jpg)
17
Write a simple example
![Page 18: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/18.jpg)
18
Write a simple example
Add this namespace in <mx:Application> tag
Call onLoad() function to load initial data
![Page 19: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/19.jpg)
19
Write a simple example – cont.
prepare initial data
set up link between two nodes
![Page 20: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/20.jpg)
20
Write a simple example – cont.
Configure SpringGraph-related parameters in <fc:SpringGraph> tag, and provide data into <mx:Label> tag
![Page 21: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/21.jpg)
21
Write a simple example – cont.
![Page 22: Building The SpringGraph Flex Component](https://reader034.fdocuments.us/reader034/viewer/2022052619/555a779bd8b42a98568b4806/html5/thumbnails/22.jpg)
22
SpringGraph Document◦ http://mark-shepherd.com/SpringGraph/docs/sprin
ggraph-asdoc/index.html
SpringGraph Flex Component◦ http://www.adobevideosuite.org/cfusion/exchange
/index.cfm?event=extensionDetail&loc=en_us&extid=1048510
Reference