Roamer: Setting Up the Javascript Interface
Activating the Javascript interface in Constellation Roamer is easy but getting it setup can take a bit more work. This has a lot to do with how different browsers embed Flash movies in HTML pages but this tutorial will help you get that sorted out.
A Live Demo of Javascript Interaction
The demo below uses Javascript to write messages to the text area whenever an event is triggered. Additionally, you can use the two buttons to get and set the selected node ID. Go ahead and try it out.
Catching Javascript Events from Roamer
This is the easy part. To capture events triggered from the visualization, all you have to do is define the event handler callbacks listed in the documentation.
Putting the following Javascript code in your <head> will do the trick.
function constellationRoamer_onLoaded()
{
alert('Loaded Constellation Roamer.');
}
function constellationRoamer_onChange(nodeID)
{
alert('Selected node changed to: ' + nodeID);
}
function constellationRoamer_onClick(nodeID)
{
alert('Clicked node: ' + nodeID);
}
function constellationRoamer_onDoubleClick(nodeID)
{
alert('Double-clicked node: ' + nodeID);
}
function constellationRoamer_onEdgeClick(edgeID)
{
alert('Clicked edge: ' + edgeID);
}
function constellationRoamer_onEdgeDoubleClick(edgeID)
{
alert('Double-clicked edge: ' + edgeID);
}
The Object/Embed Tags
If you're planning to interact with your Flash movie via Javascript, you might want to try a package like SWFObject. It'll greatly simplify the process but for the purposes of this tutorial we're going to get into the gory details.
The embed code below uses the <object>/<embed> tag combo which has been used to include Flash content for years now. The reason is, IE reads the <object> tag to embed the content and Firefox and other browsers go with <embed>.
<div class="flash_movie" style="height:350px;width:100%">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="constellationRoamerObject"
width="100%" height="100%"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="base" value="http://fs.asterisq.com/demos/js_setup/." />
<param name="movie" value="http://fs.asterisq.com/demos/js_setup/constellation_roamer.swf" />
<param name="scale" value="noscale" />
<param name="quality" value="high" />
<param name="allowScriptAccess" value="always" />
<embed
id="constellationRoamerEmbed"
src="http://fs.asterisq.com/demos/js_setup/constellation_roamer.swf"
base="http://fs.asterisq.com/demos/js_setup/."
width="100%" height="100%" align="middle"
play="true" loop="false" quality="high" allowScriptAccess="always"
scale="noscale" quality="high" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</div>
One important point to note in the embed code above is that the <object> tag and the <embed> tag have different IDs. This prevents the browser from getting confused later when we're trying to get the object.
Also, remember to change the URLs above to match your particular project.
Calling Methods on Roamer
To call a method on Constellation Roamer, you simply get the element and call the function as you would on any other object.
constellationRoamerElem.setSelectedNodeID('n4770');
As implied above, getting the element is a little bit more work than it sounds. Since IE uses the object tag, we need to check for IE by testing for document.all. If it's present, then we load up document.all('constellationRoamerObject'). Otherwise, we try using getElementByID which is supported in many other browsers.
function getConstellationRoamerElem()
{
if (document.all)
{
return document.all('constellationRoamerObject');
}
else if (document.getElementById)
{
return document.getElementById('constellationRoamerEmbed');
}
else
{
return null;
}
}
Using the function above to obtain the Flash movie element, the code to display the currently selected node ID in alert box would look like this:
var roamerElem = getConstellationRoamerElem();
alert(roamerElem.getSelectedNodeID());
With that you should be ready to have your Javascript application communicate with the Constellation Roamer control. Happy coding!