Share |

Home > Archive > Developers/reference > Recipes & mashups > Personalize Nodes

Personalize nodes by editing their tags

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

A nodemap can be edited through the nodemap XML configuration file. The nodemap XML file can be manipulated in three ways: via the SpicyNodes web-based configurator; by editing it manually; and by setting the values for the file to contain a script, which at run time will generate the file.

When you need to edit tags

The easiest option is to generate the nodemap XML file by using the Web interface, but this choice limits customization opportunities. It is akin to cooking a meal using only salt and pepper, rather than have a full complement of herbs and spices at your disposal.

To personalize the nodes in detail, most developers opt to manually edit the nodemap XML file, since this option ensures maximum flexibility, rather like having an entire pantry at your disposal.

The opportunities for manually editing the nodemap XML file, along with other important considerations, are presented in the “Nodemap XML file” section. What follows is a preliminary introduction to optional attributes that a developer can insert in a node tag. These attributes will allow you to elaborate on the customization options, thus enriching the flavor of your SpicyNodes dish.

How to edit tags

First, locate the nodemap configuration file, the nodemap XML. If necessary, refer to the “Overview of the API” section to familiarize yourself with background information about its possible location(s). You can write the nodemap XML file from scratch. Alternatively, you can import it using the “+” notation, and/or create it using the “Define nodes” tool and then export the nodes.

Then, open the nodemap XML file in a text editor that can properly handle plain text.

In the node tree, pinpoint the node tag(s) that you wish to alter. Edit the tag(s) by adding new attributes or modifying those already in place. You can, for example, replace the html content of a node with an “html” attribute, change the value of a “loc” attribute and add a brand new “src” attribute. The section below elaborates on each of these attributes.

Finally, after making your changes, save the file, making sure that you preserve its plain text format and proper file extension. Then, upload it to its correct location (consult the “Overview of the API” section, if necessary) or overwrite the older version of the same configuration file. If you change the location, then you will need to update the “map” variable set in your HTML.

Conduct a test to verify that your changes have been correctly implemented, and then celebrate the creation of a tasty meal.

How it works

The node’s content provides the description of a given node. It is sometimes visualized as an explanatory box with additional information that appears when a user zooms in, or when a user clicks to “expand” a node. The content takes a string value, optionally defined as a CDATA, which becomes visible as the text portion of the center node when the center node is expanded.

Here is an example of the content defined:

<node label="Arts and Culture"> <![CDATA[Find places and events where you can enjoy music, paintings, film, and other arts." ]]> </node>

The “html” attribute takes as its value the location (in absolute or relative URL) of a file, which contains HTML source code for the central node. The file can contain simple text, html or css formatting, tables, and embedded images or compiled SWF movies. A limited number of fonts are also available, namely XXX, YYY and any fonts you choose from the “configurator” mode. Of note, the HTML files and optional SWF files must reside on the same server as the nodemap XML file. (Image and sound files can be on other servers.) Here is a usage example of the “html” attribute:

<node label="Arts and Culture" html="../sample.txt" />

The “loc” attribute takes as its value an absolute or relative URL where the user will go after clicking the node icon. The URL given as its value can also contain JavaScript functions if “javascript:” is specified as the protocol. Alternatively, links can be embedded in “href” attributes within a snippet of HTML source code, as defined by the “html” attribute above. Here is a usage example of the “loc” attribute:

<node label="Arts and Culture" loc="../index.html" />
<node label="Arts and Culture" loc="javascript:window.open("http://www.mydomain.com")" />

The “src” attribute allows a developer to decorate or personalize nodes with images. It enables an image to be loaded from a specified URL, which can be used as a replacement picture for the node. The appearance of the image varies depending on the node skin. Here is a usage example of the “src” attribute:

<node label="Arts and Culture" src="images/anyimage.jpg" />

Share |