Use The API

Using the API to manipulate the XML can be a very nice way to do more with your XML.

Xopus outputs XHTML according to the XSL stylesheet that transforms the XML. In the XSL you can add references to the API in a very easy way:

Example

<xsl:template match="mynode">
  <div onclick="doSomethingFancyWithMy(node);">
    <xsl:apply-templates/>
  </div>
</xsl:template>

The 'node' argument passed to the function is a reference to mynode in the XML. The node is passed as an Xopus object, and because it is an XopusElement. This objects supports quite a few methods that can be used to check, change, move, extend, remove, or just change the node in some way. You can ask a lof of different things:

Example

function doSomethingFancyWithMy(node)
{
  var name = node.getNodeName();
  var localname = node.getLocalName(); //in case of namespaces
  var parent = node.getParentNode();
  var children = node.selectNodes('*');
  var samechildren = node.getChildNodes();

  //but also more complicated matters:
  var candelete = parent.canRemoveChild(node); 
  var xmlstr = node.getXML();

  //finally let's do something:
  node.setTextContent("Someting Fancy");
}

Xopus Objects

Be aware though that these functions do not return XML objects, but Xopus objects. That means that the list of children cannot be quite as easily accessed by the usual javascript for loop, rather you have to use the API to acces these children as well:

Example

var children = node.selectNodes("*");  

for(i=0;i< children.getLength();i++) 
{  
  var child = children.item(i);  
}

Adding and Inserting elements

New Elements can easily be created, but if you want to insert them you can run into some problems, because the schema might not always like it.

Example

var document = node.getOwnerDocument();
var newnode = document.createElement('newnode');
document.getDocumentElement().appendChild(newnode);

The above is only valid if the schema allows newnode elements at the end of the documentElement. When manipulating the tree, be aware of this.

When however you want to insert complex structures, or insert elements into complex structures, there are several methods that make life a little easier.

Example

//first let's insert it somewhere, 
//so that Xopus can understand the element according to the schema

var firstChild = document.getDocumentElement().getFirstChild();

document.getDocumentElement().insertNear(newnode, firstChild);

InsertNear tries to find a suitable location for the node within the structure of the parent. It is still better to know what you are doing though. Using schema is mostly an exact science.

Example

//now that the newnode is in the document, it can be validated
//therefore it can also be made valid:

newnode.makeComplete();

Should newnode have several mandatory childnodes, they will now be created by calling makeComplete, and save you a lot of work in creating them yourself and appending them in order.

One last thing that can be quite handy:

Example

<xsl:template match="mynode">
  <div onclick="node.openAttributesEditor();">
    <xsl:apply-templates/>
  </div>
</xsl:template>

This simple method opens the Xopus Attributes Editor for the specified node. If the node has no attributes nothing happens, if it does have them you serve your users with the dialog.

This can be quite useful when you are editing lookup values, such as images. Should you constrain the src attributes of images to a lookup, calling the above method immediately opens the lookup also, and thus saves your users two or three clicks and mouse moves.