Home > Archive > Recipes & articles > Trellis: Blogging for ideas > Linking SpicyNodes and WordPress
Of all the integration options offered by SpicyNodes, Trellis opted for embedding the radial map into an HTML frame. The appropriate WordPress template loads a frameset, with the top frame embedding SpicyNodes. When started up, the SpicyNodes engine will first look for and load the two configuration files, nodes xml and settings xml. Each of these files is comprised of a specific tag set, which is required for the proper operation of SpicyNodes.
When working on establishing a link between WordPress and SpicyNodes, I was first faced with the task of how to utilize the already available XML-based interface. SpicyNodes readily takes XML input in the form of the nodes xml file, as long as that input is built on the required tag set. Luckily, WordPress turned out to have been supplied with XML exporting capabilities with the intent to facilitate the exchange of blog contents among various installations. Still, the XML format that WordPress uses to export its contents has been more or less customized in order to serve its purpose. The format is known as WXR, or WordPress eXtended RSS - an extended version of RSS 2.0.
Next, I had to locate the PHP script that converts the WordPress postings into XML and modify it so that it can output WordPress contents by using the tags that SpicyNodes would understand and parse in. Thus, I managed to provide SpicyNodes with a properly described hierarchy that it could use to generate a correct node map.
In essence, modifying the XML export script enabled translation between the WordPress and SpicyNodes approaches to handling hierarchical information. The result of coupling the functionality of both systems is that WordPress handles the structure, making hierarchy and chronology fit together, while SpicyNodes takes care of the representation, providing a flexible navigation interface. Communication between the two systems was made possible thanks to the fact that both have common hierarchical foundations.
Below is an excerpt from a sample nodes xml file used by SpicyNodes to render a radial map for Trellis:
Code example:
<node name="trellis" label="trellis" loc="javascript:loadPost(47);" color=“0x3371a3" propagate="color">
<node name="testing" label="Testing" loc="javascript:loadPost(364);" color=“0xec008c"
propagate="color">
<node name="garden-usage-guidelines" label="Garden / Usage Guidelines"
loc="javascript:loadPost(366);" color=“0x8dc63f" propagate="color" />
<node name="trellis-garden-version" label="Trellis ‘Garden Version’"
loc="javascript:loadPost(365);" color=“0x8dc63f" propagate="color" />
</node>
<node name="papers" label="Papers & Presentations" loc="javascript:loadPost(331);"
color=“0xec008c" propagate="color">
<node name="au-graduate-forum-presentation" label="AU Graduate Forum
Presentation" loc="javascript:loadPost(379);" color=“0x8dc63f" propagate="color">
<node name="poster-draft" label="Poster Draft"
loc="javascript:loadPost(384);" color=“0xf7941d" propagate="color" />
<node name="poster-copy" label="Poster Copy"
loc="javascript:loadPost(381);" color=“0xf7941d" propagate="color" />
<node name="ideas" label="Ideas" loc="javascript:loadPost(380);"
color=“0xf7941d" propagate="color" />
</node>
</node>
</node>
After the conceptual link between WordPress and SpicyNodes was established, I had to take care of the radial map style. Owing to the open SpicyNodes API, this task proved easy. I only had to edit the settings xml file, which SpicyNodes uses to decide which of the nodes’ visual attributes to show, and insert the values of my choice. Having done this, I supplied the Trellis-embedded SpicyNodes implementation with a complete visual style, or a skin, that I found to best suit the needs of Trellis and my taste.
The allowable customization options and the way of setting them are detailed in the “Settings xml file” section of the SpicyNodes’ Developer’s Cookbook. Configuration of the SpicyNodes visual style is also possible through a graphic interface.
Now that communication from WordPress to SpicyNodes was enabled, it was time for SpicyNodes to communicate with WordPress. Because SpicyNodes is used in Trellis as a navigation interface, the nodes should link back to the structure of WordPress, leading the users to the precise locations they request.
The elements of SpicyNodes are highly interactive. When clicked, the nodes can lead to other nodes, in which case they utilize their internal, ActionScipt-based links, or alternatively invoke HTML pages. Because of the dynamic nature of the WordPress structure, the linkage had to be flexible. Given that the system underlying Trellis is oriented to the Web by design, JavaScript seemed like the most appropriate solution.
ActionScript can easily communicate with JavaScript by specifying “javascript:” as a protocol and giving the name of a function being executed. In the code example above, the “loc” attribute of each “node” tag defines the links in the node map to be calls to a JavaScript function named “loadPost()”, which refers back to WordPress and results in loading HTML pages.
User interaction with the HTML content still had to be reflected by the radial layout. Whenever a user moves from one topic to another, the nodes should rearrange so that their layout matches the system’s active state.
This functionality relies on JavaScript talking to ActionScript, and it cannot do so in an unmediated way. JavaScript can communicate with ActionScript through a technology known as LiveConnect, which opens a connection from a browser to a Flash script via the Flash player. LiveConnect is enabled by activating a parameter called “swliveconnect” in the HTML integration code for a Flash object. The said 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).
Code example:
1 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" height="340" width="640"> 2 <param name="movie" value="spicyconnector.swf"> 3 <param name=“FlashVars” value=”map=path/to/trellis_nodemap.xml&style=path/to/trellis_settings.xml”> 4 <param name="quality" value="high"> 5 <param name="allowFullScreen" value="true"> 6 <embed height="480" width="720" 7 FlashVars="map=path/to/trellis_nodemap.xml&style=path/to/trellis_settings.xml" 8 pluginspage="http://www.macromedia.com/go/getflashplayer" 9 src="spicyconnector.swf" type="application/x-shockwave-flash" quality="high" allowFullScreen="true"> 10 </object>
After LiveConnect exposed the SpicyNodes engine to JavaScript, the SpicyNodes API provided a file containing JavaScript commands that invoked ActionScript methods. Then I only had to insert a reference to that file in the HTML code of WordPress by adding the following line:
Code example:
<script language="JavaScript" src="spicyconnector.js"></script>
This was the finishing touch in combining WordPress and SpicyNodes to create Trellis. It was made possible by the ability of SpicyNodes to allow complex customization of its underpinnings via JavaScript commands. The SpicyNodes’ Developer’s Cookbook includes a dedicated section on this particular feature – “Complex Customization.”
