1. Building the SpringGraph Flex Component Albert Guo junyuo@gmail.com

2. Pre-requisites What is SpringGraph Flex Component? Where to download SpringGraph? How to configure SpringGraph? SpringGraph Verification Write a simple example Reference 2 Agenda

3. Eclipse (Java EE) http://www.eclipse.org/downloads/ Flex Builder 3.1 Plug-in for Eclipse http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3 SpringGraph http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1048510 3 Pre-requisites

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 4 What is SpringGraph Flex Component?

5. Please go to here, http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1048510, to download 5 Where to download SpringGraph?

6. How to configure SpringGraph? 6

7. 7 How to configure SpringGraph? Unzip springgraph.zip

8. 8 How to configure SpringGraph? – cont. Click Flex Build Path Go to Flex Project's properties page in Eclipse

9. 9 How to configure SpringGraph? – cont. Go to Library Path path and click Add SWC

10. 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

11. 11 How to configure SpringGraph? – cont. Click OK Button

12. SpringGraphVerification 12

13. 13 SpringGraph Verification Create a MXML application

14. 14 SpringGraph Verification – cont. Give it name, called SpringGraphTest Click Finish

15. 15 SpringGraph Verification – cont. Add this namespace in <mx:Application> tag

16. 16 SpringGraph Verification – cont. If you can see SpringGraph tag in your editor, it means you had build SpringGraph into your Eclipse successfully.

17. Write a simple example 17

18. 18 Write a simple example Add this namespace in <mx:Application> tag Call onLoad() function to load initial data

19. 19 Write a simple example – cont. prepare initial data set up link between two nodes

20. 20 Write a simple example – cont. Configure SpringGraph-related parameters in <fc:SpringGraph> tag, and provide data into <mx:Label> tag

21. 21 Write a simple example – cont.

22. SpringGraph Document http://mark-shepherd.com/SpringGraph/docs/springgraph-asdoc/index.html SpringGraph Flex Component http://www.adobevideosuite.org/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1048510 22 Reference