building the springgraph flex component

Building the SpringGraph Flex Component

Albert Guojunyuo@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

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

fm?e=flexbuilder3

SpringGraph◦ http://www.adobe.com/cfusion/exchange/index.cf

m?event=extensionDetail&extid=1048510

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

What is SpringGraph Flex Component?

5

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

Where to download SpringGraph?

6

How to configure SpringGraph?

7

How to configure SpringGraph?

Unzip springgraph.zip

8

How to configure SpringGraph? – cont.

Go to Flex Project's properties page in Eclipse

Click Flex Build Path

9

How to configure SpringGraph? – cont.

Go to Library Path path and click Add SWC

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

How to configure SpringGraph? – cont.

Click OK Button

12

SpringGraph Verification

13

SpringGraph Verification

Create a MXML application

14

SpringGraph Verification – cont.

Give it name, called SpringGraphTest

Click Finish

15

SpringGraph Verification – cont.

Add this namespace in <mx:Application> tag

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

18

Write a simple example

Add this namespace in <mx:Application> tag

Call onLoad() function to load initial data

19

Write a simple example – cont.

prepare initial data

set up link between two nodes

20

Write a simple example – cont.

Configure SpringGraph-related parameters in <fc:SpringGraph> tag, and provide data into <mx:Label> tag

21

Write a simple example – cont.

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