Embedding
Nodemap XML
Node content
Settings XML
Javascript
Audio
Home > Archive > Developers/reference > API Reference > Node content
Nodes of a nodemap must conform the syntax of a valid XML node. Each node can contain a list of attributes a node value (text or CDATA section) and multiple children nodes. The most basic node attribute is label. SpicyNodes supports a list of node attributes that can define the node’s content or the node’s behavior.
Contents of a node may include a node’s label, description, an image, a YouTube video, a sound file (mp3), a HTML table document, an external link or a label of its connector.
Behaviors of a node can include audio options, like initial volume or sound panning, internal linkage, usage of alternative node background or label colors, type of external links opening (self window or new window) or propagation of node’s attribute values to children.
Full list of node attributes is listed below in this chapter and in the end there is a number of examples of their usage.
Premium accounts users for node labels and descriptions can take the advantage of additional text styles like bold, italic, bullet lists, size, color, etc. Non-premium accounts also have access to bold and italic fonts but these styling options are not interchangeable, what means that styles can be set only globally for labels, descriptions or panel items (however may be different for each of these elements).
There are two styling modes — HTML tags and BBCode tags. HTML tags are not suitable for usage inside node attribute values, because would collide with XML syntax ("<" and ">" characters are not allowed) however HTML tags can be used inside CDATA sections. BBCode is suitable both for node attribute values and CDATA sections.
The list of supported BBCode tags is:
- anchor — [a href="http://www.yourdomain.com/" target="_blank"]My domain[/a] — available to free accounts
- bold — [b]bold text[/b]
- italic — [i]italic text[/i]
- underline — [u]underlined text[/u] — available to free accounts
- color — [color=#ff0000]red text[/color]
- size — [size=32]larger text[/size]
- image [img src="http://www.yourdomain.com/image.jpg" width="50" height="50" halign="left" hspace="10" vspace="7"] — available to free accounts
- break row — [br]
The list of supported HTML tags is:
- anchor — <a href="http://www.yourdomain.com/" target="_blank">My domain</a> — available to free accounts
- bold — <b>bold text</b>
- italic — <i>italic text</i>
- underline — <u>underlined text</u> — available to free accounts
- font — <font size="" color="#ff0000">red text</color> — Note: the additional attribute face should not be used unless the provided font face is in use in this layout – see Settings XML
- image — <img src="http://www.yourdomain.com/image.jpg" width="50" height="50" halign="left" hspace="10" vspace="7"/> — available to free accounts
- break row — </br>
- list item — <li>Item One</li>
- paragraph — <p>This is a new paragraph</p>
In most cases the node’s label can be defined with the label attribute:
<node label="This is a node’s label"/>
Because XML attributes do not support some special characters, like <, > or ", there is an alternative syntax for node label’s using a childnode :
<node>
<label>This is a node’s label</label>
</node>
There are many cases when it is more secure to use a CDATA section for larger blocks of text or for text containing special characters that could interfere with the XML file syntax. A more secure method is using a CDATA section as the node value:
<node>
<label><![CDATA[This is a <b>node's</b> <font
size="28">label</font>]]></label>
</node>
There is no attribute defining node’s descriptive text. Descriptions have to be provided as the node value – as a text or CDATA section:
<node label="A node">
<![CDATA[This is a descriptive text of the node called "A node".
It may be formed with divided long blocks of text...]]>
</node>
Finally, a node with its description and label enclosed in a CDATA section could look like the following:
<node label="A node">
<label><![CDATA[This is a <b>node's</b> <font
size="28">label</font>]]></label>
<![CDATA[This is a descriptive text of the node called "A
node". It may be formed with divided long blocks of text...]]>
</node>
| Name | Value example | Description |
|---|---|---|
| id | "9", "A", "#23" | Required if another node references this node with the href attribute. The value may be any string but has to be unique for whole nodemap. No other node can define the same id value as any other node of one nodemap. |
| href | with type="http": "http://www.any.com", "javascript:someFunction();" with type="nodemap": http://www.yourdomain.com/ foo.xml" with type="self": "9", "A", "b71S9" | Depending on the type attribute, href will behave differently. When type is "http", href will reference a web page. Optionally href can reference a javascript call. In this case it is important to provide allowScriptAcces="always" in the embedding HTML code. When type is "nodemap", then href will reference a nodemap XML file. When type is "self", href will reference a node in the same nodemap. In this case, the value of href has to represent the id value of the referenced node. |
| type | "http", "nodemap" or "self" | Defines the type of href attritube:
|
| newWindow | "true" | If newWindow has value "true" and type of the href attribute is "http" (meaning a reference to a web page), then the referenced content will be opened in a new window (equivalent to "_blank"). |
| linkText | "Click for more information..." | The linktext attribute will work with type="http" and type="nodemap". The value will be displayed on the linking button of the central node instead of the default texts, accordingly "Go to web site" or "Go to nodes". |
| label | "Solar System" | Defines the visible label of a node. |
| connector | "Way to Saturn" | Defines the visible label of a connector. This is an optional attribute. |
| src | "http://www.yourdomain.com/ image.jpg", "http://www.yourdomain.com/ table.htm", "http://www.yourdomain.com/ flashMovie.swf" | Defines URL to an image (.jpg, .png and .gif are supported) or an HTML table document. Additionally you can reference a Flash movie and use the SWFPAPI to communicate with the SpicyNodes engine. The contents of this URL will be displayed only for the currently selected node (focus). |
| lowsrc | "http://www.yourdomain.com/ image.jpg", "http://www.yourdomain.com/ flashMovie.swf" | Defines URL to an image (.jgp, .png and .gif are supported) or a Flash movie and use the SWFPAPI* to communicate with the SpicyNodes engine. Contents of this URL will be visible for nodes that are not currently selected (non-focus) but visible in the current layout. NOTE: In order to activate lowsrc there must set small="img" attribute for this node. |
| small | "img" | If lowsrc refers to an image (.jpg, .png or .gif) or Flash movie, then the value "img" indicates that this image will be visible in a non-center node. Images with URL defined in src attribute are always visible for center (currently selected) nodes. Non-center nodes by default display only their labels. |
| audiosrc | "http://www.yourdomain.com/ track.mp3" | Defines URL to an audio track (mp3). |
| audiovolume | "0.45" | Defines audio track volume (range 0-1) |
| audiorepeat | "0" | Defines the number of track loops. "0" mens the track is played once. |
| audioauto | "true" | If "true", then the track plays automatically after selecting a node. Otherwise, play can be triggered manually, by pressing the play control. Default value is "0". |
| audiopan | "true" | If "true", then the audio track is panned to the left or right channel depending on the current horizontal position of the node. Dragging the layout updates the sound pan. Default value is "false". |
| propagate | "src,img,color,color2" | The propagate attribute may be used to propagate an attribute value to a node descendants. For example, propagate may be used to pass the same image URL that is defined for one node to all its descendants. Propagation is defined as a comma separated list of attribute names that should be propagated in descendant nodes. Propagation descends down to leaf nodes (final nodes). Canceling propagation at some level may be achieved by setting propagate="null" in the definition of a node that will not repeat "inherited" propagated attributes to its descendants. Propagation supports all kind of attributes. |
| color | "0xff0000" | Alternates the node’s label color. The color attribute has higher priority than the default text color defined in the layout settings. |
| color2 | "0x00ff00" | Alternates the node’s background color. The color attribute has higher priority than the default node backround color defined in the layout settings. |
Example 1 – Basic Nodemap
A simple nodemap; usage of the label attribute:
<node label="Inner Planets">
<node label="Mercury" />
<node label="Venus" />
<node label="Earth" >
<node label="Moon" />
</node>
<node label="Mars">
<node label="Phobos" />
<node label="Deimos" />
</node>
</node>
Example 2 - Node Descriptions
A simple nodemap with node descriptions:
<node label="Inner Planets"> <![CDATA[The four inner planets, Mercury, Venus Earth and Mars, also called the terrestral panelts, are primarily composed of rock and metal.]]> <node label="Mercury"> <![CDATA[Mercury is the innermost and smallest planet in the Solar System.]]> </node> <node label="Venus"> <![CDATA[Venus is the second-closest planet to the Sun, orbiting it every 224.7 Earth days.]]> </node> <node label="Earth" > <![CDATA[Earth (or the Earth) is the third planet from the Sun, and the fifth-largest of the eight planets in the Solar System.]]> <node label="Moon"> <![CDATA[The Moon is Earth’s only natural satellite and the fifth largest satellite in the Solar System.]]> </node> </node> <node label="Mars"> <![CDATA[Mars is the fourth planet from the Sun in the Solar System. The planet is named after the Roman god of war, Mars.]]> <node label="Phobos"> <![CDATA[Phobos is the larger and closer of the two moons of Mars.]]> </node> <node label="Deimos"> <![CDATA[Deimos is the smaller and outer of Mars’ two moons.]]> </node> </node> </node>
Please notice that a node with description enclosed in CDATA must be ended (a node end tag ) after closing the CDATA section (CDATA closing "]]>").
Example 3 - BBCode
A node with BBCode tags in its description and label:
<node label="[size=28]M[/size]ercury"> <![CDATA[[u][a href="http://en.wikipedia.org/wiki/Mercury_(planet)"]Mercury[/a][/u] is the innermost and smallest planet in the Solar System.]]> </node>
In this case the, the label’s first character "M" gets font size 28. In the description text, the word "Mercury" gets underline style and is marked as a link to a web site.
Example 4 - HTML
A node with HTML tags in its description:
<node label="Mercury">
<![CDATA[<u><a
href="http://en.wikipedia.org/wiki/Mercury_(planet)">Mercury</a></u>
is the innermost and smallest planet in the <font size="22"
color="#ff0000"><b>Solar System</b></font>.]]>
</node>
In the description text, the word "Mercury" gets underline style and is marked as a link to a web site (equivalent to Example 3). Additionally, the words "Solar system" have alternated font style to size 22, red color and bold.
Please notice that HTML tags cannot be used in the label’s attribute, because HTML begin and end tag characters are not valid in XML attribute values. Styling options in attributes can be set with BBCode (see. Example 3). Alternatively, the label can be provided as the CDATA value of a sub-node. In this case both HTML tags and BBCode valid for styling the label (see Example 5).
Example 5 – Label as a Subnode
When a label is defined in XML attribute, it does not support HTML tags. An alternative syntax that allows any characters in labels is using a CDATA value of a
<node>
<label>
<![CDATA[A node label supporting <font size="28"
color="#ff0000">HTML</font> tags]]>
</label>
</node>
Example 5 – External Links
Create a node labeled "Solar Wind" containing a link to a related web page, which opens in a new window. Additionally provide a custom text "More about solar wind..." to the link button:
<node label="Solar Wind" href="http://en.wikipedia.org/wiki/Solar_wind" newWindow="true" type="http" linktext="More about solar wind..." />
Example 6 – Internal Links
One or more nodes of the nodemap can link another node of the same nodemap. This kind of linking allows breaking the hierarchical structure of the nodemap and navigate directly to distant nodes of the browsed nodemap.
... <node id="29" label="Saturn" > <node label="Tytan" /> ... </node> <node id="30" label="Jupiter" > <node label="Callisto" /> ... </node> … <node label="Outer planets"> <node href="29" label="Go to Saturn" /> <node href="30" label="Go to Jupiter" /> ... </node>
The href attribute references a particular node with according id attribute. The id attribute is required if a node is to be linked by any other nodes. If the link node does not define its own label – like
Example 7 – Image
Create a node with an image that is always visible when the node is displayed.
<node label="Image Example" src="http://www.yourdomain.com/ img/image1.png" lowsrc="http://www.yourdomain.com/ img/image1_thumbnain.png" small="img" />
Here src defines the center node image and lowsrc defines the image (usually a thumbnail) of the same node when this node is not selected but visible in the layout. The final attribute small="img" activates displaying the image defined by lowsrc value.
Example 8 – Sound
Create a node that plays an audio track ten times immediately after the node is selected (immediately means here, after the sound can be buffered – usually after a few seconds). Additionally, the audio sample will be transposed between the left and right channel (pan) when the layout is being dragged horizontally.
<node label="Panoramic sound example" audiosrc="http://www.yourdomain.com/ track1.mp3" audiorepeat="10" audiopan="true" audioauto="true" />
Example 9 – Multiple Attributes
This example presents a node with a larger set of attributes.
<node label="Try clicking [b]here ![/b]" connector="[i]Way to start[/i]" color="0x0000ff" propagate="color" href="http://www.domain.org/signup.php" type="http" linktext="Sign up to a new account..." newWindow="false" src="http://farm3.static.flickr.com/1234/56789012345_acbdef0123.jpg" > <![CDATA[This is you first step of the navigation.]]> </node>
First we have a label attribute with bold style enclosing "here !" word. Next we have a connector text set to italic "Way to start." In both cases there is used BBCode for styling. The connector text will appear by default over a node connector shape which connects this node with its direct ancestor. Next we have the color attribute which alternates the label text color to pure blue. The label’s color is then propagated to all descendants of this node with the propagate attribute. A href reference with an absolute URL and type "http" makes appear a linking button over the node’s background (under other node’s contents). The button’s text is customized to "Sing up to a new account..." with linktext attribute. Additionally there is a newWindow attribute defining that pressing the link button will redirect the page in the same window. The newWindow attribute is "false" by default, so adding it in this example is not really necessary. In the end of attributes list we find src attribute that defines an absolute URL to an image. This image will be visible whenever the node is selected but it will not be visible when the node occupies deeper orbits of the layout because there are no lowsrc and small attributes provided.
