Setting Up Constellation Framework in Flex

This page walks through creating your first Framework visualization in Flex. We're assuming you already know how to setup a Flex project and write Actionscript and MXML. This tutorial will only cover parts that are specific to Constellation Framework.

Application Setup

First things first. Create a new Flex application—we'll call it sample—and make sure you can run it in a browser.

You'll need to add the Constellation Framework library SWC file to your library path. You can do this by dropping a file into the libs folder. Another option is to open up the project properties, navigate to "Flex Build Path" in the left menu, hit the "Library path" tab, and click the "Add SWC" button.

Once you've got the library in place, you're ready to modify the application MXML file, sample.mxml.

The Application MXML File

First we'll add the Constellation component to the page. Put the following line in your application.

<constellation:Constellation
  id="constellation" width="100%" height="100%" />

This won't work yet, as Flex doesn't know where to find the Constellation class. You need to add an xmlns:constellation attribute to your application tag like so:

<mx:Application
  layout="absolute"
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:constellation="com.asterisq.constellation.*"
  preinitialize="preinitHandler(event)"
  creationComplete="creationHandler(event)">

The value, "com.asterisq.constellation.*" corresponds to the folder in which we placed the Constellation class file above.

You'll also note that we've added a couple of event handlers to catch the preinitialize and creationComplete events. We'll go ahead and define those inside a Script tag now.

<mx:Script>
<![CDATA[
  import com.asterisq.constellation.behaviors.*;
  import com.asterisq.constellation.renderers.*;
  import com.asterisq.graph.*;
  import com.asterisq.licensing.*;
 
  ...
]]>
</mx:Script>

And inside the script tag:

/**
 * Called during the preinitialization phase,
 * before Constellation is instantiated.
 */
private function preinitHandler(evt:Event):void
{
  // add your Framework license information
  Licensing.addLicense(new License(
    LicensedProduct.CONSTELLATION_FRAMEWORK_V1_0,
    '<domain>', '<expiry>', '<key>'));
}

The preinitialization handler just adds the licensing information so the Constellation component won't complain when it's instantiated. We configure the component itself after the creationComplete event.

/**
 * Called after the application has been created.
 */
private function creationHandler(evt:Event):void
{
  // create a new graph to display in the viz
  var graph:LinkedGraph = new LinkedGraph();
 
  // add three nodes with really boring labels
  graph.addNode("n1", {label: 'Node 1'});
  graph.addNode("n2", {label: 'Node 2'});
  graph.addNode("n3", {label: 'Node 3'});
 
  // add edges from n1 to n2 and from n1 to n3
  graph.addEdge("e1", "n1", "n2");
  graph.addEdge("e2", "n1", "n3");
 
  // use the graph we just created as the data
  // source for the Constellation component
  constellation.dataProvider = graph;
 
  // set the Constellation layout behaviors
  constellation.behaviors =
  [
    new ZeroAccelerationBehavior(),
    new AgoraphobeBehavior(0.2, 250),
    new EdgeAttractionBehavior(0.2, 100),
    new AccelerationLimitBehavior(6),
    new BasicKinematicsBehavior(),
    new DampingBehavior(0.3),
    new BoundsAutoCenteringBehavior(),
    new DraggingBehavior()
  ];
}

At this point, don't worry about the specific behavior classes used in this visualization. You'll have plenty of fun playing with this later on. For now, just note that we've set the dataProvider and behaviors properties of the Constellation component.

The Result

Give it a whirl and you should see something like this:

Now this probably isn't the visualization you were looking for when you got started with Constellation Framework. From here, you'll want to learn about getting your graph data into the visualization, creating your own node renderers and edge renderers, and picking node layout behaviors.