Site archive. SpicyNodes was active 2005-2018.

Home > Archive > Developers/reference > Recipes & mashups > JavaScript manipulation

The API is still being finalized. This is a preview...

In addition to the simple and intermediate customization options described in the previous sections, SpicyNodes offers complex customization opportunities. Complex customization is achieved by dynamically handling the nodes and their content at run-time through the use of JavaScript. JavaScript technology acts as a control center, dynamically charting the course of SpicyNodes elements like spaceships passing celestial bodies.

JavaScript provides a way to manipulate the nodemap “on the fly,” and at the same time ensures a backward communication channel so that SpicyNodes can interact with web page elements. In order to make use of that functionality, ActionScript and JavaScript need to be able to talk to and understand each other, just like the control center staff and the pilots should speak the same language.

ActionScript can easily communicate with JavaScript by specifying “javascript:” as a protocol and passing it the name of a function to execute. The pilot will dutifully comply with the commands given by the one in authority.

Each node tag in a nodemap can take on a “loc” attribute, which defines a destination for the user to go when he or she clicks the node. The “loc” attribute can take its value as a URL or a dynamic link in the form of “javascript:callJavaScript()”. Here is an illustration:

<node name="myNode" label="testing" loc="javascript:callJavaScript()" color="3371a3" propagate="color">

When JavaScript needs to talk to and be understood by ActionScript, it should turn to a technology known as LiveConnect, which opens a connection from a browser to a Flash movie. In other words, LiveConnect enables the control center to accept feedback from the ship pilots.

LiveConnect launches by activating a parameter called “swliveconnect” in the HTML integration code for a Flash object. The parameter should be placed in both the “object” and the “embed” tags of the integration code. Below is an example in which “swliveconnect” is set to “true” at lines 6 (for the “object” tag) and 10 (for the “embed” tag).

1 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="nodes1"
2 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
3 width=640 height=480>
4 <param name=movie value="http://embed.spicynodes.org/display.swf"> <param name=quality value=high>
5 <param name=bgcolor value=#ffffff>
6 <param name="swliveconnect" value="true">
7 <embed src="http://embed.spicynodes.org/display.swf" quality=high bgcolor=#ffffff  width=640 height=480
8 type="application/x-shockwave-flash" name="nodes1"
9 pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash"
10 swliveconnect="true"></embed>
11 </object>
12 <script language="JavaScript" src="spicyscript.js"/>
13 <script language="JavaScript" src="your_own_scripts.js"/>

With LiveConnect enabled, the SpicyNodes engine is exposed to JavaScript, and therefore complex customization is made possible via JavaScript commands, which invoke ActionScript methods. Now the control center issues instructions based on the pilots’ situational reports.

The basic idea of this functionality is the following:

<script language="JavaScript">
function playFlashMovie() {
   document.flashMovie.play();
}
</script>

Enabling ActionScript-to-JavaScript communication increases SpicyNodes’ integration options. You are able, for example, to integrate the radial layout in a blogging system such as WordPress, and implement it as a graphic means of navigation. Still imagining nodes as spaceships, they will advance by following trajectories explicitly set for them by the control center.

For example, in WordPress, user postings can be managed by defining a “loadPost()” JavaScript function and passing it to a “loc” attribute like: “javascript:loadPost(postId).” Such a configuration enables SpicyNodes to refer back to the blogging system and load HTML/PHP pages.

Conversely, JavaScript-to-ActionScript communication allows JavaScript to control the behavior of an embedded Flash object, such as a SpicyNodes implementation, on certain HTML event(s). In other words, the control center steers the spaceships by giving them adequate directions in response to the changing environment.

This functionality enables you to insert in HTML elements JS functions that will reflect user interaction with the HTML content in the radial layout, as in this example:

<img src='myImage.jpg’
onclick='callNode’ />